import { Host, h } from "@stencil/core";
import { cls } from "../../utils/helpers";
export class XListItem {
    constructor() {
        this.clickable = false;
    }
    /**
     * Render element
     */
    render() {
        return h(Host, { key: 'e62a60978892740c23074b2401058a61df77b113', class: cls({ 'list-item-clickable': this.clickable }) }, h("div", { key: 'c070b4a7667e5c682f61ef62efe48570d0eb26f1', class: "list-item-left" }, h("slot", { key: 'a970da8fc09e09bc3ff638aafe984baca6a52197', name: "left" })), h("div", { key: '0e5c9846f91a3a4407b37fe848484cdbdd4e7efb', class: "list-item-content" }, h("slot", { key: '59a2b4476d5c2e6666aacfb373b754f36b885397' })), h("div", { key: 'f76cd301235b4f7a865d91b00cc075c3dc53077d', class: "list-item-right" }, h("slot", { key: '7fbff175db622787fc211bbb7c0fb9fbfbb93025', name: "right" })), this.clickable && h("div", { key: '05887e34b8ac49411d30eef5b43ea78b1171bac4', class: "list-item-indicator" }, h("x-icon", { key: '552e7245344a8cc9addc093f523d024344bb8101', name: "forward" })));
    }
    static get is() { return "x-list-item"; }
    static get properties() {
        return {
            "clickable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Element is clickable"
                },
                "attribute": "clickable",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
}
