@zanichelli/albe-web-components 19.2.1 → 19.2.3-RC1

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ControlSize, InputType, KeyboardCode, ListDividerType, ListSize } from "../../beans";
-import { handleKeyboardSubmit, randomId } from "../../utils/utils";
+import { getPlainText, randomId } from "../../utils/utils";
 export class ZCombobox {
     watchItems() {
         this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
@@ -10,37 +10,36 @@ export class ZCombobox {
     watchSearchValue() {
         this.filterItems(this.searchValue);
     }
-    watchCheckboxes() {
-        this.checkboxes.forEach((item, index) => item.setAttribute("tabindex", index === 0 ? "0" : "-1"));
-    }
     emitComboboxChange() {
         this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
     }
     constructor() {
-        this.itemsList = [];
-        this.inputType = InputType.TEXT;
+        /** input unique id */
         this.inputid = `combo-${randomId()}`;
-        this.items = undefined;
-        this.label = undefined;
+        /** the combobox is disabled */
         this.disabled = false;
+        /** show search input flag (optional) */
         this.hassearch = false;
-        this.searchlabel = undefined;
-        this.searchplaceholder = undefined;
-        this.searchtitle = undefined;
+        /** no result text message */
         this.noresultslabel = "Nessun risultato";
+        /** toggle combo list opening flag */
         this.isopen = false;
+        /** fixed style flag */
         this.isfixed = false;
+        /** show "check all" checkbox (optional) */
         this.hascheckall = false;
+        /** check all label (optional) */
         this.checkalltext = "Seleziona tutti";
+        /** uncheck all label (optional) */
         this.uncheckalltext = "Deseleziona tutti";
+        /** max number of checkable items (0 = unlimited) */
         this.maxcheckableitems = 0;
-        this.hasgroupitems = undefined;
+        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
         this.size = ControlSize.BIG;
-        this.searchValue = undefined;
-        this.selectedCounter = undefined;
-        this.renderItemsList = [];
-        this.focusedItemId = undefined;
-        this.checkboxes = [];
+        this.renderItemsList = []; // used for render only
+        this.focusedItemId = "";
+        this.itemsList = [];
+        this.inputType = InputType.TEXT;
         this.toggleComboBox = this.toggleComboBox.bind(this);
         this.closeFilterItems = this.closeFilterItems.bind(this);
     }
@@ -50,21 +49,6 @@ export class ZCombobox {
     componentWillRender() {
         this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
     }
-    componentDidRender() {
-        const checkboxes = this.getAllCheckboxes();
-        if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {
-            this.checkboxes = checkboxes;
-        }
-    }
-    getItemId(item) {
-        return `combo-checkbox-${this.inputid}-${item.id}`;
-    }
-    getCheckboxClass() {
-        return `combo-item-checkbox-input-${this.inputid}`;
-    }
-    getAllCheckboxes() {
-        return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`));
-    }
     getControlToListSize() {
         switch (this.size) {
             case ControlSize.X_SMALL:
@@ -75,52 +59,111 @@ export class ZCombobox {
                 return ListSize.LARGE;
         }
     }
-    handleSelectArrowsNavigation(e, currId) {
-        if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key) || !this.isopen) {
+    getOptionId(itemId) {
+        return `${this.inputid}-option-${itemId}`;
+    }
+    getCheckAllOptionId() {
+        return `${this.inputid}-check-all`;
+    }
+    allOptionsSelected() {
+        return this.selectedCounter === this.itemsList.length;
+    }
+    hasReachedMaxSelections() {
+        return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);
+    }
+    handleHeaderKeyDown(e) {
+        if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {
+            this.toggleComboBox();
+        }
+        if (!this.isopen || this.hassearch) {
+            return;
+        }
+        switch (e.code) {
+            case KeyboardCode.SPACE:
+            case KeyboardCode.ENTER:
+                if (this.focusedItemId) {
+                    e.preventDefault();
+                    this.checkOption(this.focusedItemId);
+                }
+                break;
+            case KeyboardCode.ESC:
+                if (this.focusedItemId) {
+                    this.focusedItemId = "";
+                }
+                break;
+            case KeyboardCode.ARROW_DOWN:
+            case KeyboardCode.ARROW_UP:
+                this.handleArrowsNavigation(e);
+                break;
+        }
+    }
+    handleInputKeyDown(e) {
+        switch (e.code) {
+            case KeyboardCode.ENTER:
+            case KeyboardCode.SPACE:
+                if (this.focusedItemId) {
+                    e.preventDefault();
+                    this.checkOption(this.focusedItemId);
+                    break;
+                }
+                break;
+            case KeyboardCode.ARROW_DOWN:
+            case KeyboardCode.ARROW_UP:
+                this.handleArrowsNavigation(e);
+                break;
+            case KeyboardCode.ESC:
+                if (this.focusedItemId) {
+                    this.focusedItemId = "";
+                    break;
+                }
+                this.closeFilterItems();
+                break;
+            case KeyboardCode.TAB:
+                this.focusedItemId = "";
+                break;
+        }
+    }
+    checkOption(optionId) {
+        if (optionId === this.getCheckAllOptionId()) {
+            this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: !this.allOptionsSelected() })));
+            this.focusedItemId = this.getCheckAllOptionId();
+        }
+        else {
+            this.itemsList = this.itemsList.map((i) => {
+                if (optionId === this.getOptionId(i.id)) {
+                    i.checked = !i.checked;
+                }
+                return i;
+            });
+        }
+        this.updateRenderItemsList();
+        this.emitComboboxChange();
+    }
+    handleArrowsNavigation(e) {
+        if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code) || !this.isopen) {
             return;
         }
         e.preventDefault();
         e.stopPropagation();
-        const currElem = this.element.shadowRoot.querySelector(`#${currId}`);
-        const checkboxes = this.checkboxes;
-        if (!checkboxes.length) {
+        const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;
+        const options = Array.from(this.element.shadowRoot.querySelectorAll('[role="option"]'));
+        if (!options.length) {
             return;
         }
-        const currElemIndex = currElem ? checkboxes.indexOf(currElem) : null;
+        const currElemIndex = currElem ? options.indexOf(currElem) : null;
         const firstElemIndex = 0;
-        const lastElemIndex = checkboxes.length - 1;
+        const lastElemIndex = options.length - 1;
         let nextElem = null;
-        if (e.key === KeyboardCode.ARROW_DOWN) {
+        if (e.code === KeyboardCode.ARROW_DOWN) {
             nextElem =
-                currElemIndex === null || currElemIndex === lastElemIndex
-                    ? checkboxes[firstElemIndex]
-                    : checkboxes[currElemIndex + 1];
+                currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] || options[lastElemIndex];
         }
-        else if (e.key === KeyboardCode.ARROW_UP) {
+        else if (e.code === KeyboardCode.ARROW_UP) {
             nextElem =
-                currElemIndex === null || currElemIndex === firstElemIndex
-                    ? checkboxes[lastElemIndex]
-                    : checkboxes[currElemIndex - 1];
-        }
-        this.focusComboboxItem(nextElem);
-    }
-    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();
+                currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] || options[firstElemIndex];
         }
-    }
-    handleCheckboxFocus(id) {
-        this.focusedItemId = id;
-    }
-    focusComboboxItem(elem) {
-        this.checkboxes.forEach(function (item) {
-            item.setAttribute("tabindex", "-1");
-        });
-        elem.setAttribute("tabindex", "0");
-        elem.focus();
+        this.focusedItemId = nextElem.id;
+        nextElem.scrollIntoView({ block: "nearest", container: "nearest" });
     }
     updateRenderItemsList() {
         if (this.searchValue) {
@@ -154,11 +197,6 @@ export class ZCombobox {
             return start >= 0;
         });
     }
-    checkAll(checked = true) {
-        this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: checked })));
-        this.resetRenderItemsList();
-        this.emitComboboxChange();
-    }
     closeFilterItems() {
         this.searchValue = "";
         this.resetRenderItemsList();
@@ -168,12 +206,14 @@ export class ZCombobox {
     }
     getComboboxA11yAttributes(isZInput) {
         const role = "combobox";
+        const ariaLabel = this.htmlAriaLabel;
         const ariaExpanded = this.isopen ? "true" : "false";
         const ariaActivedescendant = this.isopen ? this.focusedItemId : "";
         const ariaControls = `${this.inputid}_list`;
         if (isZInput) {
             return {
                 "role": role,
+                "aria-label": ariaLabel,
                 "html-aria-expanded": ariaExpanded,
                 "html-aria-activedescendant": ariaActivedescendant,
                 "html-aria-controls": ariaControls,
@@ -181,36 +221,31 @@ export class ZCombobox {
         }
         return {
             "role": role,
+            "aria-label": ariaLabel,
             "aria-expanded": ariaExpanded,
             "aria-activedescendant": ariaActivedescendant,
             "aria-controls": ariaControls,
         };
     }
     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-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false" }, h("span", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
+        const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};
+        return (h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false" }, comboboxA11yAttributes), h("span", { class: "body-3", "aria-label": this.label
+                ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`
+                : undefined }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
     }
     renderContent() {
-        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), !this.hassearch ? h("span", Object.assign({}, this.getComboboxA11yAttributes(false))) : null, h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": Array.from(this.element.shadowRoot.querySelectorAll("[role='option']"))
-                .map((item) => item.id)
-                .join(" ") }, this.hascheckall && this.renderCheckAll(), this.renderItems())));
+        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item.id)).join(" ")}` }, this.renderItems())));
     }
     renderItems() {
         return (h("div", { class: this.searchValue && "search", tabIndex: -1, role: "presentation" }, this.renderList(this.renderItemsList)));
     }
     renderItem(item, index, length) {
-        const isDisabled = !item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems;
-        return (h("z-list-element", { id: `option-${item.id}`, htmlTabindex: null, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize(), role: isDisabled ? "presentation" : "option", "aria-selected": item.checked ? "true" : "false" }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: this.getItemId(item), label: item.name, class: this.getCheckboxClass(), disabled: isDisabled, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, onKeyDown: (e) => this.handleSelectArrowsNavigation(e, this.getItemId(item)), onInputCheck: (e) => {
-                this.itemsList = this.itemsList.map((i) => {
-                    if (item.id === i.id) {
-                        i.checked = e.detail.checked;
-                    }
-                    return i;
-                });
-                this.updateRenderItemsList();
-                this.emitComboboxChange();
-            }, onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
+        const optionId = this.getOptionId(item.id);
+        const isDisabled = !item.checked && this.hasReachedMaxSelections();
+        return (h("z-list-element", { htmlTabindex: -1, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize(), role: "presentation", disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => {
+                this.focusedItemId = "";
+                this.checkOption(optionId);
+            } }, h("z-icon", { name: item.checked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": item.checked ? "true" : "false", "aria-label": isDisabled ? undefined : getPlainText(item.name) }, h("span", { "aria-hidden": "true", innerHTML: item.name })))));
     }
     renderList(items) {
         if (!items) {
@@ -222,47 +257,44 @@ export class ZCombobox {
         if (this.hasgroupitems) {
             return this.renderGroups(items);
         }
-        return (h("ul", { role: "presentation" }, items.map((item, i) => {
+        return (h("ul", { role: "presentation" }, this.renderCheckAll(), items.map((item, i) => {
             return this.renderItem(item, i, items.length);
         })));
     }
     renderGroups(items) {
         const newData = items.reduce((group, item, index) => {
             var _a;
-            const { category } = item;
+            const category = item.category || "Altra categoria";
             const zListItem = this.renderItem(item, index, items.length);
             group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
             group[category].push(zListItem);
             return group;
         }, {});
-        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)));
+        const listGroups = Object.entries(newData).map(([key, value], index) => {
+            return (h("z-list-group", { size: this.getControlToListSize(), "divider-type": ListDividerType.ELEMENT, "aria-labelledby": `${this.inputid}_list_group_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.inputid}_list_group_${index}`, "aria-hidden": "true" }, key), value.map((item) => item)));
         });
-        return h("ul", { role: "presentation" }, listGroups);
+        return (h("ul", { role: "presentation" }, this.renderCheckAll(), listGroups));
     }
     renderNoSearchResults() {
         return (h("div", { class: "no-results" }, h("span", null, this.noresultslabel)));
     }
     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, "html-aria-autocomplete": "list" }, this.getComboboxA11yAttributes(true), { onKeyUp: (e) => {
-                if (e.key === KeyboardCode.ESC) {
-                    this.closeFilterItems();
-                }
-                this.handleSelectArrowsNavigation(e);
-            }, onInputChange: (e) => {
+        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, "html-aria-autocomplete": "list" }, this.getComboboxA11yAttributes(true), { onKeyDown: (e) => this.handleInputKeyDown(e), onInputChange: (e) => {
                 this.searchValue = e.detail.value;
+                this.focusedItemId = "";
             } })));
     }
     renderCheckAll() {
-        if (this.searchValue) {
+        if (!this.hascheckall || this.searchValue) {
             return;
         }
-        const checkAllId = `combo-checkbox-${this.inputid}-check-all`;
-        const allChecked = this.selectedCounter === this.itemsList.length;
-        return (h("div", { class: "check-all-wrapper", id: "option-check-all", role: "option" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
+        const optionId = this.getCheckAllOptionId();
+        const allChecked = this.allOptionsSelected();
+        const isDisabled = this.hasReachedMaxSelections() || (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);
+        return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: '6cb14e4919c53bae374f2c9441b0524a06a4233d', "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: 'f65a92eded2c6cd7d4bb42ddc5f667806a4f5582', "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"; }
@@ -292,8 +324,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "input unique id"
                 },
-                "attribute": "inputid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "inputid",
                 "defaultValue": "`combo-${randomId()}`"
             },
             "items": {
@@ -306,7 +340,8 @@ export class ZCombobox {
                         "ComboItem": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ComboItem"
+                            "id": "src/beans/index.tsx::ComboItem",
+                            "referenceLocation": "ComboItem"
                         }
                     }
                 },
@@ -316,8 +351,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "list items array"
                 },
-                "attribute": "items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items"
             },
             "label": {
                 "type": "string",
@@ -333,8 +370,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "label text"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "disabled": {
                 "type": "boolean",
@@ -350,8 +389,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "the combobox is disabled"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "hassearch": {
@@ -368,8 +409,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "show search input flag (optional)"
                 },
-                "attribute": "hassearch",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hassearch",
                 "defaultValue": "false"
             },
             "searchlabel": {
@@ -386,8 +429,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input label text (optional)"
                 },
-                "attribute": "searchlabel",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchlabel"
             },
             "searchplaceholder": {
                 "type": "string",
@@ -403,8 +448,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input placeholder text (optional)"
                 },
-                "attribute": "searchplaceholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchplaceholder"
             },
             "searchtitle": {
                 "type": "string",
@@ -420,8 +467,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input title text (optional)"
                 },
-                "attribute": "searchtitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchtitle"
             },
             "noresultslabel": {
                 "type": "string",
@@ -437,8 +486,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "no result text message"
                 },
-                "attribute": "noresultslabel",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "noresultslabel",
                 "defaultValue": "\"Nessun risultato\""
             },
             "isopen": {
@@ -455,8 +506,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "toggle combo list opening flag"
                 },
-                "attribute": "isopen",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isopen",
                 "defaultValue": "false"
             },
             "isfixed": {
@@ -473,8 +526,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "fixed style flag"
                 },
-                "attribute": "isfixed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isfixed",
                 "defaultValue": "false"
             },
             "hascheckall": {
@@ -491,8 +546,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "show \"check all\" checkbox (optional)"
                 },
-                "attribute": "hascheckall",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hascheckall",
                 "defaultValue": "false"
             },
             "checkalltext": {
@@ -509,8 +566,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "check all label (optional)"
                 },
-                "attribute": "checkalltext",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checkalltext",
                 "defaultValue": "\"Seleziona tutti\""
             },
             "uncheckalltext": {
@@ -527,8 +586,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "uncheck all label (optional)"
                 },
-                "attribute": "uncheckalltext",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "uncheckalltext",
                 "defaultValue": "\"Deseleziona tutti\""
             },
             "maxcheckableitems": {
@@ -545,8 +606,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "max number of checkable items (0 = unlimited)"
                 },
-                "attribute": "maxcheckableitems",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "maxcheckableitems",
                 "defaultValue": "0"
             },
             "hasgroupitems": {
@@ -563,8 +626,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "group items by category"
                 },
-                "attribute": "hasgroupitems",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hasgroupitems"
             },
             "size": {
                 "type": "string",
@@ -576,7 +641,8 @@ export class ZCombobox {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -586,9 +652,30 @@ export class ZCombobox {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
+            },
+            "htmlAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the combobox aria-label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-label"
             }
         };
     }
@@ -597,8 +684,7 @@ export class ZCombobox {
             "searchValue": {},
             "selectedCounter": {},
             "renderItemsList": {},
-            "focusedItemId": {},
-            "checkboxes": {}
+            "focusedItemId": {}
         };
     }
     static get events() {
@@ -627,10 +713,6 @@ export class ZCombobox {
             }, {
                 "propName": "searchValue",
                 "methodName": "watchSearchValue"
-            }, {
-                "propName": "checkboxes",
-                "methodName": "watchCheckboxes"
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -40,6 +40,7 @@ const StoryMeta = {
         searchtitle: "Search Title",
         uncheckalltext: "Uncheck All",
         size: ControlSize.BIG,
+        htmlAriaLabel: "",
     },
     render: (args) => html `<z-combobox
       checkalltext=${args.checkalltext}
@@ -59,6 +60,7 @@ const StoryMeta = {
       searchtitle=${args.searchtitle}
       uncheckalltext=${args.uncheckalltext}
       size=${args.size}
+      html-aria-label=${args.htmlAriaLabel}
     />`,
 };
 export default StoryMeta;
@@ -73,4 +75,3 @@ export const Disabled = {
         disabled: true,
     },
 };
-//# sourceMappingURL=index.stories.js.map