@zanichelli/albe-web-components 18.7.7 → 18.8.1-RC1

package/dist/esm/z-myz-list.entry.js

@@ -22,7 +22,7 @@ const ZMyzList = class {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (h("ul", { key: 'a2b38a5764d03a797e5429fbf0e0353e3c7ea1c9' }, this.list &&
+        return (h("ul", { key: '8180625a6fea4c9e381f4d05d31bd27ab75b0f8c' }, this.list &&
             this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get watchers() { return {

package/dist/esm/z-navigation-tabs.entry.js

@@ -220,10 +220,10 @@ const ZNavigationTabs = class {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '4077ef000c364e2356716f630a114ef12f87503c', class: {
+        return (h(Host, { key: '69bc5562051734e576c1dbb2af850ef01a70a693', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: '836020e039138b16064efce71faf41ef4c22e644', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: 'd29f82ac396250b0533d964d72716811ae05ae05', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '735a409ad889a701a4a37b3c30d9de445522215d', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'f2208fd694382c9c0472c7a1ed57e130dc9238b9' })), h("button", { key: 'f89b222d39aaff6448a5a42a96f62d7899cb02ce', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '3ec84b37d472f4d5848b0ce4be1f95883553cebe', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'c851af9053873ea70d1dee5216bb680deea111f0', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '6a69b89400fea7a87fd18d8d59e183b85aa0c87f', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '997e215eecc0454b96e0034fece50be22cb1eef0', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8a214ee36e66badda0a8825fbe7c2268ff0fc6df' })), h("button", { key: '627501af784136a1eff68c0e002812144062128e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '68728de5a048363fd186c4a26cc8872fd4b0253e', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-notification.entry.js

@@ -27,7 +27,7 @@ const ZNotification = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '91f3faaa63f6d3a7560dfc17fcb782cc9a87b3ca' }, this.contenticonname && (h("z-icon", { key: '2d7d6a800e8cf6c2ff83a0e45d1617e584aab21e', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'fd2703a619f218ef7cb6177cce8e0ff45a6d0ed4', class: "content-container" }, h("div", { key: 'cd300fae9835a693b9c96935e993d4d78cd11e4c', class: "content-text" }, h("slot", { key: '1563c59943a57d20b94d7d4df037a78ee3970d42' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '4221817bd30a88b22f9c4a01882d4c7aed6cfce3', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: 'ac74dd0caa8a62e1aece02748a04a60036ba0b91', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '218ba32889b29b07f4d90b7c3d0072a2f5c2854e', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: 'aac3e6385d2f77e80c9933e666770e3da17c21a5' }, this.contenticonname && (h("z-icon", { key: '1ba77acd6db4e01ac47ae605c4ab05a345999462', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '9df24bcba7a1f49c803f339a0ac5ddafc08c03c9', class: "content-container" }, h("div", { key: 'bd1a76905a9c14fa77a1704a127a65a8ba9adab8', class: "content-text" }, h("slot", { key: 'b126d399950149b0d4cd94d3c2480678d7f91a97' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '63f56578ed42e720c20b57424c1d824729279e36', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '81ccf6858d6b559a23b1c9266d8af55e7bd3a2f2', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '96c95d07ef561d4b900acefaef90e00d85dc3904', name: "multiply-circle", width: 16, height: 16 })))));
     }
 };
 ZNotification.style = ZNotificationStyle0;

package/dist/esm/z-otp.entry.js

@@ -20,7 +20,7 @@ const ZOtp = class {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (h("div", { key: 'fda767d67b4f56013242705290e13b622359c5de', class: "otp-container" }, h("div", { key: '970b70db5db8b635a4d6b9bd7eaa4dee3c4002da', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (h("div", { key: '3280158fc2eb52cab06257cfea6237b04e277514', class: "otp-container" }, h("div", { key: 'b237b9c77421eeae14d5bac7e079b4f6b667ceed', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -31,7 +31,7 @@ const ZOtp = class {
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '27cfcc5a59ce18104b04210a8383caf6d0de2f2b', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: 'd74fcd0805c2bbfa9cf993cf88fbaabf632412a8', message: this.message, status: this.status })));
     }
 };
 ZOtp.style = ZOtpStyle0;

package/dist/esm/z-panel-elem.entry.js

@@ -18,12 +18,12 @@ const ZPanelElem = class {
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: 'd5a9754ebe82d16f501f7de159abb1abe4826d73', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: 'c9b06c626e81b8248a63604423b624c80c3099eb', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '491be43fc992a6d3de6c2961b29d2e6a7dc17003', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'f6371f8214bcd56380f6d184b211356215fa870a', class: "panel-elem-link" }, h("a", { key: '6988da8b80cdb0a2e25eb1f67c7ec5cfac3d07c7', class: {
+        return (h("div", { key: '7ccde7a594052fb877c381d8f2db8df80d64e96e', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: 'f925fb70d03baa4a8a7f96006c515c9116785ff7', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'b0349cf006ded4cc02f686e1ea1adfbd76550fb8', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'c9393757ba1c849c8558dc668189f6f27b232e94', class: "panel-elem-link" }, h("a", { key: '7c552ae67030c9bf12a6e52e8d8f6f82df88b4a2', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
                 "z-link-blue": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '404ce91ab1d4d086115355375a3358050366104d', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '7bc0055610960f8966f68dc100b3af2022848f06', class: "panel-elem-desc" }, h("slot", { key: '966fe6d8009a74131b4f568253134acfcfee5733', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'f72a6a2634b41803ea7eaf8d51ba3439f095457a', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '6cd08ffd2e65f13d500f88682724f4f762c1f118', class: "panel-elem-desc" }, h("slot", { key: '01f55703602ee64f92eed8bc918ac5032927850c', name: this.descrSlotName })))));
     }
 };
 ZPanelElem.style = ZPanelElemStyle0;

package/dist/esm/z-popover.entry.js

@@ -419,7 +419,7 @@ const ZPopover = class {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: 'bb4de929f55c973afca21cd9b0ddea9f24194e3e', "current-position": this.currentPosition }, h("slot", { key: '40df21ad7258139c4296a792f9105229b7379dd1' })));
+        return (h(Host, { key: 'aeb6c7ccabc279af16d9a957e732ad611612589f', "current-position": this.currentPosition }, h("slot", { key: '77fecb1bbfa49e1a8f97c078e7cef01a03420d9c' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/z-result-card.entry.js

@@ -1,7 +1,6 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import { i as img } from './placeholder-cover-9346be8f.js';
 
-const stylesCss = ":host{display:flex;overflow:hidden;min-width:0;height:9.875rem;padding:var(--space-unit);border:var(--border-size-medium) solid var(--color-surface02);background-color:var(--color-white);border-radius:var(--border-size-large);cursor:pointer;font-family:var(--font-family-sans)}.z-cover-container{position:relative;display:flex;width:119px;height:158px;align-items:center;justify-items:center}.z-cover-stack{width:100%;height:100%}.z-cover-shadow,.z-cover-img{width:117px;height:156px}.z-cover-container.has-multiple .z-cover-shadow,.z-cover-container.has-multiple .z-cover-img{width:105px;height:140px}.z-cover-shadow{position:absolute;z-index:1;background-color:var(--color-white)}.z-shadow-1{z-index:0;top:var(--space-unit);right:6px;border:var(--border-size-small) solid black}.z-shadow-2{z-index:0;top:calc(var(--space-unit) * 2);right:12px;border:var(--border-size-small) solid black}.z-cover-img{position:absolute;z-index:0;top:0;right:0;display:flex;align-items:start;justify-content:center;border:var(--border-size-small) solid black;background-color:var(--color-white);object-fit:cover;object-position:left}.z-cover-img>img{max-width:100%;max-height:100%}.z-cover-container.has-multiple .z-cover-img{left:12px}.info-container{display:flex;overflow:hidden;min-width:0;flex:1;flex-direction:column;padding-left:calc(var(--space-unit) * 2)}.authors-label{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);text-overflow:ellipsis;white-space:nowrap}.card-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:2;line-clamp:2;line-height:1.5;word-break:break-word}.card-title>*{all:unset}.card-subtitle{overflow:hidden;color:var(--color-default-text);text-overflow:ellipsis;white-space:nowrap}.card-subtitle.info-card-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.2;white-space:normal;word-break:break-word}.tags-container{display:flex;max-width:100%;flex-wrap:wrap;margin-top:calc(var(--space-unit) * 2);gap:var(--space-unit)}.volumes-label{display:flex;flex-grow:1;align-items:end;color:var(--color-default-text);font-size:var(--font-size-1)}:host(.info-card){display:flex;height:3.75rem;gap:calc(var(--space-unit) * 1.5)}:host(.info-card) .info-container{padding-left:0}.info-icon-container{padding:var(--space-unit);margin-bottom:calc(var(--space-unit) * 3);background-color:var(--gray50);border-radius:var(--border-size-large)}.card-title.info-card-title{display:-webkit-box;overflow:hidden;min-width:0;max-width:100%;max-height:2.4em;margin-top:0;margin-bottom:4px;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:1;line-clamp:1;line-height:1.2;word-break:break-word}.info-icon{width:18px;height:18px;color:var(--color-default-text)}:host(:focus:focus-visible){z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 768px){.card-title{display:block;overflow:hidden;line-height:normal;text-overflow:ellipsis;white-space:nowrap}}";
+const stylesCss = ":host,*{box-sizing:border-box}:host{display:flex;overflow:hidden;min-width:0;height:11.125rem;padding:var(--space-unit);border:var(--border-size-medium) solid var(--color-surface02);background-color:var(--color-surface01);border-radius:var(--border-size-large);cursor:pointer;font-family:var(--font-family-sans);gap:calc(var(--space-unit) * 2)}z-book-cover{--z-book-cover-stack-shift-x:6px;--z-book-cover-stack-shift-y:8px;--z-book-cover-height:158px;--z-book-cover-border-radius:0}.info-container{display:flex;overflow:hidden;min-width:0;flex:1;flex-direction:column}.authors-label{overflow:hidden;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);text-overflow:ellipsis;white-space:nowrap}.card-title{display:-webkit-box;overflow:hidden;margin:0;-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:2;line-clamp:2;line-height:1.5;word-break:break-word}.card-subtitle{overflow:hidden;color:var(--color-default-text);text-overflow:ellipsis;white-space:nowrap}.tags-container{display:flex;max-width:100%;flex-wrap:wrap;margin-top:calc(var(--space-unit) * 2);gap:var(--space-unit)}.volumes-label{display:flex;flex-grow:1;align-items:end;color:var(--color-default-text);font-size:var(--font-size-1)}:host(.info-card){height:5rem;gap:calc(var(--space-unit) * 1.5)}:host(.info-card) .info-icon-container{display:flex;align-items:center;align-self:flex-start;justify-content:center;padding:var(--space-unit);margin-bottom:calc(var(--space-unit) * 3);background-color:var(--gray50);border-radius:var(--border-size-large)}:host(.info-card) .info-icon{--z-icon-width:1.125rem;--z-icon-height:1.125rem;fill:var(--color-default-icon)}:host(.info-card) .card-title{display:-webkit-box;overflow:hidden;min-width:0;max-width:100%;max-height:2.4em;margin-top:0;margin-bottom:calc(var(--space-unit) / 2);-webkit-box-orient:vertical;font-size:var(--font-size-3);font-weight:var(--font-bd);-webkit-line-clamp:1;line-clamp:1;line-height:1.2;word-break:break-word}:host(.info-card) .card-subtitle{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.2;white-space:normal;word-break:break-word}@media (max-width: 767px){.card-title{display:block;overflow:hidden;line-height:normal;text-overflow:ellipsis;white-space:nowrap}}";
 const ZResultCardStyle0 = stylesCss;
 
 const ZResultCard = class {
@@ -13,24 +12,17 @@ const ZResultCard = class {
             this.setTooltipTitle(this.subtitleRef);
         };
         this.renderTitle = () => {
-            const title = this.titleHtmlTag ? `<${this.titleHtmlTag}>${this.cardTitle}</${this.titleHtmlTag}>` : this.cardTitle;
-            return (h("div", { class: { "card-title": true, "info-card-title": this.isInfoCard }, ref: (el) => (this.titleRef = el), innerHTML: title }));
+            const TitleTag = this.titleHtmlTag || "div";
+            return (h(TitleTag, { class: "card-title", ref: (el) => (this.titleRef = el) }, this.cardTitle));
         };
         this.renderSubtitle = () => {
-            return (h("span", { class: { "card-subtitle": true, "info-card-subtitle": this.isInfoCard }, ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle));
+            return (h("span", { class: "card-subtitle", ref: (el) => (this.subtitleRef = el) }, this.cardSubtitle));
         };
         this.renderOperaCard = () => {
-            return (h(Host, { tabIndex: 0 }, h("div", { class: `z-cover-container ${this.hasMultipleCovers ? "has-multiple" : ""}` }, h("div", { class: "z-cover-stack" }, this.hasMultipleCovers && (h("div", null, h("div", { class: "z-cover-shadow z-shadow-2" }), h("div", { class: "z-cover-shadow z-shadow-1" }))), h("div", { class: "z-cover-img" }, h("img", { src: this.cover || this.fallbackCover || img, alt: "", onError: () => {
-                    if (this.fallbackCover) {
-                        this.cover = this.fallbackCover;
-                    }
-                    else {
-                        this.cover = img;
-                    }
-                } })))), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), this.renderTitle(), this.renderSubtitle(), h("div", { class: "tags-container" }, h("slot", { name: "tags" })), h("div", { class: "volumes-label" }, h("slot", { name: "volumes" })))));
+            return (h(Host, null, h("z-book-cover", { cover: this.cover, fallbackCover: this.fallbackCover, multiple: this.hasMultipleCovers, bordered: true }), h("div", { class: "info-container" }, this.authors && (h("span", { class: "authors-label", ref: (el) => (this.authorsRef = el) }, this.authors)), this.renderTitle(), this.renderSubtitle(), h("div", { class: "tags-container" }, h("slot", { name: "tags" })), h("div", { class: "volumes-label" }, h("slot", { name: "volumes" })))));
         };
         this.renderInfoCard = () => {
-            return (h(Host, { tabIndex: 0, class: "info-card" }, h("div", { class: "info-icon-column" }, h("div", { class: "info-icon-container" }, h("z-icon", { class: "info-icon", name: "link", width: 18, height: 18 }))), h("div", { class: "info-container" }, this.renderTitle(), this.renderSubtitle())));
+            return (h(Host, { class: "info-card" }, h("div", { class: "info-icon-container" }, h("z-icon", { class: "info-icon", name: "link" })), h("div", { class: "info-container" }, this.renderTitle(), this.renderSubtitle())));
         };
         this.cardTitle = undefined;
         this.cardSubtitle = undefined;

package/dist/esm/z-result-card.entry.js.map

@@ -1 +1 @@
-{"file":"z-result-card.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ikGAAikG,CAAC;AACplG,0BAAe,SAAS;;MCWX,WAAW;;;QA8Fd,kBAAa,GAAG;YACtB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YACtC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACxC,CAAC;QAUM,gBAAW,GAAG;YACpB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC;YAEpH,QACE,WACE,KAAK,EAAE,EAAC,YAAY,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,UAAU,EAAC,EAC/D,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAiB,CAAC,EAChD,SAAS,EAAE,KAAK,GAChB,EACF;SACH,CAAC;QAEM,mBAAc,GAAG;YACvB,QACE,YACE,KAAK,EAAE,EAAC,eAAe,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,UAAU,EAAC,EACrE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,IAElD,IAAI,CAAC,YAAY,CACb,EACP;SACH,CAAC;QAEM,oBAAe,GAAG;YACxB,QACE,EAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,IACf,WAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,iBAAiB,GAAG,cAAc,GAAG,EAAE,EAAE,IAC7E,WAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,iBAAiB,KACrB,eACE,WAAK,KAAK,EAAC,2BAA2B,GAAG,EACzC,WAAK,KAAK,EAAC,2BAA2B,GAAG,CACrC,CACP,EACD,WAAK,KAAK,EAAC,aAAa,IACtB,WACE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,aAAa,IAAIA,GAAoB,EAC7D,GAAG,EAAC,EAAE,EACN,OAAO,EAAE;oBACP,IAAI,IAAI,CAAC,aAAa,EAAE;wBACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;qBACjC;yBAAM;wBACL,IAAI,CAAC,KAAK,GAAGA,GAAoB,CAAC;qBACnC;iBACF,GACD,CACE,CACF,CACF,EACN,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,OAAO,KACX,YACE,KAAK,EAAC,eAAe,EACrB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAiB,CAAC,IAEjD,IAAI,CAAC,OAAO,CACR,CACR,EACA,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,cAAc,EAAE,EACtB,WAAK,KAAK,EAAC,gBAAgB,IACzB,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,EACP;SACH,CAAC;QAEM,mBAAc,GAAG;YACvB,QACE,EAAC,IAAI,IACH,QAAQ,EAAE,CAAC,EACX,KAAK,EAAC,WAAW,IAEjB,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WAAK,KAAK,EAAC,qBAAqB,IAC9B,cACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,CACE,CACF,EACN,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,cAAc,EAAE,CAClB,CACD,EACP;SACH,CAAC;;;;;;iCApKkB,KAAK;0BAOZ,KAAK;;;IAeV,eAAe,CAAC,EAAe;QACrC,IAAI,CAAC,EAAE,EAAE;YACP,OAAO;SACR;;QAGD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;QAC1C,MAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,KAAK,MAAM,CAAC;QAE7E,IAAI,WAAW,CAAC;QAChB,IAAI,YAAY,EAAE;;YAEhB,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAC9C,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;YACxE,MAAM,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;YAExC,WAAW,GAAG,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC;SAC3C;aAAM;;YAEL,WAAW,GAAG,EAAE,CAAC,WAAW,GAAG,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC,YAAY,GAAG,EAAE,CAAC,YAAY,CAAC;SACpF;QAED,IAAI,WAAW,EAAE;YACf,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,CAAC;SACjD;aAAM;YACL,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;SAC7B;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACxC;IAQD,gBAAgB;QACd,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACvD;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC1D;IAiGD,MAAM;QACJ,OAAO,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;KACzE;;;;;;;","names":["defaultFallbackCover"],"sources":["src/components/result-card/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/result-card/z-result-card/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  height: 9.875rem;\n  padding: var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-surface02);\n  background-color: var(--color-white);\n  border-radius: var(--border-size-large);\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n}\n\n.z-cover-container {\n  position: relative;\n  display: flex;\n  width: 119px;\n  height: 158px;\n  align-items: center;\n  justify-items: center;\n}\n\n.z-cover-stack {\n  width: 100%;\n  height: 100%;\n}\n\n/* Base sizes for single cover */\n.z-cover-shadow,\n.z-cover-img {\n  width: 117px;\n  height: 156px;\n}\n\n/* Scaled sizes for multiple covers */\n.z-cover-container.has-multiple .z-cover-shadow,\n.z-cover-container.has-multiple .z-cover-img {\n  width: 105px;\n  height: 140px;\n}\n\n.z-cover-shadow {\n  position: absolute;\n  z-index: 1;\n  background-color: var(--color-white);\n}\n\n.z-shadow-1 {\n  z-index: 0;\n  top: var(--space-unit);\n  right: 6px;\n  border: var(--border-size-small) solid black;\n}\n\n.z-shadow-2 {\n  z-index: 0;\n  top: calc(var(--space-unit) * 2);\n  right: 12px;\n  border: var(--border-size-small) solid black;\n}\n\n.z-cover-img {\n  position: absolute;\n  z-index: 0;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: start;\n  justify-content: center;\n  border: var(--border-size-small) solid black;\n  background-color: var(--color-white);\n  object-fit: cover;\n  object-position: left;\n}\n\n.z-cover-img > img {\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.z-cover-container.has-multiple .z-cover-img {\n  left: 12px;\n}\n\n.info-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n  padding-left: calc(var(--space-unit) * 2);\n}\n\n.authors-label {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.card-title > * {\n  all: unset;\n}\n\n.card-subtitle {\n  overflow: hidden;\n  color: var(--color-default-text);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-subtitle.info-card-subtitle {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.2;\n  white-space: normal;\n  word-break: break-word;\n}\n\n.tags-container {\n  display: flex;\n  max-width: 100%;\n  flex-wrap: wrap;\n  margin-top: calc(var(--space-unit) * 2);\n  gap: var(--space-unit);\n}\n\n.volumes-label {\n  display: flex;\n  flex-grow: 1;\n  align-items: end;\n  color: var(--color-default-text);\n  font-size: var(--font-size-1);\n}\n\n/* info-card */\n:host(.info-card) {\n  display: flex;\n  height: 3.75rem;\n  gap: calc(var(--space-unit) * 1.5);\n}\n\n:host(.info-card) .info-container {\n  padding-left: 0;\n}\n\n.info-icon-container {\n  padding: var(--space-unit);\n  margin-bottom: calc(var(--space-unit) * 3);\n  background-color: var(--gray50);\n  border-radius: var(--border-size-large);\n}\n\n.card-title.info-card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  min-width: 0;\n  max-width: 100%;\n  max-height: 2.4em;\n  margin-top: 0;\n  margin-bottom: 4px;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  line-height: 1.2;\n  word-break: break-word;\n}\n\n.info-icon {\n  width: 18px;\n  height: 18px;\n  color: var(--color-default-text);\n}\n\n/* Focus */\n:host(:focus:focus-visible) {\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n@media (max-width: 768px) {\n  .card-title {\n    display: block;\n    overflow: hidden;\n    line-height: normal;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\nimport defaultFallbackCover from \"../../../assets/images/png/placeholder-cover.png\";\n\n/**\n * @slot tags - slot containing the descriptors for the opera variant\n * @slot volumes - slot containing the volume count to be displayed in the opera variant\n */\n@Component({\n  tag: \"z-result-card\",\n  styleUrls: [\"styles.css\"],\n  shadow: true,\n})\nexport class ZResultCard {\n  @Element() hostElement: HTMLZResultCardElement;\n\n  /**\n   * The title of the card.\n   */\n  @Prop()\n  cardTitle: string;\n\n  /**\n   * The subtitle of the card.\n   */\n  @Prop()\n  cardSubtitle: string;\n\n  /**\n   * The authors of the opera.\n   */\n  @Prop()\n  authors?: string;\n\n  /**\n   * The URL of the cover image.\n   * This is used to display the cover image of the opera.\n   */\n  @Prop()\n  cover?: string;\n\n  /** [optional] Fallback cover URL */\n  @Prop()\n  fallbackCover?: string;\n\n  /**\n   * Indicates whether the card has multiple covers.\n   * This is used to apply specific styles when there are multiple covers.\n   */\n  @Prop()\n  hasMultipleCovers = false;\n\n  /**\n   * Indicates whether the card is an info page.\n   * This can be used to apply specific styles or behaviors for info pages.\n   */\n  @Prop()\n  isInfoCard = false;\n\n  /**\n   * [optional]\n   * Use for insert heading when needed.\n   */\n  @Prop()\n  titleHtmlTag?: string;\n\n  private authorsRef: HTMLElement;\n\n  private titleRef: HTMLElement;\n\n  private subtitleRef: HTMLElement;\n\n  private setTooltipTitle(el: HTMLElement): void {\n    if (!el) {\n      return;\n    }\n\n    // Check if element uses line-clamp\n    const style = window.getComputedStyle(el);\n    const hasLineClamp = style.getPropertyValue(\"-webkit-line-clamp\") !== \"none\";\n\n    let isTruncated;\n    if (hasLineClamp) {\n      // For elements with line-clamp, check if content height exceeds line-clamp height\n      const lineHeight = parseInt(style.lineHeight);\n      const maxLines = parseInt(style.getPropertyValue(\"-webkit-line-clamp\"));\n      const maxHeight = lineHeight * maxLines;\n\n      isTruncated = el.scrollHeight > maxHeight;\n    } else {\n      // Original check for elements without line-clamp\n      isTruncated = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n    }\n\n    if (isTruncated) {\n      el.setAttribute(\"title\", el.textContent.trim());\n    } else {\n      el.removeAttribute(\"title\");\n    }\n  }\n\n  componentDidRender(): void {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  }\n\n  private resizeHandler = (): void => {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  };\n\n  componentDidLoad(): void {\n    window.addEventListener(\"resize\", this.resizeHandler);\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"resize\", this.resizeHandler);\n  }\n\n  private renderTitle = (): HTMLDivElement => {\n    const title = this.titleHtmlTag ? `<${this.titleHtmlTag}>${this.cardTitle}</${this.titleHtmlTag}>` : this.cardTitle;\n\n    return (\n      <div\n        class={{\"card-title\": true, \"info-card-title\": this.isInfoCard}}\n        ref={(el) => (this.titleRef = el as HTMLElement)}\n        innerHTML={title}\n      />\n    );\n  };\n\n  private renderSubtitle = (): HTMLSpanElement => {\n    return (\n      <span\n        class={{\"card-subtitle\": true, \"info-card-subtitle\": this.isInfoCard}}\n        ref={(el) => (this.subtitleRef = el as HTMLElement)}\n      >\n        {this.cardSubtitle}\n      </span>\n    );\n  };\n\n  private renderOperaCard = (): HTMLZResultCardElement => {\n    return (\n      <Host tabIndex={0}>\n        <div class={`z-cover-container ${this.hasMultipleCovers ? \"has-multiple\" : \"\"}`}>\n          <div class=\"z-cover-stack\">\n            {this.hasMultipleCovers && (\n              <div>\n                <div class=\"z-cover-shadow z-shadow-2\" />\n                <div class=\"z-cover-shadow z-shadow-1\" />\n              </div>\n            )}\n            <div class=\"z-cover-img\">\n              <img\n                src={this.cover || this.fallbackCover || defaultFallbackCover}\n                alt=\"\"\n                onError={() => {\n                  if (this.fallbackCover) {\n                    this.cover = this.fallbackCover;\n                  } else {\n                    this.cover = defaultFallbackCover;\n                  }\n                }}\n              />\n            </div>\n          </div>\n        </div>\n        <div class=\"info-container\">\n          {this.authors && (\n            <span\n              class=\"authors-label\"\n              ref={(el) => (this.authorsRef = el as HTMLElement)}\n            >\n              {this.authors}\n            </span>\n          )}\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n          <div class=\"tags-container\">\n            <slot name=\"tags\"></slot>\n          </div>\n          <div class=\"volumes-label\">\n            <slot name=\"volumes\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  };\n\n  private renderInfoCard = (): HTMLZResultCardElement => {\n    return (\n      <Host\n        tabIndex={0}\n        class=\"info-card\"\n      >\n        <div class=\"info-icon-column\">\n          <div class=\"info-icon-container\">\n            <z-icon\n              class=\"info-icon\"\n              name=\"link\"\n              width={18}\n              height={18}\n            />\n          </div>\n        </div>\n        <div class=\"info-container\">\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n        </div>\n      </Host>\n    );\n  };\n\n  render(): HTMLZResultCardElement {\n    return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();\n  }\n}\n"],"version":3}
+{"file":"z-result-card.entry.js","mappings":"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","names":[],"sources":["src/components/z-result-card/styles.css?tag=z-result-card&encapsulation=shadow","src/components/z-result-card/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  height: 11.125rem;\n  padding: var(--space-unit);\n  border: var(--border-size-medium) solid var(--color-surface02);\n  background-color: var(--color-surface01);\n  border-radius: var(--border-size-large);\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  gap: calc(var(--space-unit) * 2);\n}\n\nz-book-cover {\n  --z-book-cover-stack-shift-x: 6px;\n  --z-book-cover-stack-shift-y: 8px;\n  --z-book-cover-height: 158px;\n  --z-book-cover-border-radius: 0;\n}\n\n.info-container {\n  display: flex;\n  overflow: hidden;\n  min-width: 0;\n  flex: 1;\n  flex-direction: column;\n}\n\n.authors-label {\n  overflow: hidden;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  margin: 0;\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.5;\n  word-break: break-word;\n}\n\n.card-subtitle {\n  overflow: hidden;\n  color: var(--color-default-text);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.tags-container {\n  display: flex;\n  max-width: 100%;\n  flex-wrap: wrap;\n  margin-top: calc(var(--space-unit) * 2);\n  gap: var(--space-unit);\n}\n\n.volumes-label {\n  display: flex;\n  flex-grow: 1;\n  align-items: end;\n  color: var(--color-default-text);\n  font-size: var(--font-size-1);\n}\n\n/* info-card */\n:host(.info-card) {\n  height: 5rem;\n  gap: calc(var(--space-unit) * 1.5);\n}\n\n:host(.info-card) .info-icon-container {\n  display: flex;\n  align-items: center;\n  align-self: flex-start;\n  justify-content: center;\n  padding: var(--space-unit);\n  margin-bottom: calc(var(--space-unit) * 3);\n  background-color: var(--gray50);\n  border-radius: var(--border-size-large);\n}\n\n:host(.info-card) .info-icon {\n  --z-icon-width: 1.125rem;\n  --z-icon-height: 1.125rem;\n\n  fill: var(--color-default-icon);\n}\n\n:host(.info-card) .card-title {\n  display: -webkit-box;\n  overflow: hidden;\n  min-width: 0;\n  max-width: 100%;\n  max-height: 2.4em;\n  margin-top: 0;\n  margin-bottom: calc(var(--space-unit) / 2);\n  -webkit-box-orient: vertical;\n  font-size: var(--font-size-3);\n  font-weight: var(--font-bd);\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n  line-height: 1.2;\n  word-break: break-word;\n}\n\n:host(.info-card) .card-subtitle {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: 1.2;\n  white-space: normal;\n  word-break: break-word;\n}\n\n@media (max-width: 767px) {\n  .card-title {\n    display: block;\n    overflow: hidden;\n    line-height: normal;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot tags - slot containing the descriptors for the opera variant\n * @slot volumes - slot containing the volume count to be displayed in the opera variant\n */\n@Component({\n  tag: \"z-result-card\",\n  styleUrls: [\"styles.css\"],\n  shadow: true,\n})\nexport class ZResultCard {\n  @Element() hostElement: HTMLZResultCardElement;\n\n  /** The title of the card. */\n  @Prop()\n  cardTitle: string;\n\n  /** The subtitle of the card. */\n  @Prop()\n  cardSubtitle: string;\n\n  /** The authors of the opera. */\n  @Prop()\n  authors?: string;\n\n  /** The URL of the cover image of the opera. */\n  @Prop()\n  cover?: string;\n\n  /** [optional] Fallback cover URL. */\n  @Prop()\n  fallbackCover?: string;\n\n  /** Whether to show a stack of covers to represent multiple books. */\n  @Prop()\n  hasMultipleCovers = false;\n\n  /** Enables the \"info\" variant of the card. */\n  @Prop()\n  isInfoCard = false;\n\n  /** [optional] Set a specific heading level as html tag for the title. */\n  @Prop()\n  titleHtmlTag?: string;\n\n  private authorsRef: HTMLElement;\n\n  private titleRef: HTMLElement;\n\n  private subtitleRef: HTMLElement;\n\n  private setTooltipTitle(el: HTMLElement): void {\n    if (!el) {\n      return;\n    }\n\n    // Check if element uses line-clamp\n    const style = window.getComputedStyle(el);\n    const hasLineClamp = style.getPropertyValue(\"-webkit-line-clamp\") !== \"none\";\n\n    let isTruncated;\n    if (hasLineClamp) {\n      // For elements with line-clamp, check if content height exceeds line-clamp height\n      const lineHeight = parseInt(style.lineHeight);\n      const maxLines = parseInt(style.getPropertyValue(\"-webkit-line-clamp\"));\n      const maxHeight = lineHeight * maxLines;\n\n      isTruncated = el.scrollHeight > maxHeight;\n    } else {\n      // Original check for elements without line-clamp\n      isTruncated = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;\n    }\n\n    if (isTruncated) {\n      el.setAttribute(\"title\", el.textContent.trim());\n    } else {\n      el.removeAttribute(\"title\");\n    }\n  }\n\n  componentDidRender(): void {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  }\n\n  private resizeHandler = (): void => {\n    this.setTooltipTitle(this.authorsRef);\n    this.setTooltipTitle(this.titleRef);\n    this.setTooltipTitle(this.subtitleRef);\n  };\n\n  componentDidLoad(): void {\n    window.addEventListener(\"resize\", this.resizeHandler);\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"resize\", this.resizeHandler);\n  }\n\n  private renderTitle = (): HTMLElement => {\n    const TitleTag = this.titleHtmlTag || \"div\";\n\n    return (\n      <TitleTag\n        class=\"card-title\"\n        ref={(el) => (this.titleRef = el as HTMLElement)}\n      >\n        {this.cardTitle}\n      </TitleTag>\n    );\n  };\n\n  private renderSubtitle = (): HTMLSpanElement => {\n    return (\n      <span\n        class=\"card-subtitle\"\n        ref={(el) => (this.subtitleRef = el as HTMLElement)}\n      >\n        {this.cardSubtitle}\n      </span>\n    );\n  };\n\n  private renderOperaCard = (): HTMLZResultCardElement => {\n    return (\n      <Host>\n        <z-book-cover\n          cover={this.cover}\n          fallbackCover={this.fallbackCover}\n          multiple={this.hasMultipleCovers}\n          bordered={true}\n        ></z-book-cover>\n        <div class=\"info-container\">\n          {this.authors && (\n            <span\n              class=\"authors-label\"\n              ref={(el) => (this.authorsRef = el as HTMLElement)}\n            >\n              {this.authors}\n            </span>\n          )}\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n          <div class=\"tags-container\">\n            <slot name=\"tags\"></slot>\n          </div>\n          <div class=\"volumes-label\">\n            <slot name=\"volumes\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  };\n\n  private renderInfoCard = (): HTMLZResultCardElement => {\n    return (\n      <Host class=\"info-card\">\n        <div class=\"info-icon-container\">\n          <z-icon\n            class=\"info-icon\"\n            name=\"link\"\n          />\n        </div>\n        <div class=\"info-container\">\n          {this.renderTitle()}\n          {this.renderSubtitle()}\n        </div>\n      </Host>\n    );\n  };\n\n  render(): HTMLZResultCardElement {\n    return this.isInfoCard ? this.renderInfoCard() : this.renderOperaCard();\n  }\n}\n"],"version":3}

package/dist/esm/z-select.entry.js

@@ -3,7 +3,7 @@ import { e as ControlSize, g as KeyboardCode, l as ListDividerType, i as ListSiz
 import { r as randomId, b as boolean, e as getElementTree, f as getClickedElement } from './utils-6e2be2b6.js';
 import './breakpoints-d148bfde.js';
 
-const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;color:var(--color-form-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size=\"small\"].sc-z-select-h,[size=\"x-small\"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>z-input.sc-z-select .input-icon.sc-z-select{cursor:pointer}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;border-top:none;background:var(--color-form-background);box-shadow:var(--shadow-2);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select z-list.sc-z-select{--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)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:var(--space-unit) calc(var(--space-unit) * 1.5);margin:calc(var(--space-unit) * -1) 0;outline:none}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element[disabled].sc-z-select{color:var(--color-form-disabled03)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);column-gap:var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{margin-right:auto}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size=\"small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:var(--font-sb)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--color-form-default-text)}.reset-item.sc-z-select{color:var(--color-form-active-primary);fill:var(--color-form-active-primary)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:var(--space-unit)}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}.tree-list-reset-item.sc-z-select{padding:var(--space-unit) 0}z-list-element.sc-z-select{position:relative;display:block}z-list.sc-z-select z-list-element.sc-z-select::before{position:absolute;z-index:100;top:3px;left:-15px;width:8px;height:1em;border-bottom:1px solid var(--color-form-disabled01-icon);border-left:1px solid var(--color-form-disabled01-icon);content:\"\";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select::after{position:absolute;z-index:100;top:5px;left:-15px;width:8px;height:100%;border-left:1px solid var(--color-form-disabled01-icon);content:\"\";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select:last-child::after{display:none}z-list.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-element.sc-z-select::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::after{display:none}z-list.sc-z-select>div.children-node.sc-z-select{padding-left:calc(var(--space-unit) * 2)}z-list-element.grouped-tree-parent-node.sc-z-select{padding-top:0;padding-left:calc(var(--space-unit) * 2)}z-list-element.sc-z-select>.list-element.sc-z-select{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.25) 0;cursor:pointer}z-list-element.sc-z-select>.list-element.sc-z-select:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-list-element.sc-z-select>.list-element.sc-z-select .item.ellipsis.sc-z-select{overflow:hidden}z-list-element.sc-z-select .list-element.sc-z-select::after{position:absolute;top:0;right:-1px;display:block;width:100%;height:40px;content:\"\";transform:translateX(-100%)}z-list-element.tree-search-item.sc-z-select{padding-top:0}z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select::after{position:absolute;top:8px;right:-25px;display:block;width:100%;height:40px;content:\"\";transform:translateX(-100%)}z-list-element.grouped-tree-parent-node.sc-z-select .list-element.sc-z-select::after{position:absolute;top:8px;right:-25px;display:block;width:100%;height:40px;content:\"\";transform:translateX(-100%)}z-list-element.sc-z-select:not([disabled])>.list-element.sc-z-select:hover,z-list-element.sc-z-select:not([disabled])>.list-element.sc-z-select:hover::after{z-index:-1;background-color:var(--color-form-surface03);cursor:pointer}.item-label.selected.sc-z-select{font-weight:bold}.item.ellipsis.sc-z-select{display:inline-block;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}z-list.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after,z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select:hover::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;top:8px;right:-18px;display:block;width:100%;height:40px;content:\"\";transform:translateX(-100%)}z-list-element.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;top:0;right:0;display:block;width:100%;height:40px;content:\"\";transform:translateX(-100%)}.children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select z-list-element.sc-z-select::after{left:-15px}.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::after{left:-15px}.children-node.sc-z-select>z-list-element.sc-z-select{padding:0}";
+const stylesCss = ".sc-z-select-h{display:inline-block;width:inherit;color:var(--color-form-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size=\"small\"].sc-z-select-h,[size=\"x-small\"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>z-input.sc-z-select .input-icon.sc-z-select{cursor:pointer}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;border-top:none;background:var(--color-form-background);box-shadow:var(--shadow-2);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select z-list.sc-z-select{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:var(--space-unit) calc(var(--space-unit) * 1.5);margin:calc(var(--space-unit) * -1) 0;margin:0;outline:none}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element[disabled].sc-z-select{color:var(--color-form-disabled03)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);column-gap:var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{margin-right:auto}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size=\"small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size=\"x-small\"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:var(--font-sb)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--color-form-default-text)}.reset-item.sc-z-select{color:var(--color-form-active-primary);fill:var(--color-form-active-primary)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:var(--space-unit)}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}.tree-list-reset-item.sc-z-select{padding:var(--space-unit) 0}z-list-element.sc-z-select{position:relative;display:block}z-list.sc-z-select z-list-element.sc-z-select::before{position:absolute;z-index:100;top:3px;left:-8px;width:8px;height:1em;border-bottom:1px solid var(--color-form-disabled01-icon);border-left:1px solid var(--color-form-disabled01-icon);content:\"\";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select::after{position:absolute;z-index:100;top:5px;left:-8px;width:8px;height:100%;border-left:1px solid var(--color-form-disabled01-icon);content:\"\";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select:last-child::after{display:none}z-list.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-element.sc-z-select::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::after{display:none}z-list.sc-z-select>div.children-node.sc-z-select{padding-left:calc(var(--space-unit) * 2)}z-list-element.sc-z-select>.list-element.sc-z-select{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.5) var(--space-unit);cursor:pointer}z-list-element.sc-z-select>.list-element.sc-z-select:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-list-element.sc-z-select>.list-element.sc-z-select:hover,z-list-element.sc-z-select>.list-element.sc-z-select:hover::after{background-color:var(--background-hover-color-list-element, var(--color-background))}z-list-element.sc-z-select>.list-element.sc-z-select .item.ellipsis.sc-z-select{overflow:hidden}z-list-element.sc-z-select .list-element.sc-z-select::after{position:absolute;top:0;right:-1px;display:block;width:100%;height:45px;content:\"\";transform:translateX(-100%)}z-list-element.tree-search-item.sc-z-select{padding-top:0}z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select::after{position:absolute;right:-25px;display:block;width:100%;height:45px;content:\"\";transform:translateX(-100%)}z-list-element.grouped-tree-parent-node.sc-z-select .list-element.sc-z-select::after{position:absolute;right:-25px;display:block;width:100%;height:45px;content:\"\";transform:translateX(-100%)}.item-label.selected.sc-z-select{font-weight:bold}.item.ellipsis.sc-z-select{display:inline-block;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}z-list.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after,z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select:hover::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;right:-18px;display:block;width:100%;height:45px;content:\"\";transform:translateX(-100%)}z-list-element.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;top:0;right:0;display:block;width:100%;height:45px;content:\"\";transform:translateX(-100%)}.children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select z-list-element.sc-z-select::after{left:-8px}.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::after{left:-8px}.children-node.sc-z-select>z-list-element.sc-z-select{padding:0}";
 const ZSelectStyle0 = stylesCss;
 
 const ZSelect = class {
@@ -44,11 +44,6 @@ const ZSelect = class {
     watchItems() {
         this.itemsList = this.getInitialItemsArray();
         this.selectedItem = this.findSelectedItem(this.itemsList);
-        this.flattenedList = this.flattenTreeItems(this.itemsList);
-        this.itemIdKeyMap = {};
-        this.flattenedList.forEach(({ item, key }) => {
-            this.itemIdKeyMap[item.id] = key;
-        });
     }
     getFocusedItemHandler(e) {
         this.focusedItemId = e.target.id;
@@ -92,6 +87,7 @@ const ZSelect = class {
     }
     componentWillRender() {
         this.filterItems(this.searchString);
+        this.updateFlattenedList();
     }
     getInitialItemsArray() {
         return typeof this.items === "string" ? JSON.parse(this.items) : this.items;
@@ -108,6 +104,27 @@ const ZSelect = class {
         var _a;
         return (_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id;
     }
+    getGroupedItems() {
+        return Object.entries(this.itemsList.reduce((group, item) => {
+            const category = item.category || "Altra categoria";
+            group[category] = group[category] || [];
+            group[category].push(item);
+            return group;
+        }, {}));
+    }
+    updateFlattenedList() {
+        let orderedItems = this.itemsList;
+        if (this.hasGroupItems) {
+            orderedItems = this.getGroupedItems()
+                .map((item) => item[1])
+                .flat();
+        }
+        this.flattenedList = this.flattenTreeItems(orderedItems);
+        this.itemIdKeyMap = {};
+        this.flattenedList.forEach(({ item, key }) => {
+            this.itemIdKeyMap[item.id] = key;
+        });
+    }
     filterItems(searchString) {
         const prevList = this.mapSelectedItemToItemsArray();
         if (!(searchString === null || searchString === void 0 ? void 0 : searchString.length)) {
@@ -125,11 +142,6 @@ const ZSelect = class {
                 return item;
             });
         }
-        this.flattenedList = this.flattenTreeItems(this.itemsList);
-        this.itemIdKeyMap = {};
-        this.flattenedList.forEach(({ item, key }) => {
-            this.itemIdKeyMap[item.id] = key;
-        });
     }
     filterTree(items, searchString, matchingParent) {
         if (!items) {
@@ -324,7 +336,7 @@ const ZSelect = class {
         }
     }
     scrollToLetter(letter) {
-        const foundItem = this.itemsList.findIndex((item) => item.name.charAt(0) === letter);
+        const foundItem = this.itemsList.findIndex((item) => item.name.toLowerCase().charAt(0) === letter.toLowerCase());
         if (foundItem > -1) {
             this.focusSelectItem(this.itemIdKeyMap[this.itemsList[foundItem].id]);
         }
@@ -333,7 +345,7 @@ const ZSelect = class {
         return (h("z-input", { class: {
                 "active-select": this.isOpen,
                 "cursor-select": !this.autocomplete,
-            }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, autocomplete: "off", "aria-expanded": this.isOpen ? "true" : "false", "aria-label": this.ariaLabel, "aria-controls": `${this.htmlid}_list`, "aria-autocomplete": this.hasAutocomplete() ? "list" : "none", "aria-activedescendant": this.isOpen ? this.focusedItemId : "", icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, role: "combobox", size: this.size, onClick: (e) => {
+            }, id: `${this.htmlid}_input`, htmlid: `${this.htmlid}_select_input`, placeholder: this.placeholder, value: !this.isOpen && this.selectedItem ? this.selectedItem.name.replace(/<[^>]+>/g, "") : null, label: this.label, autocomplete: "off", "aria-label": this.ariaLabel, "html-aria-expanded": this.isOpen ? "true" : "false", "html-aria-controls": `${this.htmlid}_list`, "html-aria-autocomplete": this.hasAutocomplete() ? "list" : "none", "html-aria-activedescendant": this.isOpen ? this.focusedItemId : "", icon: this.isOpen ? "caret-up" : "caret-down", hasclearicon: false, message: false, name: this.name, disabled: this.disabled, readonly: this.readonly || (!this.hasAutocomplete() && this.isOpen), status: this.isOpen ? undefined : this.status, role: "combobox", size: this.size, onClick: (e) => {
                 this.handleInputClick(e);
             }, onKeyUp: (e) => {
                 e.preventDefault();
@@ -354,7 +366,7 @@ const ZSelect = class {
             }, onKeyPress: (e) => {
                 if (!this.hasAutocomplete()) {
                     e.preventDefault();
-                    this.scrollToLetter(String.fromCharCode(e.keyCode));
+                    this.scrollToLetter(e.key);
                 }
             } }));
     }
@@ -399,17 +411,16 @@ const ZSelect = class {
         }
         return ListSize.MEDIUM;
     }
-    //eslint-disable-next-line
     renderSelectUlItems() {
         if (!this.itemsList.length) {
             return this.renderNoSearchResults();
         }
-        if (this.hasGroupItems && !this.hasTreeItems) {
+        if (this.hasGroupItems) {
+            if (this.hasTreeItems) {
+                return this.renderGroupedTree();
+            }
             return this.renderSelectGroupItems();
         }
-        else if (this.hasGroupItems && this.hasTreeItems) {
-            return this.renderGroupedTree();
-        }
         return this.itemsList.map((item, index, array) => {
             const isLastItem = index === array.length - 1;
             const parentHasSiblings = array.length > 1;
@@ -434,7 +445,7 @@ const ZSelect = class {
         return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, class: {
                 "grouped-tree-parent-node": this.hasGroupItems && !!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length),
                 "tree-search-item": this.hasGroupItems && isTopLevel && !((_b = item.children) === null || _b === void 0 ? void 0 : _b.length) && !!this.searchString,
-            }, size: this.listSizeType(), dividerType: hasDivider, hasTreeItems: this.hasTreeItems }, h("div", { id: `${this.htmlid}_key_${thisItemKey}`, role: "option", class: "list-element", tabIndex: 0, onClick: () => this.selectItem(item), onKeyDown: (e) => {
+            }, size: this.listSizeType(), dividerType: hasDivider, hasTreeItems: this.hasTreeItems }, h("div", { id: `${this.htmlid}_key_${thisItemKey}`, role: "option", class: "list-element", tabIndex: !this.isOpen ? -1 : 0, onClick: () => this.selectItem(item), onKeyDown: (e) => {
                 this.arrowsSelectNav(e, thisItemKey);
                 if (e.key === KeyboardCode.ENTER) {
                     this.selectItem(item);
@@ -446,14 +457,9 @@ const ZSelect = class {
         ))))) : null));
     }
     renderGroupedTree() {
-        const grouped = this.itemsList.reduce((acc, item) => {
-            const category = item.category || "Altra categoria";
-            acc[category] = acc[category] || [];
-            acc[category].push(item);
-            return acc;
-        }, {});
-        return Object.entries(grouped).map(([category, items], index, entries) => {
-            const parentHasSiblings = Object.values(grouped).some((groupItems) => groupItems.length > 1);
+        const groupedItems = this.getGroupedItems();
+        return groupedItems.map(([category, items], index, entries) => {
+            const parentHasSiblings = Object.values(groupedItems).some((groupItems) => groupItems.length > 1);
             // const parentHasSiblings = items.length > 1;
             return (h("z-list-group", { "divider-type": index === entries.length - 1 ? undefined : ListDividerType.ELEMENT, hasTreeItems: true }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, category), h("z-list", null, items.map((item, i, arr) => [
                 this.renderTreeItems(item, i === arr.length - 1, parentHasSiblings, true),
@@ -462,17 +468,13 @@ const ZSelect = class {
         });
     }
     renderSelectGroupItems() {
-        const newData = this.itemsList.reduce((group, item, index, array) => {
-            var _a;
-            const { category } = item;
-            const lastItem = array.length === index + 1;
-            const zListItem = this.renderItem(item, lastItem);
-            group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
-            group[category].push(zListItem);
-            return group;
-        }, {});
-        return Object.entries(newData).map(([key, value]) => {
-            return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
+        const groupedItems = this.getGroupedItems();
+        return groupedItems.map(([key, items], index) => {
+            const isLastGroup = groupedItems.length === index + 1;
+            return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), items.map((item, subindex) => {
+                const isLastItem = items.length === subindex + 1;
+                return this.renderItem(item, isLastGroup && isLastItem);
+            })));
         });
     }
     renderNoSearchResults() {
@@ -485,7 +487,7 @@ const ZSelect = class {
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (h("div", { key: '62cfb836de118bfcdc98864dcc47a798a8f90e1a', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '77bc9e436df78a7609f78d7b263df95d0b897efb', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     get host() { return getElement(this); }
     static get watchers() { return {