import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-b153bfd0.js';

const listSelectorCss = ":host{display:grid;block-size:100%}.opacity-0{opacity:0}.gxi-hidden{display:none !important}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-style-regular);font-size:var(--font-size-body-m);font-family:var(--font-family-body);height:100%;display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.buttons-container{display:flex;gap:var(--spacing-gap-m)}.giu-static-pill-icon-and-text,.giu-static-pill{background-color:var(--elevation-background-color, var(--color-accent-surface-elevation-1));padding-inline:var(--spacing-padding-m);color:var(--color-text-neutral-default);font-size:var(--font-size-body-s);line-height:var(--line-height-relaxed);font-weight:var(--font-style-regular);border-radius:4px;min-block-size:25px;display:inline-grid;align-items:center;pointer-events:none;inline-size:max-content}.giu-static-pill-icon-and-text{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:var(--spacing-gap-m)}.tab-full-width-buttons::part(tab-list block-start),.tab-full-width-buttons::part(tab-list block-end){grid-auto-columns:1fr}.tab-full-width-buttons::part(tab block-start){justify-content:center}.tree-view::part(item__header){--icon__system_warning_warning--disabled:var(\n    --icon__system_warning_warning--enabled\n  )}.tabular-grid{--focus-outline-width:1px}*,::after,::before{box-sizing:border-box}:host{display:flex;flex-direction:column;max-height:100%;font-size:var(--item__font-size)}.list{border:none;margin:0;padding:0;outline:0;color:var(--color-text-neutral-default);background-color:var(--elevation-background-color, var(--color-accent-surface-elevation-1));border-radius:4px;font-size:var(--font-size-body-m);font-weight:var(--font-style-regular);display:grid;max-height:100%;overflow-y:auto;gap:var(--spacing-gap-xs);padding:var(--spacing-padding-m)}:host([no-list-border]) .list{border:none}";

const CSS_BUNDLES$1 = [
    "resets/box-sizing",
    "chameleon/scrollbar"
];
const GxIdeListSelector = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.selectionChanged = createEvent(this, "selectionChanged", 7);
        /**
         * It evaluates the checked items, and checks or unchecks if needed
         */
        this.evaluateChecked = () => {
            const allListItems = Array.from(this.el.querySelectorAll("gx-ide-list-selector-item"));
            const checkedItems = allListItems.filter(item => item.itemChecked);
            /**
             * INDEX
             * 1.required and no one checked
             * 2.single-selection, and more than one checked
             */
            /* 1.required and no one checked*/
            if (this.required && checkedItems.length === 0) {
                allListItems[0].itemChecked = true;
            }
            else if (this.type === "single-selection" && checkedItems.length > 1) {
                /* 2.single-selection, and more than one checked*/
                checkedItems.forEach((item, i) => {
                    if (i !== 0) {
                        item.itemChecked = false;
                    }
                });
            }
        };
        /**
         * It evaluates the initial value/s
         */
        this.evaluateInitialValue = () => {
            const checkedItems = this.getChecked();
            if (this.type === "single-selection" && checkedItems.length > 0) {
                this.value = checkedItems[0].itemValue;
            }
            else if (this.type === "multi-selection" && checkedItems.length > 0) {
                const values = [];
                checkedItems.forEach(checked => {
                    values.push(checked.itemValue);
                });
                this.value = values;
            }
        };
        this.getChecked = () => {
            const checkedItems = [];
            const allItems = this.el.querySelectorAll("gx-ide-list-selector-item");
            allItems.forEach(item => {
                if (item.itemChecked) {
                    checkedItems.push(item);
                }
            });
            return checkedItems;
        };
        this.clearPrevSelected = (currentSelected) => {
            const allItems = this.el.querySelectorAll("gx-ide-list-selector-item");
            allItems.forEach(item => {
                if (item.itemChecked && item.itemId !== currentSelected.itemId) {
                    item.itemChecked = false;
                }
            });
        };
        this.ordered = false;
        this.readonly = false;
        this.type = "single-selection";
        this.required = false;
        this.ellipsis = false;
        this.value = undefined;
        this.listName = undefined;
        this.noItemsBorder = false;
        this.noListBorder = false;
    }
    componentWillLoad() {
        this.evaluateChecked();
        this.evaluateInitialValue();
    }
    itemSelectionChangedHandler(event) {
        event.stopPropagation();
        const selectedItem = event.detail;
        if (this.type === "single-selection") {
            this.clearPrevSelected(selectedItem);
        }
        const checkedItemsInfo = [];
        const checkedItems = this.getChecked();
        const newValue = [];
        checkedItems.forEach(item => {
            const value = item.itemValue;
            newValue.push(value);
            checkedItemsInfo.push({
                itemId: item.itemId,
                itemValue: value,
                itemIcon: item.icon,
                itemChecked: true
            });
        });
        /* update this.value*/
        if (this.type === "single-selection" && newValue.length > 0) {
            this.value = newValue[0] || undefined;
        }
        else {
            /* multi-selection*/
            this.value = newValue;
        }
        /* emit selectionChanged*/
        this.selectionChanged.emit(checkedItemsInfo);
    }
    render() {
        const listClases = "list scrollable";
        return (h(Host, { exportparts: "input:input" }, h("ch-theme", { model: CSS_BUNDLES$1 }), this.ordered ? (h("ol", { class: listClases, part: "list" }, h("slot", null))) : (h("ul", { class: listClases, part: "list" }, h("slot", null)))));
    }
    get el() { return getElement(this); }
};
GxIdeListSelector.style = listSelectorCss;

const listSelectorItemCss = "*,::after,::before{box-sizing:border-box}gx-ide-list-selector-item{display:block;max-width:100%;display:flex}gx-ide-list-selector-item:hover .label{background-color:var(--color-accent-item-hover);cursor:pointer}gx-ide-list-selector-item:hover input:checked+.label{border-color:var(--color-accent-item-hover)}gx-ide-list-selector-item:active .label{background-color:transparent;color:var(--color-text-primary-pressed)}gx-ide-list-selector-item[readonly]:not([readonly=false]) .label{pointer-events:none;background-color:transparent}gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) .label__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}gx-ide-list-selector-item input{width:0;height:0;opacity:0;margin:0}gx-ide-list-selector-item input:focus+.label{outline:var(--focus-outline-width) solid var(--color-border-primary-focused);outline-offset:calc(2px * -1)}gx-ide-list-selector-item input:checked+.label{background-color:var(--color-accent-item-selected)}gx-ide-list-selector-item input:checked:hover+.label{color:var(--color-accent-primary-on-hover)}gx-ide-list-selector-item .label{width:100%;border-radius:4px}gx-ide-list-selector-item .label__wrapper{display:flex;min-height:28px;align-items:center;gap:var(--spacing-gap-m);padding:4px 8px;width:100%}gx-ide-list-selector-item .label__description{flex:1;display:flex;align-items:center;gap:var(--spacing-gap-m)}gx-ide-list-selector-item[no-border]{border-block-start:none}gx-ide-list-selector-item .label__universal-slot{display:flex;align-items:center;justify-content:center}";

const CSS_BUNDLES = ["resets/box-sizing", "components/icon"];
const GxIdeListSelectorItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.itemSelectionChanged = createEvent(this, "itemSelectionChanged", 7);
        this.hasUniversalSlot = false;
        this.index = undefined;
        // 6.COMPONENT LIFECYCLE METHODS //
        // 7.LISTENERS //
        // 8.PUBLIC METHODS API //
        // 9.LOCAL METHODS //
        /**
         * Checks if this item parentElement is a gx-ide-list-selector, and assigns a reference
         */
        this.evaluateParentIsListSelector = () => {
            const parentList = this.el.parentElement;
            this.parentIsListSelector = (parentList === null || parentList === void 0 ? void 0 : parentList.nodeName) === "GX-IDE-LIST-SELECTOR";
            this.parentIsListSelector && (this.parentList = parentList);
        };
        /**
         * Determines the type of item, based on the parent list-selector 'type' property value
         */
        this.evaluateType = () => {
            const parentList = this.el
                .parentElement;
            this.type = parentList.type === "single-selection" ? "radio" : "checkbox";
        };
        /**
         * Evaluates if is selectable, considering the parent list-selector 'selectable' property value, only if it is undefined on this item
         */
        this.evaluateSelectable = () => {
            if (this.readonly === undefined && this.parentIsListSelector) {
                this.readonly = this.parentList.readonly;
            }
        };
        /**
         * Evaluates if text should truncate with ellipsis, considering the parent list-selector 'ellipsis' property value, only if it is undefined on this item
         */
        this.evaluateEllipsis = () => {
            if (this.ellipsis === undefined && this.parentIsListSelector) {
                this.ellipsis = this.parentList.ellipsis;
            }
        };
        /**
         * Evaluates if this item should be initially checked, only if the parent list-selector listValue equals this item value.
         */
        this.evaluateChecked = () => {
            if (this.checked === undefined &&
                this.parentIsListSelector &&
                this.parentList.value !== undefined &&
                this.parentList.value === this.itemValue) {
                this.checked = true;
            }
        };
        this.evaluateBorder = () => {
            if (this.parentIsListSelector) {
                this.noBorder = this.parentList.noItemsBorder;
            }
        };
        this.evaluateUniversalSlot = () => {
            this.hasUniversalSlot = !!this.el.querySelector("[slot=universal]");
        };
        /**
         * Gets the listName required value, that is needed for the list selection to properly work
         */
        this.assignName = () => {
            this.parentIsListSelector &&
                this.parentList.listName &&
                (this.name = this.parentList.listName);
        };
        this.evaluateOrderedList = () => {
            if (this.parentIsListSelector && this.parentList.ordered) {
                let index = Array.from(this.parentList.children).indexOf(this.el) + 1;
                if (index < 10) {
                    // This will make descriptions to be nicely aligned, between one digit, and two digit indexes items.
                    index = `0${index}`;
                }
                else {
                    index = `${index}`;
                }
                this.index = index;
            }
        };
        this.onChangeHandler = (e) => {
            this.itemChecked = e.target.checked;
            this.itemSelectionChanged.emit({
                itemId: this.itemId,
                itemValue: this.itemValue,
                itemIcon: this.icon,
                itemChecked: this.itemChecked
            });
        };
        this.itemId = undefined;
        this.itemValue = undefined;
        this.itemChecked = false;
        this.readonly = undefined;
        this.ellipsis = undefined;
        this.icon = undefined;
        this.noBorder = false;
        this.universalSlotEnd = false;
    }
    // 5.EVENTS (EMIT) //
    componentWillLoad() {
        this.evaluateParentIsListSelector();
        this.evaluateType();
        this.evaluateSelectable();
        this.evaluateEllipsis();
        this.evaluateChecked();
        this.evaluateBorder();
        this.evaluateUniversalSlot();
        this.assignName();
        this.evaluateOrderedList();
    }
    // 10.RENDER() FUNCTION //
    render() {
        return (h(Host, { role: "listitem" }, h("ch-theme", { model: CSS_BUNDLES }), h("input", { type: this.type, id: this.itemId, name: this.name, value: this.itemValue, checked: this.itemChecked, onChange: this.onChangeHandler, disabled: this.readonly, part: "input" }), h("label", { class: "label", htmlFor: this.itemId, part: "label" }, h("div", { class: "label__wrapper" }, this.index ? (h("span", { class: "label__index" }, this.index, ". ")) : null, this.hasUniversalSlot ? (h("span", { class: "label__universal-slot", part: "universal-slot" }, h("slot", { name: "universal" }))) : null, this.icon ? (h("ch-image", { class: "icon-s", src: this.icon, part: "icon" })) : null, h("span", { class: "label__description", part: "description" }, this.itemValue ? this.itemValue : h("slot", null))))));
    }
    get el() { return getElement(this); }
};
GxIdeListSelectorItem.style = listSelectorItemCss;

export { GxIdeListSelector as gx_ide_list_selector, GxIdeListSelectorItem as gx_ide_list_selector_item };

//# sourceMappingURL=gx-ide-list-selector_2.entry.js.map