npm - @zanichelli/albe-web-components - Versions diffs - 19.2.1 → 19.2.3-RC1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1554) hide show

package/dist/cjs/z-combobox.cjs.entry.js CHANGED Viewed

@@ -1,14 +1,11 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-2H1EJ2Tl.js');
+var index$1 = require('./index-wGaSHN1_.js');
+var utils = require('./utils-Ctc6JP2n.js');
+require('./breakpoints-B7vFm-3T.js');
-const index = require('./index-96af6326.js');
-const index$1 = require('./index-e30d0503.js');
-const utils = require('./utils-e8b453d5.js');
-require('./breakpoints-8a1e87e0.js');
-const stylesCss = ".z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n    calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
-const ZComboboxStyle0 = stylesCss;
+const stylesCss = () => `.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}:host{display:block;min-width:290px;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}:host .open-combo-data z-list-element[disabled]{pointer-events:none}:host .open-combo-data z-list-element .option-wrap{display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:var(--space-unit)}:host .open-combo-data z-list-element[size="medium"] .option-wrap,:host .open-combo-data z-list-element[size="small"] .option-wrap{--z-icon-width:16px;--z-icon-height:16px;font-size:var(--font-size-2);gap:calc(var(--space-unit) / 2)}:host .open-combo-data z-list-element .option-wrap>z-icon{fill:var(--color-primary01)}:host .open-combo-data z-list-element[disabled] .option-wrap>z-icon{fill:var(--color-disabled01)}:host .open-combo-data z-list-element .option-wrap>z-icon.focused{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary);outline:none}:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus,:host .open-combo-data z-list-element .option-wrap>[role="option"]:focus-visible{outline:none}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)     calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}`;
 const ZCombobox = class {
     watchItems() {
@@ -19,39 +16,38 @@ const ZCombobox = class {
     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(hostRef) {
         index.registerInstance(this, hostRef);
         this.comboboxChange = index.createEvent(this, "comboboxChange", 7);
-        this.itemsList = [];
-        this.inputType = index$1.InputType.TEXT;
+        /** input unique id */
         this.inputid = `combo-${utils.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 = index$1.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 = index$1.InputType.TEXT;
         this.toggleComboBox = this.toggleComboBox.bind(this);
         this.closeFilterItems = this.closeFilterItems.bind(this);
     }
@@ -61,21 +57,6 @@ const ZCombobox = class {
     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 index$1.ControlSize.X_SMALL:
@@ -86,52 +67,111 @@ const ZCombobox = class {
                 return index$1.ListSize.LARGE;
         }
     }
-    handleSelectArrowsNavigation(e, currId) {
-        if (![index$1.KeyboardCode.ARROW_DOWN, index$1.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 === index$1.KeyboardCode.ENTER && !this.focusedItemId) {
+            this.toggleComboBox();
+        }
+        if (!this.isopen || this.hassearch) {
+            return;
+        }
+        switch (e.code) {
+            case index$1.KeyboardCode.SPACE:
+            case index$1.KeyboardCode.ENTER:
+                if (this.focusedItemId) {
+                    e.preventDefault();
+                    this.checkOption(this.focusedItemId);
+                }
+                break;
+            case index$1.KeyboardCode.ESC:
+                if (this.focusedItemId) {
+                    this.focusedItemId = "";
+                }
+                break;
+            case index$1.KeyboardCode.ARROW_DOWN:
+            case index$1.KeyboardCode.ARROW_UP:
+                this.handleArrowsNavigation(e);
+                break;
+        }
+    }
+    handleInputKeyDown(e) {
+        switch (e.code) {
+            case index$1.KeyboardCode.ENTER:
+            case index$1.KeyboardCode.SPACE:
+                if (this.focusedItemId) {
+                    e.preventDefault();
+                    this.checkOption(this.focusedItemId);
+                    break;
+                }
+                break;
+            case index$1.KeyboardCode.ARROW_DOWN:
+            case index$1.KeyboardCode.ARROW_UP:
+                this.handleArrowsNavigation(e);
+                break;
+            case index$1.KeyboardCode.ESC:
+                if (this.focusedItemId) {
+                    this.focusedItemId = "";
+                    break;
+                }
+                this.closeFilterItems();
+                break;
+            case index$1.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 (![index$1.KeyboardCode.ARROW_DOWN, index$1.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 === index$1.KeyboardCode.ARROW_DOWN) {
+        if (e.code === index$1.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 === index$1.KeyboardCode.ARROW_UP) {
+        else if (e.code === index$1.KeyboardCode.ARROW_UP) {
             nextElem =
-                currElemIndex === null || currElemIndex === firstElemIndex
-                    ? checkboxes[lastElemIndex]
-                    : checkboxes[currElemIndex - 1];
+                currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] || options[firstElemIndex];
         }
-        this.focusComboboxItem(nextElem);
-    }
-    handleHeaderKeyboardEvent(ev) {
-        if (ev.key === index$1.KeyboardCode.SPACE) {
-            ev.preventDefault();
-        }
-        if ((ev.key === index$1.KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === index$1.KeyboardCode.ARROW_UP && this.isopen)) {
-            this.toggleComboBox();
-        }
-    }
-    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) {
@@ -165,11 +205,6 @@ const ZCombobox = class {
             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();
@@ -179,12 +214,14 @@ const ZCombobox = class {
     }
     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,
@@ -192,36 +229,31 @@ const ZCombobox = class {
         }
         return {
             "role": role,
+            "aria-label": ariaLabel,
             "aria-expanded": ariaExpanded,
             "aria-activedescendant": ariaActivedescendant,
             "aria-controls": ariaControls,
         };
     }
     renderHeader() {
-        return (index.h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-                this.handleHeaderKeyboardEvent(ev);
-            }, onKeyUp: (ev) => utils.handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false" }, index.h("span", { class: "body-3" }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", class: this.size })));
+        const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};
+        return (index.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), index.h("span", { class: "body-3", "aria-label": this.label
+                ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`
+                : undefined }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", class: this.size })));
     }
     renderContent() {
-        return (index.h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), !this.hassearch ? index.h("span", Object.assign({}, this.getComboboxA11yAttributes(false))) : null, index.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 (index.h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), index.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 (index.h("div", { class: this.searchValue && "search", tabIndex: -1, role: "presentation" }, this.renderList(this.renderItemsList)));
     }
     renderItem(item, index$2, length) {
-        const isDisabled = !item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems;
-        return (index.h("z-list-element", { id: `option-${item.id}`, htmlTabindex: null, dividerType: index$2 !== length - 1 ? index$1.ListDividerType.ELEMENT : index$1.ListDividerType.NONE, size: this.getControlToListSize(), role: isDisabled ? "presentation" : "option", "aria-selected": item.checked ? "true" : "false" }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: item.checked, htmlid: this.getItemId(item), label: item.name, class: this.getCheckboxClass(), disabled: isDisabled, size: this.size === index$1.ControlSize.X_SMALL ? index$1.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 (index.h("z-list-element", { htmlTabindex: -1, dividerType: index$2 !== length - 1 ? index$1.ListDividerType.ELEMENT : index$1.ListDividerType.NONE, size: this.getControlToListSize(), role: "presentation", disabled: !!isDisabled }, index.h("span", { class: "option-wrap", role: "presentation", onClick: () => {
+                this.focusedItemId = "";
+                this.checkOption(optionId);
+            } }, index.h("z-icon", { name: item.checked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), index.h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": item.checked ? "true" : "false", "aria-label": isDisabled ? undefined : utils.getPlainText(item.name) }, index.h("span", { "aria-hidden": "true", innerHTML: item.name })))));
     }
     renderList(items) {
         if (!items) {
@@ -233,57 +265,55 @@ const ZCombobox = class {
         if (this.hasgroupitems) {
             return this.renderGroups(items);
         }
-        return (index.h("ul", { role: "presentation" }, items.map((item, i) => {
+        return (index.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 (index.h("z-list-group", { "divider-type": index$1.ListDividerType.ELEMENT }, index.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$2) => {
+            return (index.h("z-list-group", { size: this.getControlToListSize(), "divider-type": index$1.ListDividerType.ELEMENT, "aria-labelledby": `${this.inputid}_list_group_${index$2}` }, index.h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.inputid}_list_group_${index$2}`, "aria-hidden": "true" }, key), value.map((item) => item)));
         });
-        return index.h("ul", { role: "presentation" }, listGroups);
+        return (index.h("ul", { role: "presentation" }, this.renderCheckAll(), listGroups));
     }
     renderNoSearchResults() {
         return (index.h("div", { class: "no-results" }, index.h("span", null, this.noresultslabel)));
     }
     renderSearchInput() {
-        return (index.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 === index$1.KeyboardCode.ESC) {
-                    this.closeFilterItems();
-                }
-                this.handleSelectArrowsNavigation(e);
-            }, onInputChange: (e) => {
+        return (index.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 (index.h("div", { class: "check-all-wrapper", id: "option-check-all", role: "option" }, index.h("z-input", { type: index$1.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 === index$1.ControlSize.X_SMALL ? index$1.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 (index.h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: index$1.ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, index.h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, index.h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), index.h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (index.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 (index.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()));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
-        "items": ["watchItems"],
-        "searchValue": ["watchSearchValue"],
-        "checkboxes": ["watchCheckboxes"]
+        "items": [{
+                "watchItems": 0
+            }],
+        "searchValue": [{
+                "watchSearchValue": 0
+            }]
     }; }
 };
-ZCombobox.style = ZComboboxStyle0;
+ZCombobox.style = stylesCss();
 exports.z_combobox = ZCombobox;
-//# sourceMappingURL=z-combobox.cjs.entry.js.map

package/dist/cjs/z-cover-hero.cjs.entry.js CHANGED Viewed

@@ -1,18 +1,27 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-2H1EJ2Tl.js');
+var index$1 = require('./index-wGaSHN1_.js');
-const index = require('./index-96af6326.js');
-const index$1 = require('./index-e30d0503.js');
-const stylesCss = ":host{--cover-hero-overlay:linear-gradient(270deg, #0000 0%, #000000e6 100%);--cover-hero-text-color:var(--color-text-inverse);display:block;overflow:hidden}:host,*{box-sizing:border-box}:host .main-container{position:relative;width:100%;align-items:baseline}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .main-container .cover-container{position:relative;width:100%;padding-top:calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));background-color:var(--gray600)}::slotted([slot=\"cover\"]){position:absolute;display:block;width:100%;height:100%;inset:0;object-fit:cover;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container{height:100%}:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container .cover-container{position:absolute;z-index:-1;height:100%;padding:0}:host([variant=\"overlay\"]) .main-container .cover-container::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:\"\"}:host([variant=\"overlay\"]:is([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container .content-container{position:absolute;inset:0}:host([variant=\"overlay\"]) .main-container .content-container{height:100%;padding:var(--grid-margin)}:host([variant=\"stacked\"]){--cover-hero-text-color:var(--color-default-text)}:host([variant=\"stacked\"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}";
-const ZCoverHeroStyle0 = stylesCss;
+const stylesCss = () => `:host{--cover-hero-overlay:linear-gradient(270deg, #0000 0%, #000000e6 100%);--cover-hero-text-color:var(--color-text-inverse);display:block;overflow:hidden}:host,*{box-sizing:border-box}:host .main-container{position:relative;width:100%;align-items:baseline}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .main-container .cover-container{position:relative;width:100%;padding-top:calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));background-color:var(--gray600)}::slotted([slot="cover"]){position:absolute;display:block;width:100%;height:100%;inset:0;object-fit:cover;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant="overlay"]:not([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container{height:100%}:host([variant="overlay"]:not([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container .cover-container{position:absolute;z-index:-1;height:100%;padding:0}:host([variant="overlay"]) .main-container .cover-container::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:""}:host([variant="overlay"]:is([preserve-aspect-ratio=""],[preserve-aspect-ratio="true"])) .main-container .content-container{position:absolute;inset:0}:host([variant="overlay"]) .main-container .content-container{height:100%;padding:var(--grid-margin)}:host([variant="stacked"]){--cover-hero-text-color:var(--color-default-text)}:host([variant="stacked"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}`;
 const ZCoverHero = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Cover hero variant. Can be `OVERLAY` or `STACKED`.
+         */
         this.variant = index$1.CoverHeroVariant.OVERLAY;
+        /**
+         * Vertical content position (for `STACKED` variant).
+         */
         this.contentPosition = index$1.CoverHeroContentPosition.TOP;
+        /**
+         * Whether to keep the image aspect ratio.
+         * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;
+         * instead, the height of the component follows the content's one.
+         * Note: it may be necessary to set a min and/or max height to the component.
+         */
         this.preserveAspectRatio = true;
     }
     /**
@@ -33,16 +42,14 @@ const ZCoverHero = class {
         return (index.h("div", { class: "content-container" }, index.h("slot", { name: "content" })));
     }
     render() {
-        return (index.h(index.Host, { key: '1eb5d39f26e19f213d435c185167eb83500225f3' }, this.variant === index$1.CoverHeroVariant.STACKED &&
+        return (index.h(index.Host, { key: '0e8ec76a2293bbf7044d2a5d0ec951ac096adcd1' }, this.variant === index$1.CoverHeroVariant.STACKED &&
             this.contentPosition === index$1.CoverHeroContentPosition.TOP &&
-            this.renderContent(), index.h("div", { key: '61c495773839b7741f674719325fe98a65956986', class: "main-container" }, index.h("div", { key: '0ea2f83f40f60017fb2e7a4501cb67c34d954f6c', class: "cover-container" }, index.h("slot", { key: '68a40d93440b22ce2afb9ff8db3cb9ca90ec7263', name: "cover" })), index.h("slot", { key: 'c29feaf859382807e0e55bcf2db27a98387c2e96', name: "info-reveal" }), this.variant === index$1.CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === index$1.CoverHeroVariant.STACKED &&
+            this.renderContent(), index.h("div", { key: 'e2dd8963eb05d5a1a602b05d6275d52c01b8dbc9', class: "main-container" }, index.h("div", { key: '3b537c3b07906fd72795b105e4189252bf876b51', class: "cover-container" }, index.h("slot", { key: 'f99228a940cfc96ae4ff98a6b79df622d033e00d', name: "cover" })), index.h("slot", { key: '86b43980717df411f76b098628d83fa80c8dcff6', name: "info-reveal" }), this.variant === index$1.CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === index$1.CoverHeroVariant.STACKED &&
             this.contentPosition === index$1.CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }
     get host() { return index.getElement(this); }
 };
-ZCoverHero.style = ZCoverHeroStyle0;
+ZCoverHero.style = stylesCss();
 exports.z_cover_hero = ZCoverHero;
-//# sourceMappingURL=z-cover-hero.cjs.entry.js.map