@zanichelli/albe-web-components 19.5.0 → 19.6.1

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZStepper {
     render() {
-        return (h(Host, { key: '8a2d0549f14aae5e0ff1cf1d0bb019a86bc1b8e1', role: "navigation" }, h("slot", { key: '1ae9a9e7fec88737934d443d07b20eb354cfd4ae' })));
+        return (h(Host, { key: '911f37a55ad9dd4e8b9503f457a8520381053276', role: "navigation" }, h("slot", { key: 'ffdafe754468c6507796bebf29da4b6f279e2cf5' })));
     }
     static get is() { return "z-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-stepper-item/index.js

@@ -8,7 +8,7 @@ export class ZStepperItem {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (h(Host, { key: 'fc0b562b795155452ded52d0ccfb25b7dfee077a', role: "listitem" }, h("button", Object.assign({ key: '33c5a8bb52a9fe82c096b36eb9e233fa3894c29a', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'a2a82191dcab1aeb2d60879f591bfe15ec58e324', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '618e5e3e990dfe2b3b9faa522ac54a87c79fa04e' }, h("slot", { key: '7ea6a3e4a467bff8853bd9ccf717e9059a37b645' })))));
+        return (h(Host, { key: 'ee4e169d10aaa0e603eccd45acb007a1a2de4ca2', role: "listitem" }, h("button", Object.assign({ key: '15c070f8c2f9e62a29ead2ab38d5a7e7380777d5', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'e20c009b380bb1df1c43e15b7d3aa1d9911a3fc0', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'cc35d8a701d30aadfb76c4de0336883686469d9f' }, h("slot", { key: '3020f6292985228d8483eb3e189f49cd42d5fc48' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,10 +5,10 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTag {
     render() {
-        return (h(Host, { key: 'd5f0ba8914c2d1503af21e5ee3ebcf81c35e9475', class: {
+        return (h(Host, { key: '273eb9a78f7f39ed81015bbe235b46d8582536dc', class: {
                 "expandable": this.expandable && !!this.icon,
                 "has-text": !!this.host.textContent.trim(),
-            } }, this.icon && h("z-icon", { key: 'c15ecbd499567cfbd03a2f64117858676dc6e353', name: this.icon }), h("div", { key: '6b22a48ec600929db078c2fdb692c828ac3bf6e3' }, h("slot", { key: '6566b710bdb7a0fa765628e2dad24ad4b0bc9bd8' }))));
+            } }, this.icon && h("z-icon", { key: '5e40ec0815396062058b551eaaa473d4334c82d9', name: this.icon }), h("div", { key: 'af9ed36756ea11b9b50f7c155e546b0e369e73a3' }, h("slot", { key: 'eeb87108d276c593c17dfa0aec905a75cf0f826d' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-toast-notification/index.js

@@ -151,19 +151,19 @@ export class ZToastNotification {
         }
     }
     render() {
-        return (h(Host, { key: '1fc53b2a046a69423b79dc155a8047927f820f99', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
+        return (h(Host, { key: '2153aaf3bd237468bf2f63534a145ec917c39d73', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, h("div", { key: '3ce177f39a21c8431368287ea771e3b9035494a5', class: "toast-notification-container" }, h("div", { key: 'e516a7f69f5ce2bf2d99d898dc187ed56825cc3a', class: "toast-notification-content" }, h("div", { key: '38550c2a0000cfd468a3e98dbaefbd55f063f5ff', class: "toast-notification-text" }, this.heading && h("span", { key: '242f9da4bb8e8e12a33750077ae2c0f471d3af76', class: "title" }, this.heading), h("span", { key: 'ee4765e96507f08a627d38b2b5462cfceabe378e', class: "message" }, h("slot", { key: 'fb04698db1b74fff5a226d2f37633b7a827575c4', name: "message" }, this.message && h("span", { key: 'cb68e395d3e5986428b3f1bd2d672beb86a53cbc', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: 'b637f3d6fda242d84208b4334f5979af6d81dc15', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: '587c1bb667c497b1dc026a7fd51acf1a12692952', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: 'db8aa264cd8c2f04db4d3271c61106930a9d557b', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+            } }, h("div", { key: '087703ec0d04f6d6a430fd58335392ca63328314', class: "toast-notification-container" }, h("div", { key: 'bca3315b0e1dfe7298941fcac2a76dcb5012f403', class: "toast-notification-content" }, h("div", { key: '6659341a2a78966c8f0876069d828ac344c6d55d', class: "toast-notification-text" }, this.heading && h("span", { key: 'acc832d48232f9f3e2ab6591c3e8589b9274368c', class: "title" }, this.heading), h("span", { key: 'a771954ce07ea0d8b59fd4801d0a08f47b01b369', class: "message" }, h("slot", { key: 'c1c035d7f0c5dad5224bd1fcdc9c6714618e0b94', name: "message" }, this.message && h("span", { key: '620a03bec453fa7273ddc6e0ec36f64ae2a161ce', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '9938abc7188174c6f5de6dbaf9df8bf35a432046', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: 'e58bd461c216163cd219350a2ca4f58a2e7cf4b9', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: 'f18b9d257ab683ce63db3c3f56b76fb985e5dc5c', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
                 if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
                     e.preventDefault();
                     this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
                 }
-            } }, h("z-icon", { key: 'c80895cdd37e91aaad1314d602cb57f5c7d5cbd9', name: "multiply-circled" }))))));
+            } }, h("z-icon", { key: 'a745a5efd0c858fc5551c557e845815ad6ff9c53', name: "multiply-circled" }))))));
     }
     static get is() { return "z-toast-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toast-notification-list/index.js

@@ -39,7 +39,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: '29e7ea359024d2214bbc885d34cc49cc6c86281f', name: "toasts" });
+        return h("slot", { key: '2db7d7d32d1141d4d1af80be7b491eb4204e0320', name: "toasts" });
     }
     static get is() { return "z-toast-notification-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.d.ts

@@ -157,7 +157,7 @@ export { ZToastNotification as ZToastNotification } from '../types/components/z-
 export { defineCustomElement as defineCustomElementZToastNotification } from './z-toast-notification';
 export { ZToastNotificationList as ZToastNotificationList } from '../types/components/z-toast-notification-list/index';
 export { defineCustomElement as defineCustomElementZToastNotificationList } from './z-toast-notification-list';
-export { ZToggleButton as ZToggleButton } from '../types/components/z-toggle-button/index';
+export { ZToggleButton as ZToggleButton } from '../types/components/deprecated/z-toggle-button/index';
 export { defineCustomElement as defineCustomElementZToggleButton } from './z-toggle-button';
 export { ZToggleSwitch as ZToggleSwitch } from '../types/components/z-toggle-switch/index';
 export { defineCustomElement as defineCustomElementZToggleSwitch } from './z-toggle-switch';

package/dist/components/index10.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as n,Host as s,transformTag as a}from"@stencil/core/internal/client";import{j as o,l,D as r,E as c,i as h,m as d,g as u}from"./index2.js";import{d as b}from"./index6.js";import{d as m}from"./index3.js";const f=()=>`:host{outline:none}:host>.container{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;background-color:var(--background-color-list-element, var(--color-surface01));font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size="small"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size="medium"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size="medium"])>.tree-element-container{padding-top:0;padding-bottom:0}:host([size="large"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size="x-large"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element, var(--color-background))}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{position:relative;z-index:1;box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element, var(--color-background))}:host([align-button="left"][expandable])>.container>.z-list-element-container{display:flex}:host([align-button="right"][expandable])>.container>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button="left"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button="right"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:flex;align-items:center}:host .z-tree-list-divider{position:absolute;z-index:100;left:0}:host([disabled])>.container{color:var(--color-form-disabled03);cursor:default}`;const p=e(class e extends t{accessibleFocusHandler(e){if(this.listElementId===e.detail){const t=this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);t.focus()}}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.accessibleFocus=i(this,"accessibleFocus",7);this.ariaDescendantFocus=i(this,"ariaDescendantFocus",7);this.clickItem=i(this,"clickItem",7);this.alignButton=o.LEFT;this.clickable=false;this.dividerColor="color-surface03";this.dividerType=l.NONE;this.dividerSize=r.SMALL;this.expandable=false;this.expandableStyle=c.ACCORDION;this.size=h.MEDIUM;this.color="none";this.disabled=false;this.listElementPosition="0";this.listType=d.NONE;this.role="listitem";this.htmlTabindex=0;this.showInnerContent=false;this.openElementConfig={accordion:{open:"minus-circled",close:"plus-circled"},menu:{open:"chevron-up",close:"chevron-down"}};this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}handleClick(){if(this.disabled){return}this.clickItem.emit(this.listElementId);if(!this.expandable){return}this.showInnerContent=!this.showInnerContent}handleKeyDown(e){const t=e.code===u.ENTER;switch(e.code){case u.ARROW_DOWN:e.preventDefault();this.accessibleFocus.emit(this.listElementId+1);break;case u.ARROW_UP:e.preventDefault();this.accessibleFocus.emit(this.listElementId-1);break;case u.ENTER:e.preventDefault();this.clickItem.emit(this.listElementId);break}if(!this.expandable||!t){return}this.showInnerContent=!this.showInnerContent}renderExpandableButton(){if(!this.expandable){return null}return n("z-icon",{name:this.showInnerContent?this.openElementConfig[this.expandableStyle].open:this.openElementConfig[this.expandableStyle].close})}renderExpandedContent(){if(!this.expandable){return null}return n("div",{class:{"z-list-element-inner-container":true,expanded:this.showInnerContent}},n("slot",{name:"inner-content"}))}renderContent(){if(this.listType===d.NONE){return n("slot",null)}if(this.listType===d.ORDERED){return n("div",{class:"z-list-content-container"},n("div",null,this.listElementPosition,". "),n("slot",null))}if(this.listType===d.UNORDERED){return n("div",{class:"z-list-content-container"},n("span",null,"• "),n("slot",null))}}render(){return n(s,{key:"9a06293fba7e3b74fe169d1d3e927a4abd7b17f1","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.role},n("div",{key:"c962c30a71313bd84b1075ad03a96e4b5de77a42",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"},n("div",{key:"ccca86019dec23767ae7bcf5af988c7f2366d850",class:"z-list-element-container"},this.renderExpandableButton(),this.renderContent()),this.renderExpandedContent()),this.dividerType===l.ELEMENT&&n("z-divider",{key:"f8f1b6053d0fe0415b520c4f1deaba92e24019b8",class:{"z-tree-list-divider":this.hasTreeItems},color:this.dividerColor,size:this.dividerSize}))}get host(){return this}static get style(){return f()}},[257,"z-list-element",{alignButton:[513,"align-button"],clickable:[516],dividerColor:[1,"divider-color"],dividerType:[1,"divider-type"],dividerSize:[1,"divider-size"],expandable:[516],expandableStyle:[1,"expandable-style"],listElementId:[514,"list-element-id"],size:[513],color:[513],disabled:[516],listElementPosition:[513,"list-element-position"],listType:[513,"list-type"],hasTreeItems:[4,"has-tree-items"],role:[513],htmlTabindex:[2,"html-tabindex"],showInnerContent:[32]},[[4,"accessibleFocus","accessibleFocusHandler"]]]);function v(){if(typeof customElements==="undefined"){return}const e=["z-list-element","z-divider","z-icon"];e.forEach((e=>{switch(e){case"z-list-element":if(!customElements.get(a(e))){customElements.define(a(e),p)}break;case"z-divider":if(!customElements.get(a(e))){b()}break;case"z-icon":if(!customElements.get(a(e))){m()}break}}))}export{p as Z,v as d};
+import{proxyCustomElement as e,HTMLElement as t,createEvent as i,h as n,Host as s,transformTag as a}from"@stencil/core/internal/client";import{j as o,l,D as c,E as r,i as d,m as h,g as u}from"./index2.js";import{d as m}from"./index6.js";import{d as b}from"./index3.js";const f=()=>`:host{outline:none}:host>.container{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;background-color:var(--background-color-list-element, var(--color-surface01));font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none}:host([size="small"])>.container{min-height:calc(var(--space-unit) * 4);padding:calc(var(--space-unit) / 2) 0}:host([size="medium"])>.container{min-height:calc(var(--space-unit) * 5);padding:var(--space-unit) 0}:host([size="medium"])>.tree-element-container{padding-top:0;padding-bottom:0}:host([size="large"])>.container{min-height:calc(var(--space-unit) * 7);padding:calc(var(--space-unit) * 2) 0}:host([size="x-large"])>.container{min-height:calc(var(--space-unit) * 9);padding:calc(var(--space-unit) * 3) 0}:host([expandable])>.container,:host([clickable])>.container{cursor:pointer}:host([expandable]:hover)>.container,:host([clickable]:hover)>.container{background-color:var(--background-hover-color-list-element, var(--color-background))}:host([expandable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container{position:relative;z-index:1;box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([clickable]:active)>.container{background-color:var(--background-active-color-list-element, var(--color-background))}:host([align-button="left"][expandable])>.container>.z-list-element-container{display:flex}:host([align-button="right"][expandable])>.container>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button="left"][expandable])>.container>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button="right"][expandable])>.container>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded{display:block}.z-list-content-container{display:flex;align-items:center}:host .z-tree-list-divider{position:absolute;z-index:100;left:0}:host([disabled])>.container{color:var(--color-form-disabled03);cursor:default}`;const p=e(class e extends t{accessibleFocusHandler(e){if(this.listElementId===e.detail){const t=this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);t.focus()}}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.accessibleFocus=i(this,"accessibleFocus",7);this.ariaDescendantFocus=i(this,"ariaDescendantFocus",7);this.clickItem=i(this,"clickItem",7);this.alignButton=o.LEFT;this.clickable=false;this.dividerColor="color-surface03";this.dividerType=l.NONE;this.dividerSize=c.SMALL;this.expandable=false;this.expandableStyle=r.ACCORDION;this.size=d.MEDIUM;this.color="none";this.disabled=false;this.listElementPosition="0";this.listType=h.NONE;this.role="listitem";this.htmlTabindex=0;this.showInnerContent=false;this.openElementConfig={accordion:{open:"minus-circled",close:"plus-circled"},menu:{open:"chevron-up",close:"chevron-down"}};this.handleClick=this.handleClick.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this)}handleClick(){if(this.disabled){return}this.clickItem.emit(this.listElementId);if(!this.expandable){return}this.showInnerContent=!this.showInnerContent}handleKeyDown(e){const t=e.code===u.ENTER;switch(e.code){case u.ARROW_DOWN:e.preventDefault();this.accessibleFocus.emit(this.listElementId+1);break;case u.ARROW_UP:e.preventDefault();this.accessibleFocus.emit(this.listElementId-1);break;case u.ENTER:e.preventDefault();this.clickItem.emit(this.listElementId);break}if(!this.expandable||!t){return}this.showInnerContent=!this.showInnerContent}renderExpandableButton(){if(!this.expandable){return null}return n("z-icon",{name:this.showInnerContent?this.openElementConfig[this.expandableStyle].open:this.openElementConfig[this.expandableStyle].close})}renderExpandedContent(){if(!this.expandable){return null}return n("div",{class:{"z-list-element-inner-container":true,expanded:this.showInnerContent}},n("slot",{name:"inner-content"}))}renderContent(){if(this.listType===h.NONE){return n("slot",null)}if(this.listType===h.ORDERED){return n("div",{class:"z-list-content-container"},n("div",null,this.listElementPosition,". "),n("slot",null))}if(this.listType===h.UNORDERED){return n("div",{class:"z-list-content-container"},n("span",null,"• "),n("slot",null))}}render(){return n(s,{key:"211b41c7cce6dd3c94d770da67d42203fc776d7e","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.role},n("div",{key:"a79eb753f19c45eb6c87cbf592e9e6196f7188f3",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"},n("div",{key:"c0ec5ddcbdb6b5cea2fe6fa5ec548ca0979fb8bd",class:"z-list-element-container"},this.renderExpandableButton(),this.renderContent()),this.renderExpandedContent()),this.dividerType===l.ELEMENT&&n("z-divider",{key:"50a40995617a49ae25c8351bdcef0ed8cbe791cf",class:{"z-tree-list-divider":this.hasTreeItems},color:this.dividerColor,size:this.dividerSize}))}get host(){return this}static get style(){return f()}},[257,"z-list-element",{alignButton:[513,"align-button"],clickable:[516],dividerColor:[1,"divider-color"],dividerType:[1,"divider-type"],dividerSize:[1,"divider-size"],expandable:[516],expandableStyle:[1,"expandable-style"],listElementId:[514,"list-element-id"],size:[513],color:[513],disabled:[516],listElementPosition:[513,"list-element-position"],listType:[513,"list-type"],hasTreeItems:[4,"has-tree-items"],role:[513],htmlTabindex:[2,"html-tabindex"],showInnerContent:[32]},[[4,"accessibleFocus","accessibleFocusHandler"]]]);function v(){if(typeof customElements==="undefined"){return}const e=["z-list-element","z-divider","z-icon"];e.forEach((e=>{switch(e){case"z-list-element":if(!customElements.get(a(e))){customElements.define(a(e),p)}break;case"z-divider":if(!customElements.get(a(e))){m()}break;case"z-icon":if(!customElements.get(a(e))){b()}break}}))}export{p as Z,v as d};
 //# sourceMappingURL=index10.js.map

package/dist/components/index11.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";import{i as a,l as o,D as d,m as n}from"./index2.js";import{d as h}from"./index6.js";const c=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}:host>.grouped-tree-list-header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:var(--space-unit)}`;const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=a.MEDIUM;this.dividerType=o.NONE;this.dividerSize=d.SMALL;this.dividerColor="gray200";this.listType=n.NONE;this.role="group"}componentDidLoad(){const e=this.host.children;for(let t=0;t<e.length;t++){if(e.length-1>t){e[t].setAttribute("divider-type",this.dividerType);e[t].setAttribute("divider-size",this.dividerSize);e[t].setAttribute("divider-color",this.dividerColor)}e[t].setAttribute("size",this.size);e[t].setAttribute("list-type",this.listType);e[t].setAttribute("list-element-position",t.toString())}}componentWillLoad(){this.hasHeader=!!this.host.querySelector('[slot="header-title"]')}render(){return i(s,{key:"cd9bd738252e44011edad7b468ad711a2ef83f12"},i("div",{key:"d2c2e41d50b4884b438ae7b25e9e2b06260df6ac",class:{"z-list-group-header-container":true,"has-header":this.hasHeader&&!this.hasTreeItems,"grouped-tree-list-header":this.hasTreeItems}},i("slot",{key:"c47a8ea2508c87bbd0688248dcae0350d159350a",name:"header-title"}),this.dividerType===o.HEADER&&i("z-divider",{key:"c0586eee517b42aaf76507286bd086abaecb8013",color:this.dividerColor,size:this.dividerSize})),i("slot",{key:"5f558529f5de2f4b62403d239e8424eea6259fd3"}))}get host(){return this}static get style(){return c()}},[257,"z-list-group",{size:[513],dividerType:[513,"divider-type"],dividerSize:[513,"divider-size"],dividerColor:[513,"divider-color"],listType:[513,"list-type"],hasTreeItems:[4,"has-tree-items"],role:[513]}]);function p(){if(typeof customElements==="undefined"){return}const e=["z-list-group","z-divider"];e.forEach((e=>{switch(e){case"z-list-group":if(!customElements.get(r(e))){customElements.define(r(e),l)}break;case"z-divider":if(!customElements.get(r(e))){h()}break}}))}export{l as Z,p as d};
+import{proxyCustomElement as e,HTMLElement as t,h as i,Host as s,transformTag as r}from"@stencil/core/internal/client";import{i as a,l as o,D as d,m as n}from"./index2.js";import{d as c}from"./index6.js";const h=()=>`:host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;letter-spacing:0.16px;line-height:1.4}:host>.z-list-group-header-container.has-header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}:host>.grouped-tree-list-header{padding-top:calc(var(--space-unit) * 1.5);padding-bottom:var(--space-unit)}`;const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=a.MEDIUM;this.dividerType=o.NONE;this.dividerSize=d.SMALL;this.dividerColor="gray200";this.listType=n.NONE;this.role="group"}componentDidLoad(){const e=this.host.children;for(let t=0;t<e.length;t++){if(e.length-1>t){e[t].setAttribute("divider-type",this.dividerType);e[t].setAttribute("divider-size",this.dividerSize);e[t].setAttribute("divider-color",this.dividerColor)}e[t].setAttribute("size",this.size);e[t].setAttribute("list-type",this.listType);e[t].setAttribute("list-element-position",t.toString())}}componentWillLoad(){this.hasHeader=!!this.host.querySelector('[slot="header-title"]')}render(){return i(s,{key:"08d721c30d9c6f11e4628990bcdb3c6a0f948ef7"},i("div",{key:"9148e5ba5b02120034499ee9e3ba304a2c7a59bc",class:{"z-list-group-header-container":true,"has-header":this.hasHeader&&!this.hasTreeItems,"grouped-tree-list-header":this.hasTreeItems}},i("slot",{key:"c7e244b995fd510f0de3fe5b56fab29645e498e3",name:"header-title"}),this.dividerType===o.HEADER&&i("z-divider",{key:"b7b215bb4fb5d788f51d939277dd63304fecaf50",color:this.dividerColor,size:this.dividerSize})),i("slot",{key:"4b84ad375fca78efccb67e39fdb84ea2786951ab"}))}get host(){return this}static get style(){return h()}},[257,"z-list-group",{size:[513],dividerType:[513,"divider-type"],dividerSize:[513,"divider-size"],dividerColor:[513,"divider-color"],listType:[513,"list-type"],hasTreeItems:[4,"has-tree-items"],role:[513]}]);function p(){if(typeof customElements==="undefined"){return}const e=["z-list-group","z-divider"];e.forEach((e=>{switch(e){case"z-list-group":if(!customElements.get(r(e))){customElements.define(r(e),l)}break;case"z-divider":if(!customElements.get(r(e))){c()}break}}))}export{l as Z,p as d};
 //# sourceMappingURL=index11.js.map

package/dist/components/index12.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as a,createEvent as n,h as t,Host as s,transformTag as o}from"@stencil/core/internal/client";import{v as i,u as c,g as e}from"./index2.js";import{R as r,F as f}from"./reactive-controller.js";import{k as h}from"./utils.js";const v=()=>`.sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transform:translateX(0);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant="pushcontent"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.backdrop.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.backdrop.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;outline:none}@media (min-width: 768px){[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){flex:none}.canvas-container.sc-z-offcanvas{width:var(--z-offcanvas--container-width, 375px);min-width:var(--z-offcanvas--container-width, 375px)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}`;const d=a(class a extends r{constructor(a){super(false);if(a!==false){this.__registerHost()}this.canvasOpenStatusChanged=n(this,"canvasOpenStatusChanged",7);this.variant=i.PUSHCONTENT;this.open=false;this.transitiondirection=c.LEFT;this.skipLoadAnimation=false;this.showBackdrop=true;this.skipAnimation=false;this.focusTrapController=new f(this,{fallbackFocus:()=>this.canvasContent,isActive:()=>this.open&&this.variant===i.OVERLAY})}handleKeyDown(a){if(!this.open||this.variant!==i.OVERLAY){return}if(a.key===e.ESC){a.preventDefault();this.open=false;return}this.focusTrapController.handleWrapTab(a)}handlePageScroll(){const a=this.variant===i.OVERLAY||this.transitiondirection===c.UP?"overflow-y":"overflow-x";this.host.ownerDocument.body.style[a]=this.open?"hidden":""}onOpenChanged(){this.canvasOpenStatusChanged.emit(this.open);this.handlePageScroll();this.focusTrapController.sync()}componentWillLoad(){if(this.open){this.skipAnimation=true}return super.componentWillLoad()}componentDidRender(){this.skipAnimation=false}componentDidLoad(){if(this.open){this.onOpenChanged()}}disconnectedCallback(){this.handlePageScroll();super.disconnectedCallback()}render(){return t(s,{key:"7296200f4eb4aa2f332af790ea04d6e6e78e824c","skip-animation":this.skipAnimation,"aria-hidden":!this.open?"true":null,"aria-modal":this.open&&this.variant===i.OVERLAY?"true":null,role:this.open&&this.variant===i.OVERLAY?"dialog":null},t("div",{key:"8aef7db88fcecdc89484aad70c3a30973dbf17d8",class:"canvas-container"},t("div",{key:"ca715459c24fe5256987efd279db222446186692",class:"canvas-content z-scrollbar",ref:a=>this.canvasContent=a,tabIndex:h(this.host).length?undefined:-1},t("slot",{key:"a365eb11a346deaa1d93deee0e0625858070296e",name:"canvasContent"}))),(this.variant==i.OVERLAY||this.transitiondirection===c.UP)&&this.showBackdrop&&t("div",{key:"4e918c25bda62190bc87720ceb3269d99bd4ad5d",class:"backdrop",onClick:a=>{a.preventDefault();a.stopPropagation();this.open=false}}))}get host(){return this}static get watchers(){return{variant:[{handlePageScroll:1}],open:[{onOpenChanged:0}]}}static get style(){return v()}},[774,"z-offcanvas",{variant:[513],open:[1540],transitiondirection:[513],skipLoadAnimation:[4,"skip-load-animation"],showBackdrop:[4,"show-backdrop"],skipAnimation:[32]},[[4,"keydown","handleKeyDown"]],{variant:[{handlePageScroll:1}],open:[{onOpenChanged:0}]}]);function l(){if(typeof customElements==="undefined"){return}const a=["z-offcanvas"];a.forEach((a=>{switch(a){case"z-offcanvas":if(!customElements.get(o(a))){customElements.define(o(a),d)}break}}))}export{d as Z,l as d};
+import{proxyCustomElement as a,createEvent as n,h as t,Host as s,transformTag as o}from"@stencil/core/internal/client";import{v as i,u as c,g as e}from"./index2.js";import{R as r,F as f}from"./reactive-controller.js";import{k as h}from"./utils.js";const v=()=>`.sc-z-offcanvas-h{font-family:var(--font-family-sans);font-weight:var(--font-rg)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){overflow:hidden}.canvas-container.sc-z-offcanvas{display:flex;overflow:hidden;min-width:100%;height:100%;background:var(--color-surface01);transform:translateX(0);transition:transform 0.4s ease-out}.sc-z-offcanvas-h>*.sc-z-offcanvas{position:fixed;top:var(--z-offcanvas--top-space, 0);right:0;bottom:0;left:0}[open].sc-z-offcanvas-h>*.sc-z-offcanvas{height:calc(100% - var(--z-offcanvas--top-space, 0px))}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(-100%)}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(100%)}[open][transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[open][transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateX(0)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{top:auto;bottom:0;height:var(--z-offcanvas--container-height, 90%);transform:translateY(100%)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas,[variant="overlay"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{z-index:1001}[open][transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transform:translateY(0)}[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"])>.canvas-container.sc-z-offcanvas{position:relative;height:100%}[variant="pushcontent"].sc-z-offcanvas-h:not([open]){display:none}[skip-animation].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{transition:none}.backdrop.sc-z-offcanvas{z-index:1000;width:100%;height:100%;background-color:var(--gray900);opacity:0;pointer-events:none;transition:opacity 0.4s ease-out}[open].sc-z-offcanvas-h>.backdrop.sc-z-offcanvas{opacity:0.7;pointer-events:unset}.canvas-container.sc-z-offcanvas>.canvas-content.sc-z-offcanvas{overflow:hidden auto;flex:1 auto;padding:0 calc(var(--space-unit) * 2);margin:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;outline:none}@media (min-width: 768px){[variant="pushcontent"].sc-z-offcanvas-h:not([transitiondirection="up"]){flex:none}.canvas-container.sc-z-offcanvas{width:var(--z-offcanvas--container-width, 375px);min-width:var(--z-offcanvas--container-width, 375px)}[transitiondirection="up"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{width:100%}[transitiondirection="right"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:auto;left:0}[transitiondirection="left"].sc-z-offcanvas-h>.canvas-container.sc-z-offcanvas{right:0;left:auto}}`;const d=a(class a extends r{constructor(a){super(false);if(a!==false){this.__registerHost()}this.canvasOpenStatusChanged=n(this,"canvasOpenStatusChanged",7);this.variant=i.PUSHCONTENT;this.open=false;this.transitiondirection=c.LEFT;this.skipLoadAnimation=false;this.showBackdrop=true;this.skipAnimation=false;this.focusTrapController=new f(this,{fallbackFocus:()=>this.canvasContent,isActive:()=>this.open&&this.variant===i.OVERLAY})}handleKeyDown(a){if(!this.open||this.variant!==i.OVERLAY){return}if(a.key===e.ESC){a.preventDefault();this.open=false;return}this.focusTrapController.handleWrapTab(a)}handlePageScroll(){const a=this.variant===i.OVERLAY||this.transitiondirection===c.UP?"overflow-y":"overflow-x";this.host.ownerDocument.body.style[a]=this.open?"hidden":""}onOpenChanged(){this.canvasOpenStatusChanged.emit(this.open);this.handlePageScroll();this.focusTrapController.sync()}componentWillLoad(){if(this.open){this.skipAnimation=true}return super.componentWillLoad()}componentDidRender(){this.skipAnimation=false}componentDidLoad(){if(this.open){this.onOpenChanged()}}disconnectedCallback(){this.handlePageScroll();super.disconnectedCallback()}render(){return t(s,{key:"51b926901186e062a9c9bb092db3429a7ac305eb","skip-animation":this.skipAnimation,"aria-hidden":!this.open?"true":null,"aria-modal":this.open&&this.variant===i.OVERLAY?"true":null,role:this.open&&this.variant===i.OVERLAY?"dialog":null},t("div",{key:"353b8acace02902509f4ae502718aa7e8c6ee1e2",class:"canvas-container"},t("div",{key:"2a18631be55b973bd8a3853284d3e1be5c6e6f23",class:"canvas-content z-scrollbar",ref:a=>this.canvasContent=a,tabIndex:h(this.host).length?undefined:-1},t("slot",{key:"9bd16e9e5b133a17eb3b53d2e1cb89c367e40f84",name:"canvasContent"}))),(this.variant==i.OVERLAY||this.transitiondirection===c.UP)&&this.showBackdrop&&t("div",{key:"5e31cd8fcd36857ad313f9e99691147d08858819",class:"backdrop",onClick:a=>{a.preventDefault();a.stopPropagation();this.open=false}}))}get host(){return this}static get watchers(){return{variant:[{handlePageScroll:1}],open:[{onOpenChanged:0}]}}static get style(){return v()}},[774,"z-offcanvas",{variant:[513],open:[1540],transitiondirection:[513],skipLoadAnimation:[4,"skip-load-animation"],showBackdrop:[4,"show-backdrop"],skipAnimation:[32]},[[4,"keydown","handleKeyDown"]],{variant:[{handlePageScroll:1}],open:[{onOpenChanged:0}]}]);function l(){if(typeof customElements==="undefined"){return}const a=["z-offcanvas"];a.forEach((a=>{switch(a){case"z-offcanvas":if(!customElements.get(o(a))){customElements.define(o(a),d)}break}}))}export{d as Z,l as d};
 //# sourceMappingURL=index12.js.map

package/dist/components/index13.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as o,transformTag as n}from"@stencil/core/internal/client";import{e as a,B as r,g as l}from"./index2.js";import{r as h,o as d}from"./utils.js";import{d as f}from"./index5.js";import{d as b}from"./index6.js";import{d as c}from"./index3.js";import{d as g}from"./index7.js";import{d as v}from"./index8.js";import{d as m}from"./index9.js";import{d as p}from"./index10.js";import{d as u}from"./index11.js";import{d as z}from"./index14.js";const w=()=>`:host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:2.75rem;z-index:15;display:flex;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*,::after,::before{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.input-container z-input{z-index:1}.results{--item-icon-size:1rem;--z-icon-height:var(--item-icon-size);--z-icon-width:var(--item-icon-size);--item-inline-padding:calc(var(--space-unit) * 1.5);--item-col-gap:var(--space-unit);position:absolute;top:calc(100% - 1px);left:0;overflow:auto;width:100%;max-height:var(--z-searchbar-results-height, 540px);border:var(--border-size-small) solid var(--color-form-surface03);border-top:none;background:var(--color-form-background)}.results z-list-element{--background-color-list-element:var(--color-form-background);position:relative;display:block}.results>z-list>z-list-element::part(list-item-container){padding:0 var(--item-inline-padding)}.results z-list-element>.list-item{position:relative;display:flex;align-items:center;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);background-color:transparent;color:var(--color-form-default-text);fill:var(--color-form-default-icon);gap:var(--item-col-gap)}.results z-list-element>.list-item:hover{background-color:var(--gray100);cursor:pointer}.results z-list-element>.list-item:focus-visible{z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.results>z-list>z-list-element:not(:last-child)>.list-item,.results z-list-group:not(:last-child)>z-list-element:not(.category-heading){border-bottom:1px solid var(--color-form-surface03)}.results z-list-group{padding:0 var(--item-inline-padding)}.results z-list-group>z-list-element::part(list-item-container){padding:0}.results .sub-list{padding-left:calc(var(--item-icon-size) + var(--item-col-gap))}.results .sub-list z-list-element::part(list-item-container){padding:0}.results .sub-list z-list-element>.list-item{position:relative}.results .sub-list>z-list-element:not(:last-child)::before,.results .sub-list>z-list-element>.list-item::before{position:absolute;top:0;left:calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);border-left:1px solid var(--color-form-surface03);content:""}.results .sub-list>z-list-element:not(:last-child)::before{top:-4px;height:calc(100% + 4px)}.results .sub-list z-list-element>.list-item::before{width:14px;height:calc(var(--z-searchbar-item-height) / 2);border-bottom:1px solid var(--color-form-surface03)}.results .category-heading>.category{font-style:italic}.results .category-heading>.subcategory{text-transform:uppercase}.results z-list-element>.list-item .ellipsis{overflow:hidden}.results .ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item-label mark{background:var(--color-primary03);color:var(--color-default-text)}.results .list-item>z-tag{--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color);margin-left:auto;white-space:nowrap}.results .item-show-all{width:100%;color:var(--color-primary01);cursor:pointer;text-align:center}.results .item-no-results{display:block;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);font-style:italic}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results{--item-icon-size:1.125rem}}`;const y=()=>`.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}`;const k=()=>`.z-scrollbar::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.z-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.z-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{--z-scrollbar-track-gradient:linear-gradient(     to right,     transparent 0 1px,     var(--gray600) 1px 5px,     transparent 5px 6px   );--z-scrollbar-track-color:var(--gray600);--z-scrollbar-thumb-color:var(--color-primary03);--z-scrollbar-thumb-hover-color:var(--color-hover-primary);--z-scrollbar-corner-color:transparent}@supports not selector(.z-scrollbar::-webkit-scrollbar-track){.z-scrollbar{scrollbar-color:var(--color-primary01) transparent}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{scrollbar-color:var(--z-scrollbar-thumb-color, var(--color-primary03))       var(--z-scrollbar-track-color, var(--gray600))}}`;const x=()=>`:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}`;const C=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.searchSubmit=i(this,"searchSubmit",7);this.searchTyping=i(this,"searchTyping",7);this.searchItemClick=i(this,"searchItemClick",7);this.htmlid=`searchbar-${h()}`;this.preventSubmit=false;this.autocomplete=false;this.autocompleteMinChars=3;this.searchHelperLabel="Cerca {searchString}";this.sortResultsItems=false;this.showSearchButton=false;this.searchButtonIconOnly=false;this.searchButtonLabel="CERCA";this.size=a.BIG;this.variant=r.PRIMARY;this.searchString=this.value;this.currResultsCount=this.resultsCount;this.showResults=false;this.isMobile=false;this.resultsItemsList=null}emitSearchItemClick(t){this.searchItemClick.emit(t);this.selectedItem=t;this.searchString=""}emitSearchSubmit(){this.searchSubmit.emit(this.inputRef.value)}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.searchString=this.value}watchSearchString(){this.searchTyping.emit(this.searchString);if(!this.searchString){this.currResultsCount=this.resultsCount}}getResultsItemsList(){return typeof this.resultsItems==="string"?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(){const t={};this.resultsItemsList.forEach((e=>{var i;const s=`${e===null||e===void 0?void 0:e.category}${e===null||e===void 0?void 0:e.subcategory}`;t[s]=(i=t[s])!==null&&i!==void 0?i:{category:e===null||e===void 0?void 0:e.category,subcategory:e===null||e===void 0?void 0:e.subcategory,items:[]};t[s]["items"].push(e)}));if(this.sortResultsItems){return Object.keys(t).sort().reduce(((e,i)=>{e[i]=Object.assign(Object.assign({},t[i]),{items:t[i]["items"].sort(((t,e)=>{const i=t.label.toUpperCase();const s=e.label.toUpperCase();if(i<s){return-1}if(i>s){return 1}return 0}))});return e}),{})}return t}onListItemKeyDown(t,e){if(t.key===l.ENTER){t.preventDefault();this.emitSearchItemClick(e);return}this.handleArrowsNavigation(t)}onSearchHelperKeyDown(t){if(t.key===l.ENTER){t.preventDefault();this.emitSearchSubmit();return}this.handleArrowsNavigation(t)}handleArrowsNavigation(t){var e,i,s,o,n,a;if(![l.ARROW_DOWN,l.ARROW_UP].includes(t.key)){return}const r=t.target;const h=Array.from((i=(e=this.host.shadowRoot)===null||e===void 0?void 0:e.querySelectorAll("z-list .list-item"))!==null&&i!==void 0?i:[]);const d=h.indexOf(r);if(t.key===l.ARROW_DOWN){t.preventDefault();const e=d+1;if(e<h.length){h[e].focus()}}if(t.key===l.ARROW_UP){t.preventDefault();const e=d-1;if(e<0){(o=(s=this.host.shadowRoot)===null||s===void 0?void 0:s.querySelector("input"))===null||o===void 0?void 0:o.focus();(a=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("input"))===null||a===void 0?void 0:a.setSelectionRange(this.inputRef.value.length,this.inputRef.value.length)}if(e>=0){h[e].focus()}}}handleStopTyping(t){t.stopPropagation();this.searchString=t.detail.value;this.selectedItem=undefined}handleSubmit(){if(this.preventSubmit){return}this.emitSearchSubmit()}handleOutsideClick(t){const e=t.composedPath();if(e.includes(this.host)){return}this.showResults=false}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList();this.mql=matchMedia("(max-width: 767px)");this.onMobileViewChange=t=>this.isMobile=t.matches;this.mql.addEventListener("change",this.onMobileViewChange);this.isMobile=this.mql.matches}disconnectedCallback(){var t;(t=this.mql)===null||t===void 0?void 0:t.removeEventListener("change",this.onMobileViewChange)}renderItemLabel(t){if(!this.searchString){return t}return t.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"gmi"),(t=>`<mark>${t}</mark>`))}renderItem(t,e){var i;return s("z-list-element",{id:`list-item-${this.htmlid}-${e}`,role:"presentation",htmlTabindex:-1,onKeyDown:e=>this.onListItemKeyDown(e,t),onClick:()=>this.emitSearchItemClick(t)},s("div",{class:"list-item ellipsis",role:"option",tabindex:0},!!(t===null||t===void 0?void 0:t.icon)&&s("z-icon",{class:"item-icon",name:t.icon}),s("div",{class:"item-label body-3 mobile-body-4",title:t.label,innerHTML:this.renderItemLabel(t.label)}),!!(t===null||t===void 0?void 0:t.tag)&&s("z-tag",{icon:t.tag.icon},!this.isMobile?t.tag.text:"")),!!((i=t.children)===null||i===void 0?void 0:i.length)&&s("z-list",{class:"sub-list",role:"group","aria-label":t.label||undefined},t.children.map(((t,e)=>this.renderItem(t,e)))))}renderItemGroups(){var t;if(!((t=this.resultsItemsList)===null||t===void 0?void 0:t.length)){return}const e=Object.values(this.getGroupedItems());const i=[];const o=!!this.currResultsCount;let n=0;for(const t of e){const e=o?this.currResultsCount-n:t.items.length;if(e<=0){break}const a=t.items.slice(0,e);const r=a.map(((t,e)=>this.renderItem(t,e)));n+=r.length;if(!r.length){continue}const l=[t.category,t.subcategory].filter(Boolean).join(" ");i.push(s("z-list-group",{"aria-label":l||undefined},t.category&&s("z-list-element",{class:"category-heading body-3 mobile-body-4",slot:"header-title",role:"presentation",htmlTabindex:-1},s("div",{class:"category"},t.category),t.subcategory&&s("div",{class:"subcategory"},t.subcategory)),r))}return i}render(){var t,e,i,n,a;return s(o,{key:"511bdb107a222201f119e5d9fc0e936adb2e9658",onFocus:()=>this.showResults=true,onClick:t=>this.handleOutsideClick(t),class:{"has-submit":!!this.showSearchButton,"has-results":!!this.autocomplete}},s("div",{key:"b31f7c2ece0d26218f8d586217180061ee84a02f",class:"input-container"},s("z-input",{key:"c2d0d0f22126a5676949664e21f37c6450e6e645",ref:t=>this.inputRef=t,htmlid:`input-${this.htmlid}`,message:false,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>{d(t,(()=>this.handleSubmit()));this.handleArrowsNavigation(t)},onFocus:()=>this.showResults=true,value:this.searchString||((t=this.selectedItem)===null||t===void 0?void 0:t.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)&&s("div",{key:"acbce883c61063828aa863072282a806da42abef",class:"results z-scrollbar"},this.preventSubmit&&!((e=this.resultsItemsList)===null||e===void 0?void 0:e.length)?s("div",{class:"item-no-results body-3 mobile-body-4"},"Non abbiamo trovato risultati per ",s("b",null,this.searchString),s("br",null),s("br",null),"Cosa puoi fare?",s("ul",null,s("li",null,"Verificare di aver scritto bene"),s("li",null,"Provare a cercare un'altra parola"),s("li",null,"Provare a cercare qualcosa di più generico"))):s("z-list",{role:"listbox",id:`list-${this.htmlid}`,"aria-label":this.htmlAriaLabel||this.label||undefined},this.autocomplete&&!this.preventSubmit&&!!this.searchString&&s("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-search`,onKeyDown:t=>this.onSearchHelperKeyDown(t),onClick:()=>this.emitSearchSubmit()},s("div",{class:"list-item item-search",role:"option",tabindex:0},s("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),s("div",{class:"item-label body-3 mobile-body-4",innerHTML:(i=this.searchHelperLabel)===null||i===void 0?void 0:i.replace("{searchString}",`<mark>${this.searchString}</mark>`)}))),this.renderItemGroups(),!!(this.searchString&&((n=this.resultsItemsList)===null||n===void 0?void 0:n.length)&&this.currResultsCount&&this.currResultsCount<((a=this.resultsItemsList)===null||a===void 0?void 0:a.length))&&s("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-show-all`},s("div",{role:"option",class:"item-show-all body-3 mobile-body-4",tabindex:0,onClick:()=>this.currResultsCount=undefined},"Vedi tutti i risultati"))))),this.showSearchButton&&s("z-button",{key:"dda2667e972cbe44b36f35b53363020ca96de5dc",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 this}static get watchers(){return{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}}static get style(){return w()+(y()+(k()+x()))}},[1,"z-searchbar",{htmlid:[513],preventSubmit:[4,"prevent-submit"],label:[1],htmlAriaLabel:[1,"html-aria-label"],value:[1],placeholder:[1],autocomplete:[4],autocompleteMinChars:[2,"autocomplete-min-chars"],resultsCount:[2,"results-count"],searchHelperLabel:[1,"search-helper-label"],resultsItems:[1,"results-items"],sortResultsItems:[4,"sort-results-items"],showSearchButton:[4,"show-search-button"],searchButtonIconOnly:[4,"search-button-icon-only"],searchButtonLabel:[1,"search-button-label"],size:[1],variant:[1],searchString:[32],currResultsCount:[32],showResults:[32],isMobile:[32],selectedItem:[32]},[[4,"click","handleOutsideClick"]],{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}]);function S(){if(typeof customElements==="undefined"){return}const t=["z-searchbar","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-tag"];t.forEach((t=>{switch(t){case"z-searchbar":if(!customElements.get(n(t))){customElements.define(n(t),C)}break;case"z-button":if(!customElements.get(n(t))){f()}break;case"z-divider":if(!customElements.get(n(t))){b()}break;case"z-icon":if(!customElements.get(n(t))){c()}break;case"z-input":if(!customElements.get(n(t))){g()}break;case"z-input-message":if(!customElements.get(n(t))){v()}break;case"z-list":if(!customElements.get(n(t))){m()}break;case"z-list-element":if(!customElements.get(n(t))){p()}break;case"z-list-group":if(!customElements.get(n(t))){u()}break;case"z-tag":if(!customElements.get(n(t))){z()}break}}))}export{C as Z,S as d};
+import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as o,transformTag as n}from"@stencil/core/internal/client";import{e as a,B as r,g as l}from"./index2.js";import{r as h,o as d}from"./utils.js";import{d as f}from"./index5.js";import{d as c}from"./index6.js";import{d as b}from"./index3.js";import{d as g}from"./index7.js";import{d as v}from"./index8.js";import{d as m}from"./index9.js";import{d as p}from"./index10.js";import{d as u}from"./index11.js";import{d as z}from"./index14.js";const w=()=>`:host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:2.75rem;z-index:15;display:flex;align-items:flex-end;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*,::after,::before{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.input-container z-input{z-index:1}.results{--item-icon-size:1rem;--z-icon-height:var(--item-icon-size);--z-icon-width:var(--item-icon-size);--item-inline-padding:calc(var(--space-unit) * 1.5);--item-col-gap:var(--space-unit);position:absolute;top:calc(100% - 1px);left:0;overflow:auto;width:100%;max-height:var(--z-searchbar-results-height, 540px);border:var(--border-size-small) solid var(--color-form-surface03);border-top:none;background:var(--color-form-background)}.results z-list-element{--background-color-list-element:var(--color-form-background);position:relative;display:block}.results>z-list>z-list-element::part(list-item-container){padding:0 var(--item-inline-padding)}.results z-list-element>.list-item{position:relative;display:flex;align-items:center;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);background-color:transparent;color:var(--color-form-default-text);fill:var(--color-form-default-icon);gap:var(--item-col-gap)}.results z-list-element>.list-item:hover{background-color:var(--gray100);cursor:pointer}.results z-list-element>.list-item:focus-visible{z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.results>z-list>z-list-element:not(:last-child)>.list-item,.results z-list-group:not(:last-child)>z-list-element:not(.category-heading){border-bottom:1px solid var(--color-form-surface03)}.results z-list-group{padding:0 var(--item-inline-padding)}.results z-list-group>z-list-element::part(list-item-container){padding:0}.results .sub-list{padding-left:calc(var(--item-icon-size) + var(--item-col-gap))}.results .sub-list z-list-element::part(list-item-container){padding:0}.results .sub-list z-list-element>.list-item{position:relative}.results .sub-list>z-list-element:not(:last-child)::before,.results .sub-list>z-list-element>.list-item::before{position:absolute;top:0;left:calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);border-left:1px solid var(--color-form-surface03);content:""}.results .sub-list>z-list-element:not(:last-child)::before{top:-4px;height:calc(100% + 4px)}.results .sub-list z-list-element>.list-item::before{width:14px;height:calc(var(--z-searchbar-item-height) / 2);border-bottom:1px solid var(--color-form-surface03)}.results .category-heading>.category{font-style:italic}.results .category-heading>.subcategory{text-transform:uppercase}.results z-list-element>.list-item .ellipsis{overflow:hidden}.results .ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item-label mark{background:var(--color-primary03);color:var(--color-default-text)}.results .list-item>z-tag{--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color);margin-left:auto;white-space:nowrap}.results .item-show-all{width:100%;color:var(--color-primary01);cursor:pointer;text-align:center}.results .item-no-results{display:block;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);font-style:italic}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results{--item-icon-size:1.125rem}}`;const y=()=>`.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}`;const k=()=>`.z-scrollbar::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.z-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.z-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{--z-scrollbar-track-gradient:linear-gradient(     to right,     transparent 0 1px,     var(--gray600) 1px 5px,     transparent 5px 6px   );--z-scrollbar-track-color:var(--gray600);--z-scrollbar-thumb-color:var(--color-primary03);--z-scrollbar-thumb-hover-color:var(--color-hover-primary);--z-scrollbar-corner-color:transparent}@supports not selector(.z-scrollbar::-webkit-scrollbar-track){.z-scrollbar{scrollbar-color:var(--color-primary01) transparent}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{scrollbar-color:var(--z-scrollbar-thumb-color, var(--color-primary03))       var(--z-scrollbar-track-color, var(--gray600))}}`;const x=()=>`:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}`;const C=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.searchSubmit=i(this,"searchSubmit",7);this.searchTyping=i(this,"searchTyping",7);this.searchItemClick=i(this,"searchItemClick",7);this.htmlid=`searchbar-${h()}`;this.preventSubmit=false;this.autocomplete=false;this.autocompleteMinChars=3;this.searchHelperLabel="Cerca {searchString}";this.sortResultsItems=false;this.showSearchButton=false;this.searchButtonIconOnly=false;this.searchButtonLabel="CERCA";this.size=a.BIG;this.variant=r.PRIMARY;this.searchString=this.value;this.currResultsCount=this.resultsCount;this.showResults=false;this.isMobile=false;this.resultsItemsList=null}emitSearchItemClick(t){this.searchItemClick.emit(t);this.selectedItem=t;this.searchString=""}emitSearchSubmit(){this.searchSubmit.emit(this.inputRef.value)}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.searchString=this.value}watchSearchString(){this.searchTyping.emit(this.searchString);if(!this.searchString){this.currResultsCount=this.resultsCount}}getResultsItemsList(){return typeof this.resultsItems==="string"?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(){const t={};this.resultsItemsList.forEach((e=>{var i;const s=`${e===null||e===void 0?void 0:e.category}${e===null||e===void 0?void 0:e.subcategory}`;t[s]=(i=t[s])!==null&&i!==void 0?i:{category:e===null||e===void 0?void 0:e.category,subcategory:e===null||e===void 0?void 0:e.subcategory,items:[]};t[s]["items"].push(e)}));if(this.sortResultsItems){return Object.keys(t).sort().reduce(((e,i)=>{e[i]=Object.assign(Object.assign({},t[i]),{items:t[i]["items"].sort(((t,e)=>{const i=t.label.toUpperCase();const s=e.label.toUpperCase();if(i<s){return-1}if(i>s){return 1}return 0}))});return e}),{})}return t}onListItemKeyDown(t,e){if(t.key===l.ENTER){t.preventDefault();this.emitSearchItemClick(e);return}this.handleArrowsNavigation(t)}onSearchHelperKeyDown(t){if(t.key===l.ENTER){t.preventDefault();this.emitSearchSubmit();return}this.handleArrowsNavigation(t)}handleArrowsNavigation(t){var e,i,s,o,n,a;if(![l.ARROW_DOWN,l.ARROW_UP].includes(t.key)){return}const r=t.target;const h=Array.from((i=(e=this.host.shadowRoot)===null||e===void 0?void 0:e.querySelectorAll("z-list .list-item"))!==null&&i!==void 0?i:[]);const d=h.indexOf(r);if(t.key===l.ARROW_DOWN){t.preventDefault();const e=d+1;if(e<h.length){h[e].focus()}}if(t.key===l.ARROW_UP){t.preventDefault();const e=d-1;if(e<0){(o=(s=this.host.shadowRoot)===null||s===void 0?void 0:s.querySelector("input"))===null||o===void 0?void 0:o.focus();(a=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("input"))===null||a===void 0?void 0:a.setSelectionRange(this.inputRef.value.length,this.inputRef.value.length)}if(e>=0){h[e].focus()}}}handleStopTyping(t){t.stopPropagation();this.searchString=t.detail.value;this.selectedItem=undefined}handleSubmit(){if(this.preventSubmit){return}this.emitSearchSubmit()}handleOutsideClick(t){const e=t.composedPath();if(e.includes(this.host)){return}this.showResults=false}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList();this.mql=matchMedia("(max-width: 767px)");this.onMobileViewChange=t=>this.isMobile=t.matches;this.mql.addEventListener("change",this.onMobileViewChange);this.isMobile=this.mql.matches}disconnectedCallback(){var t;(t=this.mql)===null||t===void 0?void 0:t.removeEventListener("change",this.onMobileViewChange)}renderItemLabel(t){if(!this.searchString){return t}return t.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"gmi"),(t=>`<mark>${t}</mark>`))}renderItem(t,e){var i;return s("z-list-element",{id:`list-item-${this.htmlid}-${e}`,role:"presentation",htmlTabindex:-1,onKeyDown:e=>this.onListItemKeyDown(e,t),onClick:()=>this.emitSearchItemClick(t)},s("div",{class:"list-item ellipsis",role:"option",tabindex:0},!!(t===null||t===void 0?void 0:t.icon)&&s("z-icon",{class:"item-icon",name:t.icon}),s("div",{class:"item-label body-3 mobile-body-4",title:t.label,innerHTML:this.renderItemLabel(t.label)}),!!(t===null||t===void 0?void 0:t.tag)&&s("z-tag",{icon:t.tag.icon},!this.isMobile?t.tag.text:"")),!!((i=t.children)===null||i===void 0?void 0:i.length)&&s("z-list",{class:"sub-list",role:"group","aria-label":t.label||undefined},t.children.map(((t,e)=>this.renderItem(t,e)))))}renderItemGroups(){var t;if(!((t=this.resultsItemsList)===null||t===void 0?void 0:t.length)){return}const e=Object.values(this.getGroupedItems());const i=[];const o=!!this.currResultsCount;let n=0;for(const t of e){const e=o?this.currResultsCount-n:t.items.length;if(e<=0){break}const a=t.items.slice(0,e);const r=a.map(((t,e)=>this.renderItem(t,e)));n+=r.length;if(!r.length){continue}const l=[t.category,t.subcategory].filter(Boolean).join(" ");i.push(s("z-list-group",{"aria-label":l||undefined},t.category&&s("z-list-element",{class:"category-heading body-3 mobile-body-4",slot:"header-title",role:"presentation",htmlTabindex:-1},s("div",{class:"category"},t.category),t.subcategory&&s("div",{class:"subcategory"},t.subcategory)),r))}return i}render(){var t,e,i,n,a;return s(o,{key:"612cbac3edf6d67856efc5b7eff0fc30d5646e7f",onFocus:()=>this.showResults=true,onClick:t=>this.handleOutsideClick(t),class:{"has-submit":!!this.showSearchButton,"has-results":!!this.autocomplete}},s("div",{key:"ddbdeb53bc40923281a6b83a71912668a7f67a3f",class:"input-container"},s("z-input",{key:"5cdb21ccde59c92d9752c15c8891b642cd72cf21",ref:t=>this.inputRef=t,htmlid:`input-${this.htmlid}`,message:false,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>{d(t,(()=>this.handleSubmit()));this.handleArrowsNavigation(t)},onFocus:()=>this.showResults=true,value:this.searchString||((t=this.selectedItem)===null||t===void 0?void 0:t.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)&&s("div",{key:"186b6d67d30f51df48ef9d5666e7d7472f07d144",class:"results z-scrollbar"},this.preventSubmit&&!((e=this.resultsItemsList)===null||e===void 0?void 0:e.length)?s("div",{class:"item-no-results body-3 mobile-body-4"},"Non abbiamo trovato risultati per ",s("b",null,this.searchString),s("br",null),s("br",null),"Cosa puoi fare?",s("ul",null,s("li",null,"Verificare di aver scritto bene"),s("li",null,"Provare a cercare un'altra parola"),s("li",null,"Provare a cercare qualcosa di più generico"))):s("z-list",{role:"listbox",id:`list-${this.htmlid}`,"aria-label":this.htmlAriaLabel||this.label||undefined},this.autocomplete&&!this.preventSubmit&&!!this.searchString&&s("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-search`,onKeyDown:t=>this.onSearchHelperKeyDown(t),onClick:()=>this.emitSearchSubmit()},s("div",{class:"list-item item-search",role:"option",tabindex:0},s("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),s("div",{class:"item-label body-3 mobile-body-4",innerHTML:(i=this.searchHelperLabel)===null||i===void 0?void 0:i.replace("{searchString}",`<mark>${this.searchString}</mark>`)}))),this.renderItemGroups(),!!(this.searchString&&((n=this.resultsItemsList)===null||n===void 0?void 0:n.length)&&this.currResultsCount&&this.currResultsCount<((a=this.resultsItemsList)===null||a===void 0?void 0:a.length))&&s("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-show-all`},s("div",{role:"option",class:"item-show-all body-3 mobile-body-4",tabindex:0,onClick:()=>this.currResultsCount=undefined},"Vedi tutti i risultati"))))),this.showSearchButton&&s("z-button",{key:"b532793e35d1868ed23771b6ec1203c9e62180ee",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 this}static get watchers(){return{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}}static get style(){return w()+(y()+(k()+x()))}},[1,"z-searchbar",{htmlid:[513],preventSubmit:[4,"prevent-submit"],label:[1],htmlAriaLabel:[1,"html-aria-label"],value:[1],placeholder:[1],autocomplete:[4],autocompleteMinChars:[2,"autocomplete-min-chars"],resultsCount:[2,"results-count"],searchHelperLabel:[1,"search-helper-label"],resultsItems:[1,"results-items"],sortResultsItems:[4,"sort-results-items"],showSearchButton:[4,"show-search-button"],searchButtonIconOnly:[4,"search-button-icon-only"],searchButtonLabel:[1,"search-button-label"],size:[1],variant:[1],searchString:[32],currResultsCount:[32],showResults:[32],isMobile:[32],selectedItem:[32]},[[4,"click","handleOutsideClick"]],{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}]);function S(){if(typeof customElements==="undefined"){return}const t=["z-searchbar","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-tag"];t.forEach((t=>{switch(t){case"z-searchbar":if(!customElements.get(n(t))){customElements.define(n(t),C)}break;case"z-button":if(!customElements.get(n(t))){f()}break;case"z-divider":if(!customElements.get(n(t))){c()}break;case"z-icon":if(!customElements.get(n(t))){b()}break;case"z-input":if(!customElements.get(n(t))){g()}break;case"z-input-message":if(!customElements.get(n(t))){v()}break;case"z-list":if(!customElements.get(n(t))){m()}break;case"z-list-element":if(!customElements.get(n(t))){p()}break;case"z-list-group":if(!customElements.get(n(t))){u()}break;case"z-tag":if(!customElements.get(n(t))){z()}break}}))}export{C as Z,S as d};
 //# sourceMappingURL=index13.js.map

package/dist/components/index13.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","typographyCss","ZSearchbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","preventSubmit","autocomplete","autocompleteMinChars","searchHelperLabel","sortResultsItems","showSearchButton","searchButtonIconOnly","searchButtonLabel","size","ControlSize","BIG","variant","ButtonVariant","PRIMARY","searchString","value","currResultsCount","resultsCount","showResults","isMobile","resultsItemsList","emitSearchItemClick","item","searchItemClick","emit","selectedItem","emitSearchSubmit","searchSubmit","inputRef","watchItems","getResultsItemsList","watchResultsCount","watchValue","watchSearchString","searchTyping","resultsItems","JSON","parse","getGroupedItems","groupedItems","forEach","key","category","subcategory","_a","items","push","Object","keys","sort","reduce","obj","assign","a","b","nameA","label","toUpperCase","nameB","onListItemKeyDown","e","KeyboardCode","ENTER","preventDefault","handleArrowsNavigation","onSearchHelperKeyDown","ARROW_DOWN","ARROW_UP","includes","currentElement","target","Array","from","_b","host","shadowRoot","querySelectorAll","currentIndex","indexOf","nextIndex","length","focus","prevIndex","_d","_c","querySelector","_f","_e","setSelectionRange","handleStopTyping","stopPropagation","detail","undefined","handleSubmit","handleOutsideClick","cp","composedPath","componentWillLoad","mql","matchMedia","onMobileViewChange","matches","addEventListener","disconnectedCallback","removeEventListener","renderItemLabel","replace","RegExp","found","renderItem","index","h","id","role","htmlTabindex","onKeyDown","onClick","class","tabindex","icon","name","title","innerHTML","tag","text","children","map","child","renderItemGroups","values","listGroups","hasResultsLimit","renderedCount","groupItem","remaining","visibleItems","slice","listGroupsElements","subindex","ariaLabel","filter","Boolean","join","slot","render","Host","onFocus","ref","el","message","placeholder","onStopTyping","onKeyUp","handleEnterKeydSubmit","htmlAriaLabel","trim","disabled"],"sources":["src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-label/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-scrollbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/tokens/typography.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-searchbar-results-height: Max height of the results container (default: 540px)\n   * @prop --z-searchbar-tag-text-color: Color of tag's text (default --color-primary03);\n   * @prop --z-searchbar-tag-bg: Color of tag's background (default --color-hover-primary);\n   */\n  --z-searchbar-tag-text-color: var(--color-primary03);\n  --z-searchbar-tag-bg: var(--color-hover-primary);\n  --z-searchbar-item-height: 2.75rem;\n\n  z-index: 15;\n  display: flex;\n  column-gap: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.input-container z-input {\n  z-index: 1;\n}\n\n.results {\n  --item-icon-size: 1rem;\n  --z-icon-height: var(--item-icon-size);\n  --z-icon-width: var(--item-icon-size);\n  --item-inline-padding: calc(var(--space-unit) * 1.5);\n  --item-col-gap: var(--space-unit);\n\n  position: absolute;\n  top: calc(100% - 1px);\n  left: 0;\n  overflow: auto;\n  width: 100%;\n  max-height: var(--z-searchbar-results-height, 540px);\n  border: var(--border-size-small) solid var(--color-form-surface03);\n  border-top: none;\n  background: var(--color-form-background);\n}\n\n.results z-list-element {\n  --background-color-list-element: var(--color-form-background);\n\n  position: relative;\n  display: block;\n}\n\n.results > z-list > z-list-element::part(list-item-container) {\n  padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-element > .list-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);\n  background-color: transparent;\n  color: var(--color-form-default-text);\n  fill: var(--color-form-default-icon);\n  gap: var(--item-col-gap);\n}\n\n.results z-list-element > .list-item:hover {\n  background-color: var(--gray100); /* TODO: use correct form-related token when available */\n  cursor: pointer;\n}\n\n.results z-list-element > .list-item:focus-visible {\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n/* list elements separator */\n.results > z-list > z-list-element:not(:last-child) > .list-item,\n.results z-list-group:not(:last-child) > z-list-element:not(.category-heading) {\n  border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results z-list-group {\n  padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-group > z-list-element::part(list-item-container) {\n  padding: 0;\n}\n\n.results .sub-list {\n  padding-left: calc(var(--item-icon-size) + var(--item-col-gap));\n}\n\n.results .sub-list z-list-element::part(list-item-container) {\n  padding: 0;\n}\n\n.results .sub-list z-list-element > .list-item {\n  position: relative;\n}\n\n/* tree indicators */\n.results .sub-list > z-list-element:not(:last-child)::before,\n.results .sub-list > z-list-element > .list-item::before {\n  position: absolute;\n  top: 0;\n  left: calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);\n  border-left: 1px solid var(--color-form-surface03);\n  content: \"\";\n}\n\n/* \"|\" tree indicator */\n.results .sub-list > z-list-element:not(:last-child)::before {\n  top: -4px;\n  height: calc(100% + 4px);\n}\n\n/* \"—\" tree indicator */\n.results .sub-list z-list-element > .list-item::before {\n  width: 14px;\n  height: calc(var(--z-searchbar-item-height) / 2);\n  border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results .category-heading > .category {\n  font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n  text-transform: uppercase;\n}\n\n.results z-list-element > .list-item .ellipsis {\n  overflow: hidden;\n}\n\n.results .ellipsis > .item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.results .item-label mark {\n  background: var(--color-primary03);\n  color: var(--color-default-text);\n}\n\n.results .list-item > z-tag {\n  --z-tag-bg: var(--z-searchbar-tag-bg);\n  --z-tag-text-color: var(--z-searchbar-tag-text-color);\n\n  margin-left: auto;\n  white-space: nowrap;\n}\n\n.results .item-show-all {\n  width: 100%;\n  color: var(--color-primary01);\n  cursor: pointer;\n  text-align: center;\n}\n\n.results .item-no-results {\n  display: block;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n  font-style: italic;\n}\n\n.results .item-no-results > ul {\n  padding-left: calc(var(--space-unit) * 2);\n  margin: var(--space-unit);\n}\n\n@media (min-width: 768px) {\n  .results {\n    --item-icon-size: 1.125rem;\n  }\n}\n",".z-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n","/* Webkit Scrollbar */\n.z-scrollbar::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray600) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray600);\n  --z-scrollbar-thumb-color: var(--color-primary03);\n  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n  --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n  .z-scrollbar {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n\n  :host([theme=\"dark\"]) .z-scrollbar,\n  .z-scrollbar--dark {\n    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))\n      var(--z-scrollbar-track-color, var(--gray600));\n  }\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {\n  ButtonVariant,\n  ControlSize,\n  KeyboardCode,\n  SearchbarGroup,\n  SearchbarGroupedItem,\n  SearchbarItem,\n} from \"../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-searchbar\",\n  styleUrls: [\n    \"styles.css\",\n    \"../css-components/z-label/styles.css\",\n    \"../css-components/z-scrollbar/styles.css\",\n    \"../../tokens/typography.css\",\n  ],\n  shadow: true,\n})\nexport class ZSearchbar implements ComponentInterface {\n  @Element() host: HTMLZSearchbarElement;\n\n  /** The id of the searchbar element */\n  @Prop({reflect: true})\n  htmlid = `searchbar-${randomId()}`;\n\n  /** Prevent submit action */\n  @Prop()\n  preventSubmit?: boolean = false;\n\n  /** The input label */\n  @Prop()\n  label?: string;\n\n  /** The input aria-label */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Input search string */\n  @Prop()\n  value?: string;\n\n  /** Search input placeholder */\n  @Prop()\n  placeholder?: string;\n\n  /** Show autocomplete results */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** Minimun number of characters to dispatch typing event */\n  @Prop()\n  autocompleteMinChars?: number = 3;\n\n  /** Number of results shown. Default: all */\n  @Prop()\n  resultsCount?: number;\n\n  /** Search helper text */\n  @Prop()\n  searchHelperLabel?: string = \"Cerca {searchString}\";\n\n  /** Autocomplete results items */\n  @Prop()\n  resultsItems?: SearchbarItem[] | string;\n\n  /** Sort autocomplete results items */\n  @Prop()\n  sortResultsItems?: boolean = false;\n\n  /** Show submit button */\n  @Prop()\n  showSearchButton?: boolean = false;\n\n  /** Hide the label of the submit button, showing only the icon */\n  @Prop()\n  searchButtonIconOnly?: boolean = false;\n\n  /** The label of the submit button */\n  @Prop()\n  searchButtonLabel?: string = \"CERCA\";\n\n  /** Size of the `z-input` and submit `z-button` */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Submit `z-button` variant */\n  @Prop()\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  @State()\n  searchString = this.value;\n\n  @State()\n  currResultsCount: number | undefined = this.resultsCount;\n\n  @State()\n  showResults = false;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  selectedItem?: SearchbarItem;\n\n  private resultsItemsList: SearchbarItem[] | undefined = null;\n\n  private inputRef: HTMLZInputElement;\n\n  /** Media query list for detecting mobile view. */\n  private mql?: MediaQueryList;\n\n  /** Listener for changes in the mobile view media query. */\n  private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n  /** Emitted on search submit, return search string */\n  @Event()\n  searchSubmit: EventEmitter<string>;\n\n  /** Emitted on search typing, return search string */\n  @Event()\n  searchTyping: EventEmitter<string>;\n\n  /** Emitted on search result click, return item */\n  @Event()\n  searchItemClick: EventEmitter<SearchbarItem>;\n\n  private emitSearchItemClick(item: SearchbarItem): void {\n    this.searchItemClick.emit(item);\n    this.selectedItem = item;\n    this.searchString = \"\";\n  }\n\n  private emitSearchSubmit(): void {\n    this.searchSubmit.emit(this.inputRef.value);\n  }\n\n  @Watch(\"resultsItems\")\n  watchItems(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n  }\n\n  @Watch(\"resultsCount\")\n  watchResultsCount(): void {\n    this.currResultsCount = this.resultsCount;\n  }\n\n  @Watch(\"value\")\n  watchValue(): void {\n    this.searchString = this.value;\n  }\n\n  @Watch(\"searchString\")\n  watchSearchString(): void {\n    this.searchTyping.emit(this.searchString);\n    if (!this.searchString) {\n      this.currResultsCount = this.resultsCount;\n    }\n  }\n\n  private getResultsItemsList(): SearchbarItem[] | undefined {\n    return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n  }\n\n  private getGroupedItems(): SearchbarGroupedItem {\n    const groupedItems = {};\n    this.resultsItemsList.forEach((item: SearchbarItem) => {\n      const key = `${item?.category}${item?.subcategory}`;\n      groupedItems[key] = groupedItems[key] ?? {\n        category: item?.category,\n        subcategory: item?.subcategory,\n        items: [],\n      };\n      groupedItems[key][\"items\"].push(item);\n    });\n\n    if (this.sortResultsItems) {\n      return Object.keys(groupedItems)\n        .sort()\n        .reduce((obj, key) => {\n          obj[key] = {\n            ...groupedItems[key],\n            items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n              const nameA = a.label.toUpperCase();\n              const nameB = b.label.toUpperCase();\n              if (nameA < nameB) {\n                return -1;\n              }\n              if (nameA > nameB) {\n                return 1;\n              }\n\n              return 0;\n            }),\n          };\n\n          return obj;\n        }, {});\n    }\n\n    return groupedItems;\n  }\n\n  private onListItemKeyDown(e: KeyboardEvent, item: SearchbarItem): void {\n    if (e.key === KeyboardCode.ENTER) {\n      e.preventDefault();\n      this.emitSearchItemClick(item);\n\n      return;\n    }\n\n    this.handleArrowsNavigation(e);\n  }\n\n  private onSearchHelperKeyDown(e: KeyboardEvent): void {\n    if (e.key === KeyboardCode.ENTER) {\n      e.preventDefault();\n      this.emitSearchSubmit();\n\n      return;\n    }\n\n    this.handleArrowsNavigation(e);\n  }\n\n  private handleArrowsNavigation(e: KeyboardEvent): void {\n    if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    const currentElement = e.target as HTMLElement;\n    const items = Array.from(this.host.shadowRoot?.querySelectorAll(\"z-list .list-item\") ?? []);\n    const currentIndex = items.indexOf(currentElement);\n\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      e.preventDefault();\n      const nextIndex = currentIndex + 1;\n      if (nextIndex < items.length) {\n        (items[nextIndex] as HTMLElement).focus();\n      }\n    }\n\n    if (e.key === KeyboardCode.ARROW_UP) {\n      e.preventDefault();\n      const prevIndex = currentIndex - 1;\n      if (prevIndex < 0) {\n        this.host.shadowRoot?.querySelector(\"input\")?.focus();\n        this.host.shadowRoot\n          ?.querySelector(\"input\")\n          ?.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n      }\n      if (prevIndex >= 0) {\n        (items[prevIndex] as HTMLElement).focus();\n      }\n    }\n  }\n\n  private handleStopTyping(e: CustomEvent): void {\n    e.stopPropagation();\n    this.searchString = e.detail.value;\n    this.selectedItem = undefined;\n  }\n\n  private handleSubmit(): void {\n    if (this.preventSubmit) {\n      return;\n    }\n\n    this.emitSearchSubmit();\n  }\n\n  @Listen(\"click\", {target: \"document\"})\n  private handleOutsideClick(e: MouseEvent): void {\n    const cp = e.composedPath();\n    if (cp.includes(this.host)) {\n      return;\n    }\n\n    this.showResults = false;\n  }\n\n  componentWillLoad(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n\n    this.mql = matchMedia(\"(max-width: 767px)\");\n    this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n    this.mql.addEventListener(\"change\", this.onMobileViewChange);\n    this.isMobile = this.mql.matches;\n  }\n\n  disconnectedCallback(): void {\n    this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n  }\n\n  private renderItemLabel(label: string): string {\n    if (!this.searchString) {\n      return label;\n    }\n\n    return label.replace(\n      new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n      (found) => `<mark>${found}</mark>`\n    );\n  }\n\n  private renderItem(item: SearchbarItem, index: number): HTMLZListElementElement {\n    return (\n      <z-list-element\n        id={`list-item-${this.htmlid}-${index}`}\n        role=\"presentation\"\n        htmlTabindex={-1}\n        onKeyDown={(e: KeyboardEvent) => this.onListItemKeyDown(e, item)}\n        onClick={() => this.emitSearchItemClick(item)}\n      >\n        <div\n          class=\"list-item ellipsis\"\n          role=\"option\"\n          tabindex={0}\n        >\n          {!!item?.icon && (\n            <z-icon\n              class=\"item-icon\"\n              name={item.icon}\n            />\n          )}\n\n          <div\n            class=\"item-label body-3 mobile-body-4\"\n            title={item.label}\n            innerHTML={this.renderItemLabel(item.label)}\n          />\n          {!!item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n        </div>\n        {!!item.children?.length && (\n          <z-list\n            class=\"sub-list\"\n            role=\"group\"\n            aria-label={item.label || undefined}\n          >\n            {item.children.map((child, index) => this.renderItem(child, index))}\n          </z-list>\n        )}\n      </z-list-element>\n    );\n  }\n\n  /**\n   * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.\n   */\n  private renderItemGroups(): HTMLZListGroupElement[] | undefined {\n    if (!this.resultsItemsList?.length) {\n      return;\n    }\n\n    const groupedItems = Object.values(this.getGroupedItems()) as SearchbarGroup[];\n    const listGroups: HTMLZListGroupElement[] = [];\n    const hasResultsLimit = !!this.currResultsCount;\n    let renderedCount = 0;\n\n    for (const groupItem of groupedItems) {\n      const remaining = hasResultsLimit ? this.currResultsCount - renderedCount : groupItem.items.length;\n      if (remaining <= 0) {\n        break;\n      }\n\n      const visibleItems = groupItem.items.slice(0, remaining);\n      const listGroupsElements: HTMLZListElement[] = visibleItems.map((item: SearchbarItem, subindex: number) =>\n        this.renderItem(item, subindex)\n      );\n      renderedCount += listGroupsElements.length;\n\n      if (!listGroupsElements.length) {\n        continue;\n      }\n\n      const ariaLabel = [groupItem.category, groupItem.subcategory].filter(Boolean).join(\" \");\n\n      listGroups.push(\n        <z-list-group aria-label={ariaLabel || undefined}>\n          {groupItem.category && (\n            <z-list-element\n              class=\"category-heading body-3 mobile-body-4\"\n              slot=\"header-title\"\n              role=\"presentation\"\n              htmlTabindex={-1}\n            >\n              <div class=\"category\">{groupItem.category}</div>\n              {groupItem.subcategory && <div class=\"subcategory\">{groupItem.subcategory}</div>}\n            </z-list-element>\n          )}\n\n          {listGroupsElements}\n        </z-list-group>\n      );\n    }\n\n    return listGroups;\n  }\n\n  render(): HTMLZSearchbarElement {\n    return (\n      <Host\n        onFocus={() => (this.showResults = true)}\n        onClick={(e: MouseEvent) => this.handleOutsideClick(e)}\n        class={{\"has-submit\": !!this.showSearchButton, \"has-results\": !!this.autocomplete}}\n      >\n        <div class=\"input-container\">\n          <z-input\n            ref={(el) => (this.inputRef = el)}\n            htmlid={`input-${this.htmlid}`}\n            message={false}\n            placeholder={this.placeholder}\n            onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n            onKeyUp={(e: KeyboardEvent) => {\n              handleEnterKeydSubmit(e, () => this.handleSubmit());\n              this.handleArrowsNavigation(e);\n            }}\n            onFocus={() => (this.showResults = true)}\n            value={this.searchString || this.selectedItem?.label}\n            size={this.size}\n            label={this.label}\n            aria-label={this.htmlAriaLabel || this.placeholder || undefined}\n          />\n\n          {!!(\n            this.showResults &&\n            this.autocomplete &&\n            this.searchString &&\n            this.searchString.length >= this.autocompleteMinChars &&\n            this.resultsItemsList\n          ) && (\n            <div class=\"results z-scrollbar\">\n              {this.preventSubmit && !this.resultsItemsList?.length ? (\n                <div class=\"item-no-results body-3 mobile-body-4\">\n                  Non abbiamo trovato risultati per <b>{this.searchString}</b>\n                  <br />\n                  <br />\n                  Cosa puoi fare?\n                  <ul>\n                    <li>Verificare di aver scritto bene</li>\n                    <li>Provare a cercare un'altra parola</li>\n                    <li>Provare a cercare qualcosa di più generico</li>\n                  </ul>\n                </div>\n              ) : (\n                <z-list\n                  role=\"listbox\"\n                  id={`list-${this.htmlid}`}\n                  aria-label={this.htmlAriaLabel || this.label || undefined}\n                >\n                  {this.autocomplete && !this.preventSubmit && !!this.searchString && (\n                    <z-list-element\n                      role=\"presentation\"\n                      htmlTabindex={-1}\n                      id={`list-item-${this.htmlid}-search`}\n                      onKeyDown={(e: KeyboardEvent) => this.onSearchHelperKeyDown(e)}\n                      onClick={() => this.emitSearchSubmit()}\n                    >\n                      <div\n                        class=\"list-item item-search\"\n                        role=\"option\"\n                        tabindex={0}\n                      >\n                        <z-icon\n                          class=\"search-icon\"\n                          name=\"left-magnifying-glass\"\n                        />\n                        <div\n                          class=\"item-label body-3 mobile-body-4\"\n                          innerHTML={this.searchHelperLabel?.replace(\n                            \"{searchString}\",\n                            `<mark>${this.searchString}</mark>`\n                          )}\n                        />\n                      </div>\n                    </z-list-element>\n                  )}\n\n                  {this.renderItemGroups()}\n\n                  {!!(\n                    this.searchString &&\n                    this.resultsItemsList?.length &&\n                    this.currResultsCount &&\n                    this.currResultsCount < this.resultsItemsList?.length\n                  ) && (\n                    <z-list-element\n                      role=\"presentation\"\n                      htmlTabindex={-1}\n                      id={`list-item-${this.htmlid}-show-all`}\n                    >\n                      <div\n                        role=\"option\"\n                        class=\"item-show-all body-3 mobile-body-4\"\n                        tabindex={0}\n                        onClick={() => (this.currResultsCount = undefined)}\n                      >\n                        Vedi tutti i risultati\n                      </div>\n                    </z-list-element>\n                  )}\n                </z-list>\n              )}\n            </div>\n          )}\n        </div>\n\n        {this.showSearchButton && (\n          <z-button\n            icon={this.searchButtonIconOnly ? \"search\" : undefined}\n            aria-label={this.searchButtonIconOnly ? this.searchButtonLabel.trim() || \"CERCA\" : undefined}\n            disabled={!!this.preventSubmit}\n            variant={this.variant}\n            size={this.size}\n            onClick={() => this.handleSubmit()}\n          >\n            {this.searchButtonIconOnly ? \"\" : this.searchButtonLabel.trim() || \"CERCA\"}\n          </z-button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["stylesCss","typographyCss","ZSearchbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","preventSubmit","autocomplete","autocompleteMinChars","searchHelperLabel","sortResultsItems","showSearchButton","searchButtonIconOnly","searchButtonLabel","size","ControlSize","BIG","variant","ButtonVariant","PRIMARY","searchString","value","currResultsCount","resultsCount","showResults","isMobile","resultsItemsList","emitSearchItemClick","item","searchItemClick","emit","selectedItem","emitSearchSubmit","searchSubmit","inputRef","watchItems","getResultsItemsList","watchResultsCount","watchValue","watchSearchString","searchTyping","resultsItems","JSON","parse","getGroupedItems","groupedItems","forEach","key","category","subcategory","_a","items","push","Object","keys","sort","reduce","obj","assign","a","b","nameA","label","toUpperCase","nameB","onListItemKeyDown","e","KeyboardCode","ENTER","preventDefault","handleArrowsNavigation","onSearchHelperKeyDown","ARROW_DOWN","ARROW_UP","includes","currentElement","target","Array","from","_b","host","shadowRoot","querySelectorAll","currentIndex","indexOf","nextIndex","length","focus","prevIndex","_d","_c","querySelector","_f","_e","setSelectionRange","handleStopTyping","stopPropagation","detail","undefined","handleSubmit","handleOutsideClick","cp","composedPath","componentWillLoad","mql","matchMedia","onMobileViewChange","matches","addEventListener","disconnectedCallback","removeEventListener","renderItemLabel","replace","RegExp","found","renderItem","index","h","id","role","htmlTabindex","onKeyDown","onClick","class","tabindex","icon","name","title","innerHTML","tag","text","children","map","child","renderItemGroups","values","listGroups","hasResultsLimit","renderedCount","groupItem","remaining","visibleItems","slice","listGroupsElements","subindex","ariaLabel","filter","Boolean","join","slot","render","Host","onFocus","ref","el","message","placeholder","onStopTyping","onKeyUp","handleEnterKeydSubmit","htmlAriaLabel","trim","disabled"],"sources":["src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-label/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-scrollbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/tokens/typography.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-searchbar-results-height: Max height of the results container (default: 540px)\n   * @prop --z-searchbar-tag-text-color: Color of tag's text (default --color-primary03);\n   * @prop --z-searchbar-tag-bg: Color of tag's background (default --color-hover-primary);\n   */\n  --z-searchbar-tag-text-color: var(--color-primary03);\n  --z-searchbar-tag-bg: var(--color-hover-primary);\n  --z-searchbar-item-height: 2.75rem;\n\n  z-index: 15;\n  display: flex;\n  align-items: flex-end;\n  column-gap: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n*,\n::after,\n::before {\n  box-sizing: border-box;\n}\n\n.input-container {\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.input-container z-input {\n  z-index: 1;\n}\n\n.results {\n  --item-icon-size: 1rem;\n  --z-icon-height: var(--item-icon-size);\n  --z-icon-width: var(--item-icon-size);\n  --item-inline-padding: calc(var(--space-unit) * 1.5);\n  --item-col-gap: var(--space-unit);\n\n  position: absolute;\n  top: calc(100% - 1px);\n  left: 0;\n  overflow: auto;\n  width: 100%;\n  max-height: var(--z-searchbar-results-height, 540px);\n  border: var(--border-size-small) solid var(--color-form-surface03);\n  border-top: none;\n  background: var(--color-form-background);\n}\n\n.results z-list-element {\n  --background-color-list-element: var(--color-form-background);\n\n  position: relative;\n  display: block;\n}\n\n.results > z-list > z-list-element::part(list-item-container) {\n  padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-element > .list-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);\n  background-color: transparent;\n  color: var(--color-form-default-text);\n  fill: var(--color-form-default-icon);\n  gap: var(--item-col-gap);\n}\n\n.results z-list-element > .list-item:hover {\n  background-color: var(--gray100); /* TODO: use correct form-related token when available */\n  cursor: pointer;\n}\n\n.results z-list-element > .list-item:focus-visible {\n  z-index: 1;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n/* list elements separator */\n.results > z-list > z-list-element:not(:last-child) > .list-item,\n.results z-list-group:not(:last-child) > z-list-element:not(.category-heading) {\n  border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results z-list-group {\n  padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-group > z-list-element::part(list-item-container) {\n  padding: 0;\n}\n\n.results .sub-list {\n  padding-left: calc(var(--item-icon-size) + var(--item-col-gap));\n}\n\n.results .sub-list z-list-element::part(list-item-container) {\n  padding: 0;\n}\n\n.results .sub-list z-list-element > .list-item {\n  position: relative;\n}\n\n/* tree indicators */\n.results .sub-list > z-list-element:not(:last-child)::before,\n.results .sub-list > z-list-element > .list-item::before {\n  position: absolute;\n  top: 0;\n  left: calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);\n  border-left: 1px solid var(--color-form-surface03);\n  content: \"\";\n}\n\n/* \"|\" tree indicator */\n.results .sub-list > z-list-element:not(:last-child)::before {\n  top: -4px;\n  height: calc(100% + 4px);\n}\n\n/* \"—\" tree indicator */\n.results .sub-list z-list-element > .list-item::before {\n  width: 14px;\n  height: calc(var(--z-searchbar-item-height) / 2);\n  border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results .category-heading > .category {\n  font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n  text-transform: uppercase;\n}\n\n.results z-list-element > .list-item .ellipsis {\n  overflow: hidden;\n}\n\n.results .ellipsis > .item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.results .item-label mark {\n  background: var(--color-primary03);\n  color: var(--color-default-text);\n}\n\n.results .list-item > z-tag {\n  --z-tag-bg: var(--z-searchbar-tag-bg);\n  --z-tag-text-color: var(--z-searchbar-tag-text-color);\n\n  margin-left: auto;\n  white-space: nowrap;\n}\n\n.results .item-show-all {\n  width: 100%;\n  color: var(--color-primary01);\n  cursor: pointer;\n  text-align: center;\n}\n\n.results .item-no-results {\n  display: block;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n  font-style: italic;\n}\n\n.results .item-no-results > ul {\n  padding-left: calc(var(--space-unit) * 2);\n  margin: var(--space-unit);\n}\n\n@media (min-width: 768px) {\n  .results {\n    --item-icon-size: 1.125rem;\n  }\n}\n",".z-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n","/* Webkit Scrollbar */\n.z-scrollbar::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray600) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray600);\n  --z-scrollbar-thumb-color: var(--color-primary03);\n  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n  --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n  .z-scrollbar {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n\n  :host([theme=\"dark\"]) .z-scrollbar,\n  .z-scrollbar--dark {\n    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))\n      var(--z-scrollbar-track-color, var(--gray600));\n  }\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {\n  ButtonVariant,\n  ControlSize,\n  KeyboardCode,\n  SearchbarGroup,\n  SearchbarGroupedItem,\n  SearchbarItem,\n} from \"../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-searchbar\",\n  styleUrls: [\n    \"styles.css\",\n    \"../css-components/z-label/styles.css\",\n    \"../css-components/z-scrollbar/styles.css\",\n    \"../../tokens/typography.css\",\n  ],\n  shadow: true,\n})\nexport class ZSearchbar implements ComponentInterface {\n  @Element() host: HTMLZSearchbarElement;\n\n  /** The id of the searchbar element */\n  @Prop({reflect: true})\n  htmlid = `searchbar-${randomId()}`;\n\n  /** Prevent submit action */\n  @Prop()\n  preventSubmit?: boolean = false;\n\n  /** The input label */\n  @Prop()\n  label?: string;\n\n  /** The input aria-label */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Input search string */\n  @Prop()\n  value?: string;\n\n  /** Search input placeholder */\n  @Prop()\n  placeholder?: string;\n\n  /** Show autocomplete results */\n  @Prop()\n  autocomplete?: boolean = false;\n\n  /** Minimun number of characters to dispatch typing event */\n  @Prop()\n  autocompleteMinChars?: number = 3;\n\n  /** Number of results shown. Default: all */\n  @Prop()\n  resultsCount?: number;\n\n  /** Search helper text */\n  @Prop()\n  searchHelperLabel?: string = \"Cerca {searchString}\";\n\n  /** Autocomplete results items */\n  @Prop()\n  resultsItems?: SearchbarItem[] | string;\n\n  /** Sort autocomplete results items */\n  @Prop()\n  sortResultsItems?: boolean = false;\n\n  /** Show submit button */\n  @Prop()\n  showSearchButton?: boolean = false;\n\n  /** Hide the label of the submit button, showing only the icon */\n  @Prop()\n  searchButtonIconOnly?: boolean = false;\n\n  /** The label of the submit button */\n  @Prop()\n  searchButtonLabel?: string = \"CERCA\";\n\n  /** Size of the `z-input` and submit `z-button` */\n  @Prop()\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Submit `z-button` variant */\n  @Prop()\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  @State()\n  searchString = this.value;\n\n  @State()\n  currResultsCount: number | undefined = this.resultsCount;\n\n  @State()\n  showResults = false;\n\n  @State()\n  isMobile = false;\n\n  @State()\n  selectedItem?: SearchbarItem;\n\n  private resultsItemsList: SearchbarItem[] | undefined = null;\n\n  private inputRef: HTMLZInputElement;\n\n  /** Media query list for detecting mobile view. */\n  private mql?: MediaQueryList;\n\n  /** Listener for changes in the mobile view media query. */\n  private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n  /** Emitted on search submit, return search string */\n  @Event()\n  searchSubmit: EventEmitter<string>;\n\n  /** Emitted on search typing, return search string */\n  @Event()\n  searchTyping: EventEmitter<string>;\n\n  /** Emitted on search result click, return item */\n  @Event()\n  searchItemClick: EventEmitter<SearchbarItem>;\n\n  private emitSearchItemClick(item: SearchbarItem): void {\n    this.searchItemClick.emit(item);\n    this.selectedItem = item;\n    this.searchString = \"\";\n  }\n\n  private emitSearchSubmit(): void {\n    this.searchSubmit.emit(this.inputRef.value);\n  }\n\n  @Watch(\"resultsItems\")\n  watchItems(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n  }\n\n  @Watch(\"resultsCount\")\n  watchResultsCount(): void {\n    this.currResultsCount = this.resultsCount;\n  }\n\n  @Watch(\"value\")\n  watchValue(): void {\n    this.searchString = this.value;\n  }\n\n  @Watch(\"searchString\")\n  watchSearchString(): void {\n    this.searchTyping.emit(this.searchString);\n    if (!this.searchString) {\n      this.currResultsCount = this.resultsCount;\n    }\n  }\n\n  private getResultsItemsList(): SearchbarItem[] | undefined {\n    return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n  }\n\n  private getGroupedItems(): SearchbarGroupedItem {\n    const groupedItems = {};\n    this.resultsItemsList.forEach((item: SearchbarItem) => {\n      const key = `${item?.category}${item?.subcategory}`;\n      groupedItems[key] = groupedItems[key] ?? {\n        category: item?.category,\n        subcategory: item?.subcategory,\n        items: [],\n      };\n      groupedItems[key][\"items\"].push(item);\n    });\n\n    if (this.sortResultsItems) {\n      return Object.keys(groupedItems)\n        .sort()\n        .reduce((obj, key) => {\n          obj[key] = {\n            ...groupedItems[key],\n            items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n              const nameA = a.label.toUpperCase();\n              const nameB = b.label.toUpperCase();\n              if (nameA < nameB) {\n                return -1;\n              }\n              if (nameA > nameB) {\n                return 1;\n              }\n\n              return 0;\n            }),\n          };\n\n          return obj;\n        }, {});\n    }\n\n    return groupedItems;\n  }\n\n  private onListItemKeyDown(e: KeyboardEvent, item: SearchbarItem): void {\n    if (e.key === KeyboardCode.ENTER) {\n      e.preventDefault();\n      this.emitSearchItemClick(item);\n\n      return;\n    }\n\n    this.handleArrowsNavigation(e);\n  }\n\n  private onSearchHelperKeyDown(e: KeyboardEvent): void {\n    if (e.key === KeyboardCode.ENTER) {\n      e.preventDefault();\n      this.emitSearchSubmit();\n\n      return;\n    }\n\n    this.handleArrowsNavigation(e);\n  }\n\n  private handleArrowsNavigation(e: KeyboardEvent): void {\n    if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode)) {\n      return;\n    }\n\n    const currentElement = e.target as HTMLElement;\n    const items = Array.from(this.host.shadowRoot?.querySelectorAll(\"z-list .list-item\") ?? []);\n    const currentIndex = items.indexOf(currentElement);\n\n    if (e.key === KeyboardCode.ARROW_DOWN) {\n      e.preventDefault();\n      const nextIndex = currentIndex + 1;\n      if (nextIndex < items.length) {\n        (items[nextIndex] as HTMLElement).focus();\n      }\n    }\n\n    if (e.key === KeyboardCode.ARROW_UP) {\n      e.preventDefault();\n      const prevIndex = currentIndex - 1;\n      if (prevIndex < 0) {\n        this.host.shadowRoot?.querySelector(\"input\")?.focus();\n        this.host.shadowRoot\n          ?.querySelector(\"input\")\n          ?.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n      }\n      if (prevIndex >= 0) {\n        (items[prevIndex] as HTMLElement).focus();\n      }\n    }\n  }\n\n  private handleStopTyping(e: CustomEvent): void {\n    e.stopPropagation();\n    this.searchString = e.detail.value;\n    this.selectedItem = undefined;\n  }\n\n  private handleSubmit(): void {\n    if (this.preventSubmit) {\n      return;\n    }\n\n    this.emitSearchSubmit();\n  }\n\n  @Listen(\"click\", {target: \"document\"})\n  private handleOutsideClick(e: MouseEvent): void {\n    const cp = e.composedPath();\n    if (cp.includes(this.host)) {\n      return;\n    }\n\n    this.showResults = false;\n  }\n\n  componentWillLoad(): void {\n    this.resultsItemsList = this.getResultsItemsList();\n\n    this.mql = matchMedia(\"(max-width: 767px)\");\n    this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n    this.mql.addEventListener(\"change\", this.onMobileViewChange);\n    this.isMobile = this.mql.matches;\n  }\n\n  disconnectedCallback(): void {\n    this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n  }\n\n  private renderItemLabel(label: string): string {\n    if (!this.searchString) {\n      return label;\n    }\n\n    return label.replace(\n      new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n      (found) => `<mark>${found}</mark>`\n    );\n  }\n\n  private renderItem(item: SearchbarItem, index: number): HTMLZListElementElement {\n    return (\n      <z-list-element\n        id={`list-item-${this.htmlid}-${index}`}\n        role=\"presentation\"\n        htmlTabindex={-1}\n        onKeyDown={(e: KeyboardEvent) => this.onListItemKeyDown(e, item)}\n        onClick={() => this.emitSearchItemClick(item)}\n      >\n        <div\n          class=\"list-item ellipsis\"\n          role=\"option\"\n          tabindex={0}\n        >\n          {!!item?.icon && (\n            <z-icon\n              class=\"item-icon\"\n              name={item.icon}\n            />\n          )}\n\n          <div\n            class=\"item-label body-3 mobile-body-4\"\n            title={item.label}\n            innerHTML={this.renderItemLabel(item.label)}\n          />\n          {!!item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n        </div>\n        {!!item.children?.length && (\n          <z-list\n            class=\"sub-list\"\n            role=\"group\"\n            aria-label={item.label || undefined}\n          >\n            {item.children.map((child, index) => this.renderItem(child, index))}\n          </z-list>\n        )}\n      </z-list-element>\n    );\n  }\n\n  /**\n   * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.\n   */\n  private renderItemGroups(): HTMLZListGroupElement[] | undefined {\n    if (!this.resultsItemsList?.length) {\n      return;\n    }\n\n    const groupedItems = Object.values(this.getGroupedItems()) as SearchbarGroup[];\n    const listGroups: HTMLZListGroupElement[] = [];\n    const hasResultsLimit = !!this.currResultsCount;\n    let renderedCount = 0;\n\n    for (const groupItem of groupedItems) {\n      const remaining = hasResultsLimit ? this.currResultsCount - renderedCount : groupItem.items.length;\n      if (remaining <= 0) {\n        break;\n      }\n\n      const visibleItems = groupItem.items.slice(0, remaining);\n      const listGroupsElements: HTMLZListElement[] = visibleItems.map((item: SearchbarItem, subindex: number) =>\n        this.renderItem(item, subindex)\n      );\n      renderedCount += listGroupsElements.length;\n\n      if (!listGroupsElements.length) {\n        continue;\n      }\n\n      const ariaLabel = [groupItem.category, groupItem.subcategory].filter(Boolean).join(\" \");\n\n      listGroups.push(\n        <z-list-group aria-label={ariaLabel || undefined}>\n          {groupItem.category && (\n            <z-list-element\n              class=\"category-heading body-3 mobile-body-4\"\n              slot=\"header-title\"\n              role=\"presentation\"\n              htmlTabindex={-1}\n            >\n              <div class=\"category\">{groupItem.category}</div>\n              {groupItem.subcategory && <div class=\"subcategory\">{groupItem.subcategory}</div>}\n            </z-list-element>\n          )}\n\n          {listGroupsElements}\n        </z-list-group>\n      );\n    }\n\n    return listGroups;\n  }\n\n  render(): HTMLZSearchbarElement {\n    return (\n      <Host\n        onFocus={() => (this.showResults = true)}\n        onClick={(e: MouseEvent) => this.handleOutsideClick(e)}\n        class={{\"has-submit\": !!this.showSearchButton, \"has-results\": !!this.autocomplete}}\n      >\n        <div class=\"input-container\">\n          <z-input\n            ref={(el) => (this.inputRef = el)}\n            htmlid={`input-${this.htmlid}`}\n            message={false}\n            placeholder={this.placeholder}\n            onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n            onKeyUp={(e: KeyboardEvent) => {\n              handleEnterKeydSubmit(e, () => this.handleSubmit());\n              this.handleArrowsNavigation(e);\n            }}\n            onFocus={() => (this.showResults = true)}\n            value={this.searchString || this.selectedItem?.label}\n            size={this.size}\n            label={this.label}\n            aria-label={this.htmlAriaLabel || this.placeholder || undefined}\n          />\n\n          {!!(\n            this.showResults &&\n            this.autocomplete &&\n            this.searchString &&\n            this.searchString.length >= this.autocompleteMinChars &&\n            this.resultsItemsList\n          ) && (\n            <div class=\"results z-scrollbar\">\n              {this.preventSubmit && !this.resultsItemsList?.length ? (\n                <div class=\"item-no-results body-3 mobile-body-4\">\n                  Non abbiamo trovato risultati per <b>{this.searchString}</b>\n                  <br />\n                  <br />\n                  Cosa puoi fare?\n                  <ul>\n                    <li>Verificare di aver scritto bene</li>\n                    <li>Provare a cercare un'altra parola</li>\n                    <li>Provare a cercare qualcosa di più generico</li>\n                  </ul>\n                </div>\n              ) : (\n                <z-list\n                  role=\"listbox\"\n                  id={`list-${this.htmlid}`}\n                  aria-label={this.htmlAriaLabel || this.label || undefined}\n                >\n                  {this.autocomplete && !this.preventSubmit && !!this.searchString && (\n                    <z-list-element\n                      role=\"presentation\"\n                      htmlTabindex={-1}\n                      id={`list-item-${this.htmlid}-search`}\n                      onKeyDown={(e: KeyboardEvent) => this.onSearchHelperKeyDown(e)}\n                      onClick={() => this.emitSearchSubmit()}\n                    >\n                      <div\n                        class=\"list-item item-search\"\n                        role=\"option\"\n                        tabindex={0}\n                      >\n                        <z-icon\n                          class=\"search-icon\"\n                          name=\"left-magnifying-glass\"\n                        />\n                        <div\n                          class=\"item-label body-3 mobile-body-4\"\n                          innerHTML={this.searchHelperLabel?.replace(\n                            \"{searchString}\",\n                            `<mark>${this.searchString}</mark>`\n                          )}\n                        />\n                      </div>\n                    </z-list-element>\n                  )}\n\n                  {this.renderItemGroups()}\n\n                  {!!(\n                    this.searchString &&\n                    this.resultsItemsList?.length &&\n                    this.currResultsCount &&\n                    this.currResultsCount < this.resultsItemsList?.length\n                  ) && (\n                    <z-list-element\n                      role=\"presentation\"\n                      htmlTabindex={-1}\n                      id={`list-item-${this.htmlid}-show-all`}\n                    >\n                      <div\n                        role=\"option\"\n                        class=\"item-show-all body-3 mobile-body-4\"\n                        tabindex={0}\n                        onClick={() => (this.currResultsCount = undefined)}\n                      >\n                        Vedi tutti i risultati\n                      </div>\n                    </z-list-element>\n                  )}\n                </z-list>\n              )}\n            </div>\n          )}\n        </div>\n\n        {this.showSearchButton && (\n          <z-button\n            icon={this.searchButtonIconOnly ? \"search\" : undefined}\n            aria-label={this.searchButtonIconOnly ? this.searchButtonLabel.trim() || \"CERCA\" : undefined}\n            disabled={!!this.preventSubmit}\n            variant={this.variant}\n            size={this.size}\n            onClick={() => this.handleSubmit()}\n          >\n            {this.searchButtonIconOnly ? \"\" : this.searchButtonLabel.trim() || \"CERCA\"}\n          </z-button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/index14.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,h as a,Host as i,transformTag as s}from"@stencil/core/internal/client";import{d as n}from"./index3.js";const r=()=>`.sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;align-items:flex-start;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg, var(--color-hover-primary));border-radius:var(--border-radius);color:var(--z-tag-text-color, var(--color-text-inverse));fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:14px;text-transform:uppercase}.sc-z-tag-h>z-icon.sc-z-tag{margin-right:0;transition:margin-right 0.3s ease-out}.has-text.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag{margin-right:var(--space-unit)}.has-text.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag{margin-right:var(--space-unit)}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}}render(){return a(i,{key:"d5f0ba8914c2d1503af21e5ee3ebcf81c35e9475",class:{expandable:this.expandable&&!!this.icon,"has-text":!!this.host.textContent.trim()}},this.icon&&a("z-icon",{key:"c15ecbd499567cfbd03a2f64117858676dc6e353",name:this.icon}),a("div",{key:"6b22a48ec600929db078c2fdb692c828ac3bf6e3"},a("slot",{key:"6566b710bdb7a0fa765628e2dad24ad4b0bc9bd8"})))}get host(){return this}static get style(){return r()}},[262,"z-tag",{icon:[1],expandable:[4]}]);function o(){if(typeof customElements==="undefined"){return}const t=["z-tag","z-icon"];t.forEach((t=>{switch(t){case"z-tag":if(!customElements.get(s(t))){customElements.define(s(t),c)}break;case"z-icon":if(!customElements.get(s(t))){n()}break}}))}export{c as Z,o as d};
+import{proxyCustomElement as t,HTMLElement as e,h as a,Host as i,transformTag as s}from"@stencil/core/internal/client";import{d as n}from"./index3.js";const r=()=>`.sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;align-items:flex-start;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg, var(--color-hover-primary));border-radius:var(--border-radius);color:var(--z-tag-text-color, var(--color-text-inverse));fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:14px;text-transform:uppercase}.sc-z-tag-h>z-icon.sc-z-tag{margin-right:0;transition:margin-right 0.3s ease-out}.has-text.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag{margin-right:var(--space-unit)}.has-text.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag{margin-right:var(--space-unit)}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}}render(){return a(i,{key:"273eb9a78f7f39ed81015bbe235b46d8582536dc",class:{expandable:this.expandable&&!!this.icon,"has-text":!!this.host.textContent.trim()}},this.icon&&a("z-icon",{key:"5e40ec0815396062058b551eaaa473d4334c82d9",name:this.icon}),a("div",{key:"af9ed36756ea11b9b50f7c155e546b0e369e73a3"},a("slot",{key:"eeb87108d276c593c17dfa0aec905a75cf0f826d"})))}get host(){return this}static get style(){return r()}},[262,"z-tag",{icon:[1],expandable:[4]}]);function o(){if(typeof customElements==="undefined"){return}const t=["z-tag","z-icon"];t.forEach((t=>{switch(t){case"z-tag":if(!customElements.get(s(t))){customElements.define(s(t),c)}break;case"z-icon":if(!customElements.get(s(t))){n()}break}}))}export{c as Z,o as d};
 //# sourceMappingURL=index14.js.map