import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
import { d as defineCustomElement$2 } from './p-BQj9WQQe.js';
import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';

const chipItemCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.chip-item{display:flex;align-items:center;gap:8px;padding:8px 16px;user-select:none;transition:all 100ms ease;transition-property:background, color}.chip-item:hover{cursor:pointer;background-color:#EEEDED}.chip-item:active{background-color:#BFBBBB}.chip-item:focus{outline:2px solid #0A8276}.chip-item.chip-item--large{font:400 1rem/1.5rem \"Source Sans 3\"}.chip-item.chip-item--small{font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip-item.chip-item--selected{color:#0A8276}.chip-item.chip-item--selected .chip-item__selected-indicator{display:block}.chip-item__selected-indicator{display:none;margin-left:auto}";

const ChipItem = /*@__PURE__*/ proxyCustomElement(class ChipItem extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.ifxChipItemSelect = createEvent(this, "ifxChipItemSelect", 5);
        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' }, " "))));
    }
    get chipItem() { return this; }
    static get watchers() { return {
        "selected": ["validateSelected"]
    }; }
    static get style() { return chipItemCss; }
}, [257, "ifx-chip-item", {
        "value": [1],
        "chipState": [16, "chip-state"],
        "selected": [1540]
    }, [[16, "ifxChipItemSelect", "updateItemSelection"]], {
        "selected": ["validateSelected"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-chip-item", "ifx-checkbox", "ifx-icon"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-chip-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ChipItem);
            }
            break;
        case "ifx-checkbox":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "ifx-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { ChipItem as C, defineCustomElement as d };
//# sourceMappingURL=p-4wfkxGlJ.js.map

//# sourceMappingURL=p-4wfkxGlJ.js.map