// Stencil
import { Host, h } from "@stencil/core";
const CSS_BUNDLES = [
    "resets/box-sizing",
    "chameleon/scrollbar"
];
export class GxIdeListSelector {
    constructor() {
        /**
         * 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)))));
    }
    static get is() { return "gx-ide-list-selector"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["list-selector.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["list-selector.css"]
        };
    }
    static get properties() {
        return {
            "ordered": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "It determines if the list is ordered, or unordered"
                },
                "attribute": "ordered",
                "reflect": false,
                "defaultValue": "false"
            },
            "readonly": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the list readonly"
                },
                "attribute": "readonly",
                "reflect": false,
                "defaultValue": "false"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"single-selection\" | \"multi-selection\"",
                    "resolved": "\"multi-selection\" | \"single-selection\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "It determines the type of list: single-selection or multi-selection"
                },
                "attribute": "type",
                "reflect": false,
                "defaultValue": "\"single-selection\""
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the list required"
                },
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "ellipsis": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The presence of this property will force all the items to not-wrap, and have ellipsis"
                },
                "attribute": "ellipsis",
                "reflect": false,
                "defaultValue": "false"
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string | string[]",
                    "resolved": "string | string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The value of the initial (or initials) checked list-item/s"
                },
                "attribute": "value",
                "reflect": false
            },
            "listName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of this list. This is a required attribute for the list to work."
                },
                "attribute": "list-name",
                "reflect": false
            },
            "noItemsBorder": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disables the items border"
                },
                "attribute": "no-items-border",
                "reflect": false,
                "defaultValue": "false"
            },
            "noListBorder": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Disables the list border"
                },
                "attribute": "no-list-border",
                "reflect": true,
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "selectionChanged",
                "name": "selectionChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emits the actual selection"
                },
                "complexType": {
                    "original": "CheckedItemsInfo",
                    "resolved": "ItemData[]",
                    "references": {
                        "CheckedItemsInfo": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/_helpers/list-selector/list-selector.tsx",
                            "id": "src/components/_helpers/list-selector/list-selector.tsx::CheckedItemsInfo"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "itemSelectionChanged",
                "method": "itemSelectionChangedHandler",
                "target": undefined,
                "capture": true,
                "passive": false
            }];
    }
}
//# sourceMappingURL=list-selector.js.map
