@zanichelli/albe-web-components 20.0.0 → 20.0.2-RC

package/dist/esm/z-app-header_12.entry.js

@@ -274,7 +274,7 @@ const ZAppHeader = class {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: '3c87b576bc0b22b6466d371cc1e5a6c92632cb3f', "menu-length": this.menuLength }, h("div", { key: '5fea095adcdc48b7ef7f1a2c0a9fbebb2f774f7c', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '4c2af7cd90d3aed866fc0bb1e12c3a7040b8eab7', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '123f4dbda4424a699098f8cd56e6e0af285555d9', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '7e46ed5fcf49e61c69cd808f323e642bd1dc8f44', name: "top-subtitle" }))), h("div", { key: '459505e2ebe168001292351e85002584b6efed1f', class: "heading-title" }, h("slot", { key: '579d2eb490d5c876b0a7ffd111c923d2240a5e18', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'f6fc213fd474fd75222e2dafc044624f4c468297', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '792cf8b185cf12ae234a5e75f8dc4db33fd97e98', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '6f8e3558678da2a099aa86f63d2dcbc4be9762a3', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'aa700689a8b05503079e69a5808442db280e8e4e', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'a464234ec0ce538282727aa83c43d30b5ea23ffa', "menu-length": this.menuLength }, h("div", { key: '0f41b7571c5e1acf4298910ab415ca986616a40e', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '9b9d45789be83c2db23e035a72b60cd4910b68b2', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'bd1196659bc19936603de3994011b82ea7649147', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '5d50957c5b91c138ad21efb849fdd371e93057ae', name: "top-subtitle" }))), h("div", { key: '47a21fe5a5b508fe23cf4e185813743e8dce0fab', class: "heading-title" }, h("slot", { key: '1c027312231d68cb2ebc625b6aeed177d2e22cf4', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: '6917fa59229dc3d80b5c3ca472bd14b671be9e27', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'e3ac84ff0933a8955fa7433f8ea0ae94e5eec080', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '1f3461f8b2b99d8515774265c07ddcb850ed7757', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'eda425c16602287225554fcca0c65661b46e0366', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -349,7 +349,7 @@ const ZDivider = class {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '336d858e90aea1150ee35c4cb25bb49c00e658f7', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '372389b3d857bf0c3cc5ad9191224bc1b0c94580', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
 };
 ZDivider.style = stylesCss$a();
@@ -403,7 +403,7 @@ const ZIcon = class {
         return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (h(Host, { key: 'dfb975a522bb0efeee162d107c49e683c543edfd', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (h(Host, { key: 'c64019d3c25828c266b030224a74aaa6c9e8df33', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
 };
 ZIcon.style = stylesCss$9();
@@ -414,7 +414,7 @@ const stylesTextCss = () => `.text-wrapper.sc-z-input>div.sc-z-input{position:re
 
 const stylesTextareaCss = () => `.textarea-wrapper.sc-z-input{width:100%;height:100%;padding:calc(var(--space-unit) * 1.5)}.textarea-wrapper.sc-z-input:not(.input-error,.input-success.sc-z-input,.input-warning).sc-z-input{background-color:var(--color-form-background)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;color:currentcolor;resize:none}`;
 
-const stylesCheckboxRadioCss = () => `.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-default-text);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;min-height:24px;align-items:center;padding:3px 0;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input{border-radius:50%}.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}`;
+const stylesCheckboxRadioCss = () => `.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-default-text);fill:var(--color-primary01-icon);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary-icon)}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;min-height:24px;align-items:center;padding:3px 0;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:16px;--z-icon-height:16px}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-2)}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{font-size:var(--font-size-1)}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}[size="small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,[size="x-small"].sc-z-input-h .checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:calc(var(--space-unit) * 0.5)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input{border-radius:50%}.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled03)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled03-icon)}`;
 
 const ZInput = class {
     constructor(hostRef) {
@@ -437,6 +437,8 @@ const ZInput = class {
         this.required = false;
         /** checked: available for checkbox, radio */
         this.checked = false;
+        /** indeterminate: available for checkbox */
+        this.indeterminate = false;
         /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
         this.message = true;
         /** the input label position: available for checkbox, radio */
@@ -459,6 +461,15 @@ const ZInput = class {
                 break;
         }
     }
+    watchIndeterminate() {
+        this.syncCheckboxIndeterminate();
+    }
+    syncCheckboxIndeterminate() {
+        if (this.type !== InputType.CHECKBOX || !this.inputRef) {
+            return;
+        }
+        this.inputRef.indeterminate = !!this.indeterminate;
+    }
     /** get checked status */
     async isChecked() {
         switch (this.type) {
@@ -638,17 +649,23 @@ const ZInput = class {
     }
     /* END textarea */
     handleCheck(ev) {
+        if (this.type === InputType.CHECKBOX && this.indeterminate) {
+            this.indeterminate = false;
+        }
         this.checked = ev.target.checked;
         this.emitInputCheck(this.checked);
     }
     /* START checkbox */
     renderCheckbox() {
         const ariaRequired = this.required ? { "aria-required": "true" } : {};
-        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, ariaRequired, this.getAriaAttributes(), this.getFocusBlurAttributes())), h("label", { htmlFor: this.htmlid, class: {
+        return (h("div", { class: "checkbox-wrapper" }, h("input", Object.assign({ id: this.htmlid, type: "checkbox", name: this.name, checked: this.indeterminate ? false : this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }, ariaRequired, this.getAriaAttributes(), this.getFocusBlurAttributes(), { ref: (el) => {
+                this.inputRef = el;
+                this.syncCheckboxIndeterminate();
+            } })), h("label", { htmlFor: this.htmlid, class: {
                 "checkbox-label": true,
                 "after": this.labelPosition === LabelPosition.RIGHT,
                 "before": this.labelPosition === LabelPosition.LEFT,
-            } }, h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", class: this.size }), this.label && h("span", { innerHTML: this.label }))));
+            } }, h("z-icon", { name: this.indeterminate ? "indeterminated-checkbox" : this.checked ? "checkbox-checked" : "checkbox", class: this.size }), this.label && h("span", { innerHTML: this.label }))));
     }
     /* END checkbox */
     /* START radio */
@@ -675,6 +692,11 @@ const ZInput = class {
         }
     }
     get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "indeterminate": [{
+                "watchIndeterminate": 0
+            }]
+    }; }
 };
 ZInput.style = stylesGeneralCss() + (stylesTextCss() + (stylesTextareaCss() + stylesCheckboxRadioCss()));
 
@@ -694,7 +716,7 @@ const ZInputMessage = class {
         };
     }
     render() {
-        return (h(Host, { key: '071b2ab5bc953c916bf735be221071740cf48293', role: this.htmlRole && this.message && this.status ? this.htmlRole : undefined, id: this.htmlId }, this.statusIcons[this.status] && this.message && h("z-icon", { key: '3fa408351b28bb7998bb743ebcf05fbebe40ff4e', name: this.statusIcons[this.status] }), h("span", { key: '48d15076d87920c4e5abee2aae5b4e65fb17cefc', innerHTML: this.message })));
+        return (h(Host, { key: 'acc2b74cb7dfda1d8529785c601d3fd92c2884dc', role: this.htmlRole && this.message && this.status ? this.htmlRole : undefined, id: this.htmlId }, this.statusIcons[this.status] && this.message && h("z-icon", { key: 'b9532d92b1a91d4218c30ed7bb543964c7822b03', name: this.statusIcons[this.status] }), h("span", { key: '933d1ac0a4194da9ec3f70ca715812d6cf3a7891', innerHTML: this.message })));
     }
 };
 ZInputMessage.style = stylesCss$8();
@@ -728,7 +750,7 @@ const ZList = class {
         });
     }
     render() {
-        return (h(Host, { key: '4c8361413296bef0a2156a5429825c156a15c5aa', role: this.htmlRole }, h("slot", { key: 'f7052cf14285ec66d66da900a7c76ef21c11c243' })));
+        return (h(Host, { key: 'aeaf7ef699223b8f5da68f49d8eb6ea5ea5cebb1', role: this.htmlRole }, h("slot", { key: '942882c5e4f03ef9dd64ec255b4cd8b8c5c2c107' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -902,7 +924,7 @@ const ZListElement = class {
         }
     }
     render() {
-        return (h(Host, { key: '42e6fa098aebb80fd08b32c8180bba0c76b1138d', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.htmlRole }, h("div", { key: '22e92a49de4b42710f68ca8e39ca1e90ae207427', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'adca72d657b257755ecda2cbd5b50757cf271cdf', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '479602f15efb7232a952b1b50db0db5a28f3ba7c', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: '08ed403eb2e275906b9cce38cd09d8ad26683efc', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.htmlRole }, h("div", { key: '64c3b6826652d98b557f32098ab87b3eccabed93', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '222187f25d69dd2fb6128ce6a0c5c81dd6a05b31', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: '1ff298c5fc086f1e303194b69de2324e5448508f', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -961,11 +983,11 @@ const ZListGroup = class {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (h(Host, { key: 'c9ad6b3a4638a506c8f8feec372af5f28792e02e', role: this.htmlRole }, h("div", { key: 'f86aa7a374f4a20e76cc528b5a4707cd6e136977', class: {
+        return (h(Host, { key: '6c87868fe2ef8cb8cba06bea94d4eaca25c3f0e7', role: this.htmlRole }, h("div", { key: 'bf277438554dd56b141040c8af5e2171eeedfdb7', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, h("slot", { key: 'd3c539979304203cadfdeae8f2cdca1c6c427bdd', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '2bc1c3ab6f13b45c164d75833a45ebb7f4f7d241', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: 'e8586a35a1eb7e346ea4336574bba98b5a8b1bc3' })));
+            } }, h("slot", { key: 'c3bf82239b5f0418e10bffbc4e1e26e4c3172dab', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '7127f3a0d6f501f305431d57068da428ccf8b90b', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '7dfc72c7992c5f28fce1a204ebabfa2a012b7708' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -1075,8 +1097,8 @@ const ZOffcanvas = class extends ReactiveControllerHost {
         super.disconnectedCallback();
     }
     render() {
-        return (h(Host, { key: '96384e6ed9437409a5f220d3a725707a47854dd9', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === OffCanvasVariant.OVERLAY ? "dialog" : null }, h("div", { key: 'b15d7e247efc10af823e1bbcf26a767e2a6a6f50', class: "canvas-container" }, h("div", { key: '7dd36d23274bb9f2ddc7b3d155b773d608072f4d', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: getTabbableElements(this.host).length ? undefined : -1 }, h("slot", { key: 'a43bd7fbeffb3ffb411f779383fbc1aa0a72feb5', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: '02ada3fbefde8cb24bb57db9d7e566d1834f855e', class: "backdrop", onClick: (ev) => {
+        return (h(Host, { key: 'c3e830f6e06a3f5bfcfa491417b3f4a04c694d22', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === OffCanvasVariant.OVERLAY ? "dialog" : null }, h("div", { key: '70347123fbb93082b6e38ff1de4a6364a4f433fb', class: "canvas-container" }, h("div", { key: 'ef277c0f8e0fc7c69fbd1c654f67f4ec40aed0ec', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: getTabbableElements(this.host).length ? undefined : -1 }, h("slot", { key: '1a2a5ff0fba5b2eae9dc90af4a0a238007008e11', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: 'fbe7fb00cfcc67e3021fbb50ab042a22d0cc5053', class: "backdrop", onClick: (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.open = false;
@@ -1274,7 +1296,10 @@ const ZSearchbar = class {
     }
     renderItem(item, index) {
         var _a;
-        return (h("z-list-element", { id: `list-item-${this.htmlid}-${index}`, role: "presentation", htmlTabindex: -1, onKeyDown: (e) => this.onListItemKeyDown(e, item), onClick: () => this.emitSearchItemClick(item) }, h("div", { class: "list-item ellipsis", role: "option", tabindex: 0 }, !!(item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { class: "item-icon", name: item.icon })), h("div", { class: "item-label body-3 mobile-body-4", title: item.label, innerHTML: this.renderItemLabel(item.label) }), !!(item === null || item === void 0 ? void 0 : item.tag) && h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && (h("z-list", { class: "sub-list", role: "group", "aria-label": item.label || undefined }, item.children.map((child, index) => this.renderItem(child, index))))));
+        return (h("z-list-element", { id: `list-item-${this.htmlid}-${index}`, role: "presentation", htmlTabindex: -1, onKeyDown: (e) => this.onListItemKeyDown(e, item), onClick: (e) => {
+                e.stopPropagation();
+                this.emitSearchItemClick(item);
+            } }, h("div", { class: "list-item ellipsis", role: "option", tabindex: 0 }, !!(item === null || item === void 0 ? void 0 : item.icon) && (h("z-icon", { class: "item-icon", name: item.icon })), h("div", { class: "item-label body-3 mobile-body-4", title: item.label, innerHTML: this.renderItemLabel(item.label) }), !!(item === null || item === void 0 ? void 0 : item.tag) && h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && (h("z-list", { class: "sub-list", role: "group", "aria-label": item.label || undefined }, item.children.map((child, index) => this.renderItem(child, index))))));
     }
     /**
      * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.
@@ -1306,17 +1331,17 @@ const ZSearchbar = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (h(Host, { key: '666eb25b14ff2ad53ad24a804429a5d5c7fb9921', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: '3bfc445797d517674f8fd359ebe78bd6a6bb67dc', class: "input-container" }, h("z-input", { key: 'a5332cea9ad170b49d0091290db492bc0109aec9', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
+        return (h(Host, { key: '82c926179762db33e8d1c425cac474affd59fea6', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, h("div", { key: '689d1cda6b0c217e5afe892627f31100858c1a72', class: "input-container" }, h("z-input", { key: 'd596769c9a346c4548c5b71d10bbe9b2456556ee', ref: (el) => (this.inputRef = el), htmlid: `input-${this.htmlid}`, message: false, placeholder: this.placeholder, onStopTyping: (e) => this.handleStopTyping(e), onKeyUp: (e) => {
                 handleEnterKeydSubmit(e, () => this.handleSubmit());
                 this.handleArrowsNavigation(e);
             }, onFocus: () => (this.showResults = true), value: this.searchString || ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.label), size: this.size, label: this.label, "aria-label": this.htmlAriaLabel || this.placeholder || undefined }), !!(this.showResults &&
             this.autocomplete &&
             this.searchString &&
             this.searchString.length >= this.autocompleteMinChars &&
-            this.resultsItemsList) && (h("div", { key: '9a36f0021f7a52bc36fc9823a747820e188074ec', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
+            this.resultsItemsList) && (h("div", { key: '954f6984c04ba133c1637220ed47e778d7440e22', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", h("b", null, this.searchString), h("br", null), h("br", null), "Cosa puoi fare?", h("ul", null, h("li", null, "Verificare di aver scritto bene"), h("li", null, "Provare a cercare un'altra parola"), h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), h("div", { class: "item-label body-3 mobile-body-4", innerHTML: (_c = this.searchHelperLabel) === null || _c === void 0 ? void 0 : _c.replace("{searchString}", `<mark>${this.searchString}</mark>`) })))), this.renderItemGroups(), !!(this.searchString &&
             ((_d = this.resultsItemsList) === null || _d === void 0 ? void 0 : _d.length) &&
             this.currResultsCount &&
-            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: 'c1633f9f99c0503301562f8f3828f965b075cb51', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
+            this.currResultsCount < ((_e = this.resultsItemsList) === null || _e === void 0 ? void 0 : _e.length)) && (h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, h("div", { role: "option", class: "item-show-all body-3 mobile-body-4", tabindex: 0, onClick: () => (this.currResultsCount = undefined) }, "Vedi tutti i risultati")))))))), this.showSearchButton && (h("z-button", { key: '898d0c61de5c60e3e78be3b2336c1cbb4adcc3e3', icon: this.searchButtonIconOnly ? "search" : undefined, "aria-label": this.searchButtonIconOnly ? this.searchButtonLabel.trim() || "CERCA" : undefined, disabled: !!this.preventSubmit, variant: this.variant, size: this.size, onClick: () => this.handleSubmit() }, this.searchButtonIconOnly ? "" : this.searchButtonLabel.trim() || "CERCA"))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -1343,10 +1368,10 @@ const ZTag = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '0f2c63d3955fdb97015df9854ccac4030bc18f1e', class: {
+        return (h(Host, { key: '656a936ce4073db7a7895cac9f07e1ba6b9b5c2f', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && h("z-icon", { key: '46d5bfd904a8f2421d06b94f2e7c8e6ce81692d5', name: this.icon }), h("div", { key: '9c4fdeb859730e336eb18db8128c1fc7dc527410' }, h("slot", { key: 'aa6adbac4bcec80f1e3fb94d7276dee1386d9483' }))));
+            } }, this.icon && h("z-icon", { key: 'df213cce44c020028985d53064c3d0cd1ba645e9', name: this.icon }), h("div", { key: '2fa92332ae99d54527d7ab347e66f4424d241cf3' }, h("slot", { key: 'c52c05d031edbe81a9547c72479dae5c8d924a60' }))));
     }
     get host() { return getElement(this); }
 };