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: 'b8ac0a723caf232a3e234abadfc860c751c2f7af', class: cls({ 'list-item-clickable': this.clickable }) }, h("div", { key: '291d31239c268d078c0c091663e22331141c1c4a', class: "list-item-left" }, h("slot", { key: 'e8eda09b5b5f03f5337578e7bf6b887704e48d08', name: "left" })), h("div", { key: 'd7b21c193d4503e95a5d2e50813da87778acb505', class: "list-item-content" }, h("slot", { key: '80c81844814eda51bd86528917bc26e21f4deba4' })), h("div", { key: '68b0629ad905dde3510d526300507073fd5c4b8f', class: "list-item-right" }, h("slot", { key: '50fca631a9c5b5693d68e7745367c4d6b57d7b56', name: "right" })), this.clickable && h("div", { key: 'd67b9179e9d76adca0244ea99b58e09f3b5a2651', class: "list-item-indicator" }, h("x-icon", { key: '16c4b557d4822b5e360f2289039d5d4574f82fe1', 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"
            }
        };
    }
}
