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: '27b6b5893da171f3db4d43f869688c00ffc78e93', class: cls({ 'list-item-clickable': this.clickable }) }, h("div", { key: 'f59a13cda8c0aa06eb1506c4a7f3e832c06f6cd4', class: "list-item-left" }, h("slot", { key: 'a19c83198729b40e5a2808969adfb24d3de9736b', name: "left" })), h("div", { key: 'f61c791ebbf531d3dac0d37c3c2eb4652363bf0b', class: "list-item-content" }, h("slot", { key: 'e654d3bb7d34d3bb6f14b46a436c02ddf515897a' })), h("div", { key: '2639be57f1dd08c0fe64649d1dd226d15e8aa967', class: "list-item-right" }, h("slot", { key: '82a502ff27b6f045de30ab54143f4e4c68040d6c', name: "right" })), this.clickable && h("div", { key: '5d1794216c6c7ec60ec4f1614739d384aec1bd9b', class: "list-item-indicator" }, h("x-icon", { key: 'd5b61bce057423f3dfbfb9c62f113f300e1710bb', 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"
            }
        };
    }
}
