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

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 = /*@__PURE__*/ proxyCustomElement(class GxIdeListSelectorItem extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        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 this; }
    static get style() { return listSelectorItemCss; }
}, [4, "gx-ide-list-selector-item", {
        "itemId": [513, "item-id"],
        "itemValue": [1, "item-value"],
        "itemChecked": [1028, "item-checked"],
        "readonly": [1540],
        "ellipsis": [1540],
        "icon": [1],
        "noBorder": [1540, "no-border"],
        "universalSlotEnd": [516, "universal-slot-end"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["gx-ide-list-selector-item"];
    components.forEach(tagName => { switch (tagName) {
        case "gx-ide-list-selector-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, GxIdeListSelectorItem);
            }
            break;
    } });
}

export { GxIdeListSelectorItem as G, defineCustomElement as d };

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