@zanichelli/albe-web-components 13.2.0-rc1 → 13.3.0

package/dist/collection/components/inputs/z-combobox/index.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { InputType, ListDividerType, ControlSize, KeyboardCode, ListSize } from "../../../beans";
+import { InputType, KeyboardKeyCode, ListDividerType, ControlSize } from "../../../beans";
 import { handleKeyboardSubmit } from "../../../utils/utils";
 export class ZCombobox {
     watchItems() {
@@ -9,13 +9,20 @@ export class ZCombobox {
     }
     watchSearchValue() {
         this.filterItems(this.searchValue);
-        const elem = this.element.shadowRoot.querySelector(`.${this.getCheckboxClass()} input`);
-        if (elem) {
-            elem.setAttribute("tabindex", "0");
-        }
     }
-    getFocusedItemHandler(e) {
-        this.focusedItemId = e.detail;
+    inputCheckListener(e) {
+        const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, "");
+        if (id === "check-all" && (!this.maxcheckableitems || this.maxcheckableitems >= this.itemsList.length)) {
+            return this.checkAll(e.detail.checked);
+        }
+        this.itemsList = this.itemsList.map((item) => {
+            if (item.id === id) {
+                item.checked = e.detail.checked;
+            }
+            return item;
+        });
+        this.updateRenderItemsList();
+        this.emitComboboxChange();
     }
     emitComboboxChange() {
         this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
@@ -44,7 +51,6 @@ export class ZCombobox {
         this.searchValue = undefined;
         this.selectedCounter = undefined;
         this.renderItemsList = [];
-        this.focusedItemId = undefined;
         this.toggleComboBox = this.toggleComboBox.bind(this);
         this.closeFilterItems = this.closeFilterItems.bind(this);
     }
@@ -54,101 +60,6 @@ export class ZCombobox {
     componentWillRender() {
         this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
     }
-    getControlToListSize() {
-        let size;
-        switch (this.size) {
-            case ControlSize.BIG:
-                size = ListSize.LARGE;
-                break;
-            case ControlSize.SMALL:
-                size = ListSize.SMALL;
-                break;
-            case ControlSize.X_SMALL:
-                size = ListSize.SMALL;
-                break;
-            default:
-                size = ListSize.MEDIUM;
-        }
-        return size;
-    }
-    getItemId(item) {
-        return `combo-checkbox-${this.inputid}-${item.id}`;
-    }
-    getCheckboxClass() {
-        return `combo-item-checkbox-input-${this.inputid}`;
-    }
-    getCheckAllId() {
-        return `combo-checkbox-${this.inputid}-check-all`;
-    }
-    hasCheckAllDisabled() {
-        return this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length;
-    }
-    resetInputTabIndex() {
-        this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input`).forEach(function (item) {
-            item.setAttribute("tabindex", "-1");
-        });
-    }
-    setInputTabIndex(itemId, index) {
-        if (index === 0) {
-            if (!this.hascheckall ||
-                (this.hascheckall && this.searchValue) ||
-                (this.hascheckall && this.hasCheckAllDisabled())) {
-                return 0;
-            }
-        }
-        return itemId === this.focusedItemId ? 0 : -1;
-    }
-    handleSelectArrowsNavigation(e, key) {
-        let index = key;
-        this.resetInputTabIndex();
-        this.focusComboboxItem(index);
-        const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];
-        if (!arrows.includes(e.key) || !this.isopen) {
-            return;
-        }
-        e.preventDefault();
-        e.stopPropagation();
-        const firstCheckbox = this.hascheckall && !this.hasCheckAllDisabled() && !this.searchValue ? -1 : 0;
-        const itemsLentgh = this.renderItemsList.length - 1;
-        if (e.key === KeyboardCode.ARROW_DOWN) {
-            index = index === itemsLentgh ? firstCheckbox : key + 1;
-        }
-        else if (e.key === KeyboardCode.ARROW_UP) {
-            if (this.hascheckall && !this.searchValue) {
-                index = index < 0 ? itemsLentgh : key - 1;
-            }
-            else {
-                index = index === 0 ? itemsLentgh : key - 1;
-            }
-        }
-        this.resetInputTabIndex();
-        this.focusComboboxItem(index);
-    }
-    handleHeaderKeyboardEvent(ev) {
-        if (ev.key === KeyboardCode.SPACE) {
-            ev.preventDefault();
-        }
-        if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {
-            this.toggleComboBox();
-        }
-    }
-    focusComboboxItem(index) {
-        let focusElem;
-        if (index < 0) {
-            focusElem = this.element.shadowRoot.querySelector(`#${this.getCheckAllId()}`);
-        }
-        else {
-            const item = this.renderItemsList[index];
-            if (!item) {
-                return;
-            }
-            focusElem = this.element.shadowRoot.querySelector(`#${this.getItemId(item)}`);
-        }
-        if (focusElem) {
-            focusElem.setAttribute("tabindex", "0");
-            focusElem.focus();
-        }
-    }
     updateRenderItemsList() {
         if (this.searchValue) {
             this.filterItems(this.searchValue);
@@ -173,9 +84,7 @@ export class ZCombobox {
             const start = item.name.toUpperCase().indexOf(value.toUpperCase());
             const end = start + value.length;
             const newName = item.name.substring(0, start) +
-                "<strong>" +
-                item.name.substring(start, end) +
-                "</strong>" +
+                item.name.substring(start, end).bold() +
                 item.name.substring(end, item.name.length);
             item.name = newName;
             return start >= 0;
@@ -192,35 +101,28 @@ export class ZCombobox {
     }
     toggleComboBox() {
         this.isopen = !this.isopen;
-        this.focusedItemId = "";
     }
     renderHeader() {
         return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-                this.handleHeaderKeyboardEvent(ev);
-            }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0, "aria-expanded": this.isopen ? "true" : "false" }, h("p", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
+                if (ev.keyCode === KeyboardKeyCode.SPACE) {
+                    ev.preventDefault();
+                }
+            }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("p", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
     }
     renderContent() {
         if (!this.isopen) {
             return;
         }
-        return (h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), !this.hassearch ? h("span", Object.assign({}, this.getComboboxA11yAttributes())) : null, h("div", { role: "listbox", "aria-multiselectable": true, id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllId()} ` : ``}${this.itemsList
-                .map((item) => this.getItemId(item))
-                .join(" ")}` }, this.hascheckall && this.renderCheckAll(), this.renderItems())));
+        return (h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
     }
     renderItems() {
-        return (h("div", { class: this.searchValue && "search" }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
+        if (!this.isopen) {
+            return;
+        }
+        return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
     }
     renderItem(item, index, length) {
-        return (h("z-list-element", { id: item.id, htmlTabindex: null, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize() }, h("z-input", { innerTabIndex: this.setInputTabIndex(item.id, index), type: InputType.CHECKBOX, checked: item.checked, htmlid: this.getItemId(item), label: item.name, class: this.getCheckboxClass(), disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": item.checked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, index), onInputCheck: (e) => {
-                this.itemsList = this.itemsList.map((i) => {
-                    if (item.id === i.id) {
-                        i.checked = e.detail.checked;
-                    }
-                    return i;
-                });
-                this.updateRenderItemsList();
-                this.emitComboboxChange();
-            } })));
+        return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index !== length - 1, class: this.size }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size })));
     }
     renderList(items) {
         if (!items) {
@@ -230,9 +132,9 @@ export class ZCombobox {
             return this.renderNoSearchResults();
         }
         if (this.hasgroupitems) {
-            return this.renderGroups(items);
+            return this.renderGroups(this.itemsList);
         }
-        return (h("ul", { role: "none" }, items.map((item, i) => {
+        return (h("ul", null, items.map((item, i) => {
             return this.renderItem(item, i, items.length);
         })));
     }
@@ -248,42 +150,34 @@ export class ZCombobox {
         const listGroups = Object.entries(newData).map(([key, value]) => {
             return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
         });
-        return h("ul", { role: "none" }, listGroups);
+        return h("ul", null, listGroups);
     }
     renderNoSearchResults() {
-        return (h("ul", { role: "none" }, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
+        return (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
     }
     renderCloseButton() {
         return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
     }
-    getComboboxA11yAttributes() {
-        return {
-            "role": "combobox",
-            "aria-expanded": this.isopen ? "true" : "false",
-            "aria-activedescendant": this.isopen ? this.focusedItemId : "",
-            "aria-controls": `${this.inputid}_list`,
-        };
-    }
     renderSearchInput() {
-        return (h("z-input", Object.assign({ htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, "aria-autocomplete": "list" }, this.getComboboxA11yAttributes(), { onKeyUp: (e) => {
-                if (e.key === KeyboardCode.ESC) {
-                    this.closeFilterItems();
+        if (!this.isopen) {
+            return;
+        }
+        return (h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, onInputChange: (e) => {
+                if (e.detail.keycode === 27) {
+                    return this.closeFilterItems();
                 }
-            }, onInputChange: (e) => {
                 this.searchValue = e.detail.value;
-            } })));
+            } }));
     }
     renderCheckAll() {
         if (this.searchValue) {
             return;
         }
         const allChecked = this.selectedCounter === this.itemsList.length;
-        return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: this.getCheckAllId(), class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.hasCheckAllDisabled(), size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, -1), onInputCheck: (e) => {
-                this.checkAll(e.detail.checked);
-            } })));
+        return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size })));
     }
     render() {
-        return (h("div", { key: 'c12854ede2b8c8c8301ff18831e51f974ae00a3d', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '60fd65ff74672014003f4f0bfe8187a3b9688e72', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -634,8 +528,7 @@ export class ZCombobox {
         return {
             "searchValue": {},
             "selectedCounter": {},
-            "renderItemsList": {},
-            "focusedItemId": {}
+            "renderItemsList": {}
         };
     }
     static get events() {
@@ -656,7 +549,6 @@ export class ZCombobox {
                 }
             }];
     }
-    static get elementRef() { return "element"; }
     static get watchers() {
         return [{
                 "propName": "items",
@@ -668,8 +560,8 @@ export class ZCombobox {
     }
     static get listeners() {
         return [{
-                "name": "ariaDescendantFocus",
-                "method": "getFocusedItemHandler",
+                "name": "inputCheck",
+                "method": "inputCheckListener",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/inputs/z-combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-combobox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAe,MAAM,eAAe,CAAC;AACrG,OAAO,EAAY,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AAE1G,OAAO,EAAC,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AAQ1D,MAAM,OAAO,SAAS;IA4FpB,UAAU;QACR,IAAI,CAAC,SAAS,GAAG,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QACtF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;QAC5E,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACnC,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;QACxF,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAGD,qBAAqB,CAAC,CAAc;QAClC,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC;IAChC,CAAC;IAMO,kBAAkB;QACxB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAC,CAAC,CAAC;IACtE,CAAC;IAED;QAjCQ,cAAS,GAAgB,EAAE,CAAC;QAE5B,cAAS,GAAc,SAAS,CAAC,IAAI,CAAC;;;;wBAxEzB,KAAK;yBAIJ,KAAK;;;;8BAgBD,kBAAkB;sBAInC,KAAK;uBAIJ,KAAK;+BAIY,QAAQ;2BAIX,KAAK;4BAIL,iBAAiB;8BAIf,mBAAmB;iCAIzB,CAAC;;oBAQA,WAAW,CAAC,GAAG;;;+BASL,EAAE;;QAuC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1D;IAED,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IAC9E,CAAC;IAEO,oBAAoB;QAC1B,IAAI,IAAI,CAAC;QACT,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,WAAW,CAAC,GAAG;gBAClB,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACtB,MAAM;YACR,KAAK,WAAW,CAAC,KAAK;gBACpB,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACtB,MAAM;YACR,KAAK,WAAW,CAAC,OAAO;gBACtB,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACtB,MAAM;YACR;gBACE,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC3B,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,SAAS,CAAC,IAAe;QAC/B,OAAO,kBAAkB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;IACrD,CAAC;IAEO,gBAAgB;QACtB,OAAO,6BAA6B,IAAI,CAAC,OAAO,EAAE,CAAC;IACrD,CAAC;IAEO,aAAa;QACnB,OAAO,kBAAkB,IAAI,CAAC,OAAO,YAAY,CAAC;IACpD,CAAC;IAEO,mBAAmB;QACzB,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAClF,CAAC;IAEO,kBAAkB;QACxB,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,UAAU,IAAI;YAClG,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,gBAAgB,CAAC,MAAM,EAAE,KAAK;QACpC,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,IACE,CAAC,IAAI,CAAC,WAAW;gBACjB,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC;gBACtC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC,EAChD,CAAC;gBACD,OAAO,CAAC,CAAC;YACX,CAAC;QACH,CAAC;QAED,OAAO,MAAM,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAChD,CAAC;IAEO,4BAA4B,CAAC,CAAgB,EAAE,GAAW;QAChE,IAAI,KAAK,GAAG,GAAG,CAAC;QAEhB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAE9B,MAAM,MAAM,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;QAChE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAC5D,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACpG,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;QAEpD,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,EAAE,CAAC;YACtC,KAAK,GAAG,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QAC1D,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,EAAE,CAAC;YAC3C,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;gBAC1C,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACN,KAAK,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAEO,yBAAyB,CAAC,EAAiB;QACjD,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,KAAK,EAAE,CAAC;YAClC,EAAE,CAAC,cAAc,EAAE,CAAC;QACtB,CAAC;QACD,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9G,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,KAAa;QACrC,IAAI,SAAsB,CAAC;QAE3B,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACd,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAChF,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;YAEzC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,OAAO;YACT,CAAC;YAED,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChF,CAAC;QAED,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;YACxC,SAAS,CAAC,KAAK,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAEO,qBAAqB;QAC3B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9B,CAAC;IACH,CAAC;IAEO,oBAAoB;QAC1B,MAAM,eAAe,GAAG,EAAE,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAe,EAAE,EAAE;YACzC,eAAe,CAAC,IAAI,mBAAK,IAAI,EAAE,CAAC;QAClC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;IACzC,CAAC;IAEO,WAAW,CAAC,KAAa;QAC/B,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1D,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;YACnE,MAAM,GAAG,GAAG,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;YACjC,MAAM,OAAO,GACX,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,CAAC;gBAC7B,UAAU;gBACV,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC;gBAC/B,WAAW;gBACX,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAE7C,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;YAEpB,OAAO,KAAK,IAAI,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,QAAQ,CAAC,OAAO,GAAG,IAAI;QAC7B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAe,EAAE,EAAE,CAAC,iCACpD,IAAI,KACP,OAAO,EAAE,OAAO,IAChB,CAAC,CAAC;QACJ,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,aAAa,GAAG,EAAE,CAAC;IAC1B,CAAC;IAEO,YAAY;QAClB,OAAO,CACL,WACE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,EACpC,SAAS,EAAE,CAAC,EAAiB,EAAE,EAAE;gBAC/B,IAAI,CAAC,yBAAyB,CAAC,EAAE,CAAC,CAAC;YACrC,CAAC,EACD,OAAO,EAAE,CAAC,EAAiB,EAAE,EAAE,CAAC,oBAAoB,CAAC,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,EAC7E,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,mBACI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAE7C,SAAG,KAAK,EAAC,QAAQ;gBACd,IAAI,CAAC,KAAK;gBACX,gBAAO,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,eAAe,GAAG,CAAQ,CACrE;YACJ,cACE,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACE,CACP,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,iBAAiB;YACzB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE;YAC1C,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,4BAAU,IAAI,CAAC,yBAAyB,EAAE,EAAI,CAAC,CAAC,CAAC,IAAI;YACxE,WACE,IAAI,EAAC,SAAS,0BACQ,IAAI,EAC1B,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,OAAO,eACf,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS;qBAC9E,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;qBACnC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAEb,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;gBACzC,IAAI,CAAC,WAAW,EAAE,CACf,CACF,CACP,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,QAAQ;YACrC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC;YACrC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,iBAAiB,EAAE,CACzC,CACP,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,IAAe,EAAE,KAAa,EAAE,MAAc;QAC/D,OAAO,CACL,sBACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,YAAY,EAAE,IAAI,EAClB,WAAW,EAAE,KAAK,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,EAClF,IAAI,EAAE,IAAI,CAAC,oBAAoB,EAAE;YAEjC,eACE,aAAa,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,EACpD,IAAI,EAAE,SAAS,CAAC,QAAQ,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,QAAQ,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,iBAAiB,KAAK,IAAI,CAAC,eAAe,EACpG,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACvE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC9C,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC,EAAE,KAAK,CAAC,EAC5E,YAAY,EAAE,CAAC,CAAc,EAAE,EAAE;oBAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAY,EAAE,EAAE;wBACnD,IAAI,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC;4BACrB,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;wBAC/B,CAAC;wBAED,OAAO,CAAC,CAAC;oBACX,CAAC,CAAC,CAAC;oBACH,IAAI,CAAC,qBAAqB,EAAE,CAAC;oBAC7B,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC5B,CAAC,GACD,CACa,CAClB,CAAC;IACJ,CAAC;IAEO,UAAU,CAAC,KAAkB;QACnC,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACtC,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;QAED,OAAO,CACL,UAAI,IAAI,EAAC,MAAM,IACZ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACrB,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QAChD,CAAC,CAAC,CACC,CACN,CAAC;IACJ,CAAC;IAEO,YAAY,CAAC,KAAkB;QACrC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;;YAClD,MAAM,EAAC,QAAQ,EAAC,GAAG,IAAI,CAAC;YACxB,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAE7D,KAAK,CAAC,QAAQ,CAAC,GAAG,MAAA,KAAK,CAAC,QAAQ,CAAC,mCAAI,EAAE,CAAC;YACxC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAEhC,OAAO,KAAK,CAAC;QACf,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,OAAqD,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;YAC5G,OAAO,CACL,oCAA4B,eAAe,CAAC,OAAO;gBACjD,YACE,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,cAAc,IAElB,GAAG,CACC;gBACN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CACb,CAChB,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,UAAI,IAAI,EAAC,MAAM,IAAE,UAAU,CAAM,CAAC;IAC3C,CAAC;IAEO,qBAAqB;QAC3B,OAAO,CACL,UAAI,IAAI,EAAC,MAAM;YACb,uBACE,EAAE,EAAC,YAAY,EACf,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,UAAU,EAAC,YAAY,EACvB,IAAI,EAAC,iBAAiB,EACtB,KAAK,EAAE,IAAI,CAAC,IAAI,GAChB,CACC,CACN,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,CACL;YACE,SACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,EACtC,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,oBAAoB,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,EAC7E,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,IAEV,IAAI,CAAC,eAAe,CACnB,CACA,CACP,CAAC;IACJ,CAAC;IAEO,yBAAyB;QAC/B,OAAO;YACL,MAAM,EAAE,UAAU;YAClB,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAC/C,uBAAuB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;YAC9D,eAAe,EAAE,GAAG,IAAI,CAAC,OAAO,OAAO;SACxC,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,CACL,6BACE,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,SAAS,EAAE,IAAI,CAAC,WAAW,EAC3B,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,OAAO,EAAE,KAAK,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,uBACG,MAAM,IACpB,IAAI,CAAC,yBAAyB,EAAE,IACpC,OAAO,EAAE,CAAC,CAAgB,EAAE,EAAE;gBAC5B,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG,EAAE,CAAC;oBAC/B,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC1B,CAAC;YACH,CAAC,EACD,aAAa,EAAE,CAAC,CAAc,EAAE,EAAE;gBAChC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;YACpC,CAAC,IACD,CACH,CAAC;IACJ,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;QAElE,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;YAC5B,eACE,IAAI,EAAE,SAAS,CAAC,QAAQ,EACxB,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,EAC5B,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAC3D,QAAQ,EAAE,IAAI,CAAC,mBAAmB,EAAE,EACpC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACvE,IAAI,EAAC,QAAQ,mBACE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC5C,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EACzE,YAAY,EAAE,CAAC,CAAc,EAAE,EAAE;oBAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBAClC,CAAC,GACD,CACE,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,2EACe,SAAS,IAAI,CAAC,OAAO,EAAE,EACpC,KAAK,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EACxE,EAAE,EAAE,IAAI,CAAC,OAAO;YAEf,IAAI,CAAC,YAAY,EAAE;YACnB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE,CACnC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, State, Listen, Watch, Event, Element, EventEmitter} from \"@stencil/core\";\nimport {ComboItem, InputType, ListDividerType, ControlSize, KeyboardCode, ListSize} from \"../../../beans\";\nimport {ZInput} from \"../z-input\";\nimport {handleKeyboardSubmit} from \"../../../utils/utils\";\nimport {ZMyzListItem} from \"../../../snowflakes/myz/list/z-myz-list-item\";\n\n@Component({\n  tag: \"z-combobox\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCombobox {\n  @Element() element: HTMLZComboboxElement;\n\n  /** input unique id */\n  @Prop()\n  inputid: string;\n\n  /** list items array */\n  @Prop()\n  items: ComboItem[] | string;\n\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** the combobox is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** show search input flag (optional) */\n  @Prop()\n  hassearch?: boolean = false;\n\n  /** search input label text (optional) */\n  @Prop()\n  searchlabel?: string;\n\n  /** search input placeholder text (optional) */\n  @Prop()\n  searchplaceholder?: string;\n\n  /** search input title text (optional) */\n  @Prop()\n  searchtitle?: string;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** toggle combo list opening flag */\n  @Prop({mutable: true})\n  isopen = false;\n\n  /** fixed style flag */\n  @Prop()\n  isfixed = false;\n\n  /** close combobox list text */\n  @Prop()\n  closesearchtext?: string = \"Chiudi\";\n\n  /** show \"check all\" checkbox (optional) */\n  @Prop()\n  hascheckall?: boolean = false;\n\n  /** check all label (optional) */\n  @Prop()\n  checkalltext?: string = \"Seleziona tutti\";\n\n  /** uncheck all label (optional) */\n  @Prop()\n  uncheckalltext?: string = \"Deseleziona tutti\";\n\n  /** max number of checkable items (0 = unlimited) */\n  @Prop()\n  maxcheckableitems = 0;\n\n  /** group items by category */\n  @Prop()\n  hasgroupitems?: boolean;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  searchValue: string;\n\n  @State()\n  selectedCounter: number;\n\n  @State()\n  renderItemsList: ComboItem[] = []; // used for render only\n\n  @State()\n  focusedItemId: string;\n\n  private itemsList: ComboItem[] = [];\n\n  private inputType: InputType = InputType.TEXT;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n    this.updateRenderItemsList();\n  }\n\n  @Watch(\"searchValue\")\n  watchSearchValue(): void {\n    this.filterItems(this.searchValue);\n    const elem = this.element.shadowRoot.querySelector(`.${this.getCheckboxClass()} input`);\n    if (elem) {\n      elem.setAttribute(\"tabindex\", \"0\");\n    }\n  }\n\n  @Listen(\"ariaDescendantFocus\")\n  getFocusedItemHandler(e: CustomEvent): void {\n    this.focusedItemId = e.detail;\n  }\n\n  /** Emitted when value is checked/unchecked. Returns id, items. */\n  @Event()\n  comboboxChange: EventEmitter;\n\n  private emitComboboxChange(): void {\n    this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n  }\n\n  constructor() {\n    this.toggleComboBox = this.toggleComboBox.bind(this);\n    this.closeFilterItems = this.closeFilterItems.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n  }\n\n  private getControlToListSize(): ListSize {\n    let size;\n    switch (this.size) {\n      case ControlSize.BIG:\n        size = ListSize.LARGE;\n        break;\n      case ControlSize.SMALL:\n        size = ListSize.SMALL;\n        break;\n      case ControlSize.X_SMALL:\n        size = ListSize.SMALL;\n        break;\n      default:\n        size = ListSize.MEDIUM;\n    }\n\n    return size;\n  }\n\n  private getItemId(item: ComboItem): string {\n    return `combo-checkbox-${this.inputid}-${item.id}`;\n  }\n\n  private getCheckboxClass(): string {\n    return `combo-item-checkbox-input-${this.inputid}`;\n  }\n\n  private getCheckAllId(): string {\n    return `combo-checkbox-${this.inputid}-check-all`;\n  }\n\n  private hasCheckAllDisabled(): boolean {\n    return this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length;\n  }\n\n  private resetInputTabIndex(): void {\n    this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input`).forEach(function (item) {\n      item.setAttribute(\"tabindex\", \"-1\");\n    });\n  }\n\n  private setInputTabIndex(itemId, index): number {\n    if (index === 0) {\n      if (\n        !this.hascheckall ||\n        (this.hascheckall && this.searchValue) ||\n        (this.hascheckall && this.hasCheckAllDisabled())\n      ) {\n        return 0;\n      }\n    }\n\n    return itemId === this.focusedItemId ? 0 : -1;\n  }\n\n  private handleSelectArrowsNavigation(e: KeyboardEvent, key: number): void {\n    let index = key;\n\n    this.resetInputTabIndex();\n    this.focusComboboxItem(index);\n\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (!arrows.includes(e.key as KeyboardCode) || !this.isopen) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopPropagation();\n    const firstCheckbox = this.hascheckall && !this.hasCheckAllDisabled() && !this.searchValue ? -1 : 0;\n    const itemsLentgh = this.renderItemsList.length - 1;\n\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      index = index === itemsLentgh ? firstCheckbox : key + 1;\n    } else if (e.key === KeyboardCode.ARROW_UP) {\n      if (this.hascheckall && !this.searchValue) {\n        index = index < 0 ? itemsLentgh : key - 1;\n      } else {\n        index = index === 0 ? itemsLentgh : key - 1;\n      }\n    }\n\n    this.resetInputTabIndex();\n    this.focusComboboxItem(index);\n  }\n\n  private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n    }\n    if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n      this.toggleComboBox();\n    }\n  }\n\n  private focusComboboxItem(index: number): void {\n    let focusElem: HTMLElement;\n\n    if (index < 0) {\n      focusElem = this.element.shadowRoot.querySelector(`#${this.getCheckAllId()}`);\n    } else {\n      const item = this.renderItemsList[index];\n\n      if (!item) {\n        return;\n      }\n\n      focusElem = this.element.shadowRoot.querySelector(`#${this.getItemId(item)}`);\n    }\n\n    if (focusElem) {\n      focusElem.setAttribute(\"tabindex\", \"0\");\n      focusElem.focus();\n    }\n  }\n\n  private updateRenderItemsList(): void {\n    if (this.searchValue) {\n      this.filterItems(this.searchValue);\n    } else {\n      this.resetRenderItemsList();\n    }\n  }\n\n  private resetRenderItemsList(): void {\n    const renderItemsList = [];\n    this.itemsList.forEach((item: ComboItem) => {\n      renderItemsList.push({...item});\n    });\n    this.renderItemsList = renderItemsList;\n  }\n\n  private filterItems(value: string): void {\n    if (!value) {\n      return this.closeFilterItems();\n    }\n\n    this.resetRenderItemsList();\n    this.renderItemsList = this.renderItemsList.filter((item) => {\n      const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n      const end = start + value.length;\n      const newName =\n        item.name.substring(0, start) +\n        \"<strong>\" +\n        item.name.substring(start, end) +\n        \"</strong>\" +\n        item.name.substring(end, item.name.length);\n\n      item.name = newName;\n\n      return start >= 0;\n    });\n  }\n\n  private checkAll(checked = true): void {\n    this.itemsList = this.itemsList.map((item: ComboItem) => ({\n      ...item,\n      checked: checked,\n    }));\n    this.resetRenderItemsList();\n    this.emitComboboxChange();\n  }\n\n  private closeFilterItems(): void {\n    this.searchValue = \"\";\n    this.resetRenderItemsList();\n  }\n\n  private toggleComboBox(): void {\n    this.isopen = !this.isopen;\n    this.focusedItemId = \"\";\n  }\n\n  private renderHeader(): HTMLDivElement {\n    return (\n      <div\n        class=\"header\"\n        onClick={() => this.toggleComboBox()}\n        onKeyDown={(ev: KeyboardEvent) => {\n          this.handleHeaderKeyboardEvent(ev);\n        }}\n        onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n        role=\"button\"\n        tabindex={0}\n        aria-expanded={this.isopen ? \"true\" : \"false\"}\n      >\n        <p class=\"body-3\">\n          {this.label}\n          <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n        </p>\n        <z-icon\n          name=\"caret-down\"\n          class={this.size}\n        />\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    if (!this.isopen) {\n      return;\n    }\n\n    return (\n      <div class=\"open-combo-data\">\n        {this.hassearch && this.renderSearchInput()}\n        {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n        <div\n          role=\"listbox\"\n          aria-multiselectable={true}\n          id={`${this.inputid}_list`}\n          aria-owns={`${this.hascheckall ? `${this.getCheckAllId()} ` : ``}${this.itemsList\n            .map((item) => this.getItemId(item))\n            .join(\" \")}`}\n        >\n          {this.hascheckall && this.renderCheckAll()}\n          {this.renderItems()}\n        </div>\n      </div>\n    );\n  }\n\n  private renderItems(): HTMLDivElement {\n    return (\n      <div class={this.searchValue && \"search\"}>\n        {this.renderList(this.renderItemsList)}\n        {this.searchValue && this.renderCloseButton()}\n      </div>\n    );\n  }\n\n  private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n    return (\n      <z-list-element\n        id={item.id}\n        htmlTabindex={null}\n        dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n        size={this.getControlToListSize()}\n      >\n        <z-input\n          innerTabIndex={this.setInputTabIndex(item.id, index)}\n          type={InputType.CHECKBOX}\n          checked={item.checked}\n          htmlid={this.getItemId(item)}\n          label={item.name}\n          class={this.getCheckboxClass()}\n          disabled={!item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n          role=\"option\"\n          aria-selected={item.checked ? \"true\" : \"false\"}\n          onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, index)}\n          onInputCheck={(e: CustomEvent) => {\n            this.itemsList = this.itemsList.map((i: ComboItem) => {\n              if (item.id === i.id) {\n                i.checked = e.detail.checked;\n              }\n\n              return i;\n            });\n            this.updateRenderItemsList();\n            this.emitComboboxChange();\n          }}\n        />\n      </z-list-element>\n    );\n  }\n\n  private renderList(items: ComboItem[]): HTMLUListElement {\n    if (!items) {\n      return;\n    }\n    if (!items.length && this.searchValue) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasgroupitems) {\n      return this.renderGroups(items);\n    }\n\n    return (\n      <ul role=\"none\">\n        {items.map((item, i) => {\n          return this.renderItem(item, i, items.length);\n        })}\n      </ul>\n    );\n  }\n\n  private renderGroups(items: ComboItem[]): HTMLUListElement {\n    const newData = items.reduce((group, item, index) => {\n      const {category} = item;\n      const zListItem = this.renderItem(item, index, items.length);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n      return (\n        <z-list-group divider-type={ListDividerType.ELEMENT}>\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {key}\n          </span>\n          {value.map((item) => item)}\n        </z-list-group>\n      );\n    });\n\n    return <ul role=\"none\">{listGroups}</ul>;\n  }\n\n  private renderNoSearchResults(): HTMLUListElement {\n    return (\n      <ul role=\"none\">\n        <z-myz-list-item\n          id=\"no-results\"\n          text={this.noresultslabel}\n          listitemid=\"no-results\"\n          icon=\"multiply-circle\"\n          class={this.size}\n        />\n      </ul>\n    );\n  }\n\n  private renderCloseButton(): HTMLDivElement {\n    return (\n      <div>\n        <a\n          onClick={() => this.closeFilterItems()}\n          onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n          role=\"button\"\n          tabindex={0}\n        >\n          {this.closesearchtext}\n        </a>\n      </div>\n    );\n  }\n\n  private getComboboxA11yAttributes(): Record<string, unknown> {\n    return {\n      \"role\": \"combobox\",\n      \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n      \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n      \"aria-controls\": `${this.inputid}_list`,\n    };\n  }\n\n  private renderSearchInput(): ZInput {\n    return (\n      <z-input\n        htmlid={`${this.inputid}_search`}\n        label={this.searchlabel}\n        placeholder={this.searchplaceholder}\n        htmltitle={this.searchtitle}\n        type={this.inputType}\n        value={this.searchValue}\n        message={false}\n        size={this.size}\n        aria-autocomplete=\"list\"\n        {...this.getComboboxA11yAttributes()}\n        onKeyUp={(e: KeyboardEvent) => {\n          if (e.key === KeyboardCode.ESC) {\n            this.closeFilterItems();\n          }\n        }}\n        onInputChange={(e: CustomEvent) => {\n          this.searchValue = e.detail.value;\n        }}\n      />\n    );\n  }\n\n  private renderCheckAll(): HTMLDivElement {\n    if (this.searchValue) {\n      return;\n    }\n\n    const allChecked = this.selectedCounter === this.itemsList.length;\n\n    return (\n      <div class=\"check-all-wrapper\">\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={allChecked}\n          htmlid={this.getCheckAllId()}\n          class={this.getCheckboxClass()}\n          label={allChecked ? this.uncheckalltext : this.checkalltext}\n          disabled={this.hasCheckAllDisabled()}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n          role=\"option\"\n          aria-selected={allChecked ? \"true\" : \"false\"}\n          onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, -1)}\n          onInputCheck={(e: CustomEvent) => {\n            this.checkAll(e.detail.checked);\n          }}\n        />\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        data-action={`combo-${this.inputid}`}\n        class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n        id={this.inputid}\n      >\n        {this.renderHeader()}\n        {!this.disabled && this.renderContent()}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/z-combobox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Prop, h, State, Listen, Watch, Event, EventEmitter} from \"@stencil/core\";\nimport {ComboItem, InputType, KeyboardKeyCode, ListDividerType, ControlSize} from \"../../../beans\";\nimport {ZInput} from \"../z-input\";\nimport {handleKeyboardSubmit} from \"../../../utils/utils\";\nimport {ZMyzListItem} from \"../../../snowflakes/myz/list/z-myz-list-item\";\n\n@Component({\n  tag: \"z-combobox\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZCombobox {\n  /** input unique id */\n  @Prop()\n  inputid: string;\n\n  /** list items array */\n  @Prop()\n  items: ComboItem[] | string;\n\n  /** label text */\n  @Prop()\n  label: string;\n\n  /** the combobox is disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** show search input flag (optional) */\n  @Prop()\n  hassearch?: boolean = false;\n\n  /** search input label text (optional) */\n  @Prop()\n  searchlabel?: string;\n\n  /** search input placeholder text (optional) */\n  @Prop()\n  searchplaceholder?: string;\n\n  /** search input title text (optional) */\n  @Prop()\n  searchtitle?: string;\n\n  /** no result text message */\n  @Prop()\n  noresultslabel?: string = \"Nessun risultato\";\n\n  /** toggle combo list opening flag */\n  @Prop({mutable: true})\n  isopen = false;\n\n  /** fixed style flag */\n  @Prop()\n  isfixed = false;\n\n  /** close combobox list text */\n  @Prop()\n  closesearchtext?: string = \"Chiudi\";\n\n  /** show \"check all\" checkbox (optional) */\n  @Prop()\n  hascheckall?: boolean = false;\n\n  /** check all label (optional) */\n  @Prop()\n  checkalltext?: string = \"Seleziona tutti\";\n\n  /** uncheck all label (optional) */\n  @Prop()\n  uncheckalltext?: string = \"Deseleziona tutti\";\n\n  /** max number of checkable items (0 = unlimited) */\n  @Prop()\n  maxcheckableitems = 0;\n\n  /** group items by category */\n  @Prop()\n  hasgroupitems?: boolean;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  @State()\n  searchValue: string;\n\n  @State()\n  selectedCounter: number;\n\n  @State()\n  renderItemsList: ComboItem[] = []; // used for render only\n\n  private itemsList: ComboItem[] = [];\n\n  private inputType: InputType = InputType.TEXT;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n    this.updateRenderItemsList();\n  }\n\n  @Watch(\"searchValue\")\n  watchSearchValue(): void {\n    this.filterItems(this.searchValue);\n  }\n\n  @Listen(\"inputCheck\")\n  inputCheckListener(e: CustomEvent): void {\n    const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, \"\");\n\n    if (id === \"check-all\" && (!this.maxcheckableitems || this.maxcheckableitems >= this.itemsList.length)) {\n      return this.checkAll(e.detail.checked);\n    }\n\n    this.itemsList = this.itemsList.map((item: ComboItem) => {\n      if (item.id === id) {\n        item.checked = e.detail.checked;\n      }\n\n      return item;\n    });\n    this.updateRenderItemsList();\n    this.emitComboboxChange();\n  }\n\n  /** Emitted when value is checked/unchecked. Returns id, items. */\n  @Event()\n  comboboxChange: EventEmitter;\n\n  private emitComboboxChange(): void {\n    this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n  }\n\n  constructor() {\n    this.toggleComboBox = this.toggleComboBox.bind(this);\n    this.closeFilterItems = this.closeFilterItems.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  componentWillRender(): void {\n    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n  }\n\n  private updateRenderItemsList(): void {\n    if (this.searchValue) {\n      this.filterItems(this.searchValue);\n    } else {\n      this.resetRenderItemsList();\n    }\n  }\n\n  private resetRenderItemsList(): void {\n    const renderItemsList = [];\n    this.itemsList.forEach((item: ComboItem) => {\n      renderItemsList.push({...item});\n    });\n    this.renderItemsList = renderItemsList;\n  }\n\n  private filterItems(value: string): void {\n    if (!value) {\n      return this.closeFilterItems();\n    }\n\n    this.resetRenderItemsList();\n    this.renderItemsList = this.renderItemsList.filter((item) => {\n      const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n      const end = start + value.length;\n      const newName =\n        item.name.substring(0, start) +\n        item.name.substring(start, end).bold() +\n        item.name.substring(end, item.name.length);\n\n      item.name = newName;\n\n      return start >= 0;\n    });\n  }\n\n  private checkAll(checked = true): void {\n    this.itemsList = this.itemsList.map((item: ComboItem) => ({\n      ...item,\n      checked: checked,\n    }));\n    this.resetRenderItemsList();\n    this.emitComboboxChange();\n  }\n\n  private closeFilterItems(): void {\n    this.searchValue = \"\";\n    this.resetRenderItemsList();\n  }\n\n  private toggleComboBox(): void {\n    this.isopen = !this.isopen;\n  }\n\n  private renderHeader(): HTMLDivElement {\n    return (\n      <div\n        class=\"header\"\n        onClick={() => this.toggleComboBox()}\n        onKeyDown={(ev: KeyboardEvent) => {\n          if (ev.keyCode === KeyboardKeyCode.SPACE) {\n            ev.preventDefault();\n          }\n        }}\n        onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n        role=\"button\"\n        tabindex={0}\n      >\n        <p class=\"body-3\">\n          {this.label}\n          <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n        </p>\n        <z-icon\n          name=\"caret-down\"\n          class={this.size}\n        />\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    if (!this.isopen) {\n      return;\n    }\n\n    return (\n      <div class=\"open-combo-data\">\n        {this.hassearch && this.renderSearchInput()}\n        {this.hascheckall && this.renderCheckAll()}\n        {this.renderItems()}\n      </div>\n    );\n  }\n\n  private renderItems(): HTMLDivElement {\n    if (!this.isopen) {\n      return;\n    }\n\n    return (\n      <div\n        class={this.searchValue && \"search\"}\n        tabindex={-1}\n      >\n        {this.renderList(this.renderItemsList)}\n        {this.searchValue && this.renderCloseButton()}\n      </div>\n    );\n  }\n\n  private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n    return (\n      <z-myz-list-item\n        id={item.id}\n        listitemid={item.id}\n        action={`combo-li-${this.inputid}`}\n        underlined={index !== length - 1}\n        class={this.size}\n      >\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={item.checked}\n          htmlid={`combo-checkbox-${this.inputid}-${item.id}`}\n          label={item.name}\n          disabled={!item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n        />\n      </z-myz-list-item>\n    );\n  }\n\n  private renderList(items: ComboItem[]): HTMLUListElement {\n    if (!items) {\n      return;\n    }\n    if (!items.length && this.searchValue) {\n      return this.renderNoSearchResults();\n    }\n\n    if (this.hasgroupitems) {\n      return this.renderGroups(this.itemsList);\n    }\n\n    return (\n      <ul>\n        {items.map((item, i) => {\n          return this.renderItem(item, i, items.length);\n        })}\n      </ul>\n    );\n  }\n\n  private renderGroups(items: ComboItem[]): HTMLUListElement {\n    const newData = items.reduce((group, item, index) => {\n      const {category} = item;\n      const zListItem = this.renderItem(item, index, items.length);\n\n      group[category] = group[category] ?? [];\n      group[category].push(zListItem);\n\n      return group;\n    }, {});\n\n    const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n      return (\n        <z-list-group divider-type={ListDividerType.ELEMENT}>\n          <span\n            class=\"body-3-sb z-list-group-title\"\n            slot=\"header-title\"\n          >\n            {key}\n          </span>\n          {value.map((item) => item)}\n        </z-list-group>\n      );\n    });\n\n    return <ul>{listGroups}</ul>;\n  }\n\n  private renderNoSearchResults(): HTMLUListElement {\n    return (\n      <ul>\n        <z-myz-list-item\n          id=\"no-results\"\n          text={this.noresultslabel}\n          listitemid=\"no-results\"\n          icon=\"multiply-circle\"\n          class={this.size}\n        />\n      </ul>\n    );\n  }\n\n  private renderCloseButton(): HTMLDivElement {\n    return (\n      <div>\n        <a\n          onClick={() => this.closeFilterItems()}\n          onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n          role=\"button\"\n          tabindex={0}\n        >\n          {this.closesearchtext}\n        </a>\n      </div>\n    );\n  }\n\n  private renderSearchInput(): ZInput {\n    if (!this.isopen) {\n      return;\n    }\n\n    return (\n      <z-input\n        htmlid={`${this.inputid}_search`}\n        label={this.searchlabel}\n        placeholder={this.searchplaceholder}\n        htmltitle={this.searchtitle}\n        type={this.inputType}\n        value={this.searchValue}\n        message={false}\n        size={this.size}\n        onInputChange={(e: CustomEvent) => {\n          if (e.detail.keycode === 27) {\n            return this.closeFilterItems();\n          }\n          this.searchValue = e.detail.value;\n        }}\n      />\n    );\n  }\n\n  private renderCheckAll(): HTMLDivElement {\n    if (this.searchValue) {\n      return;\n    }\n\n    const allChecked = this.selectedCounter === this.itemsList.length;\n\n    return (\n      <div class=\"check-all-wrapper\">\n        <z-input\n          type={InputType.CHECKBOX}\n          checked={allChecked}\n          htmlid={`combo-checkbox-${this.inputid}-check-all`}\n          label={allChecked ? this.uncheckalltext : this.checkalltext}\n          disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n          size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n        />\n      </div>\n    );\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        data-action={`combo-${this.inputid}`}\n        class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n        id={this.inputid}\n      >\n        {this.renderHeader()}\n        {!this.disabled && this.renderContent()}\n      </div>\n    );\n  }\n}\n"]}