import { h, } from "@stencil/core";
export class ChipItem {
    chipItem;
    /** Emitted on chip select/deselect. */
    ifxChipItemSelect;
    /** Identifier value for this chip. */
    value = undefined;
    /** Bahaviour and appearance configuration. */
    chipState = {
        emitIfxChipItemSelect: true,
        variant: "multi",
        size: "large",
    };
    /** Wether the chip is selected (reflected). */
    selected = false;
    updateItemSelection(event) {
        if (this.chipState.variant === "single") {
            const target = event.target;
            /* Also making sure chip items are from the same group (parent) while unselecting. */
            if (this.chipItem !== target &&
                this.chipItem.parentElement === target.parentElement) {
                this.selected = false;
            }
        }
    }
    validateSelected(newValue, oldValue) {
        if (newValue !== oldValue) {
            /* Do not emit if ChipState does not allow. */
            if (this.chipState.emitIfxChipItemSelect) {
                this.emitIfxChipItemSelectEvent();
            }
            else {
                this.chipState.emitIfxChipItemSelect = true;
            }
        }
    }
    getItemLabel() {
        return this.chipItem.innerText;
    }
    toggleItemSelection() {
        this.selected = !this.selected;
    }
    emitIfxChipItemSelectEvent(emitIfxChange = true) {
        this.ifxChipItemSelect.emit({
            emitIfxChange: emitIfxChange,
            key: this.chipState.key,
            label: this.getItemLabel(),
            selected: this.selected,
            value: this.value,
        });
    }
    handleItemClick() {
        this.toggleItemSelection();
    }
    handleItemKeyDown(event) {
        if (event.code === "Enter" || event.code === "Space") {
            this.toggleItemSelection();
        }
    }
    handleSelectedState() {
        if (this.selected) {
            this.emitIfxChipItemSelectEvent(false);
        }
    }
    componentWillLoad() {
        /* Propogating the selected state to the Chip (Parent) component if it is set. */
        this.handleSelectedState();
    }
    render() {
        return (h("div", { key: '981d58d270509d5cfebcd7eb6ae670d05fae9d6e', class: `chip-item chip-item--${this.chipState.size} 
                    chip-item--${(this.selected && this.chipState.variant) === "single" ? "selected" : ""}`, tabIndex: 0, onClick: () => {
                this.handleItemClick();
            }, onKeyDown: (e) => {
                this.handleItemKeyDown(e);
            }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === "multi" && (h("ifx-checkbox", { key: 'e731be959fbf3c07c6c45097b668b32fcbbedaca', checked: this.selected, tabIndex: -1, size: "s" })), h("div", { key: 'b87fa6a5c3099e1a8ad566f25e793fa8836cd883', class: "chip-item__label" }, " ", h("slot", { key: '20a4dd0e12f940907a7da4a742bc39c66306d01a' }), " "), h("div", { key: '413f5dbeeea4d0b05b6e57611e0cf83846b1c292', class: "chip-item__selected-indicator" }, h("ifx-icon", { key: 'c040b07c497de6213ce35ba655e6fcb5d490c16a', icon: "check-16" }, " "))));
    }
    static get is() { return "ifx-chip-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["chip-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["chip-item.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Identifier value for this chip."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value",
                "defaultValue": "undefined"
            },
            "chipState": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ChipState",
                    "resolved": "ChipState",
                    "references": {
                        "ChipState": {
                            "location": "import",
                            "path": "../interfaces",
                            "id": "src/components/chip/interfaces.tsx::ChipState",
                            "referenceLocation": "ChipState"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Bahaviour and appearance configuration."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{\n\t\temitIfxChipItemSelect: true,\n\t\tvariant: \"multi\",\n\t\tsize: \"large\",\n\t}"
            },
            "selected": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Wether the chip is selected (reflected)."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "selected",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "ifxChipItemSelect",
                "name": "ifxChipItemSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": false,
                "docs": {
                    "tags": [],
                    "text": "Emitted on chip select/deselect."
                },
                "complexType": {
                    "original": "ChipItemSelectEvent",
                    "resolved": "ChipItemSelectEvent",
                    "references": {
                        "ChipItemSelectEvent": {
                            "location": "import",
                            "path": "../interfaces",
                            "id": "src/components/chip/interfaces.tsx::ChipItemSelectEvent",
                            "referenceLocation": "ChipItemSelectEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "chipItem"; }
    static get watchers() {
        return [{
                "propName": "selected",
                "methodName": "validateSelected"
            }];
    }
    static get listeners() {
        return [{
                "name": "ifxChipItemSelect",
                "method": "updateItemSelection",
                "target": "body",
                "capture": false,
                "passive": false
            }];
    }
}
