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: '7c60ccd7e0bc69216539b70d4b75a585a162ebfc', class: cls({ 'list-item-clickable': this.clickable }) }, h("div", { key: 'a4e17fbb5b38437bf3ebee4ebe9121e958beae39', class: "list-item-left" }, h("slot", { key: '58ca14523e81a1d336a37402c88b1e1aa7a3d0ec', name: "left" })), h("div", { key: '9aff63e20e2d18c67ed6f8f2d6c240b3052eea7a', class: "list-item-content" }, h("slot", { key: 'caf4a7c1aff5858140b0eb03745738a6ff924511' })), h("div", { key: '307adf95d888cd1918ec65c0c86124d13c89bf78', class: "list-item-right" }, h("slot", { key: '16421f39cf9c7c543fe18b54ee85eb32eac12213', name: "right" })), this.clickable && h("div", { key: '143f1484ae598891c58b40618752cce477c19f7e', class: "list-item-indicator" }, h("x-icon", { key: 'a9a10b9219314fd33ee4846b23325b864317103b', 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"
            }
        };
    }
}
