import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';

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 = [
    "resets/box-sizing",
    "chameleon/scrollbar"
];
const GxIdeListSelector = /*@__PURE__*/ proxyCustomElement(class GxIdeListSelector extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        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 }), this.ordered ? (h("ol", { class: listClases, part: "list" }, h("slot", null))) : (h("ul", { class: listClases, part: "list" }, h("slot", null)))));
    }
    get el() { return this; }
    static get style() { return listSelectorCss; }
}, [1, "gx-ide-list-selector", {
        "ordered": [4],
        "readonly": [4],
        "type": [1],
        "required": [4],
        "ellipsis": [4],
        "value": [1025],
        "listName": [1, "list-name"],
        "noItemsBorder": [4, "no-items-border"],
        "noListBorder": [516, "no-list-border"]
    }, [[2, "itemSelectionChanged", "itemSelectionChangedHandler"]]]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["gx-ide-list-selector"];
    components.forEach(tagName => { switch (tagName) {
        case "gx-ide-list-selector":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, GxIdeListSelector);
            }
            break;
    } });
}

export { GxIdeListSelector as G, defineCustomElement as d };

//# sourceMappingURL=list-selector.js.map