// Stencil
import { Host, h } from "@stencil/core";
const CSS_BUNDLES = ["resets/box-sizing", "components/icon"];
export class GxIdeListSelectorItem {
    constructor() {
        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))))));
    }
    static get is() { return "gx-ide-list-selector-item"; }
    static get originalStyleUrls() {
        return {
            "$": ["list-selector-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["list-selector-item.css"]
        };
    }
    static get properties() {
        return {
            "itemId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The item id"
                },
                "attribute": "item-id",
                "reflect": true
            },
            "itemValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The item value, that acts as a label as well"
                },
                "attribute": "item-value",
                "reflect": false
            },
            "itemChecked": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "This will set the input as checked"
                },
                "attribute": "item-checked",
                "reflect": false,
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "It allows to select the item by clicking on it. It will emit the item-id"
                },
                "attribute": "readonly",
                "reflect": true
            },
            "ellipsis": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The presence of this property will force the item text to not-wrap, and have ellipsis"
                },
                "attribute": "ellipsis",
                "reflect": true
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The gemini icon name"
                },
                "attribute": "icon",
                "reflect": false
            },
            "noBorder": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disables the item border"
                },
                "attribute": "no-border",
                "reflect": true,
                "defaultValue": "false"
            },
            "universalSlotEnd": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "false",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays the universal slot at the end, instead of at the benign"
                },
                "attribute": "universal-slot-end",
                "reflect": true,
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "itemSelectionChanged",
                "name": "itemSelectionChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emits the item data"
                },
                "complexType": {
                    "original": "ItemData",
                    "resolved": "{ itemId: string; itemValue: string; itemIcon?: string; itemChecked: boolean; }",
                    "references": {
                        "ItemData": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/_helpers/list-selector/list-selector-item/list-selector-item.tsx",
                            "id": "src/components/_helpers/list-selector/list-selector-item/list-selector-item.tsx::ItemData"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=list-selector-item.js.map
