import { Host, h } from "@stencil/core";
export class TrayItem {
    constructor() {
        /**
         * Is the item active
         */
        this.active = false;
        /**
         * Should the item just be outlined
         */
        this.outline = false;
        /**
         * Width setting
         */
        this.width = 'auto';
    }
    onActiveChange() {
        if (this.active) {
            this.anjTrayItemActive.emit();
        }
    }
    render() {
        const itemStyle = {
            width: this.width
        };
        return h(Host, { tabindex: "-1", style: itemStyle },
            h("button", { class: "anj-tray-item" },
                h("slot", null)));
    }
    static get is() { return "anj-tray-item"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() { return {
        "$": ["tray-item.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["tray-item.css"]
    }; }
    static get properties() { return {
        "active": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Is the item active"
            },
            "attribute": "active",
            "reflect": true,
            "defaultValue": "false"
        },
        "outline": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Should the item just be outlined"
            },
            "attribute": "outline",
            "reflect": true,
            "defaultValue": "false"
        },
        "width": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Width setting"
            },
            "attribute": "width",
            "reflect": false,
            "defaultValue": "'auto'"
        }
    }; }
    static get events() { return [{
            "method": "anjTrayItemActive",
            "name": "anjTrayItemActive",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "void",
                "resolved": "void",
                "references": {}
            }
        }]; }
    static get watchers() { return [{
            "propName": "active",
            "methodName": "onActiveChange"
        }]; }
}
