@zanichelli/albe-web-components 20.0.1 → 20.0.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [20.0.2](https://github.com/ZanichelliEditore/design-system/compare/v20.0.1...v20.0.2) (2026-08-13)
+
+
+### Bug Fixes
+
+* add stopPropagation ([afdca3d](https://github.com/ZanichelliEditore/design-system/commit/afdca3d6b1fc509dace11ace5552a37e92e6dd72))
+* **z-book-card:** remove background color and padding from the default ebook cta ([2ea6fe7](https://github.com/ZanichelliEditore/design-system/commit/2ea6fe73210bfe51fbc5cae2d92ae395b81205c3))
+
 ## [20.0.1](https://github.com/ZanichelliEditore/design-system/compare/v20.0.0...v20.0.1) (2026-07-23)
 
 

package/dist/cjs/z-accordion.cjs.entry.js

@@ -62,7 +62,7 @@ const ZAccordion = class {
         this.checkSlottedTags();
     }
     render() {
-        return (index.h("details", { key: '0400f292718d11e914939c7276fff21a8d07b5a3', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, index.h("summary", { key: '215728fe582184bb8f39815e96fdc4a34f983ea6', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (index.h("z-icon", { key: '05e95bad3e66ab3730711a9f5cd1077015ef48d7', class: "z-accordion-label-icon", name: this.icon })), index.h("span", { key: 'babacc83020de2cdf14588e184d8834d0eb87029', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (index.h("span", { key: '01ba1004d19c5e9b394f286f2efb0112f4c70e1f', class: "z-accordion-tags" }, index.h("slot", { key: 'e6a74b5c588056f46dd07b28e24f4cd9b10cea8a', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), index.h("z-icon", { key: 'c71ca8f7f20de925508801cffe7cdb690a21dc4b', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (index.h("div", { key: '96abd1bf924f77162cee791269701180f22f096e', class: "z-accordion-content", part: "content" }, index.h("slot", { key: '8a1618b8228c985ad7d229ca78f056af6c2dd469' })))));
+        return (index.h("details", { key: '9dbc24c1558cb8dd8278224d4721a173dc6050f3', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, index.h("summary", { key: '191e306e811898c6e199664af41746a7f7fc6885', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (index.h("z-icon", { key: '8562f6af8717ec125a8be1def19816c67437a3d0', class: "z-accordion-label-icon", name: this.icon })), index.h("span", { key: '0a863e554c09d43fe7c778fb15266232c45e5c8c', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (index.h("span", { key: 'ec62cf2331385b745e9abde47b763c4f76291cc7', class: "z-accordion-tags" }, index.h("slot", { key: 'f4e709e2eeb465595e96fe24b4a0bda02f6eaa84', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), index.h("z-icon", { key: 'dec4e49f0d1fee8f59d38b9d97f98aad3affd8aa', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (index.h("div", { key: '21a60ab43db780e601d886f6d7ab3a63e2e102a8', class: "z-accordion-content", part: "content" }, index.h("slot", { key: '8a43604d836c04288661b83fc479cec799143cfc' })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-anchor-navigation.cjs.entry.js

@@ -62,7 +62,7 @@ const ZAnchorNavigation = class {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (index.h(index.Host, { key: 'f2cbf308e24c100b40858ad4370d7fb1b83c91b4', collapsed: this.collapsed, class: "z-scrollbar" }, index.h("z-button", { key: '964c11320f7dff05208327e7f591ea90bad3763c', class: "toggle", size: index$1.ControlSize.SMALL, variant: index$1.ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), index.h("nav", { key: '21a8634ee51e4a1a824685e95ef58ed6a87e10e2', ref: (el) => (this.nav = el) }, index.h("slot", { key: 'bf93f6bd1d2948839da0e7e103f05ebd55135a33' }))));
+        return (index.h(index.Host, { key: '89751109cccb5d8bef38667bbfdfdc28e1a1febf', collapsed: this.collapsed, class: "z-scrollbar" }, index.h("z-button", { key: '2b5cbb4358af217a87d52c52a24326c316dbc56b', class: "toggle", size: index$1.ControlSize.SMALL, variant: index$1.ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), index.h("nav", { key: '3f5560712a71aaa112b1258b2177efcbb260487d', ref: (el) => (this.nav = el) }, index.h("slot", { key: 'da9a478eb5667533ffc14e3ea7f4c28aba30218a' }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -276,7 +276,7 @@ const ZAppHeader = class {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (index$1.h(index$1.Host, { key: '3c87b576bc0b22b6466d371cc1e5a6c92632cb3f', "menu-length": this.menuLength }, index$1.h("div", { key: '5fea095adcdc48b7ef7f1a2c0a9fbebb2f774f7c', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: '4c2af7cd90d3aed866fc0bb1e12c3a7040b8eab7', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (index$1.h("div", { key: '123f4dbda4424a699098f8cd56e6e0af285555d9', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, index$1.h("slot", { key: '7e46ed5fcf49e61c69cd808f323e642bd1dc8f44', name: "top-subtitle" }))), index$1.h("div", { key: '459505e2ebe168001292351e85002584b6efed1f', class: "heading-title" }, index$1.h("slot", { key: '579d2eb490d5c876b0a7ffd111c923d2240a5e18', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("slot", { key: 'f6fc213fd474fd75222e2dafc044624f4c468297', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: '792cf8b185cf12ae234a5e75f8dc4db33fd97e98', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: '6f8e3558678da2a099aa86f63d2dcbc4be9762a3', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: 'aa700689a8b05503079e69a5808442db280e8e4e', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (index$1.h(index$1.Host, { key: 'a464234ec0ce538282727aa83c43d30b5ea23ffa', "menu-length": this.menuLength }, index$1.h("div", { key: '0f41b7571c5e1acf4298910ab415ca986616a40e', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, index$1.h("div", { key: '9b9d45789be83c2db23e035a72b60cd4910b68b2', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (index$1.h("div", { key: 'bd1196659bc19936603de3994011b82ea7649147', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, index$1.h("slot", { key: '5d50957c5b91c138ad21efb849fdd371e93057ae', name: "top-subtitle" }))), index$1.h("div", { key: '47a21fe5a5b508fe23cf4e185813743e8dce0fab', class: "heading-title" }, index$1.h("slot", { key: '1c027312231d68cb2ebc625b6aeed177d2e22cf4', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), index$1.h("slot", { key: '6917fa59229dc3d80b5c3ca472bd14b671be9e27', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), index$1.h("nav", { key: 'e3ac84ff0933a8955fa7433f8ea0ae94e5eec080', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (index$1.h("div", { key: '1f3461f8b2b99d8515774265c07ddcb850ed7757', role: "menubar", "aria-label": this.title || undefined }, index$1.h("slot", { key: 'eda425c16602287225554fcca0c65661b46e0366', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -351,7 +351,7 @@ const ZDivider = class {
         this.orientation = index.DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '336d858e90aea1150ee35c4cb25bb49c00e658f7', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (index$1.h(index$1.Host, { key: '372389b3d857bf0c3cc5ad9191224bc1b0c94580', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
 };
 ZDivider.style = stylesCss$a();
@@ -405,7 +405,7 @@ const ZIcon = class {
         return (index$1.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(iconset.ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'dfb975a522bb0efeee162d107c49e683c543edfd', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (index$1.h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (index$1.h(index$1.Host, { key: 'c64019d3c25828c266b030224a74aaa6c9e8df33', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (index$1.h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
 };
 ZIcon.style = stylesCss$9();
@@ -718,7 +718,7 @@ const ZInputMessage = class {
         };
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '071b2ab5bc953c916bf735be221071740cf48293', role: this.htmlRole && this.message && this.status ? this.htmlRole : undefined, id: this.htmlId }, this.statusIcons[this.status] && this.message && index$1.h("z-icon", { key: '3fa408351b28bb7998bb743ebcf05fbebe40ff4e', name: this.statusIcons[this.status] }), index$1.h("span", { key: '48d15076d87920c4e5abee2aae5b4e65fb17cefc', innerHTML: this.message })));
+        return (index$1.h(index$1.Host, { key: 'acc2b74cb7dfda1d8529785c601d3fd92c2884dc', role: this.htmlRole && this.message && this.status ? this.htmlRole : undefined, id: this.htmlId }, this.statusIcons[this.status] && this.message && index$1.h("z-icon", { key: 'b9532d92b1a91d4218c30ed7bb543964c7822b03', name: this.statusIcons[this.status] }), index$1.h("span", { key: '933d1ac0a4194da9ec3f70ca715812d6cf3a7891', innerHTML: this.message })));
     }
 };
 ZInputMessage.style = stylesCss$8();
@@ -752,7 +752,7 @@ const ZList = class {
         });
     }
     render() {
-        return (index$1.h(index$1.Host, { key: 'ac29d5323be6b26a03f8477d7be07de92e66b08e', role: this.htmlRole }, index$1.h("slot", { key: '4ae10c8bc8c8d1d11c3bffc751b86882b5f6f21c' })));
+        return (index$1.h(index$1.Host, { key: 'aeaf7ef699223b8f5da68f49d8eb6ea5ea5cebb1', role: this.htmlRole }, index$1.h("slot", { key: '942882c5e4f03ef9dd64ec255b4cd8b8c5c2c107' })));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -926,7 +926,7 @@ const ZListElement = class {
         }
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '16ec312858869df48a86d54f62362de1a753338b', "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 }, index$1.h("div", { key: 'e9fa7223b93db9e37d260ff9296c2db068a13d61', 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" }, index$1.h("div", { key: '4b1763e2c9b7409473e6dece33c603d9b1bb5206', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index.ListDividerType.ELEMENT && (index$1.h("z-divider", { key: '4f8008af808226331324ff26d7c46f805a3f7ff3', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (index$1.h(index$1.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 }, index$1.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" }, index$1.h("div", { key: '222187f25d69dd2fb6128ce6a0c5c81dd6a05b31', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === index.ListDividerType.ELEMENT && (index$1.h("z-divider", { key: '1ff298c5fc086f1e303194b69de2324e5448508f', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -985,11 +985,11 @@ const ZListGroup = class {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '5c18efadefea41fd7dd73e276f1c70d99966cc27', role: this.htmlRole }, index$1.h("div", { key: '39780a5f98c4a63c2dfbc5561b7c08dd47f87872', class: {
+        return (index$1.h(index$1.Host, { key: '6c87868fe2ef8cb8cba06bea94d4eaca25c3f0e7', role: this.htmlRole }, index$1.h("div", { key: 'bf277438554dd56b141040c8af5e2171eeedfdb7', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, index$1.h("slot", { key: 'b9598bd340a6c17f1dc900f061a6aa05dcbcbf19', name: "header-title" }), this.dividerType === index.ListDividerType.HEADER && (index$1.h("z-divider", { key: '5646b13db4813f862f9b028491ef4ff9f878ac9c', color: this.dividerColor, size: this.dividerSize }))), index$1.h("slot", { key: 'b89f293df5f95fb83bc23e1725cb2d24a7b5c15b' })));
+            } }, index$1.h("slot", { key: 'c3bf82239b5f0418e10bffbc4e1e26e4c3172dab', name: "header-title" }), this.dividerType === index.ListDividerType.HEADER && (index$1.h("z-divider", { key: '7127f3a0d6f501f305431d57068da428ccf8b90b', color: this.dividerColor, size: this.dividerSize }))), index$1.h("slot", { key: '7dfc72c7992c5f28fce1a204ebabfa2a012b7708' })));
     }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
@@ -1099,8 +1099,8 @@ const ZOffcanvas = class extends reactiveController.ReactiveControllerHost {
         super.disconnectedCallback();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '96384e6ed9437409a5f220d3a725707a47854dd9', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === index.OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === index.OffCanvasVariant.OVERLAY ? "dialog" : null }, index$1.h("div", { key: 'b15d7e247efc10af823e1bbcf26a767e2a6a6f50', class: "canvas-container" }, index$1.h("div", { key: '7dd36d23274bb9f2ddc7b3d155b773d608072f4d', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: utils.getTabbableElements(this.host).length ? undefined : -1 }, index$1.h("slot", { key: 'a43bd7fbeffb3ffb411f779383fbc1aa0a72feb5', name: "canvasContent" }))), (this.variant == index.OffCanvasVariant.OVERLAY || this.transitiondirection === index.TransitionDirection.UP) &&
-            this.showBackdrop && (index$1.h("div", { key: '02ada3fbefde8cb24bb57db9d7e566d1834f855e', class: "backdrop", onClick: (ev) => {
+        return (index$1.h(index$1.Host, { key: 'c3e830f6e06a3f5bfcfa491417b3f4a04c694d22', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null, "aria-modal": this.open && this.variant === index.OffCanvasVariant.OVERLAY ? "true" : null, role: this.open && this.variant === index.OffCanvasVariant.OVERLAY ? "dialog" : null }, index$1.h("div", { key: '70347123fbb93082b6e38ff1de4a6364a4f433fb', class: "canvas-container" }, index$1.h("div", { key: 'ef277c0f8e0fc7c69fbd1c654f67f4ec40aed0ec', class: "canvas-content z-scrollbar", ref: (el) => (this.canvasContent = el), tabIndex: utils.getTabbableElements(this.host).length ? undefined : -1 }, index$1.h("slot", { key: '1a2a5ff0fba5b2eae9dc90af4a0a238007008e11', name: "canvasContent" }))), (this.variant == index.OffCanvasVariant.OVERLAY || this.transitiondirection === index.TransitionDirection.UP) &&
+            this.showBackdrop && (index$1.h("div", { key: 'fbe7fb00cfcc67e3021fbb50ab042a22d0cc5053', class: "backdrop", onClick: (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
                 this.open = false;
@@ -1298,7 +1298,10 @@ const ZSearchbar = class {
     }
     renderItem(item, index) {
         var _a;
-        return (index$1.h("z-list-element", { id: `list-item-${this.htmlid}-${index}`, role: "presentation", htmlTabindex: -1, onKeyDown: (e) => this.onListItemKeyDown(e, item), onClick: () => this.emitSearchItemClick(item) }, index$1.h("div", { class: "list-item ellipsis", role: "option", tabindex: 0 }, !!(item === null || item === void 0 ? void 0 : item.icon) && (index$1.h("z-icon", { class: "item-icon", name: item.icon })), index$1.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) && index$1.h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && (index$1.h("z-list", { class: "sub-list", role: "group", "aria-label": item.label || undefined }, item.children.map((child, index) => this.renderItem(child, index))))));
+        return (index$1.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);
+            } }, index$1.h("div", { class: "list-item ellipsis", role: "option", tabindex: 0 }, !!(item === null || item === void 0 ? void 0 : item.icon) && (index$1.h("z-icon", { class: "item-icon", name: item.icon })), index$1.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) && index$1.h("z-tag", { icon: item.tag.icon }, !this.isMobile ? item.tag.text : "")), !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) && (index$1.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.
@@ -1330,17 +1333,17 @@ const ZSearchbar = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index$1.h(index$1.Host, { key: '666eb25b14ff2ad53ad24a804429a5d5c7fb9921', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, index$1.h("div", { key: '3bfc445797d517674f8fd359ebe78bd6a6bb67dc', class: "input-container" }, index$1.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 (index$1.h(index$1.Host, { key: '82c926179762db33e8d1c425cac474affd59fea6', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": !!this.showSearchButton, "has-results": !!this.autocomplete } }, index$1.h("div", { key: '689d1cda6b0c217e5afe892627f31100858c1a72', class: "input-container" }, index$1.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) => {
                 utils.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) && (index$1.h("div", { key: '9a36f0021f7a52bc36fc9823a747820e188074ec', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (index$1.h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", index$1.h("b", null, this.searchString), index$1.h("br", null), index$1.h("br", null), "Cosa puoi fare?", index$1.h("ul", null, index$1.h("li", null, "Verificare di aver scritto bene"), index$1.h("li", null, "Provare a cercare un'altra parola"), index$1.h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (index$1.h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, index$1.h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, index$1.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index$1.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) && (index$1.h("div", { key: '954f6984c04ba133c1637220ed47e778d7440e22', class: "results z-scrollbar" }, this.preventSubmit && !((_b = this.resultsItemsList) === null || _b === void 0 ? void 0 : _b.length) ? (index$1.h("div", { class: "item-no-results body-3 mobile-body-4" }, "Non abbiamo trovato risultati per ", index$1.h("b", null, this.searchString), index$1.h("br", null), index$1.h("br", null), "Cosa puoi fare?", index$1.h("ul", null, index$1.h("li", null, "Verificare di aver scritto bene"), index$1.h("li", null, "Provare a cercare un'altra parola"), index$1.h("li", null, "Provare a cercare qualcosa di pi\u00F9 generico")))) : (index$1.h("z-list", { role: "listbox", id: `list-${this.htmlid}`, "aria-label": this.htmlAriaLabel || this.label || undefined }, this.autocomplete && !this.preventSubmit && !!this.searchString && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-search`, onKeyDown: (e) => this.onSearchHelperKeyDown(e), onClick: () => this.emitSearchSubmit() }, index$1.h("div", { class: "list-item item-search", role: "option", tabindex: 0 }, index$1.h("z-icon", { class: "search-icon", name: "left-magnifying-glass" }), index$1.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)) && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, index$1.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 && (index$1.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)) && (index$1.h("z-list-element", { role: "presentation", htmlTabindex: -1, id: `list-item-${this.htmlid}-show-all` }, index$1.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 && (index$1.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 index$1.getElement(this); }
     static get watchers() { return {
@@ -1367,10 +1370,10 @@ const ZTag = class {
         index$1.registerInstance(this, hostRef);
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '0f2c63d3955fdb97015df9854ccac4030bc18f1e', class: {
+        return (index$1.h(index$1.Host, { key: '656a936ce4073db7a7895cac9f07e1ba6b9b5c2f', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && index$1.h("z-icon", { key: '46d5bfd904a8f2421d06b94f2e7c8e6ce81692d5', name: this.icon }), index$1.h("div", { key: '9c4fdeb859730e336eb18db8128c1fc7dc527410' }, index$1.h("slot", { key: 'aa6adbac4bcec80f1e3fb94d7276dee1386d9483' }))));
+            } }, this.icon && index$1.h("z-icon", { key: 'df213cce44c020028985d53064c3d0cd1ba645e9', name: this.icon }), index$1.h("div", { key: '2fa92332ae99d54527d7ab347e66f4424d241cf3' }, index$1.h("slot", { key: 'c52c05d031edbe81a9547c72479dae5c8d924a60' }))));
     }
     get host() { return index$1.getElement(this); }
 };