import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
import { d as defineCustomElement$2 } from './p-DhNY6ZGA.js';
import { d as defineCustomElement$1 } from './p-BxahGQyq.js';

const chipCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-block}.chip{position:relative}.chip__wrapper{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;border-radius:9999px;background:#FFFFFF;cursor:pointer;transition:border 100ms ease;font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip__wrapper .icon__wrapper{display:flex}.chip__wrapper.outlined,.chip__wrapper.filled-dark,.chip__wrapper.filled-light{outline:2px solid transparent}.chip__wrapper.outlined:focus-visible,.chip__wrapper.filled-dark:focus-visible,.chip__wrapper.filled-light:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.chip__wrapper.outlined.chip__wrapper--opened .wrapper__open-button,.chip__wrapper.filled-dark.chip__wrapper--opened .wrapper__open-button,.chip__wrapper.filled-light.chip__wrapper--opened .wrapper__open-button{transform:rotate(-180deg)}.chip__wrapper.outlined.chip__wrapper--selected .wrapper__label .label__selected-options,.chip__wrapper.filled-dark.chip__wrapper--selected .wrapper__label .label__selected-options,.chip__wrapper.filled-light.chip__wrapper--selected .wrapper__label .label__selected-options{font:400 0.875rem/1.25rem \"Source Sans 3\"}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only),.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only){background-color:#0A8276;color:white}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover,.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover{background-color:#08665C}.chip__wrapper.filled-dark.chip__wrapper--selected:not(.read-only):hover.disabled,.chip__wrapper.filled-light.chip__wrapper--selected:not(.read-only):hover.disabled{background-color:#0A8276}.chip__wrapper.outlined{border:1px solid #8D8786}.chip__wrapper.outlined:hover:not(.read-only){border-color:#575352;background-color:#F7F7F7}.chip__wrapper.outlined:active:not(.read-only){border-color:#575352;background-color:#BFBBBB}.chip__wrapper.outlined.chip__wrapper--opened{border:1px solid #0A8276}.chip__wrapper.outlined.chip__wrapper--selected{outline:3px solid #0A8276;border:1px solid transparent;background-color:white}.chip__wrapper.outlined.chip__wrapper--selected:focus-visible{outline-offset:0px}.chip__wrapper.outlined.chip__wrapper--selected:hover:not(.read-only){outline-color:#08665C}.chip__wrapper.outlined.chip__wrapper--selected.read-only{outline:none;border:1px solid black}.chip__wrapper.outlined.disabled{outline:none;color:#BFBBBB;border:1px solid #BFBBBB}.chip__wrapper.outlined.disabled:hover{outline:none;border-color:#BFBBBB;background-color:white}.chip__wrapper.outlined.read-only{border:1px solid black}.chip__wrapper.outlined.read-only:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.chip__wrapper.filled-dark{background-color:#3C3A39;color:white}.chip__wrapper.filled-dark:hover:not(.chip__wrapper--selected,.disabled,.read-only){background-color:#575352}.chip__wrapper.filled-dark:active:not(.chip__wrapper--selected,.disabled,.read-only){background-color:#8D8786;color:black}.chip__wrapper.filled-dark.disabled{outline:none;color:#BFBBBB}.chip__wrapper.filled-dark.disabled:hover:not(.chip__wrapper--selected){background-color:#3C3A39}.chip__wrapper.filled-dark.chip__wrapper--selected.read-only{border:1px solid #8D8786}.chip__wrapper.filled-dark.read-only{border:1px solid #8D8786}.chip__wrapper.filled-light{background-color:#EEEDED}.chip__wrapper.filled-light:hover:not(.read-only){background-color:#BFBBBB}.chip__wrapper.filled-light:active:not(.read-only){background-color:#8D8786}.chip__wrapper.filled-light.disabled{outline:none;color:#BFBBBB}.chip__wrapper.filled-light.disabled:hover:not(.chip__wrapper--selected){background-color:#EEEDED}.chip__wrapper.filled-light.chip__wrapper--selected.read-only{border:1px solid black}.chip__wrapper.filled-light.read-only{border:1px solid black}.chip__wrapper.chip__wrapper--small{padding:4px 8px;height:24px}.chip__wrapper.chip__wrapper--medium{padding:4px 12px;height:28px}.chip__wrapper.chip__wrapper--large{padding:8px 12px;height:36px}.wrapper__label{display:inline-flex;align-items:center;gap:4px}.wrapper__label .label__selected-options{font:600 0.875rem/1.25rem \"Source Sans 3\"}.wrapper__open-button{display:flex;align-items:center}.wrapper__unselect-button{display:flex;align-items:center}.chip__dropdown{position:absolute;z-index:1;box-shadow:0px 6px 9px 0px rgba(29, 29, 29, 0.1019607843);border:1px solid #EEEDED;border-radius:1px;padding:8px 0;min-width:222px;background-color:#FFFFFF}";

const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends H {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.ifxChange = createEvent(this, "ifxChange", 7);
        this.placeholder = '';
        this.size = 'medium';
        this.value = undefined;
        this.variant = 'single';
        this.theme = 'outlined';
        this.readOnly = false;
        this.disabled = false;
        this.icon = "";
        this.opened = false;
        this.selectedOptions = [];
    }
    handleValueChange(newValue) {
        this.syncSelectedOptionsWithProp(newValue);
    }
    handleReadOnlyChange(newValue) {
        if (newValue) {
            this.opened = false;
        }
    }
    closeDropdownOnOutsideClick(event) {
        const path = event.composedPath();
        const chipWrapper = this.chip.shadowRoot.querySelector('.chip__wrapper');
        const chipDropdown = this.chip.shadowRoot.querySelector('.chip__dropdown');
        if (!path.includes(chipDropdown) && !path.includes(chipWrapper) && this.opened) {
            this.toggleDropdownMenu();
        }
    }
    handleKeyDown(event) {
        // override behavior of all keys except Tab. Users should be able to tab out of the component.
        if (event.code !== 'Tab') {
            event.preventDefault();
        }
        if (event.target.tagName === 'IFX-CHIP') {
            this.handleWrapperKeyDown(event);
        }
        else if (event.target.tagName === 'IFX-CHIP-ITEM') {
            this.handleDropdownKeyDown(event);
        }
    }
    updateSelectedOptions(event) {
        const eventDetail = event.detail;
        const previousSelection = [...this.selectedOptions];
        if (this.variant !== 'multi') {
            if (eventDetail.selected) {
                this.opened = false;
                const chipItems = this.getChipItems();
                chipItems.forEach((chipItem) => {
                    if (chipItem.selected && chipItem !== event.target) {
                        chipItem.chipState = Object.assign(Object.assign({}, chipItem.chipState), { emitIfxChipItemSelect: false });
                        chipItem.selected = false;
                    }
                });
                this.selectedOptions = [eventDetail];
            }
            else {
                this.selectedOptions = [];
            }
            this.value = this.selectedOptions[0] ? this.selectedOptions[0].value : undefined;
        }
        else {
            if (eventDetail.selected) {
                // Prevent duplicate entries
                if (!this.selectedOptions.find(option => option.value === eventDetail.value)) {
                    this.selectedOptions = [...this.selectedOptions, eventDetail];
                }
            }
            else {
                this.selectedOptions = this.selectedOptions.filter((option) => option.value !== eventDetail.value);
            }
            this.value = this.selectedOptions.map((option) => option.value);
        }
        if (eventDetail.emitIfxChange) {
            this.ifxChange.emit({
                previousSelection: previousSelection,
                currentSelection: this.selectedOptions,
                name: this.placeholder
            });
        }
    }
    getChipItems() {
        return this.chip.querySelectorAll('ifx-chip-item');
    }
    getSelectedOptions() {
        if (this.variant !== 'multi') {
            return this.selectedOptions.map(option => option.label).join('');
        }
        return this.selectedOptions.slice(0, 2).map(option => option.label).join(', ');
    }
    toggleDropdownMenu() {
        if (this.readOnly)
            return;
        this.opened = !this.opened;
    }
    /**
     * Focuses the chip item at the specified index.
     * @param index the index of the chip item to focus. -1 will focus the last chip item.
     */
    focusChipItemAt(index = 0) {
        this.opened = true;
        const chipItems = this.getChipItems();
        let item;
        if (index === -1) {
            item = chipItems.item(chipItems.length - 1);
        }
        else if (index >= 0 && index < chipItems.length) {
            item = chipItems.item(index);
        }
        else {
            console.error(`Invalid index: ${index}`);
            return;
        }
        const shadowItem = item.shadowRoot.querySelector('.chip-item');
        if (shadowItem) {
            // Delay needed for the shadow item to be rendered.
            setTimeout(() => {
                shadowItem.focus();
            }, 1);
        }
    }
    focusChip() {
        const chipWrapper = this.chip.shadowRoot.querySelector('.chip__wrapper');
        chipWrapper.focus();
    }
    handleUnselectButtonClick(event) {
        event.stopPropagation();
        this.opened = false;
        let itemGotUnselected = false;
        const chipItems = this.getChipItems();
        chipItems.forEach((chipItem) => {
            if (chipItem.selected) {
                itemGotUnselected = true;
                chipItem.chipState = Object.assign(Object.assign({}, chipItem.chipState), { emitIfxChipItemSelect: false });
                chipItem.selected = false;
            }
        });
        /* Emit event only if at least one item was unselected. */
        if (itemGotUnselected) {
            const previousSelection = this.selectedOptions;
            this.selectedOptions = [];
            this.value = [];
            this.ifxChange.emit({
                previousSelection: previousSelection,
                currentSelection: [],
                name: this.placeholder
            });
        }
    }
    handleWrapperClick() {
        if (!this.readOnly) {
            this.toggleDropdownMenu();
        }
    }
    handleWrapperKeyDown(event) {
        // Keymap oriented at https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboard_interaction
        if (this.readOnly)
            return;
        if (!this.opened) {
            switch (event.code) {
                case 'Space':
                case 'Enter':
                case 'ArrowDown':
                    this.focusChipItemAt(0);
                    break;
                case 'ArrowUp':
                    this.focusChipItemAt(-1);
                    break;
            }
        }
        else {
            switch (event.code) {
                case 'Escape':
                    this.opened = false;
                    this.focusChip();
                    break;
            }
        }
    }
    handleDropdownKeyDown(event) {
        let chipitems = this.getChipItems();
        let targetIndex = Array.from(chipitems).indexOf(event.target);
        if (targetIndex === -1) {
            console.error('Target not found in chip items');
            return;
        }
        switch (event.code) {
            case 'ArrowDown':
                if (targetIndex === chipitems.length - 1)
                    break;
                this.focusChipItemAt(targetIndex + 1);
                break;
            case 'ArrowUp':
                if (targetIndex === 0)
                    break;
                this.focusChipItemAt(targetIndex - 1);
                break;
            case 'Escape':
                this.opened = false;
                this.focusChip();
                break;
            case 'Space':
                // selection is handled by the chip-item component
                if (this.variant === 'single') {
                    // only close dropdown if single select
                    this.opened = false;
                    this.focusChip();
                }
                break;
            case 'Enter':
                // selection is handled by the chip-item component
                this.opened = false;
                this.focusChip();
                break;
        }
    }
    syncChipState() {
        const chipItems = this.getChipItems();
        let key = 0;
        chipItems.forEach((chipItem) => {
            chipItem.chipState = {
                emitIfxChipItemSelect: true,
                size: this.size ? this.size : 'medium',
                variant: (this.variant === 'multi' ? 'multi' : 'single'),
                key: key++
            };
        });
    }
    syncSelectedOptionsWithProp(newValue) {
        // Clear old selected options
        this.selectedOptions = [];
        const generateKey = (() => {
            let count = 0;
            return () => count++;
        })();
        if (Array.isArray(newValue)) {
            this.selectedOptions = newValue.map(value => ({
                value,
                label: value,
                selected: true,
                key: generateKey(),
                emitIfxChange: true
            }));
        }
        else if (typeof newValue === 'string') {
            this.selectedOptions = [{
                    value: newValue,
                    label: newValue,
                    selected: true,
                    key: generateKey(),
                    emitIfxChange: true
                }];
        }
        this.syncChipState();
    }
    componentWillLoad() {
        this.syncSelectedOptionsWithProp(this.value);
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.chip)) {
            const framework = detectFramework();
            trackComponent('ifx-chip', await framework);
        }
    }
    render() {
        return (h("div", { key: 'cd16644a94a1e31cea0b2cbbe39394d4a05a5a5b', class: 'chip' }, h("div", { key: '951decf38e88ff684f283a09f6bc513ca4a2c704', class: `chip__wrapper chip__wrapper--${this.size ? this.size : 'medium'}
                  chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
                  ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}
                  ${this.theme ? this.theme : 'outlined'}
                  ${this.disabled ? 'disabled' : ""}
                  ${this.readOnly ? 'read-only' : ""}`, tabIndex: 0, onClick: !this.readOnly && !this.disabled ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.ariaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, this.icon &&
            h("div", { key: 'cd8ab00ddfde3ba1dcdb7a82f963df1b81e4b5d5', class: "icon__wrapper" }, h("ifx-icon", { key: 'b14f92a609f24bc0b4617bb2b0d8262c52f11fab', icon: this.icon })), h("div", { key: '7ac3305d90985ddf45eb4df3cc22f9de89bf60de', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi') && this.placeholder !== '') &&
            `${this.placeholder}:`, (this.selectedOptions.length !== 0) &&
            h("div", { key: 'e7c907adafd7e1601a4cbd05e1a7b415e1da05b6', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
            h("ifx-indicator", { key: '4520777b0d729d95d57d87d5a32a95fcf44e0d84', variant: 'number', inverted: this.theme === 'outlined' ? false : true, number: this.selectedOptions.length - 2 })), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
            h("div", { key: 'ade24c6456b5443be577a4c0bd61d1b2dba68c91', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevron-down-16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
            h("div", { key: '8b1937382b467ca305493896aaf065c10f7a01e8', class: 'wrapper__unselect-button', onClick: !this.readOnly && !this.disabled ? (e) => { this.handleUnselectButtonClick(e); } : undefined }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
            h("div", { key: '073b6641d2320716a6d4b1149e72b61fa9b47dd8', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '55587cb1d438b11f0682c3b1d596a5dfb1d251d0' }))));
    }
    get chip() { return this; }
    static get watchers() { return {
        "value": ["handleValueChange"],
        "readOnly": ["handleReadOnlyChange"]
    }; }
    static get style() { return chipCss; }
}, [257, "ifx-chip", {
        "placeholder": [1],
        "size": [1],
        "value": [1025],
        "variant": [1],
        "theme": [1],
        "readOnly": [4, "read-only"],
        "ariaLabel": [1, "aria-label"],
        "disabled": [4],
        "icon": [1],
        "opened": [32],
        "selectedOptions": [32]
    }, [[5, "mousedown", "closeDropdownOnOutsideClick"], [0, "keydown", "handleKeyDown"], [0, "ifxChipItemSelect", "updateSelectedOptions"]], {
        "value": ["handleValueChange"],
        "readOnly": ["handleReadOnlyChange"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ifx-chip", "ifx-icon", "ifx-indicator"];
    components.forEach(tagName => { switch (tagName) {
        case "ifx-chip":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Chip);
            }
            break;
        case "ifx-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "ifx-indicator":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { Chip as C, defineCustomElement as d };
//# sourceMappingURL=p-DNZFFt4T.js.map

//# sourceMappingURL=p-DNZFFt4T.js.map