import { h } from "@stencil/core";
export class ChipItem {
    constructor() {
        this.value = undefined;
        this.chipState = { emitIfxChipItemSelect: true, variant: 'multi', size: 'large' };
        this.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: '4d5ace01c02658ed46fbf42c36138a06c3d46049', 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: 'bf1af2aaf0944351eb33ace8c704bbb4973951d6', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '50347975f1554b7a02ef2bde34750b361daad549', class: 'chip-item__label' }, " ", h("slot", { key: '9667dd32c70e5f4a7946499f828883efb10caff2' }), " "), h("div", { key: 'f2fcab283b717837bc8b6c09b6b3c6c72675e40c', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: '84e489e9a638f2165c436b10bea8d826ae6db11c', 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",
                "attribute": "value",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "undefined"
            },
            "chipState": {
                "type": "unknown",
                "attribute": "chip-state",
                "mutable": false,
                "complexType": {
                    "original": "ChipState",
                    "resolved": "ChipState",
                    "references": {
                        "ChipState": {
                            "location": "import",
                            "path": "../interfaces",
                            "id": "src/components/chip/interfaces.tsx::ChipState"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{ emitIfxChipItemSelect: true, variant: 'multi', size: 'large' }"
            },
            "selected": {
                "type": "boolean",
                "attribute": "selected",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "ifxChipItemSelect",
                "name": "ifxChipItemSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "ChipItemSelectEvent",
                    "resolved": "ChipItemSelectEvent",
                    "references": {
                        "ChipItemSelectEvent": {
                            "location": "import",
                            "path": "../interfaces",
                            "id": "src/components/chip/interfaces.tsx::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
            }];
    }
}
//# sourceMappingURL=chip-item.js.map
