@zanichelli/albe-web-components 20.0.2-RC → 21.0.0-RC1

package/dist/components/p-VP75-vje.js

@@ -0,0 +1,2 @@
+import{p as r,H as a,c as e,h as t,d as o,t as s}from"./p-RmbDDbWd.js";import{d as n}from"./p-BAguKZnb.js";import{d as i}from"./p-CbXEdwLi.js";const c=()=>`:host{position:relative;display:flex;width:100%;height:232px;flex-direction:column;align-items:center;padding:calc(var(--space-unit) * 3);background-color:var(--color-surface02);background-image:repeating-linear-gradient(       0deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     ),     repeating-linear-gradient(       90deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     ),     repeating-linear-gradient(       180deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     ),     repeating-linear-gradient(       270deg,       var(--color-surface03),       var(--color-surface03) 12px,       transparent 12px,       transparent 20px     );background-position:0 0,     0 0,     100% 0,     0 100%;background-repeat:no-repeat;background-size:2px 100%,     100% 2px,     2px 100%,     100% 2px;border-radius:var(--border-radius-small);color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host(.dragover) *{pointer-events:none}.dragover-container{position:absolute;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host(.dragover) .dragover-container{display:flex;align-items:center;justify-content:center}`;const d=r(class r extends a{constructor(r){super();if(r!==false){this.__registerHost()}this.__attachShadow();this.fileDropped=e(this,"fileDropped",7);this.dragging=false}onDrop(r){r.preventDefault();this.dragging=false;if(r.dataTransfer.files.length){this.fileDropped.emit(r.dataTransfer.files)}}render(){return t(o,{key:"66f5fb3bcc31650e3d290af5ab076988238c4a4d",class:{dragover:this.dragging},onDragOver:r=>{r.preventDefault();this.dragging=true},onDragLeave:()=>{this.dragging=false},onDrop:this.onDrop.bind(this)},t("div",{key:"e5cdaacb8a2083d4b20203b5722a99e0fd8abd5b",class:"dragover-container"},t("z-button",{key:"59c8a32ac1df38991840b53cbf5dcaf0ca687e9c"},this.dragAndDropLabel)),t("slot",{key:"f9e8745147fdd87c620c3ad5037b401abdf42e2d"}))}static get style(){return c()}},[257,"z-dragdrop-area",{dragAndDropLabel:[1,"drag-and-drop-label"],dragging:[32]}]);function p(){if(typeof customElements==="undefined"){return}const r=["z-dragdrop-area","z-button","z-icon"];r.forEach((r=>{switch(r){case"z-dragdrop-area":if(!customElements.get(s(r))){customElements.define(s(r),d)}break;case"z-button":if(!customElements.get(s(r))){n()}break;case"z-icon":if(!customElements.get(s(r))){i()}break}}))}export{d as Z,p as d};
+//# sourceMappingURL=p-VP75-vje.js.map

package/dist/components/{index19.js.map → p-VP75-vje.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZDragdropArea","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","dragging","onDrop","e","preventDefault","dataTransfer","files","length","fileDropped","emit","render","h","Host","key","class","dragover","onDragOver","onDragLeave","bind","dragAndDropLabel"],"sources":["src/components/file-upload/z-dragdrop-area/styles.css?tag=z-dragdrop-area&encapsulation=shadow","src/components/file-upload/z-dragdrop-area/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 232px;\n  flex-direction: column;\n  align-items: center;\n  padding: calc(var(--space-unit) * 3);\n  background-color: var(--color-surface02);\n  background-image:\n    repeating-linear-gradient(\n      0deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      180deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      270deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    );\n  background-position:\n    0 0,\n    0 0,\n    100% 0,\n    0 100%;\n  background-repeat: no-repeat;\n  background-size:\n    2px 100%,\n    100% 2px,\n    2px 100%,\n    100% 2px;\n  border-radius: var(--border-radius-small);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */\n:host(.dragover) * {\n  pointer-events: none;\n}\n\n.dragover-container {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-primary03);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(.dragover) .dragover-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea implements ComponentInterface {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** State that indicates if the user is dragging a file over the drag & drop area */\n  @State()\n  dragging = false;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private onDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.dragging = false;\n    if (e.dataTransfer.files.length) {\n      this.fileDropped.emit(e.dataTransfer.files);\n    }\n  }\n\n  render(): HTMLZDragdropAreaElement {\n    return (\n      <Host\n        class={{dragover: this.dragging}}\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragging = true;\n        }}\n        onDragLeave={() => {\n          this.dragging = false;\n        }}\n        onDrop={this.onDrop.bind(this)}\n      >\n        <div class=\"dragover-container\">\n          <z-button>{this.dragAndDropLabel}</z-button>\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"wMAAA,MAAMA,EAAY,IAAM,+7C,MCOXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,2GAYEC,KAAAC,SAAW,KAkCZ,CA5BS,MAAAC,CAAOC,GACbA,EAAEC,iBACFJ,KAAKC,SAAW,MAChB,GAAIE,EAAEE,aAAaC,MAAMC,OAAQ,CAC/BP,KAAKQ,YAAYC,KAAKN,EAAEE,aAAaC,M,EAIzC,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAACC,SAAUf,KAAKC,UACvBe,WAAab,IACXA,EAAEC,iBACFJ,KAAKC,SAAW,IAAI,EAEtBgB,YAAa,KACXjB,KAAKC,SAAW,KAAK,EAEvBC,OAAQF,KAAKE,OAAOgB,KAAKlB,OAEzBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,YAAAE,IAAA,4CAAWb,KAAKmB,mBAElBR,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZDragdropArea","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","dragging","onDrop","e","preventDefault","dataTransfer","files","length","fileDropped","emit","render","h","Host","key","class","dragover","onDragOver","onDragLeave","bind","dragAndDropLabel"],"sources":["src/components/file-upload/z-dragdrop-area/styles.css?tag=z-dragdrop-area&encapsulation=shadow","src/components/file-upload/z-dragdrop-area/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 232px;\n  flex-direction: column;\n  align-items: center;\n  padding: calc(var(--space-unit) * 3);\n  background-color: var(--color-surface02);\n  background-image:\n    repeating-linear-gradient(\n      0deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      180deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      270deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    );\n  background-position:\n    0 0,\n    0 0,\n    100% 0,\n    0 100%;\n  background-repeat: no-repeat;\n  background-size:\n    2px 100%,\n    100% 2px,\n    2px 100%,\n    100% 2px;\n  border-radius: var(--border-radius-small);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */\n:host(.dragover) * {\n  pointer-events: none;\n}\n\n.dragover-container {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-primary03);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(.dragover) .dragover-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea implements ComponentInterface {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** State that indicates if the user is dragging a file over the drag & drop area */\n  @State()\n  dragging = false;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private onDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.dragging = false;\n    if (e.dataTransfer.files.length) {\n      this.fileDropped.emit(e.dataTransfer.files);\n    }\n  }\n\n  render(): HTMLZDragdropAreaElement {\n    return (\n      <Host\n        class={{dragover: this.dragging}}\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragging = true;\n        }}\n        onDragLeave={() => {\n          this.dragging = false;\n        }}\n        onDrop={this.onDrop.bind(this)}\n      >\n        <div class=\"dragover-container\">\n          <z-button>{this.dragAndDropLabel}</z-button>\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"+IAAA,MAAMA,EAAY,IAAM,+7C,MCOXC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,2GAYEC,KAAAC,SAAW,KAkCZ,CA5BS,MAAAC,CAAOC,GACbA,EAAEC,iBACFJ,KAAKC,SAAW,MAChB,GAAIE,EAAEE,aAAaC,MAAMC,OAAQ,CAC/BP,KAAKQ,YAAYC,KAAKN,EAAEE,aAAaC,M,EAIzC,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAACC,SAAUf,KAAKC,UACvBe,WAAab,IACXA,EAAEC,iBACFJ,KAAKC,SAAW,IAAI,EAEtBgB,YAAa,KACXjB,KAAKC,SAAW,KAAK,EAEvBC,OAAQF,KAAKE,OAAOgB,KAAKlB,OAEzBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,YAAAE,IAAA,4CAAWb,KAAKmB,mBAElBR,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/p-cpTAMdcF.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,h as s,d as i,t as r}from"./p-RmbDDbWd.js";import{i as o,m as n}from"./p-DdetsoIY.js";const l=()=>`:host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}`;const a=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=o.MEDIUM;this.listType=n.NONE;this.htmlRole="list"}onRoleChange(e){this.htmlRole=e}setChildrenProps(){Array.from(this.host.children).filter((e=>e.tagName.toLowerCase()==="z-list-element")).forEach(((e,t)=>{e.size=this.size;e.listType=this.listType;e.listElementPosition=`${t+1}`}))}render(){return s(i,{key:"aeaf7ef699223b8f5da68f49d8eb6ea5ea5cebb1",role:this.htmlRole},s("slot",{key:"942882c5e4f03ef9dd64ec255b4cd8b8c5c2c107"}))}get host(){return this}static get watchers(){return{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}]}}static get style(){return l()}},[257,"z-list",{size:[513],listType:[513,"list-type"],htmlRole:[32]},undefined,{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["z-list"];e.forEach((e=>{switch(e){case"z-list":if(!customElements.get(r(e))){customElements.define(r(e),a)}break}}))}export{a as Z,h as d};
+//# sourceMappingURL=p-cpTAMdcF.js.map

package/dist/components/{index8.js.map → p-cpTAMdcF.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZList","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","ListSize","MEDIUM","listType","ListType","NONE","htmlRole","onRoleChange","newValue","setChildrenProps","Array","from","host","children","filter","child","tagName","toLowerCase","forEach","i","listElementPosition","render","h","Host","key","role"],"sources":["src/components/list/z-list/styles.css?tag=z-list&encapsulation=shadow","src/components/list/z-list/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZList implements ComponentInterface {\n  @Element() host: HTMLZListElement;\n\n  /**\n   * [optional] Size of the list elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Type of the list marker for each element.\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  @State()\n  htmlRole = \"list\";\n\n  /** Watch for changes in the role native attribute */\n  @Watch(\"role\", {immediate: true})\n  onRoleChange(newValue: string): void {\n    this.htmlRole = newValue;\n  }\n\n  @Watch(\"size\", {immediate: true})\n  @Watch(\"listType\", {immediate: true})\n  setChildrenProps(): void {\n    Array.from(this.host.children)\n      .filter((child): child is HTMLZListElementElement => child.tagName.toLowerCase() === \"z-list-element\")\n      .forEach((child, i) => {\n        child.size = this.size;\n        child.listType = this.listType;\n        child.listElementPosition = `${i + 1}`;\n      });\n  }\n\n  render(): HTMLZListElement {\n    return (\n      <Host role={this.htmlRole}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"8JAAA,MAAMA,EAAY,IAAM,2G,MCQXC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,kEAYEC,KAAAC,KAAkBC,EAASC,OAM3BH,KAAAI,SAAsBC,EAASC,KAG/BN,KAAAO,SAAW,MA2BZ,CAvBC,YAAAC,CAAaC,GACXT,KAAKO,SAAWE,C,CAKlB,gBAAAC,GACEC,MAAMC,KAAKZ,KAAKa,KAAKC,UAClBC,QAAQC,GAA4CA,EAAMC,QAAQC,gBAAkB,mBACpFC,SAAQ,CAACH,EAAOI,KACfJ,EAAMf,KAAOD,KAAKC,KAClBe,EAAMZ,SAAWJ,KAAKI,SACtBY,EAAMK,oBAAsB,GAAGD,EAAI,GAAG,G,CAI5C,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAM1B,KAAKO,UACfgB,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZList","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","ListSize","MEDIUM","listType","ListType","NONE","htmlRole","onRoleChange","newValue","setChildrenProps","Array","from","host","children","filter","child","tagName","toLowerCase","forEach","i","listElementPosition","render","h","Host","key","role"],"sources":["src/components/list/z-list/styles.css?tag=z-list&encapsulation=shadow","src/components/list/z-list/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZList implements ComponentInterface {\n  @Element() host: HTMLZListElement;\n\n  /**\n   * [optional] Size of the list elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Type of the list marker for each element.\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  @State()\n  htmlRole = \"list\";\n\n  /** Watch for changes in the role native attribute */\n  @Watch(\"role\", {immediate: true})\n  onRoleChange(newValue: string): void {\n    this.htmlRole = newValue;\n  }\n\n  @Watch(\"size\", {immediate: true})\n  @Watch(\"listType\", {immediate: true})\n  setChildrenProps(): void {\n    Array.from(this.host.children)\n      .filter((child): child is HTMLZListElementElement => child.tagName.toLowerCase() === \"z-list-element\")\n      .forEach((child, i) => {\n        child.size = this.size;\n        child.listType = this.listType;\n        child.listElementPosition = `${i + 1}`;\n      });\n  }\n\n  render(): HTMLZListElement {\n    return (\n      <Host role={this.htmlRole}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,IAAM,2G,MCQXC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,kEAYEC,KAAAC,KAAkBC,EAASC,OAM3BH,KAAAI,SAAsBC,EAASC,KAG/BN,KAAAO,SAAW,MA2BZ,CAvBC,YAAAC,CAAaC,GACXT,KAAKO,SAAWE,C,CAKlB,gBAAAC,GACEC,MAAMC,KAAKZ,KAAKa,KAAKC,UAClBC,QAAQC,GAA4CA,EAAMC,QAAQC,gBAAkB,mBACpFC,SAAQ,CAACH,EAAOI,KACfJ,EAAMf,KAAOD,KAAKC,KAClBe,EAAMZ,SAAWJ,KAAKI,SACtBY,EAAMK,oBAAsB,GAAGD,EAAI,GAAG,G,CAI5C,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAM1B,KAAKO,UACfgB,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/p-mphirYN3.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,h as i,d as s,t as r}from"./p-RmbDDbWd.js";import{i as o,l as a,D as d,m as n}from"./p-DdetsoIY.js";import{d as h}from"./p-BolVsvfr.js";const l=()=>`: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 p=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=o.MEDIUM;this.dividerType=a.NONE;this.dividerSize=d.SMALL;this.dividerColor="gray200";this.listType=n.NONE;this.htmlRole="group"}onRoleChange(e){this.htmlRole=e}setChildrenProps(){Array.from(this.host.children).filter((e=>e.tagName.toLowerCase()==="z-list-element")).forEach(((e,t,i)=>{e.size=this.size;e.listType=this.listType;e.listElementPosition=t.toString();if(t<i.length-1){e.dividerType=this.dividerType;e.dividerSize=this.dividerSize;e.dividerColor=this.dividerColor}}))}componentWillLoad(){this.hasHeader=!!this.host.querySelector('[slot="header-title"]')}render(){return i(s,{key:"6c87868fe2ef8cb8cba06bea94d4eaca25c3f0e7",role:this.htmlRole},i("div",{key:"bf277438554dd56b141040c8af5e2171eeedfdb7",class:{"z-list-group-header-container":true,"has-header":this.hasHeader&&!this.hasTreeItems,"grouped-tree-list-header":this.hasTreeItems}},i("slot",{key:"c3bf82239b5f0418e10bffbc4e1e26e4c3172dab",name:"header-title"}),this.dividerType===a.HEADER&&i("z-divider",{key:"7127f3a0d6f501f305431d57068da428ccf8b90b",color:this.dividerColor,size:this.dividerSize})),i("slot",{key:"7dfc72c7992c5f28fce1a204ebabfa2a012b7708"}))}get host(){return this}static get watchers(){return{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}],dividerType:[{setChildrenProps:1}],dividerSize:[{setChildrenProps:1}],dividerColor:[{setChildrenProps:1}]}}static get style(){return l()}},[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"],htmlRole:[32]},undefined,{role:[{onRoleChange:1}],size:[{setChildrenProps:1}],listType:[{setChildrenProps:1}],dividerType:[{setChildrenProps:1}],dividerSize:[{setChildrenProps:1}],dividerColor:[{setChildrenProps:1}]}]);function c(){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),p)}break;case"z-divider":if(!customElements.get(r(e))){h()}break}}))}export{p as Z,c as d};
+//# sourceMappingURL=p-mphirYN3.js.map

package/dist/components/{index10.js.map → p-mphirYN3.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZListGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","ListSize","MEDIUM","dividerType","ListDividerType","NONE","dividerSize","DividerSize","SMALL","dividerColor","listType","ListType","htmlRole","onRoleChange","newValue","setChildrenProps","Array","from","host","children","filter","child","tagName","toLowerCase","forEach","i","listElementPosition","toString","length","componentWillLoad","hasHeader","querySelector","render","h","Host","key","role","class","hasTreeItems","name","HEADER","color"],"sources":["src/components/list/z-list-group/styles.css?tag=z-list-group&encapsulation=shadow","src/components/list/z-list-group/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > .z-list-group-header-container {\n  color: var(--gray700);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb) !important;\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n:host > .z-list-group-header-container.has-header {\n  padding-top: calc(var(--space-unit) * 1.5);\n  padding-bottom: var(--space-unit);\n}\n\n:host > .z-list-group-header-container.has-header > z-divider {\n  margin-top: var(--space-unit);\n}\n\n:host > .grouped-tree-list-header {\n  padding-top: calc(var(--space-unit) * 1.5);\n  padding-bottom: var(--space-unit);\n}\n","import {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-group\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListGroup implements ComponentInterface {\n  @Element() host: HTMLZListGroupElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop({reflect: true})\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop({reflect: true})\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop({reflect: true})\n  dividerColor?: string = \"gray200\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] check for tree items in grouped lists\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  @State()\n  htmlRole = \"group\";\n\n  private hasHeader: boolean;\n\n  @Watch(\"role\", {immediate: true})\n  onRoleChange(newValue: string): void {\n    this.htmlRole = newValue;\n  }\n\n  @Watch(\"size\", {immediate: true})\n  @Watch(\"listType\", {immediate: true})\n  @Watch(\"dividerType\", {immediate: true})\n  @Watch(\"dividerSize\", {immediate: true})\n  @Watch(\"dividerColor\", {immediate: true})\n  setChildrenProps(): void {\n    Array.from(this.host.children)\n      .filter((child): child is HTMLZListElementElement => child.tagName.toLowerCase() === \"z-list-element\")\n      .forEach((child, i, children) => {\n        child.size = this.size;\n        child.listType = this.listType;\n        child.listElementPosition = i.toString();\n        if (i < children.length - 1) {\n          child.dividerType = this.dividerType;\n          child.dividerSize = this.dividerSize;\n          child.dividerColor = this.dividerColor;\n        }\n      });\n  }\n\n  componentWillLoad(): void {\n    this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n  }\n\n  render(): HTMLZListGroupElement {\n    return (\n      <Host role={this.htmlRole}>\n        <div\n          class={{\n            \"z-list-group-header-container\": true,\n            \"has-header\": this.hasHeader && !this.hasTreeItems,\n            \"grouped-tree-list-header\": this.hasTreeItems,\n          }}\n        >\n          <slot name=\"header-title\" />\n          {this.dividerType === ListDividerType.HEADER && (\n            <z-divider\n              color={this.dividerColor}\n              size={this.dividerSize}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"4MAAA,MAAMA,EAAY,IAAM,wiB,MCQXC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,kEAYEC,KAAAC,KAAkBC,EAASC,OAM3BH,KAAAI,YAAgCC,EAAgBC,KAMhDN,KAAAO,YAA4BC,EAAYC,MAMxCT,KAAAU,aAAwB,UAMxBV,KAAAW,SAAsBC,EAASN,KAS/BN,KAAAa,SAAW,OAuDZ,CAlDC,YAAAC,CAAaC,GACXf,KAAKa,SAAWE,C,CAQlB,gBAAAC,GACEC,MAAMC,KAAKlB,KAAKmB,KAAKC,UAClBC,QAAQC,GAA4CA,EAAMC,QAAQC,gBAAkB,mBACpFC,SAAQ,CAACH,EAAOI,EAAGN,KAClBE,EAAMrB,KAAOD,KAAKC,KAClBqB,EAAMX,SAAWX,KAAKW,SACtBW,EAAMK,oBAAsBD,EAAEE,WAC9B,GAAIF,EAAIN,EAASS,OAAS,EAAG,CAC3BP,EAAMlB,YAAcJ,KAAKI,YACzBkB,EAAMf,YAAcP,KAAKO,YACzBe,EAAMZ,aAAeV,KAAKU,Y,KAKlC,iBAAAoB,GACE9B,KAAK+B,YAAc/B,KAAKmB,KAAKa,cAAc,wB,CAG7C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAMrC,KAAKa,UACfqB,EAAA,OAAAE,IAAA,2CACEE,MAAO,CACL,gCAAiC,KACjC,aAActC,KAAK+B,YAAc/B,KAAKuC,aACtC,2BAA4BvC,KAAKuC,eAGnCL,EAAA,QAAAE,IAAA,2CAAMI,KAAK,iBACVxC,KAAKI,cAAgBC,EAAgBoC,QACpCP,EAAA,aAAAE,IAAA,2CACEM,MAAO1C,KAAKU,aACZT,KAAMD,KAAKO,eAIjB2B,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZListGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","ListSize","MEDIUM","dividerType","ListDividerType","NONE","dividerSize","DividerSize","SMALL","dividerColor","listType","ListType","htmlRole","onRoleChange","newValue","setChildrenProps","Array","from","host","children","filter","child","tagName","toLowerCase","forEach","i","listElementPosition","toString","length","componentWillLoad","hasHeader","querySelector","render","h","Host","key","role","class","hasTreeItems","name","HEADER","color"],"sources":["src/components/list/z-list-group/styles.css?tag=z-list-group&encapsulation=shadow","src/components/list/z-list-group/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host > .z-list-group-header-container {\n  color: var(--gray700);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-sb) !important;\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n:host > .z-list-group-header-container.has-header {\n  padding-top: calc(var(--space-unit) * 1.5);\n  padding-bottom: var(--space-unit);\n}\n\n:host > .z-list-group-header-container.has-header > z-divider {\n  margin-top: var(--space-unit);\n}\n\n:host > .grouped-tree-list-header {\n  padding-top: calc(var(--space-unit) * 1.5);\n  padding-bottom: var(--space-unit);\n}\n","import {Component, ComponentInterface, Element, h, Host, Prop, State, Watch} from \"@stencil/core\";\nimport {DividerSize, ListDividerType, ListSize, ListType} from \"../../../beans\";\n\n@Component({\n  tag: \"z-list-group\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZListGroup implements ComponentInterface {\n  @Element() host: HTMLZListGroupElement;\n\n  /**\n   * [optional] Sets size of inside elements.\n   */\n  @Prop({reflect: true})\n  size?: ListSize = ListSize.MEDIUM;\n\n  /**\n   * [optional] Sets the position where to insert the divider.\n   */\n  @Prop({reflect: true})\n  dividerType?: ListDividerType = ListDividerType.NONE;\n\n  /**\n   * [optional] Sets the divider size.\n   */\n  @Prop({reflect: true})\n  dividerSize?: DividerSize = DividerSize.SMALL;\n\n  /**\n   * [optional] Sets the divider color.\n   */\n  @Prop({reflect: true})\n  dividerColor?: string = \"gray200\";\n\n  /**\n   * [optional] type of the list marker for each element\n   */\n  @Prop({reflect: true})\n  listType?: ListType = ListType.NONE;\n\n  /**\n   * [optional] check for tree items in grouped lists\n   */\n  @Prop()\n  hasTreeItems?: boolean;\n\n  @State()\n  htmlRole = \"group\";\n\n  private hasHeader: boolean;\n\n  @Watch(\"role\", {immediate: true})\n  onRoleChange(newValue: string): void {\n    this.htmlRole = newValue;\n  }\n\n  @Watch(\"size\", {immediate: true})\n  @Watch(\"listType\", {immediate: true})\n  @Watch(\"dividerType\", {immediate: true})\n  @Watch(\"dividerSize\", {immediate: true})\n  @Watch(\"dividerColor\", {immediate: true})\n  setChildrenProps(): void {\n    Array.from(this.host.children)\n      .filter((child): child is HTMLZListElementElement => child.tagName.toLowerCase() === \"z-list-element\")\n      .forEach((child, i, children) => {\n        child.size = this.size;\n        child.listType = this.listType;\n        child.listElementPosition = i.toString();\n        if (i < children.length - 1) {\n          child.dividerType = this.dividerType;\n          child.dividerSize = this.dividerSize;\n          child.dividerColor = this.dividerColor;\n        }\n      });\n  }\n\n  componentWillLoad(): void {\n    this.hasHeader = !!this.host.querySelector('[slot=\"header-title\"]');\n  }\n\n  render(): HTMLZListGroupElement {\n    return (\n      <Host role={this.htmlRole}>\n        <div\n          class={{\n            \"z-list-group-header-container\": true,\n            \"has-header\": this.hasHeader && !this.hasTreeItems,\n            \"grouped-tree-list-header\": this.hasTreeItems,\n          }}\n        >\n          <slot name=\"header-title\" />\n          {this.dividerType === ListDividerType.HEADER && (\n            <z-divider\n              color={this.dividerColor}\n              size={this.dividerSize}\n            />\n          )}\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"6JAAA,MAAMA,EAAY,IAAM,wiB,MCQXC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,kEAYEC,KAAAC,KAAkBC,EAASC,OAM3BH,KAAAI,YAAgCC,EAAgBC,KAMhDN,KAAAO,YAA4BC,EAAYC,MAMxCT,KAAAU,aAAwB,UAMxBV,KAAAW,SAAsBC,EAASN,KAS/BN,KAAAa,SAAW,OAuDZ,CAlDC,YAAAC,CAAaC,GACXf,KAAKa,SAAWE,C,CAQlB,gBAAAC,GACEC,MAAMC,KAAKlB,KAAKmB,KAAKC,UAClBC,QAAQC,GAA4CA,EAAMC,QAAQC,gBAAkB,mBACpFC,SAAQ,CAACH,EAAOI,EAAGN,KAClBE,EAAMrB,KAAOD,KAAKC,KAClBqB,EAAMX,SAAWX,KAAKW,SACtBW,EAAMK,oBAAsBD,EAAEE,WAC9B,GAAIF,EAAIN,EAASS,OAAS,EAAG,CAC3BP,EAAMlB,YAAcJ,KAAKI,YACzBkB,EAAMf,YAAcP,KAAKO,YACzBe,EAAMZ,aAAeV,KAAKU,Y,KAKlC,iBAAAoB,GACE9B,KAAK+B,YAAc/B,KAAKmB,KAAKa,cAAc,wB,CAG7C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAMrC,KAAKa,UACfqB,EAAA,OAAAE,IAAA,2CACEE,MAAO,CACL,gCAAiC,KACjC,aAActC,KAAK+B,YAAc/B,KAAKuC,aACtC,2BAA4BvC,KAAKuC,eAGnCL,EAAA,QAAAE,IAAA,2CAAMI,KAAK,iBACVxC,KAAKI,cAAgBC,EAAgBoC,QACpCP,EAAA,aAAAE,IAAA,2CACEM,MAAO1C,KAAKU,aACZT,KAAMD,KAAKO,eAIjB2B,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/z-accordion.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as a,HTMLElement as o,createEvent as r,h as i,transformTag as e}from"@stencil/core/internal/client";import{e as s,a0 as t}from"./index2.js";import{d as c}from"./index3.js";const n=()=>`:host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface02);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant="background"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant="background"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)     var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}:host([size="x-small"]) summary{--summary-height:var(--summary-x-small-height)}:host([size="small"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size="x-small"],[size="small"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant="background"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant="background"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--z-accordion-hover-color);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:""}:host([highlight][variant="background"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant="background"]:not([open])) summary::before,:host([highlight][variant="background"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}:host([size="x-small"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size="x-small"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);font-size:var(--font-size-2);}:host(:is([size="x-small"],[size="small"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size="x-small"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant="background"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2);border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}:host([is-disabled]) .z-accordion-label{color:var(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--z-accordion-hover-color)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}`;const l=a(class a extends o{constructor(a){super();if(a!==false){this.__registerHost()}this.__attachShadow();this.toggled=r(this,"toggled",7);this.size=s.BIG;this.isDisabled=false;this.open=false;this.highlight=false;this.variant=t.DEFAULT;this.shadow=true;this.hasSlottedTags=false}onDisabledChange(){if(this.isDisabled){this.open=false}}checkSlottedTags(){this.hasSlottedTags=!!this.host.querySelector('[slot="tag"]')}onDetailsToggle(){if(this.isDisabled){this.open=false;this.detailsElm.open=false;return}this.open=this.detailsElm.open;this.toggled.emit(this.open)}componentWillLoad(){this.checkSlottedTags()}render(){return i("details",{key:"9dbc24c1558cb8dd8278224d4721a173dc6050f3",ref:a=>this.detailsElm=a,onToggle:this.onDetailsToggle.bind(this),open:this.open},i("summary",{key:"191e306e811898c6e199664af41746a7f7fc6885",tabIndex:this.isDisabled?-1:null,part:"summary"},this.icon&&i("z-icon",{key:"8562f6af8717ec125a8be1def19816c67437a3d0",class:"z-accordion-label-icon",name:this.icon}),i("span",{key:"0a863e554c09d43fe7c778fb15266232c45e5c8c",class:"z-accordion-label"},this.label),this.hasSlottedTags&&i("span",{key:"ec62cf2331385b745e9abde47b763c4f76291cc7",class:"z-accordion-tags"},i("slot",{key:"f4e709e2eeb465595e96fe24b4a0bda02f6eaa84",name:"tag",onSlotchange:()=>this.checkSlottedTags()})),i("z-icon",{key:"dec4e49f0d1fee8f59d38b9d97f98aad3affd8aa",class:"z-accordion-chevron",name:this.open?"chevron-up":"chevron-down"})),!this.isDisabled&&i("div",{key:"21a60ab43db780e601d886f6d7ab3a63e2e102a8",class:"z-accordion-content",part:"content"},i("slot",{key:"8a43604d836c04288661b83fc479cec799143cfc"})))}get host(){return this}static get watchers(){return{isDisabled:[{onDisabledChange:0}]}}static get style(){return n()}},[257,"z-accordion",{label:[1],icon:[1],size:[513],isDisabled:[516,"is-disabled"],open:[1540],highlight:[516],variant:[513],shadow:[516],hasSlottedTags:[32]},undefined,{isDisabled:[{onDisabledChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const a=["z-accordion","z-icon"];a.forEach((a=>{switch(a){case"z-accordion":if(!customElements.get(e(a))){customElements.define(e(a),l)}break;case"z-icon":if(!customElements.get(e(a))){c()}break}}))}const h=l;const m=d;export{h as ZAccordion,m as defineCustomElement};
+import{p as a,H as o,c as r,h as i,t as e}from"./p-RmbDDbWd.js";import{e as s,a0 as t}from"./p-DdetsoIY.js";import{d as c}from"./p-CbXEdwLi.js";const n=()=>`:host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface02);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant="background"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant="background"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)     var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}:host([size="x-small"]) summary{--summary-height:var(--summary-x-small-height)}:host([size="small"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size="x-small"],[size="small"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant="background"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant="background"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--z-accordion-hover-color);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:""}:host([highlight][variant="background"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant="background"]:not([open])) summary::before,:host([highlight][variant="background"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant="background"]) .z-accordion-content::before{background-color:var(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}:host([size="x-small"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size="x-small"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);font-size:var(--font-size-2);}:host(:is([size="x-small"],[size="small"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size="x-small"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant="background"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2);border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}:host([is-disabled]) .z-accordion-label{color:var(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--z-accordion-hover-color)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}`;const d=a(class a extends o{constructor(a){super();if(a!==false){this.__registerHost()}this.__attachShadow();this.toggled=r(this,"toggled",7);this.size=s.BIG;this.isDisabled=false;this.open=false;this.highlight=false;this.variant=t.DEFAULT;this.shadow=true;this.hasSlottedTags=false}onDisabledChange(){if(this.isDisabled){this.open=false}}checkSlottedTags(){this.hasSlottedTags=!!this.host.querySelector('[slot="tag"]')}onDetailsToggle(){if(this.isDisabled){this.open=false;this.detailsElm.open=false;return}this.open=this.detailsElm.open;this.toggled.emit(this.open)}componentWillLoad(){this.checkSlottedTags()}render(){return i("details",{key:"9dbc24c1558cb8dd8278224d4721a173dc6050f3",ref:a=>this.detailsElm=a,onToggle:this.onDetailsToggle.bind(this),open:this.open},i("summary",{key:"191e306e811898c6e199664af41746a7f7fc6885",tabIndex:this.isDisabled?-1:null,part:"summary"},this.icon&&i("z-icon",{key:"8562f6af8717ec125a8be1def19816c67437a3d0",class:"z-accordion-label-icon",name:this.icon}),i("span",{key:"0a863e554c09d43fe7c778fb15266232c45e5c8c",class:"z-accordion-label"},this.label),this.hasSlottedTags&&i("span",{key:"ec62cf2331385b745e9abde47b763c4f76291cc7",class:"z-accordion-tags"},i("slot",{key:"f4e709e2eeb465595e96fe24b4a0bda02f6eaa84",name:"tag",onSlotchange:()=>this.checkSlottedTags()})),i("z-icon",{key:"dec4e49f0d1fee8f59d38b9d97f98aad3affd8aa",class:"z-accordion-chevron",name:this.open?"chevron-up":"chevron-down"})),!this.isDisabled&&i("div",{key:"21a60ab43db780e601d886f6d7ab3a63e2e102a8",class:"z-accordion-content",part:"content"},i("slot",{key:"8a43604d836c04288661b83fc479cec799143cfc"})))}get host(){return this}static get watchers(){return{isDisabled:[{onDisabledChange:0}]}}static get style(){return n()}},[257,"z-accordion",{label:[1],icon:[1],size:[513],isDisabled:[516,"is-disabled"],open:[1540],highlight:[516],variant:[513],shadow:[516],hasSlottedTags:[32]},undefined,{isDisabled:[{onDisabledChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const a=["z-accordion","z-icon"];a.forEach((a=>{switch(a){case"z-accordion":if(!customElements.get(e(a))){customElements.define(e(a),d)}break;case"z-icon":if(!customElements.get(e(a))){c()}break}}))}const h=d;const m=l;export{h as ZAccordion,m as defineCustomElement};
 //# sourceMappingURL=z-accordion.js.map

package/dist/components/z-accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZAccordion","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","ControlSize","BIG","isDisabled","open","highlight","variant","AccordionVariant","DEFAULT","shadow","hasSlottedTags","onDisabledChange","checkSlottedTags","host","querySelector","onDetailsToggle","detailsElm","toggled","emit","componentWillLoad","render","h","key","ref","elm","onToggle","bind","tabIndex","part","icon","class","name","label","onSlotchange"],"sources":["src/components/z-accordion/styles.css?tag=z-accordion&encapsulation=shadow","src/components/z-accordion/index.tsx"],"sourcesContent":[":host,\n:host *,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n:host {\n  /**\n   * @prop --z-accordion-highlight-color: Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n   * @prop --z-accordion-bg: Background color of the summary. Default: `--color-surface02`.\n   * @prop --z-accordion-label-color: Label color. Default: `--color-default-text`.\n   * @prop --z-accordion-disabled-label-color: Label color when disabled. Default: `--color-text03`.\n   * @prop --z-accordion-content-bg: Background color of the accordion. Default: `--color-surface02`.\n   * @prop --z-accordion-content-fg: Content text color. Default: `--color-default-text`.\n   * @prop --z-accordion-hover-color: Hover color of the summary. Default: `--color-surface03`.\n   * @prop --z-accordion-left-padding: Left padding of the summary. Default: `--space-unit` * 2.\n   * @prop --z-accordion-right-padding: Right padding of the summary. Default: `--space-unit`.\n   * @prop --z-accordion-label-font-weight: Font weight of the summary label. Default: `--font-sb`.\n   */\n  --z-accordion-highlight-color: transparent;\n  --z-accordion-bg: var(--color-surface01);\n  --z-accordion-label-color: var(--color-default-text);\n  --z-accordion-disabled-label-color: var(--color-text03);\n  --z-accordion-content-bg: var(--color-surface01);\n  --z-accordion-content-fg: var(--color-default-text);\n  --z-accordion-hover-color: var(--color-surface02);\n  --z-accordion-left-padding: calc(var(--space-unit) * 2);\n  --z-accordion-right-padding: var(--space-unit);\n  --z-accordion-label-font-weight: var(--font-sb);\n\n  display: block;\n  border-top: var(--border-size-small) solid var(--color-surface03);\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"background\"]) {\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n:host([variant=\"background\"][shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\ndetails {\n  background-color: transparent;\n}\n\nsummary {\n  --summary-x-small-height: 32px;\n  --summary-small-height: 36px;\n  --summary-big-height: 44px;\n  --summary-height: var(--summary-big-height);\n  --summary-y-padding: var(--space-unit);\n\n  position: relative;\n  display: flex;\n  min-height: var(--summary-height);\n  align-items: center;\n  padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);\n  background-color: var(--z-accordion-bg);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  list-style: none;\n}\n\n/* remove marker on safari */\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n:host([size=\"x-small\"]) summary {\n  --summary-height: var(--summary-x-small-height);\n}\n\n:host([size=\"small\"]) summary {\n  --summary-height: var(--summary-small-height);\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) summary {\n  --summary-y-padding: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"background\"]) summary {\n  padding-right: calc(var(--space-unit) * 2);\n\n  /* border-radius of the accordion - width of the accordion's border */\n  border-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([variant=\"background\"][open]) summary {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([is-disabled]) summary {\n  cursor: default;\n}\n\nsummary:focus:focus-visible {\n  background-color: var(--z-accordion-hover-color);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nsummary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: var(--space-unit);\n  height: 100%;\n  content: \"\";\n}\n\n:host([highlight][variant=\"background\"]) summary::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight][variant=\"background\"]:not([open])) summary::before,\n:host([highlight][variant=\"background\"][open]) .z-accordion-content::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight]) summary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-highlight-color, transparent);\n}\n\n:host([is-disabled][highlight]) summary::before,\n:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-disabled-label-color);\n}\n\nsummary > z-icon {\n  fill: var(--z-accordion-label-color);\n}\n\n:host([is-disabled]) summary > z-icon {\n  fill: var(--z-accordion-disabled-label-color);\n}\n\n.z-accordion-label {\n  color: var(--z-accordion-label-color);\n  font-size: var(--font-size-3); /* for \"small\" and \"big\" sizes */\n  font-weight: var(--z-accordion-label-font-weight);\n}\n\n:host([size=\"x-small\"]) .z-accordion-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.z-accordion-tags {\n  display: flex;\n  align-items: center;\n  column-gap: calc(var(--space-unit) / 2);\n}\n\nsummary z-icon.z-accordion-chevron {\n  margin-left: auto;\n}\n\n.z-accordion-content {\n  position: relative;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);\n  background-color: var(--z-accordion-content-bg);\n  color: var(--z-accordion-content-fg);\n  font-size: var(--font-size-2); /* for \"small\" and \"big\" sizes */\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) .z-accordion-content {\n  padding-bottom: var(--space-unit);\n}\n\n:host([size=\"x-small\"]) .z-accordion-content {\n  font-size: var(--font-size-1);\n}\n\n:host([variant=\"background\"]) .z-accordion-content {\n  padding-right: calc(var(--space-unit) * 2);\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([is-disabled]) .z-accordion-label {\n  color: var(--z-accordion-disabled-label-color);\n}\n\n:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]) {\n  --z-tag-bg: var(--z-accordion-disabled-label-color) !important;\n  --z-tag-text-color: var(--color-text-inverse) !important;\n}\n\n@media (hover: hover) {\n  summary:focus:focus-visible {\n    /* prevents the focus shadow to be covered by the background of an hovered sibling accordion */\n    position: relative;\n    z-index: 1;\n  }\n\n  :host(:not([is-disabled])) summary:hover {\n    background-color: var(--z-accordion-hover-color);\n  }\n\n  :host(:not([is-disabled])) summary:hover .z-accordion-label {\n    text-decoration: underline;\n  }\n}\n\n/* force \"big\" variant on touch devices */\n@media (hover: none) {\n  :host([size]) summary {\n    --summary-height: var(--summary-big-height);\n    --summary-y-padding: var(--space-unit);\n  }\n\n  :host([size]) .z-accordion-label {\n    font-size: var(--font-size-3);\n  }\n\n  :host([size]) .z-accordion-content {\n    font-size: var(--font-size-2);\n  }\n\n  :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n    --z-icon-width: 18px;\n    --z-icon-height: 18px;\n  }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @part summary - The summary element that is always visible and acts as the accordion's toggle.\n * @part content - The content element that is shown or hidden when the accordion is toggled.\n */\n@Component({\n  tag: \"z-accordion\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAccordion implements ComponentInterface {\n  @Element() host: HTMLZAccordionElement;\n\n  /**\n   * Text label.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Name of the z-icon to display before the label's text.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Size of the component.\n   */\n  @Prop({reflect: true})\n  size = ControlSize.BIG;\n\n  /**\n   * Disabled state of the accordion.\n   */\n  @Prop({reflect: true})\n  isDisabled = false;\n\n  /**\n   * The open state of the accordion.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Enable highlight band on the `summary`'s left edge.\n   */\n  @Prop({reflect: true})\n  highlight = false;\n\n  /**\n   * Accordion variant.\n   */\n  @Prop({reflect: true})\n  variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n  /**\n   * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n   */\n  @Prop({reflect: true})\n  shadow = true;\n\n  @State()\n  private hasSlottedTags = false;\n\n  /**\n   * Event fired when the accordion is toggled.\n   */\n  @Event()\n  toggled: EventEmitter<boolean>;\n\n  @Watch(\"isDisabled\")\n  protected onDisabledChange(): void {\n    if (this.isDisabled) {\n      this.open = false;\n    }\n  }\n\n  private detailsElm: HTMLDetailsElement;\n\n  /** Check if there is any content in the \"tag\" slot. */\n  private checkSlottedTags(): void {\n    this.hasSlottedTags = !!this.host.querySelector('[slot=\"tag\"]');\n  }\n\n  /**\n   * Handle `details` element toggle.\n   * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n   * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n   */\n  private onDetailsToggle(): void {\n    if (this.isDisabled) {\n      this.open = false;\n      this.detailsElm.open = false;\n\n      return;\n    }\n\n    this.open = this.detailsElm.open;\n    this.toggled.emit(this.open);\n  }\n\n  componentWillLoad(): void {\n    this.checkSlottedTags();\n  }\n\n  render(): HTMLDetailsElement {\n    return (\n      <details\n        ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n        onToggle={this.onDetailsToggle.bind(this)}\n        open={this.open}\n      >\n        <summary\n          tabIndex={this.isDisabled ? -1 : null}\n          part=\"summary\"\n        >\n          {this.icon && (\n            <z-icon\n              class=\"z-accordion-label-icon\"\n              name={this.icon}\n            />\n          )}\n          <span class=\"z-accordion-label\">{this.label}</span>\n          {this.hasSlottedTags && (\n            <span class=\"z-accordion-tags\">\n              <slot\n                name=\"tag\"\n                onSlotchange={() => this.checkSlottedTags()}\n              />\n            </span>\n          )}\n          <z-icon\n            class=\"z-accordion-chevron\"\n            name={this.open ? \"chevron-up\" : \"chevron-down\"}\n          />\n        </summary>\n        {!this.isDisabled && (\n          <div\n            class=\"z-accordion-content\"\n            part=\"content\"\n          >\n            <slot />\n          </div>\n        )}\n      </details>\n    );\n  }\n}\n"],"mappings":"sMAAA,MAAMA,EAAY,IAAM,snK,MCgBXC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,mGAwBEC,KAAAC,KAAOC,EAAYC,IAMnBH,KAAAI,WAAa,MAMbJ,KAAAK,KAAO,MAMPL,KAAAM,UAAY,MAMZN,KAAAO,QAA4BC,EAAiBC,QAM7CT,KAAAU,OAAS,KAGDV,KAAAW,eAAiB,KAqF1B,CA5EW,gBAAAC,GACR,GAAIZ,KAAKI,WAAY,CACnBJ,KAAKK,KAAO,K,EAOR,gBAAAQ,GACNb,KAAKW,iBAAmBX,KAAKc,KAAKC,cAAc,e,CAQ1C,eAAAC,GACN,GAAIhB,KAAKI,WAAY,CACnBJ,KAAKK,KAAO,MACZL,KAAKiB,WAAWZ,KAAO,MAEvB,M,CAGFL,KAAKK,KAAOL,KAAKiB,WAAWZ,KAC5BL,KAAKkB,QAAQC,KAAKnB,KAAKK,K,CAGzB,iBAAAe,GACEpB,KAAKa,kB,CAGP,MAAAQ,GACE,OACEC,EAAA,WAAAC,IAAA,2CACEC,IAAMC,GAA6BzB,KAAKiB,WAAaQ,EACrDC,SAAU1B,KAAKgB,gBAAgBW,KAAK3B,MACpCK,KAAML,KAAKK,MAEXiB,EAAA,WAAAC,IAAA,2CACEK,SAAU5B,KAAKI,YAAa,EAAK,KACjCyB,KAAK,WAEJ7B,KAAK8B,MACJR,EAAA,UAAAC,IAAA,2CACEQ,MAAM,yBACNC,KAAMhC,KAAK8B,OAGfR,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,qBAAqB/B,KAAKiC,OACrCjC,KAAKW,gBACJW,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,oBACVT,EAAA,QAAAC,IAAA,2CACES,KAAK,MACLE,aAAc,IAAMlC,KAAKa,sBAI/BS,EAAA,UAAAC,IAAA,2CACEQ,MAAM,sBACNC,KAAMhC,KAAKK,KAAO,aAAe,mBAGnCL,KAAKI,YACLkB,EAAA,OAAAC,IAAA,2CACEQ,MAAM,sBACNF,KAAK,WAELP,EAAA,QAAAC,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZAccordion","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","ControlSize","BIG","isDisabled","open","highlight","variant","AccordionVariant","DEFAULT","shadow","hasSlottedTags","onDisabledChange","checkSlottedTags","host","querySelector","onDetailsToggle","detailsElm","toggled","emit","componentWillLoad","render","h","key","ref","elm","onToggle","bind","tabIndex","part","icon","class","name","label","onSlotchange"],"sources":["src/components/z-accordion/styles.css?tag=z-accordion&encapsulation=shadow","src/components/z-accordion/index.tsx"],"sourcesContent":[":host,\n:host *,\n:host ::slotted(*) {\n  box-sizing: border-box;\n}\n\n:host {\n  /**\n   * @prop --z-accordion-highlight-color: Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.\n   * @prop --z-accordion-bg: Background color of the summary. Default: `--color-surface02`.\n   * @prop --z-accordion-label-color: Label color. Default: `--color-default-text`.\n   * @prop --z-accordion-disabled-label-color: Label color when disabled. Default: `--color-text03`.\n   * @prop --z-accordion-content-bg: Background color of the accordion. Default: `--color-surface02`.\n   * @prop --z-accordion-content-fg: Content text color. Default: `--color-default-text`.\n   * @prop --z-accordion-hover-color: Hover color of the summary. Default: `--color-surface03`.\n   * @prop --z-accordion-left-padding: Left padding of the summary. Default: `--space-unit` * 2.\n   * @prop --z-accordion-right-padding: Right padding of the summary. Default: `--space-unit`.\n   * @prop --z-accordion-label-font-weight: Font weight of the summary label. Default: `--font-sb`.\n   */\n  --z-accordion-highlight-color: transparent;\n  --z-accordion-bg: var(--color-surface01);\n  --z-accordion-label-color: var(--color-default-text);\n  --z-accordion-disabled-label-color: var(--color-text03);\n  --z-accordion-content-bg: var(--color-surface01);\n  --z-accordion-content-fg: var(--color-default-text);\n  --z-accordion-hover-color: var(--color-surface02);\n  --z-accordion-left-padding: calc(var(--space-unit) * 2);\n  --z-accordion-right-padding: var(--space-unit);\n  --z-accordion-label-font-weight: var(--font-sb);\n\n  display: block;\n  border-top: var(--border-size-small) solid var(--color-surface03);\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host([variant=\"background\"]) {\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n:host([variant=\"background\"][shadow]) {\n  box-shadow: var(--shadow-2);\n}\n\ndetails {\n  background-color: transparent;\n}\n\nsummary {\n  --summary-x-small-height: 32px;\n  --summary-small-height: 36px;\n  --summary-big-height: 44px;\n  --summary-height: var(--summary-big-height);\n  --summary-y-padding: var(--space-unit);\n\n  position: relative;\n  display: flex;\n  min-height: var(--summary-height);\n  align-items: center;\n  padding: var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);\n  background-color: var(--z-accordion-bg);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  list-style: none;\n}\n\n/* remove marker on safari */\nsummary::-webkit-details-marker {\n  display: none;\n}\n\n:host([size=\"x-small\"]) summary {\n  --summary-height: var(--summary-x-small-height);\n}\n\n:host([size=\"small\"]) summary {\n  --summary-height: var(--summary-small-height);\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) summary {\n  --summary-y-padding: calc(var(--space-unit) / 2);\n}\n\n:host([variant=\"background\"]) summary {\n  padding-right: calc(var(--space-unit) * 2);\n\n  /* border-radius of the accordion - width of the accordion's border */\n  border-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([variant=\"background\"][open]) summary {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([is-disabled]) summary {\n  cursor: default;\n}\n\nsummary:focus:focus-visible {\n  background-color: var(--z-accordion-hover-color);\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nsummary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n  width: var(--space-unit);\n  height: 100%;\n  content: \"\";\n}\n\n:host([highlight][variant=\"background\"]) summary::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight][variant=\"background\"]:not([open])) summary::before,\n:host([highlight][variant=\"background\"][open]) .z-accordion-content::before {\n  /* border-radius of the accordion - width of the accordion's border */\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([highlight]) summary::before,\n:host([highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-highlight-color, transparent);\n}\n\n:host([is-disabled][highlight]) summary::before,\n:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before {\n  background-color: var(--z-accordion-disabled-label-color);\n}\n\nsummary > z-icon {\n  fill: var(--z-accordion-label-color);\n}\n\n:host([is-disabled]) summary > z-icon {\n  fill: var(--z-accordion-disabled-label-color);\n}\n\n.z-accordion-label {\n  color: var(--z-accordion-label-color);\n  font-size: var(--font-size-3); /* for \"small\" and \"big\" sizes */\n  font-weight: var(--z-accordion-label-font-weight);\n}\n\n:host([size=\"x-small\"]) .z-accordion-label {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n}\n\n.z-accordion-tags {\n  display: flex;\n  align-items: center;\n  column-gap: calc(var(--space-unit) / 2);\n}\n\nsummary z-icon.z-accordion-chevron {\n  margin-left: auto;\n}\n\n.z-accordion-content {\n  position: relative;\n  padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);\n  background-color: var(--z-accordion-content-bg);\n  color: var(--z-accordion-content-fg);\n  font-size: var(--font-size-2); /* for \"small\" and \"big\" sizes */\n}\n\n:host(:is([size=\"x-small\"], [size=\"small\"])) .z-accordion-content {\n  padding-bottom: var(--space-unit);\n}\n\n:host([size=\"x-small\"]) .z-accordion-content {\n  font-size: var(--font-size-1);\n}\n\n:host([variant=\"background\"]) .z-accordion-content {\n  padding-right: calc(var(--space-unit) * 2);\n  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));\n  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));\n}\n\n:host([is-disabled]) .z-accordion-label {\n  color: var(--z-accordion-disabled-label-color);\n}\n\n:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]) {\n  --z-tag-bg: var(--z-accordion-disabled-label-color) !important;\n  --z-tag-text-color: var(--color-text-inverse) !important;\n}\n\n@media (hover: hover) {\n  summary:focus:focus-visible {\n    /* prevents the focus shadow to be covered by the background of an hovered sibling accordion */\n    position: relative;\n    z-index: 1;\n  }\n\n  :host(:not([is-disabled])) summary:hover {\n    background-color: var(--z-accordion-hover-color);\n  }\n\n  :host(:not([is-disabled])) summary:hover .z-accordion-label {\n    text-decoration: underline;\n  }\n}\n\n/* force \"big\" variant on touch devices */\n@media (hover: none) {\n  :host([size]) summary {\n    --summary-height: var(--summary-big-height);\n    --summary-y-padding: var(--space-unit);\n  }\n\n  :host([size]) .z-accordion-label {\n    font-size: var(--font-size-3);\n  }\n\n  :host([size]) .z-accordion-content {\n    font-size: var(--font-size-2);\n  }\n\n  :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {\n    --z-icon-width: 18px;\n    --z-icon-height: 18px;\n  }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch, h} from \"@stencil/core\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\n\n/**\n * Accordion component.\n *\n * @slot - Slot for the main content.\n * @slot tag - Slot for tags.\n * @part summary - The summary element that is always visible and acts as the accordion's toggle.\n * @part content - The content element that is shown or hidden when the accordion is toggled.\n */\n@Component({\n  tag: \"z-accordion\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAccordion implements ComponentInterface {\n  @Element() host: HTMLZAccordionElement;\n\n  /**\n   * Text label.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Name of the z-icon to display before the label's text.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Size of the component.\n   */\n  @Prop({reflect: true})\n  size = ControlSize.BIG;\n\n  /**\n   * Disabled state of the accordion.\n   */\n  @Prop({reflect: true})\n  isDisabled = false;\n\n  /**\n   * The open state of the accordion.\n   */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Enable highlight band on the `summary`'s left edge.\n   */\n  @Prop({reflect: true})\n  highlight = false;\n\n  /**\n   * Accordion variant.\n   */\n  @Prop({reflect: true})\n  variant: AccordionVariant = AccordionVariant.DEFAULT;\n\n  /**\n   * Enable box-shadow on the accordion. Only applies when `variant` is `BACKGROUND`.\n   */\n  @Prop({reflect: true})\n  shadow = true;\n\n  @State()\n  private hasSlottedTags = false;\n\n  /**\n   * Event fired when the accordion is toggled.\n   */\n  @Event()\n  toggled: EventEmitter<boolean>;\n\n  @Watch(\"isDisabled\")\n  protected onDisabledChange(): void {\n    if (this.isDisabled) {\n      this.open = false;\n    }\n  }\n\n  private detailsElm: HTMLDetailsElement;\n\n  /** Check if there is any content in the \"tag\" slot. */\n  private checkSlottedTags(): void {\n    this.hasSlottedTags = !!this.host.querySelector('[slot=\"tag\"]');\n  }\n\n  /**\n   * Handle `details` element toggle.\n   * If currently disabled, prevent toggling by forcing the `open` state to `false`.\n   * Unfortunately the \"toggle\" event is not cancelable and when catched, the `open` state is already changed.\n   */\n  private onDetailsToggle(): void {\n    if (this.isDisabled) {\n      this.open = false;\n      this.detailsElm.open = false;\n\n      return;\n    }\n\n    this.open = this.detailsElm.open;\n    this.toggled.emit(this.open);\n  }\n\n  componentWillLoad(): void {\n    this.checkSlottedTags();\n  }\n\n  render(): HTMLDetailsElement {\n    return (\n      <details\n        ref={(elm: HTMLDetailsElement) => (this.detailsElm = elm)}\n        onToggle={this.onDetailsToggle.bind(this)}\n        open={this.open}\n      >\n        <summary\n          tabIndex={this.isDisabled ? -1 : null}\n          part=\"summary\"\n        >\n          {this.icon && (\n            <z-icon\n              class=\"z-accordion-label-icon\"\n              name={this.icon}\n            />\n          )}\n          <span class=\"z-accordion-label\">{this.label}</span>\n          {this.hasSlottedTags && (\n            <span class=\"z-accordion-tags\">\n              <slot\n                name=\"tag\"\n                onSlotchange={() => this.checkSlottedTags()}\n              />\n            </span>\n          )}\n          <z-icon\n            class=\"z-accordion-chevron\"\n            name={this.open ? \"chevron-up\" : \"chevron-down\"}\n          />\n        </summary>\n        {!this.isDisabled && (\n          <div\n            class=\"z-accordion-content\"\n            part=\"content\"\n          >\n            <slot />\n          </div>\n        )}\n      </details>\n    );\n  }\n}\n"],"mappings":"gJAAA,MAAMA,EAAY,IAAM,snK,MCgBXC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,mGAwBEC,KAAAC,KAAOC,EAAYC,IAMnBH,KAAAI,WAAa,MAMbJ,KAAAK,KAAO,MAMPL,KAAAM,UAAY,MAMZN,KAAAO,QAA4BC,EAAiBC,QAM7CT,KAAAU,OAAS,KAGDV,KAAAW,eAAiB,KAqF1B,CA5EW,gBAAAC,GACR,GAAIZ,KAAKI,WAAY,CACnBJ,KAAKK,KAAO,K,EAOR,gBAAAQ,GACNb,KAAKW,iBAAmBX,KAAKc,KAAKC,cAAc,e,CAQ1C,eAAAC,GACN,GAAIhB,KAAKI,WAAY,CACnBJ,KAAKK,KAAO,MACZL,KAAKiB,WAAWZ,KAAO,MAEvB,M,CAGFL,KAAKK,KAAOL,KAAKiB,WAAWZ,KAC5BL,KAAKkB,QAAQC,KAAKnB,KAAKK,K,CAGzB,iBAAAe,GACEpB,KAAKa,kB,CAGP,MAAAQ,GACE,OACEC,EAAA,WAAAC,IAAA,2CACEC,IAAMC,GAA6BzB,KAAKiB,WAAaQ,EACrDC,SAAU1B,KAAKgB,gBAAgBW,KAAK3B,MACpCK,KAAML,KAAKK,MAEXiB,EAAA,WAAAC,IAAA,2CACEK,SAAU5B,KAAKI,YAAa,EAAK,KACjCyB,KAAK,WAEJ7B,KAAK8B,MACJR,EAAA,UAAAC,IAAA,2CACEQ,MAAM,yBACNC,KAAMhC,KAAK8B,OAGfR,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,qBAAqB/B,KAAKiC,OACrCjC,KAAKW,gBACJW,EAAA,QAAAC,IAAA,2CAAMQ,MAAM,oBACVT,EAAA,QAAAC,IAAA,2CACES,KAAK,MACLE,aAAc,IAAMlC,KAAKa,sBAI/BS,EAAA,UAAAC,IAAA,2CACEQ,MAAM,sBACNC,KAAMhC,KAAKK,KAAO,aAAe,mBAGnCL,KAAKI,YACLkB,EAAA,OAAAC,IAAA,2CACEQ,MAAM,sBACNF,KAAK,WAELP,EAAA,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/components/z-anchor-navigation.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as o,HTMLElement as a,h as n,Host as t,transformTag as i}from"@stencil/core/internal/client";import{B as e,e as r}from"./index2.js";import{d as c}from"./index4.js";import{d as s}from"./index3.js";const l=()=>`html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav>* a{color:inherit}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-default-icon);color:var(--color-default-text);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out,     border-color 0.3s ease-in-out,     color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-primary01);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav>*:focus:focus-visible,z-anchor-navigation nav>*>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}@media (min-width: 768px){z-anchor-navigation:not([is-collapsed]) z-button.toggle{display:none !important}z-anchor-navigation:not([is-collapsed]) nav{display:flex}z-anchor-navigation nav>*>:is(z-button,button){opacity:0;pointer-events:none}@media (hover: hover){z-anchor-navigation nav>:is([data-current],:hover,:focus,:focus-within)>:is(z-button,button){fill:var(--color-default-icon);opacity:1;pointer-events:unset}z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-primary);background-color:var(--color-background);color:var(--color-hover-primary)}}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent;fill:transparent}}`;const h=o(class o extends a{constructor(o){super();if(o!==false){this.__registerHost()}this.hideUnselected=false;this.autoCurrent=true;this.collapsedLabel="salta a";this.isCollapsed=false;this.collapsed=false}setCurrent(){const o=Array.from(this.nav.querySelectorAll("a")).find((o=>o.href===this.host.ownerDocument.location.href));Array.from(this.nav.children).forEach((a=>{const n=a instanceof HTMLAnchorElement?a:a.querySelector("a");const t=n===o;n.setAttribute("aria-current",t.toString());a.toggleAttribute("data-current",t)}))}toggleCollapsed(){this.collapsed=!this.collapsed}componentDidLoad(){if(this.autoCurrent){window.addEventListener("hashchange",this.setCurrent.bind(this));this.setCurrent()}}disconnectedCallback(){window.removeEventListener("hashchange",this.setCurrent)}render(){return n(t,{key:"89751109cccb5d8bef38667bbfdfdc28e1a1febf",collapsed:this.collapsed,class:"z-scrollbar"},n("z-button",{key:"2b5cbb4358af217a87d52c52a24326c316dbc56b",class:"toggle",size:r.SMALL,variant:e.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},this.collapsedLabel),n("nav",{key:"3f5560712a71aaa112b1258b2177efcbb260487d",ref:o=>this.nav=o},n("slot",{key:"da9a478eb5667533ffc14e3ea7f4c28aba30218a"})))}get host(){return this}static get style(){return l()}},[260,"z-anchor-navigation",{hideUnselected:[516,"hide-unselected"],autoCurrent:[4,"auto-current"],collapsedLabel:[1,"collapsed-label"],isCollapsed:[516,"is-collapsed"],collapsed:[32]}]);function d(){if(typeof customElements==="undefined"){return}const o=["z-anchor-navigation","z-button","z-icon"];o.forEach((o=>{switch(o){case"z-anchor-navigation":if(!customElements.get(i(o))){customElements.define(i(o),h)}break;case"z-button":if(!customElements.get(i(o))){c()}break;case"z-icon":if(!customElements.get(i(o))){s()}break}}))}const v=h;const u=d;export{v as ZAnchorNavigation,u as defineCustomElement};
+import{p as o,H as a,h as n,d as t,t as i}from"./p-RmbDDbWd.js";import{B as e,e as r}from"./p-DdetsoIY.js";import{d as s}from"./p-BAguKZnb.js";import{d as c}from"./p-CbXEdwLi.js";const l=()=>`html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav>* a{color:inherit}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-default-icon);color:var(--color-default-text);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out,     border-color 0.3s ease-in-out,     color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-primary01);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav>*:focus:focus-visible,z-anchor-navigation nav>*>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}@media (min-width: 768px){z-anchor-navigation:not([is-collapsed]) z-button.toggle{display:none !important}z-anchor-navigation:not([is-collapsed]) nav{display:flex}z-anchor-navigation nav>*>:is(z-button,button){opacity:0;pointer-events:none}@media (hover: hover){z-anchor-navigation nav>:is([data-current],:hover,:focus,:focus-within)>:is(z-button,button){fill:var(--color-default-icon);opacity:1;pointer-events:unset}z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-primary);background-color:var(--color-background);color:var(--color-hover-primary)}}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent;fill:transparent}}`;const h=o(class o extends a{constructor(o){super();if(o!==false){this.__registerHost()}this.hideUnselected=false;this.autoCurrent=true;this.collapsedLabel="salta a";this.isCollapsed=false;this.collapsed=false}setCurrent(){const o=Array.from(this.nav.querySelectorAll("a")).find((o=>o.href===this.host.ownerDocument.location.href));Array.from(this.nav.children).forEach((a=>{const n=a instanceof HTMLAnchorElement?a:a.querySelector("a");const t=n===o;n.setAttribute("aria-current",t.toString());a.toggleAttribute("data-current",t)}))}toggleCollapsed(){this.collapsed=!this.collapsed}componentDidLoad(){if(this.autoCurrent){window.addEventListener("hashchange",this.setCurrent.bind(this));this.setCurrent()}}disconnectedCallback(){window.removeEventListener("hashchange",this.setCurrent)}render(){return n(t,{key:"89751109cccb5d8bef38667bbfdfdc28e1a1febf",collapsed:this.collapsed,class:"z-scrollbar"},n("z-button",{key:"2b5cbb4358af217a87d52c52a24326c316dbc56b",class:"toggle",size:r.SMALL,variant:e.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},this.collapsedLabel),n("nav",{key:"3f5560712a71aaa112b1258b2177efcbb260487d",ref:o=>this.nav=o},n("slot",{key:"da9a478eb5667533ffc14e3ea7f4c28aba30218a"})))}get host(){return this}static get style(){return l()}},[260,"z-anchor-navigation",{hideUnselected:[516,"hide-unselected"],autoCurrent:[4,"auto-current"],collapsedLabel:[1,"collapsed-label"],isCollapsed:[516,"is-collapsed"],collapsed:[32]}]);function d(){if(typeof customElements==="undefined"){return}const o=["z-anchor-navigation","z-button","z-icon"];o.forEach((o=>{switch(o){case"z-anchor-navigation":if(!customElements.get(i(o))){customElements.define(i(o),h)}break;case"z-button":if(!customElements.get(i(o))){s()}break;case"z-icon":if(!customElements.get(i(o))){c()}break}}))}const v=h;const p=d;export{v as ZAnchorNavigation,p as defineCustomElement};
 //# sourceMappingURL=z-anchor-navigation.js.map

package/dist/components/z-anchor-navigation.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZAnchorNavigation","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hideUnselected","autoCurrent","collapsedLabel","isCollapsed","collapsed","setCurrent","currentElement","Array","from","nav","querySelectorAll","find","anchor","href","host","ownerDocument","location","children","forEach","item","HTMLAnchorElement","querySelector","isCurrent","setAttribute","toString","toggleAttribute","toggleCollapsed","componentDidLoad","window","addEventListener","bind","disconnectedCallback","removeEventListener","render","h","Host","key","class","size","ControlSize","SMALL","variant","ButtonVariant","SECONDARY","icon","onClick","ref","el"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n  scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n  display: none;\n  flex-direction: column;\n  justify-content: flex-start;\n  row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n  display: flex;\n  margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n  display: -webkit-box;\n  overflow: clip;\n  width: 100%;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n  -webkit-box-orient: vertical;\n  font-weight: inherit;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  overflow-clip-margin: content-box;\n  text-decoration: none;\n}\n\nz-anchor-navigation nav > * a {\n  color: inherit;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n  padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n  z-anchor-navigation nav a {\n    display: inline-block;\n    overflow: hidden;\n    -webkit-line-clamp: none;\n    line-clamp: none;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\nz-anchor-navigation nav > * {\n  position: relative;\n  border-left: var(--border-size-large) solid var(--color-default-icon);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  transition:\n    background-color 0.3s ease-in-out,\n    border-color 0.3s ease-in-out,\n    color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [data-current] {\n  border-left-color: var(--color-primary01);\n  color: var(--color-primary01);\n  font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > *:is(z-button, button) {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > *:focus:focus-visible,\nz-anchor-navigation nav > * > *:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nz-anchor-navigation nav button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\n@media (min-width: 768px) {\n  z-anchor-navigation:not([is-collapsed]) z-button.toggle {\n    display: none !important;\n  }\n\n  z-anchor-navigation:not([is-collapsed]) nav {\n    display: flex;\n  }\n\n  /* hide anchor actions by default... */\n  z-anchor-navigation nav > * > :is(z-button, button) {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  @media (hover: hover) {\n    /* ...show them only hovering/focusing the anchor */\n    z-anchor-navigation nav > :is([data-current], :hover, :focus, :focus-within) > :is(z-button, button) {\n      fill: var(--color-default-icon);\n      opacity: 1;\n      pointer-events: unset;\n    }\n\n    z-anchor-navigation nav > *:hover {\n      border-left-color: var(--color-hover-primary);\n      background-color: var(--color-background);\n      color: var(--color-hover-primary);\n    }\n  }\n\n  z-anchor-navigation[hide-unselected] nav > *:not([data-current], :hover, :focus, :focus-within) {\n    color: transparent;\n    fill: transparent;\n  }\n}\n","import {Component, ComponentInterface, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize} from \"../../beans\";\n\n/**\n * Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n *  <div>\n *    <a href=\"#section-id\">Section name</a>\n *    <button type=\"button\">\n *      <z-icon name=\"share\" />\n *    </button>\n *  </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n  tag: \"z-anchor-navigation\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZAnchorNavigation implements ComponentInterface {\n  /**\n   * If enabled, the text of each anchor will be hidden unless\n   * for the current one or the one the user is hovering.\n   */\n  @Prop({reflect: true})\n  hideUnselected = false;\n\n  /**\n   * Enables automatic inference of the current item, listening for hash change\n   * and checking the `href` of the slotted anchors.\n   * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n   * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n   */\n  @Prop()\n  autoCurrent = true;\n\n  /**\n   * Sets the label of the button displayed on mobile viewport when the anchor navigation is collapsed\n   */\n  @Prop()\n  collapsedLabel = \"salta a\";\n\n  /**\n   * Explicitly collapse anchor navigation.\n   * If false, it will collapse automatically only on mobile.\n   */\n  @Prop({reflect: true})\n  isCollapsed = false;\n\n  /**\n   * Whether the mobile list is collapsed.\n   */\n  @State()\n  collapsed = false;\n\n  @Element() host: HTMLZAnchorNavigationElement;\n\n  /** Reference to the nav element. */\n  private nav: HTMLElement;\n\n  /**\n   * Set `aria-current` attribute to the anchors.\n   */\n  private setCurrent(): void {\n    const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n      (anchor) => anchor.href === this.host.ownerDocument.location.href\n    );\n    Array.from(this.nav.children).forEach((item) => {\n      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n      const isCurrent = anchor === currentElement;\n      anchor.setAttribute(\"aria-current\", isCurrent.toString());\n      item.toggleAttribute(\"data-current\", isCurrent);\n    });\n  }\n\n  /**\n   * Toggle collapsed state.\n   */\n  private toggleCollapsed(): void {\n    this.collapsed = !this.collapsed;\n  }\n\n  componentDidLoad(): void {\n    if (this.autoCurrent) {\n      window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n      this.setCurrent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"hashchange\", this.setCurrent);\n  }\n\n  render(): HTMLZAnchorNavigationElement {\n    return (\n      <Host\n        collapsed={this.collapsed}\n        class=\"z-scrollbar\"\n      >\n        <z-button\n          class=\"toggle\"\n          size={ControlSize.SMALL}\n          variant={ButtonVariant.SECONDARY}\n          icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n          onClick={this.toggleCollapsed.bind(this)}\n        >\n          {this.collapsedLabel}\n        </z-button>\n        <nav ref={(el) => (this.nav = el)}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8NAAA,MAAMA,EAAY,IAAM,izE,MCuBXC,EAAiBC,EAAA,MAAAD,UAAAE,EAL9B,WAAAC,CAAAC,G,4CAWEC,KAAAC,eAAiB,MASjBD,KAAAE,YAAc,KAMdF,KAAAG,eAAiB,UAOjBH,KAAAI,YAAc,MAMdJ,KAAAK,UAAY,KA6Db,CAnDS,UAAAC,GACN,MAAMC,EAAiBC,MAAMC,KAAKT,KAAKU,IAAIC,iBAAiB,MAAMC,MAC/DC,GAAWA,EAAOC,OAASd,KAAKe,KAAKC,cAAcC,SAASH,OAE/DN,MAAMC,KAAKT,KAAKU,IAAIQ,UAAUC,SAASC,IACrC,MAAMP,EAASO,aAAgBC,kBAAoBD,EAAOA,EAAKE,cAAc,KAC7E,MAAMC,EAAYV,IAAWN,EAC7BM,EAAOW,aAAa,eAAgBD,EAAUE,YAC9CL,EAAKM,gBAAgB,eAAgBH,EAAU,G,CAO3C,eAAAI,GACN3B,KAAKK,WAAaL,KAAKK,S,CAGzB,gBAAAuB,GACE,GAAI5B,KAAKE,YAAa,CACpB2B,OAAOC,iBAAiB,aAAc9B,KAAKM,WAAWyB,KAAK/B,OAC3DA,KAAKM,Y,EAIT,oBAAA0B,GACEH,OAAOI,oBAAoB,aAAcjC,KAAKM,W,CAGhD,MAAA4B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHhC,UAAWL,KAAKK,UAChBiC,MAAM,eAENH,EAAA,YAAAE,IAAA,2CACEC,MAAM,SACNC,KAAMC,EAAYC,MAClBC,QAASC,EAAcC,UACvBC,KAAM7C,KAAKK,UAAY,aAAe,eACtCyC,QAAS9C,KAAK2B,gBAAgBI,KAAK/B,OAElCA,KAAKG,gBAERgC,EAAA,OAAAE,IAAA,2CAAKU,IAAMC,GAAQhD,KAAKU,IAAMsC,GAC5Bb,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZAnchorNavigation","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hideUnselected","autoCurrent","collapsedLabel","isCollapsed","collapsed","setCurrent","currentElement","Array","from","nav","querySelectorAll","find","anchor","href","host","ownerDocument","location","children","forEach","item","HTMLAnchorElement","querySelector","isCurrent","setAttribute","toString","toggleAttribute","toggleCollapsed","componentDidLoad","window","addEventListener","bind","disconnectedCallback","removeEventListener","render","h","Host","key","class","size","ControlSize","SMALL","variant","ButtonVariant","SECONDARY","icon","onClick","ref","el"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n  scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n  display: none;\n  flex-direction: column;\n  justify-content: flex-start;\n  row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n  display: flex;\n  margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n  display: -webkit-box;\n  overflow: clip;\n  width: 100%;\n  box-sizing: border-box;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n  -webkit-box-orient: vertical;\n  font-weight: inherit;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  overflow-clip-margin: content-box;\n  text-decoration: none;\n}\n\nz-anchor-navigation nav > * a {\n  color: inherit;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n  padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n  z-anchor-navigation nav a {\n    display: inline-block;\n    overflow: hidden;\n    -webkit-line-clamp: none;\n    line-clamp: none;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n\nz-anchor-navigation nav > * {\n  position: relative;\n  border-left: var(--border-size-large) solid var(--color-default-icon);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  transition:\n    background-color 0.3s ease-in-out,\n    border-color 0.3s ease-in-out,\n    color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [data-current] {\n  border-left-color: var(--color-primary01);\n  color: var(--color-primary01);\n  font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > *:is(z-button, button) {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > *:focus:focus-visible,\nz-anchor-navigation nav > * > *:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nz-anchor-navigation nav button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\n@media (min-width: 768px) {\n  z-anchor-navigation:not([is-collapsed]) z-button.toggle {\n    display: none !important;\n  }\n\n  z-anchor-navigation:not([is-collapsed]) nav {\n    display: flex;\n  }\n\n  /* hide anchor actions by default... */\n  z-anchor-navigation nav > * > :is(z-button, button) {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  @media (hover: hover) {\n    /* ...show them only hovering/focusing the anchor */\n    z-anchor-navigation nav > :is([data-current], :hover, :focus, :focus-within) > :is(z-button, button) {\n      fill: var(--color-default-icon);\n      opacity: 1;\n      pointer-events: unset;\n    }\n\n    z-anchor-navigation nav > *:hover {\n      border-left-color: var(--color-hover-primary);\n      background-color: var(--color-background);\n      color: var(--color-hover-primary);\n    }\n  }\n\n  z-anchor-navigation[hide-unselected] nav > *:not([data-current], :hover, :focus, :focus-within) {\n    color: transparent;\n    fill: transparent;\n  }\n}\n","import {Component, ComponentInterface, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize} from \"../../beans\";\n\n/**\n * Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n *  <div>\n *    <a href=\"#section-id\">Section name</a>\n *    <button type=\"button\">\n *      <z-icon name=\"share\" />\n *    </button>\n *  </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n  tag: \"z-anchor-navigation\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZAnchorNavigation implements ComponentInterface {\n  /**\n   * If enabled, the text of each anchor will be hidden unless\n   * for the current one or the one the user is hovering.\n   */\n  @Prop({reflect: true})\n  hideUnselected = false;\n\n  /**\n   * Enables automatic inference of the current item, listening for hash change\n   * and checking the `href` of the slotted anchors.\n   * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n   * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n   */\n  @Prop()\n  autoCurrent = true;\n\n  /**\n   * Sets the label of the button displayed on mobile viewport when the anchor navigation is collapsed\n   */\n  @Prop()\n  collapsedLabel = \"salta a\";\n\n  /**\n   * Explicitly collapse anchor navigation.\n   * If false, it will collapse automatically only on mobile.\n   */\n  @Prop({reflect: true})\n  isCollapsed = false;\n\n  /**\n   * Whether the mobile list is collapsed.\n   */\n  @State()\n  collapsed = false;\n\n  @Element() host: HTMLZAnchorNavigationElement;\n\n  /** Reference to the nav element. */\n  private nav: HTMLElement;\n\n  /**\n   * Set `aria-current` attribute to the anchors.\n   */\n  private setCurrent(): void {\n    const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n      (anchor) => anchor.href === this.host.ownerDocument.location.href\n    );\n    Array.from(this.nav.children).forEach((item) => {\n      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n      const isCurrent = anchor === currentElement;\n      anchor.setAttribute(\"aria-current\", isCurrent.toString());\n      item.toggleAttribute(\"data-current\", isCurrent);\n    });\n  }\n\n  /**\n   * Toggle collapsed state.\n   */\n  private toggleCollapsed(): void {\n    this.collapsed = !this.collapsed;\n  }\n\n  componentDidLoad(): void {\n    if (this.autoCurrent) {\n      window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n      this.setCurrent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"hashchange\", this.setCurrent);\n  }\n\n  render(): HTMLZAnchorNavigationElement {\n    return (\n      <Host\n        collapsed={this.collapsed}\n        class=\"z-scrollbar\"\n      >\n        <z-button\n          class=\"toggle\"\n          size={ControlSize.SMALL}\n          variant={ButtonVariant.SECONDARY}\n          icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n          onClick={this.toggleCollapsed.bind(this)}\n        >\n          {this.collapsedLabel}\n        </z-button>\n        <nav ref={(el) => (this.nav = el)}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mLAAA,MAAMA,EAAY,IAAM,izE,MCuBXC,EAAiBC,EAAA,MAAAD,UAAAE,EAL9B,WAAAC,CAAAC,G,4CAWEC,KAAAC,eAAiB,MASjBD,KAAAE,YAAc,KAMdF,KAAAG,eAAiB,UAOjBH,KAAAI,YAAc,MAMdJ,KAAAK,UAAY,KA6Db,CAnDS,UAAAC,GACN,MAAMC,EAAiBC,MAAMC,KAAKT,KAAKU,IAAIC,iBAAiB,MAAMC,MAC/DC,GAAWA,EAAOC,OAASd,KAAKe,KAAKC,cAAcC,SAASH,OAE/DN,MAAMC,KAAKT,KAAKU,IAAIQ,UAAUC,SAASC,IACrC,MAAMP,EAASO,aAAgBC,kBAAoBD,EAAOA,EAAKE,cAAc,KAC7E,MAAMC,EAAYV,IAAWN,EAC7BM,EAAOW,aAAa,eAAgBD,EAAUE,YAC9CL,EAAKM,gBAAgB,eAAgBH,EAAU,G,CAO3C,eAAAI,GACN3B,KAAKK,WAAaL,KAAKK,S,CAGzB,gBAAAuB,GACE,GAAI5B,KAAKE,YAAa,CACpB2B,OAAOC,iBAAiB,aAAc9B,KAAKM,WAAWyB,KAAK/B,OAC3DA,KAAKM,Y,EAIT,oBAAA0B,GACEH,OAAOI,oBAAoB,aAAcjC,KAAKM,W,CAGhD,MAAA4B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHhC,UAAWL,KAAKK,UAChBiC,MAAM,eAENH,EAAA,YAAAE,IAAA,2CACEC,MAAM,SACNC,KAAMC,EAAYC,MAClBC,QAASC,EAAcC,UACvBC,KAAM7C,KAAKK,UAAY,aAAe,eACtCyC,QAAS9C,KAAK2B,gBAAgBI,KAAK/B,OAElCA,KAAKG,gBAERgC,EAAA,OAAAE,IAAA,2CAAKU,IAAMC,GAAQhD,KAAKU,IAAMsC,GAC5Bb,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/z-app-header.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as i,Fragment as a,createEvent as s,Host as n,transformTag as o}from"@stencil/core/internal/client";import{g as r,e as l,B as h,u as c,v as d}from"./index2.js";import{B as u}from"./breakpoints.js";import{a as f}from"./utils.js";import{d as p}from"./index4.js";import{d as g}from"./index5.js";import{d as m}from"./index3.js";import{d as v}from"./index6.js";import{d as b}from"./index7.js";import{d as w}from"./index8.js";import{d as x}from"./index9.js";import{d as z}from"./index10.js";import{d as k}from"./index11.js";import{d as y}from"./index12.js";import{d as C}from"./index13.js";const M=()=>`:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}z-searchbar.has-label{align-items:flex-end}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;const E=typeof IntersectionObserver!=="undefined";const S=e(class e extends t{onStuck(){const e=this.scrollParent;if(!e){return}this.sticking.emit(this._stuck)}setMenuFloatingMode(){if(this.menuElements.length===0){return}this.menuElements.forEach((e=>{e.open=false;e.verticalContext=this.drawerOpen}))}onStuckChange(){var e,t;if(!this.container){return}if(this.stuck){(e=this.stuckIntersecObserver)===null||e===void 0?void 0:e.observe(this.container)}else{this._stuck=false;(t=this.stuckIntersecObserver)===null||t===void 0?void 0:t.unobserve(this.container)}}get title(){var e;return(e=this.hostElement.querySelector('[slot="title"]'))===null||e===void 0?void 0:e.textContent.trim()}get scrollParent(){const e=this.hostElement.offsetParent;if(e===document.body||e===document.documentElement){return window}return e}get canShowMenu(){return!this.enableOffcanvas&&this.menuElements.length>0&&!this.isMobile&&!this.drawerOpen}get focusableMenu(){return this.menuElements.find((e=>e.htmlTabindex===0))}openDrawer(){this.drawerOpen=true;this.menuElements.forEach(((e,t)=>e.htmlTabindex=t===0?0:-1));setTimeout((()=>this.menuElements[0].setFocus()),400)}closeDrawer(){this.drawerOpen=false;setTimeout((()=>this.burgerButton.focus()),100)}collectMenuElements(){this.menuElements=Array.from(this.hostElement.querySelectorAll('[slot="menu"]'));this.menuElements.forEach(((e,t)=>e.htmlTabindex=t===0?0:-1));this.menuLength=this.menuElements.length;if(!this.enableOffcanvas){this.menuWidth=this.menuElements.reduce(((e,t)=>e+t.getBoundingClientRect().width),0)+(this.menuLength-1)*32}this.setMenuFloatingMode()}setupMenuResizeObserver(){if(this.enableOffcanvas){return}this.menuResizeObserver=new ResizeObserver((e=>{if(this.isMobile){this.enableOffcanvas=true;return}const t=e[0].contentBoxSize[0].inlineSize;if(this.menuWidth===0){return}if(this.menuWidth>t&&!this.enableOffcanvas){this.enableOffcanvas=true}else if(this.menuWidth<=t&&this.enableOffcanvas){this.enableOffcanvas=false}}));this.menuResizeObserver.observe(this.container)}hasSlot(e){return this.hostElement.querySelector(`[slot="${e}"]`)!==null}moveFocus(e,t){e.htmlTabindex=-1;t.setFocus()}onOffcanvasKeydown(e){var t,i;if(e.key!==r.TAB||!this.drawerOpen){return}const a=e.target.closest("z-menu");if(a){e.preventDefault();e.stopPropagation();a.htmlTabindex=0;this.closeDrawerButton.focus()}else if(e.target===this.closeDrawerButton){e.preventDefault();e.stopPropagation();if(e.shiftKey){((t=this.menuElements.filter((e=>e.open)).pop())!==null&&t!==void 0?t:this.menuElements[this.menuLength-1]).setFocus()}else{((i=this.menuElements.find((e=>e.open)))!==null&&i!==void 0?i:this.menuElements[0]).setFocus()}}}manageMenus(e){const t=this.menuElements.find((t=>f(t,e.target)));if(t){this.menuElements.forEach((e=>{if(e===t){return}e.htmlTabindex=-1;if(!this.drawerOpen){e.open=false}}))}else if(!this.drawerOpen){this.menuElements.forEach((e=>{e.open=false}))}}handleKeydown(e){var t,i;if(e.key===r.ESC&&this.drawerOpen){this.closeDrawer();return}if(!this.menuElements.some((t=>t.contains(e.target)))){return}const a=this.focusableMenu;const s=this.menuElements.indexOf(a);let n;if(e.key===r.ARROW_RIGHT&&!a.verticalContext||e.key===r.ARROW_DOWN&&a.verticalContext){n=(t=this.menuElements[s+1])!==null&&t!==void 0?t:this.menuElements[0]}else if(e.key===r.ARROW_LEFT&&!a.verticalContext||e.key===r.ARROW_UP&&a.verticalContext){n=(i=this.menuElements[s-1])!==null&&i!==void 0?i:this.menuElements[this.menuLength-1]}if(!n){return}if(e.key===r.ARROW_UP&&a.verticalContext){if(n.open){a.htmlTabindex=-1;n.focusLastItem();return}}this.moveFocus(a,n)}renderSeachbar(){if(this.isMobile&&!this.searchPageUrl&&this._stuck){return}if(this.searchPageUrl&&(this.isMobile||this.isTablet)){return i("z-button",{class:"search-page-button",variant:h.SECONDARY,href:this.searchPageUrl,icon:"search",size:l.X_SMALL})}return i("z-searchbar",{class:{"has-label":!!this.searchLabel},value:this.searchString,placeholder:this.searchPlaceholder,label:this.searchLabel,showSearchButton:true,searchButtonIconOnly:this.isMobile||this.isTablet,searchButtonLabel:this.isMobile||this.isTablet?undefined:this.searchButtonLabel,size:l.X_SMALL,variant:h.SECONDARY,preventSubmit:this.searchString.length<3,onSearchTyping:e=>this.searchString=e.detail})}renderProductLogos(){return i(a,null,this.enableZLogo&&i("span",{class:"z-logo"},i("img",{alt:"Logo Zanichelli"})),this.hostElement.querySelector("[slot='product-logo']")&&i("span",{class:"product-logo"},i("slot",{name:"product-logo"})))}renderMenuButton(){return this.menuLength>0&&(this.enableOffcanvas||this._stuck||this.isMobile)&&i("button",{ref:e=>this.burgerButton=e,class:"drawer-trigger","aria-label":"Apri menu","aria-haspopup":"menu","aria-expanded":`${this.drawerOpen}`,"aria-controls":"offcanvas-menu",onClick:this.openDrawer},i("z-icon",{name:"burger-menu"}))}renderOffcanvas(){return i("z-offcanvas",{id:"offcanvas-menu",variant:d.OVERLAY,transitiondirection:c.RIGHT,open:this.drawerOpen,onCanvasOpenStatusChanged:e=>this.drawerOpen=e.detail,onKeyDown:this.onOffcanvasKeydown},i("div",{slot:"canvasContent"},i("button",{ref:e=>this.closeDrawerButton=e,class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer,"aria-hidden":`${!this.drawerOpen}`,disabled:!this.drawerOpen},i("z-icon",{name:"close"})),i("div",{class:"drawer-content","aria-hidden":`${!this.drawerOpen}`},i("slot",{name:"menu",onSlotchange:this.collectMenuElements}))))}renderStuck(){return i("div",{class:"heading-stuck"},i("div",{class:"heading-stuck-content"},this.renderMenuButton(),i("div",{class:"heading-title"},this.renderProductLogos(),i("div",{class:"stucked-title"},i("slot",{name:"stucked-title"},this.title))),this.enableSearch&&this.renderSeachbar()))}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.sticking=s(this,"sticking",7);this.stuck=false;this.enableOffcanvas=false;this.enableSearch=false;this.searchPlaceholder="Cerca";this.searchString="";this.enableZLogo=true;this.drawerOpen=false;this._stuck=false;this.isMobile=true;this.isTablet=false;this.menuElements=[];this.stuckIntersecObserver=E?new IntersectionObserver((([e])=>{this._stuck=!e.isIntersecting}),{threshold:.5}):undefined;this.openDrawer=this.openDrawer.bind(this);this.closeDrawer=this.closeDrawer.bind(this);this.collectMenuElements=this.collectMenuElements.bind(this);this.onOffcanvasKeydown=this.onOffcanvasKeydown.bind(this)}componentWillLoad(){this.collectMenuElements();const e=window.matchMedia(`(max-width: ${u.MOBILE}px)`);this.isMobile=e.matches;e.addEventListener("change",(e=>this.isMobile=e.matches));const t=window.matchMedia(`(min-width: ${u.MOBILE+1}px) and (max-width: ${u.TABLET}px)`);this.isTablet=t.matches;t.addEventListener("change",(e=>this.isTablet=e.matches))}componentDidLoad(){this.onStuckChange();this.setupMenuResizeObserver()}disconnectedCallback(){var e;(e=this.menuResizeObserver)===null||e===void 0?void 0:e.disconnect()}render(){const e=this.hasSlot("top-subtitle");return i(n,{key:"a464234ec0ce538282727aa83c43d30b5ea23ffa","menu-length":this.menuLength},i("div",{key:"0f41b7571c5e1acf4298910ab415ca986616a40e",class:{"heading-panel":true,"has-menubar":this.menuLength>0&&!this.enableOffcanvas},ref:e=>this.container=e},i("div",{key:"9b9d45789be83c2db23e035a72b60cd4910b68b2",class:{"heading-container":true,"has-top-subtitle":e}},(!this.enableSearch&&this.isMobile||!this.isMobile)&&i("div",{key:"bd1196659bc19936603de3994011b82ea7649147",class:{"top-subtitle":true,"has-product-logo":e&&this.hasSlot("product-logo")}},i("slot",{key:"5d50957c5b91c138ad21efb849fdd371e93057ae",name:"top-subtitle"})),i("div",{key:"47a21fe5a5b508fe23cf4e185813743e8dce0fab",class:"heading-title"},i("slot",{key:"1c027312231d68cb2ebc625b6aeed177d2e22cf4",name:"menu-button"},this.renderMenuButton()),!this._stuck&&this.renderProductLogos(),i("slot",{key:"6917fa59229dc3d80b5c3ca472bd14b671be9e27",name:"title"}),this.enableSearch&&!this.isMobile&&this.renderSeachbar()),this.enableSearch&&this.isMobile&&this.renderSeachbar()),i("nav",{key:"e3ac84ff0933a8955fa7433f8ea0ae94e5eec080",class:"menu-container","aria-label":this.title||undefined},this.canShowMenu&&i("div",{key:"1f3461f8b2b99d8515774265c07ddcb850ed7757",role:"menubar","aria-label":this.title||undefined},i("slot",{key:"eda425c16602287225554fcca0c65661b46e0366",name:"menu",onSlotchange:this.collectMenuElements})))),this.renderOffcanvas(),this._stuck&&this.renderStuck())}get hostElement(){return this}static get watchers(){return{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}}static get style(){return M()}},[257,"z-app-header",{stuck:[516],enableOffcanvas:[1540,"enable-offcanvas"],enableSearch:[516,"enable-search"],searchLabel:[1,"search-label"],searchPlaceholder:[1,"search-placeholder"],searchButtonLabel:[1,"search-button-label"],searchString:[1025,"search-string"],searchPageUrl:[1,"search-page-url"],enableZLogo:[516,"enable-z-logo"],drawerOpen:[1028,"drawer-open"],_stuck:[32],menuLength:[32],isMobile:[32],isTablet:[32]},[[5,"focusin","manageMenus"],[5,"click","manageMenus"],[1,"keydown","handleKeydown"]],{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}]);function j(){if(typeof customElements==="undefined"){return}const e=["z-app-header","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-offcanvas","z-searchbar","z-tag"];e.forEach((e=>{switch(e){case"z-app-header":if(!customElements.get(o(e))){customElements.define(o(e),S)}break;case"z-button":if(!customElements.get(o(e))){p()}break;case"z-divider":if(!customElements.get(o(e))){g()}break;case"z-icon":if(!customElements.get(o(e))){m()}break;case"z-input":if(!customElements.get(o(e))){v()}break;case"z-input-message":if(!customElements.get(o(e))){b()}break;case"z-list":if(!customElements.get(o(e))){w()}break;case"z-list-element":if(!customElements.get(o(e))){x()}break;case"z-list-group":if(!customElements.get(o(e))){z()}break;case"z-offcanvas":if(!customElements.get(o(e))){k()}break;case"z-searchbar":if(!customElements.get(o(e))){y()}break;case"z-tag":if(!customElements.get(o(e))){C()}break}}))}const H=S;const V=j;export{H as ZAppHeader,V as defineCustomElement};
+import{p as e,H as t,h as i,F as a,c as s,d as n,t as o}from"./p-RmbDDbWd.js";import{g as r,e as l,B as h,u as c,v as d}from"./p-DdetsoIY.js";import{B as u}from"./p-Q-tWjk7P.js";import{a as f}from"./p-8C_CrFxp.js";import{d as p}from"./p-BAguKZnb.js";import{d as g}from"./p-BolVsvfr.js";import{d as m}from"./p-CbXEdwLi.js";import{d as v}from"./p-LXvmZzZa.js";import{d as b}from"./p-CdBqnUF6.js";import{d as w}from"./p-cpTAMdcF.js";import{d as z}from"./p-BeSVHdId.js";import{d as x}from"./p-mphirYN3.js";import{d as k}from"./p-DL2QAfIP.js";import{d as y}from"./p-CJjo0ntH.js";import{d as C}from"./p-BoiZb7m1.js";const M=()=>`:host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width="61" height="32" viewBox="0 0 61 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z" fill="%23E2011A"/><path d="M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z" fill="white"/><path d="M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z" fill="%23E2011A"/><path d="M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z" fill="white"/><path d="M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z" fill="white"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot="product-logo"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot="product-logo"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot="title"]),::slotted([slot="stucked-title"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot="title"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot="title"],[slot="stucked-title"])){text-decoration:none}:host([enable-search]) ::slotted([slot="title"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length="0"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot="top-subtitle"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length="0"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot="menu"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:"";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}z-searchbar.has-label{align-items:flex-end}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot="menu-button"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.has-top-subtitle .z-logo{display:none}.top-subtitle.has-product-logo{padding-left:calc(32px + var(--space-unit))}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role="menubar"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length="0"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}`;const j=typeof IntersectionObserver!=="undefined";const E=e(class e extends t{onStuck(){const e=this.scrollParent;if(!e){return}this.sticking.emit(this._stuck)}setMenuFloatingMode(){if(this.menuElements.length===0){return}this.menuElements.forEach((e=>{e.open=false;e.verticalContext=this.drawerOpen}))}onStuckChange(){var e,t;if(!this.container){return}if(this.stuck){(e=this.stuckIntersecObserver)===null||e===void 0?void 0:e.observe(this.container)}else{this._stuck=false;(t=this.stuckIntersecObserver)===null||t===void 0?void 0:t.unobserve(this.container)}}get title(){var e;return(e=this.hostElement.querySelector('[slot="title"]'))===null||e===void 0?void 0:e.textContent.trim()}get scrollParent(){const e=this.hostElement.offsetParent;if(e===document.body||e===document.documentElement){return window}return e}get canShowMenu(){return!this.enableOffcanvas&&this.menuElements.length>0&&!this.isMobile&&!this.drawerOpen}get focusableMenu(){return this.menuElements.find((e=>e.htmlTabindex===0))}openDrawer(){this.drawerOpen=true;this.menuElements.forEach(((e,t)=>e.htmlTabindex=t===0?0:-1));setTimeout((()=>this.menuElements[0].setFocus()),400)}closeDrawer(){this.drawerOpen=false;setTimeout((()=>this.burgerButton.focus()),100)}collectMenuElements(){this.menuElements=Array.from(this.hostElement.querySelectorAll('[slot="menu"]'));this.menuElements.forEach(((e,t)=>e.htmlTabindex=t===0?0:-1));this.menuLength=this.menuElements.length;if(!this.enableOffcanvas){this.menuWidth=this.menuElements.reduce(((e,t)=>e+t.getBoundingClientRect().width),0)+(this.menuLength-1)*32}this.setMenuFloatingMode()}setupMenuResizeObserver(){if(this.enableOffcanvas){return}this.menuResizeObserver=new ResizeObserver((e=>{if(this.isMobile){this.enableOffcanvas=true;return}const t=e[0].contentBoxSize[0].inlineSize;if(this.menuWidth===0){return}if(this.menuWidth>t&&!this.enableOffcanvas){this.enableOffcanvas=true}else if(this.menuWidth<=t&&this.enableOffcanvas){this.enableOffcanvas=false}}));this.menuResizeObserver.observe(this.container)}hasSlot(e){return this.hostElement.querySelector(`[slot="${e}"]`)!==null}moveFocus(e,t){e.htmlTabindex=-1;t.setFocus()}onOffcanvasKeydown(e){var t,i;if(e.key!==r.TAB||!this.drawerOpen){return}const a=e.target.closest("z-menu");if(a){e.preventDefault();e.stopPropagation();a.htmlTabindex=0;this.closeDrawerButton.focus()}else if(e.target===this.closeDrawerButton){e.preventDefault();e.stopPropagation();if(e.shiftKey){((t=this.menuElements.filter((e=>e.open)).pop())!==null&&t!==void 0?t:this.menuElements[this.menuLength-1]).setFocus()}else{((i=this.menuElements.find((e=>e.open)))!==null&&i!==void 0?i:this.menuElements[0]).setFocus()}}}manageMenus(e){const t=this.menuElements.find((t=>f(t,e.target)));if(t){this.menuElements.forEach((e=>{if(e===t){return}e.htmlTabindex=-1;if(!this.drawerOpen){e.open=false}}))}else if(!this.drawerOpen){this.menuElements.forEach((e=>{e.open=false}))}}handleKeydown(e){var t,i;if(e.key===r.ESC&&this.drawerOpen){this.closeDrawer();return}if(!this.menuElements.some((t=>t.contains(e.target)))){return}const a=this.focusableMenu;const s=this.menuElements.indexOf(a);let n;if(e.key===r.ARROW_RIGHT&&!a.verticalContext||e.key===r.ARROW_DOWN&&a.verticalContext){n=(t=this.menuElements[s+1])!==null&&t!==void 0?t:this.menuElements[0]}else if(e.key===r.ARROW_LEFT&&!a.verticalContext||e.key===r.ARROW_UP&&a.verticalContext){n=(i=this.menuElements[s-1])!==null&&i!==void 0?i:this.menuElements[this.menuLength-1]}if(!n){return}if(e.key===r.ARROW_UP&&a.verticalContext){if(n.open){a.htmlTabindex=-1;n.focusLastItem();return}}this.moveFocus(a,n)}renderSeachbar(){if(this.isMobile&&!this.searchPageUrl&&this._stuck){return}if(this.searchPageUrl&&(this.isMobile||this.isTablet)){return i("z-button",{class:"search-page-button",variant:h.SECONDARY,href:this.searchPageUrl,icon:"search",size:l.X_SMALL})}return i("z-searchbar",{class:{"has-label":!!this.searchLabel},value:this.searchString,placeholder:this.searchPlaceholder,label:this.searchLabel,showSearchButton:true,searchButtonIconOnly:this.isMobile||this.isTablet,searchButtonLabel:this.isMobile||this.isTablet?undefined:this.searchButtonLabel,size:l.X_SMALL,variant:h.SECONDARY,preventSubmit:this.searchString.length<3,onSearchTyping:e=>this.searchString=e.detail})}renderProductLogos(){return i(a,null,this.enableZLogo&&i("span",{class:"z-logo"},i("img",{alt:"Logo Zanichelli"})),this.hostElement.querySelector("[slot='product-logo']")&&i("span",{class:"product-logo"},i("slot",{name:"product-logo"})))}renderMenuButton(){return this.menuLength>0&&(this.enableOffcanvas||this._stuck||this.isMobile)&&i("button",{ref:e=>this.burgerButton=e,class:"drawer-trigger","aria-label":"Apri menu","aria-haspopup":"menu","aria-expanded":`${this.drawerOpen}`,"aria-controls":"offcanvas-menu",onClick:this.openDrawer},i("z-icon",{name:"burger-menu"}))}renderOffcanvas(){return i("z-offcanvas",{id:"offcanvas-menu",variant:d.OVERLAY,transitiondirection:c.RIGHT,open:this.drawerOpen,onCanvasOpenStatusChanged:e=>this.drawerOpen=e.detail,onKeyDown:this.onOffcanvasKeydown},i("div",{slot:"canvasContent"},i("button",{ref:e=>this.closeDrawerButton=e,class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer,"aria-hidden":`${!this.drawerOpen}`,disabled:!this.drawerOpen},i("z-icon",{name:"close"})),i("div",{class:"drawer-content","aria-hidden":`${!this.drawerOpen}`},i("slot",{name:"menu",onSlotchange:this.collectMenuElements}))))}renderStuck(){return i("div",{class:"heading-stuck"},i("div",{class:"heading-stuck-content"},this.renderMenuButton(),i("div",{class:"heading-title"},this.renderProductLogos(),i("div",{class:"stucked-title"},i("slot",{name:"stucked-title"},this.title))),this.enableSearch&&this.renderSeachbar()))}constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.sticking=s(this,"sticking",7);this.stuck=false;this.enableOffcanvas=false;this.enableSearch=false;this.searchPlaceholder="Cerca";this.searchString="";this.enableZLogo=true;this.drawerOpen=false;this._stuck=false;this.isMobile=true;this.isTablet=false;this.menuElements=[];this.stuckIntersecObserver=j?new IntersectionObserver((([e])=>{this._stuck=!e.isIntersecting}),{threshold:.5}):undefined;this.openDrawer=this.openDrawer.bind(this);this.closeDrawer=this.closeDrawer.bind(this);this.collectMenuElements=this.collectMenuElements.bind(this);this.onOffcanvasKeydown=this.onOffcanvasKeydown.bind(this)}componentWillLoad(){this.collectMenuElements();const e=window.matchMedia(`(max-width: ${u.MOBILE}px)`);this.isMobile=e.matches;e.addEventListener("change",(e=>this.isMobile=e.matches));const t=window.matchMedia(`(min-width: ${u.MOBILE+1}px) and (max-width: ${u.TABLET}px)`);this.isTablet=t.matches;t.addEventListener("change",(e=>this.isTablet=e.matches))}componentDidLoad(){this.onStuckChange();this.setupMenuResizeObserver()}disconnectedCallback(){var e;(e=this.menuResizeObserver)===null||e===void 0?void 0:e.disconnect()}render(){const e=this.hasSlot("top-subtitle");return i(n,{key:"a464234ec0ce538282727aa83c43d30b5ea23ffa","menu-length":this.menuLength},i("div",{key:"0f41b7571c5e1acf4298910ab415ca986616a40e",class:{"heading-panel":true,"has-menubar":this.menuLength>0&&!this.enableOffcanvas},ref:e=>this.container=e},i("div",{key:"9b9d45789be83c2db23e035a72b60cd4910b68b2",class:{"heading-container":true,"has-top-subtitle":e}},(!this.enableSearch&&this.isMobile||!this.isMobile)&&i("div",{key:"bd1196659bc19936603de3994011b82ea7649147",class:{"top-subtitle":true,"has-product-logo":e&&this.hasSlot("product-logo")}},i("slot",{key:"5d50957c5b91c138ad21efb849fdd371e93057ae",name:"top-subtitle"})),i("div",{key:"47a21fe5a5b508fe23cf4e185813743e8dce0fab",class:"heading-title"},i("slot",{key:"1c027312231d68cb2ebc625b6aeed177d2e22cf4",name:"menu-button"},this.renderMenuButton()),!this._stuck&&this.renderProductLogos(),i("slot",{key:"6917fa59229dc3d80b5c3ca472bd14b671be9e27",name:"title"}),this.enableSearch&&!this.isMobile&&this.renderSeachbar()),this.enableSearch&&this.isMobile&&this.renderSeachbar()),i("nav",{key:"e3ac84ff0933a8955fa7433f8ea0ae94e5eec080",class:"menu-container","aria-label":this.title||undefined},this.canShowMenu&&i("div",{key:"1f3461f8b2b99d8515774265c07ddcb850ed7757",role:"menubar","aria-label":this.title||undefined},i("slot",{key:"eda425c16602287225554fcca0c65661b46e0366",name:"menu",onSlotchange:this.collectMenuElements})))),this.renderOffcanvas(),this._stuck&&this.renderStuck())}get hostElement(){return this}static get watchers(){return{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}}static get style(){return M()}},[257,"z-app-header",{stuck:[516],enableOffcanvas:[1540,"enable-offcanvas"],enableSearch:[516,"enable-search"],searchLabel:[1,"search-label"],searchPlaceholder:[1,"search-placeholder"],searchButtonLabel:[1,"search-button-label"],searchString:[1025,"search-string"],searchPageUrl:[1,"search-page-url"],enableZLogo:[516,"enable-z-logo"],drawerOpen:[1028,"drawer-open"],_stuck:[32],menuLength:[32],isMobile:[32],isTablet:[32]},[[5,"focusin","manageMenus"],[5,"click","manageMenus"],[1,"keydown","handleKeydown"]],{_stuck:[{onStuck:0}],drawerOpen:[{setMenuFloatingMode:0}],stuck:[{onStuckChange:0}]}]);function S(){if(typeof customElements==="undefined"){return}const e=["z-app-header","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-offcanvas","z-searchbar","z-tag"];e.forEach((e=>{switch(e){case"z-app-header":if(!customElements.get(o(e))){customElements.define(o(e),E)}break;case"z-button":if(!customElements.get(o(e))){p()}break;case"z-divider":if(!customElements.get(o(e))){g()}break;case"z-icon":if(!customElements.get(o(e))){m()}break;case"z-input":if(!customElements.get(o(e))){v()}break;case"z-input-message":if(!customElements.get(o(e))){b()}break;case"z-list":if(!customElements.get(o(e))){w()}break;case"z-list-element":if(!customElements.get(o(e))){z()}break;case"z-list-group":if(!customElements.get(o(e))){x()}break;case"z-offcanvas":if(!customElements.get(o(e))){k()}break;case"z-searchbar":if(!customElements.get(o(e))){y()}break;case"z-tag":if(!customElements.get(o(e))){C()}break}}))}const H=E;const L=S;export{H as ZAppHeader,L as defineCustomElement};
 //# sourceMappingURL=z-app-header.js.map

package/dist/components/z-app-header.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","SUPPORT_INTERSECTION_OBSERVER","IntersectionObserver","ZAppHeader","__stencil_proxyCustomElement","HTMLElement","onStuck","scrollParent","this","sticking","emit","_stuck","setMenuFloatingMode","menuElements","length","forEach","element","open","verticalContext","drawerOpen","onStuckChange","container","stuck","_a","stuckIntersecObserver","observe","_b","unobserve","title","hostElement","querySelector","textContent","trim","parent","offsetParent","document","body","documentElement","window","canShowMenu","enableOffcanvas","isMobile","focusableMenu","find","el","htmlTabindex","openDrawer","index","setTimeout","setFocus","closeDrawer","burgerButton","focus","collectMenuElements","Array","from","querySelectorAll","menuLength","menuWidth","reduce","acc","getBoundingClientRect","width","setupMenuResizeObserver","menuResizeObserver","ResizeObserver","entries","containerWidth","contentBoxSize","inlineSize","hasSlot","slotName","moveFocus","current","receiver","onOffcanvasKeydown","ev","key","KeyboardCode","TAB","closestMenu","target","closest","preventDefault","stopPropagation","closeDrawerButton","shiftKey","filter","menu","pop","manageMenus","targetMenu","containsElement","handleKeydown","ESC","some","elem","contains","currentIndex","indexOf","ARROW_RIGHT","ARROW_DOWN","ARROW_LEFT","ARROW_UP","focusLastItem","renderSeachbar","searchPageUrl","isTablet","h","class","variant","ButtonVariant","SECONDARY","href","icon","size","ControlSize","X_SMALL","searchLabel","value","searchString","placeholder","searchPlaceholder","label","showSearchButton","searchButtonIconOnly","searchButtonLabel","undefined","preventSubmit","onSearchTyping","e","detail","renderProductLogos","Fragment","enableZLogo","alt","name","renderMenuButton","ref","onClick","renderOffcanvas","id","OffCanvasVariant","OVERLAY","transitiondirection","TransitionDirection","RIGHT","onCanvasOpenStatusChanged","onKeyDown","slot","disabled","onSlotchange","renderStuck","enableSearch","constructor","registerHost","entry","isIntersecting","threshold","bind","componentWillLoad","mobileMediaQuery","matchMedia","Breakpoints","MOBILE","matches","addEventListener","tabletMediaQuery","TABLET","componentDidLoad","disconnectedCallback","disconnect","render","hasTopSubtitle","Host","role"],"sources":["src/components/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/z-app-header/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n   * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.\n   * @prop --app-header-text-color: Header text color. Defaults to `--color-default-text`.\n   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.\n   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.\n   */\n  --app-header-content-max-width: ;\n  --app-header-top-offset: ;\n  --app-header-bg: ;\n  --app-header-text-color: ;\n  --app-header-stucked-bg: ;\n  --app-header-stucked-text-color: ;\n\n  position: relative;\n  display: block;\n  box-shadow: var(--shadow-2);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n.heading-panel {\n  --title-line-height: 1.333;\n  --title-font-size: var(--font-size-6);\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: var(--app-header-content-max-width, 100%);\n  flex-direction: column;\n  flex-grow: 0;\n  flex-shrink: 0;\n  align-items: baseline;\n  padding: calc(var(--space-unit) * 2);\n  margin: 0 auto;\n  background: var(--app-header-bg, var(--color-surface01));\n}\n\n:host(:empty) .heading-panel {\n  padding: 0;\n}\n\n.heading-container {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n\n.heading-panel.has-menubar {\n  padding-bottom: 0;\n}\n\n.heading-panel .heading-container {\n  flex-direction: column-reverse;\n}\n\n:host([enable-search]) .heading-panel .heading-container {\n  flex-direction: column;\n}\n\n:host([enable-search][search-page-url]) .heading-panel .heading-container {\n  flex-direction: row;\n}\n\n.heading-title {\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.heading-title:not(:last-child) {\n  margin-right: var(--space-unit);\n}\n\n.z-logo,\n.search-page-button {\n  display: flex;\n  height: calc(var(--title-font-size) * var(--title-line-height));\n  align-items: center;\n}\n\n.z-logo img {\n  height: 24px;\n  margin: 0 var(--space-unit) 0 0;\n  content: url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>');\n}\n\n.product-logo {\n  display: none;\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) {\n  width: 32px;\n  height: 32px;\n  margin-right: var(--space-unit);\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n::slotted([slot=\"title\"]),\n::slotted([slot=\"stucked-title\"]),\n.stucked-title {\n  margin: 0;\n  color: var(--app-header-text-color, var(--color-default-text));\n  font-family: var(--font-family-serif);\n  font-weight: var(--font-sb);\n}\n\n::slotted([slot=\"title\"]) {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  font-size: var(--title-font-size);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: var(--title-line-height);\n  text-overflow: ellipsis;\n}\n\n::slotted(a:is([slot=\"title\"], [slot=\"stucked-title\"])) {\n  text-decoration: none;\n}\n\n:host([enable-search]) ::slotted([slot=\"title\"]) + * {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle {\n  padding-left: calc(var(--space-unit) * 4 + var(--space-unit));\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n  display: -webkit-box;\n  overflow: hidden;\n  max-width: 80%;\n  margin: 0;\n  -webkit-box-orient: vertical;\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n.search-page-button {\n  margin-left: auto;\n}\n\n.menu-container {\n  display: flex;\n  flex: 1 auto;\n  column-gap: calc(var(--space-unit) * 4);\n}\n\n.menu-container:focus:focus-visible {\n  outline: none;\n}\n\n:host([menu-length=\"0\"]) .menu-container,\n.menu-container:empty {\n  display: none;\n}\n\n.menu-container ::slotted([open]) {\n  position: relative;\n  z-index: 3;\n}\n\n.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after {\n  position: absolute;\n  top: calc(1.5em / 2); /* half the line-height of the label */\n  right: calc(var(--space-unit) * -2);\n  width: var(--border-size-small);\n  height: 1em;\n  background-color: var(--color-default-icon);\n  content: \"\";\n  font-size: var(--font-size-3);\n  transform: translateY(-50%);\n}\n\nz-searchbar {\n  z-index: 0;\n  display: flex;\n  width: 100%;\n  align-items: center;\n}\n\nz-searchbar.has-label {\n  align-items: flex-end;\n}\n\n.heading-stuck {\n  position: fixed;\n  z-index: 20;\n  top: var(--app-header-top-offset, 48px);\n  left: 0;\n  width: 100%;\n  max-width: 100%;\n  animation: slide-stuck-heading-in 250ms ease-out;\n  background: var(--app-header-stucked-bg, var(--color-surface01));\n  box-shadow: var(--shadow-2);\n  color: var(--app-header-stucked-text-color, var(--color-default-text));\n}\n\n.heading-stuck-content {\n  display: flex;\n  max-width: var(--app-header-content-max-width, 100%);\n  align-items: center;\n  padding: var(--space-unit) var(--grid-margin);\n  margin: 0 auto;\n}\n\n.heading-stuck .heading-title {\n  --title-font-size: var(--font-size-5);\n  --title-line-height: 1.4;\n\n  overflow: hidden;\n  align-items: center;\n}\n\n.heading-stuck .stucked-title {\n  overflow: hidden;\n  font-size: var(--title-font-size);\n  line-height: var(--title-line-height);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.drawer-trigger,\n::slotted([slot=\"menu-button\"]) {\n  display: flex;\n  height: calc(var(--title-font-size) * var(--title-line-height));\n  align-items: center;\n  padding: 0;\n  border: 0;\n  margin-right: var(--space-unit);\n  appearance: none;\n  background: none;\n  border-radius: 0;\n  color: inherit;\n  cursor: pointer;\n  outline: none;\n}\n\n.drawer-trigger:focus:focus-visible z-icon {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.drawer-trigger z-icon {\n  --z-icon-width: calc(var(--space-unit) * 4);\n  --z-icon-height: calc(var(--space-unit) * 4);\n\n  fill: var(--color-default-icon);\n}\n\n.drawer-content {\n  display: none;\n}\n\nz-offcanvas {\n  --z-offcanvas--top-space: var(--app-header-top-offset);\n}\n\nz-offcanvas[open] .drawer-content {\n  display: flex;\n  width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n  width: 100%;\n}\n\n.drawer-close {\n  --z-icon-width: calc(var(--space-unit) * 4);\n  --z-icon-height: calc(var(--space-unit) * 4);\n\n  padding: 0;\n  border: 0;\n  margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n  appearance: none;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  outline: none;\n}\n\n.drawer-close z-icon {\n  fill: var(--color-default-icon);\n}\n\n.drawer-close:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n@media (max-width: 767px) {\n  :host([enable-search]) .heading-panel .heading-container {\n    row-gap: calc(var(--space-unit) * 1.5);\n  }\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .heading-panel {\n    --title-font-size: var(--font-size-9);\n\n    padding: calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25);\n  }\n\n  :host([enable-search][search-page-url]) .heading-panel .heading-container {\n    flex-direction: column;\n  }\n\n  .heading-panel .heading-container {\n    flex-direction: column;\n    margin-right: auto;\n  }\n\n  .z-logo img {\n    height: 32px;\n  }\n\n  .product-logo {\n    display: flex;\n    height: calc(var(--title-font-size) * var(--title-line-height));\n    align-items: center;\n  }\n\n  .has-top-subtitle .z-logo {\n    display: none;\n  }\n\n  .top-subtitle.has-product-logo {\n    padding-left: calc(32px + var(--space-unit));\n  }\n\n  z-searchbar {\n    width: 30%;\n    height: calc(var(--title-font-size) * var(--title-line-height));\n    margin-left: auto;\n  }\n\n  .menu-container {\n    flex: initial;\n  }\n\n  .menu-container > [role=\"menubar\"] {\n    display: contents;\n  }\n\n  :host(:not([enable-offcanvas])) .menu-container {\n    margin-top: calc((var(--space-unit) * 1.75));\n  }\n\n  :host(:not([enable-offcanvas])) .heading-container .drawer-trigger {\n    display: none;\n  }\n\n  .heading-stuck .heading-title {\n    --title-font-size: var(--font-size-8);\n    --title-line-height: 1.5;\n  }\n\n  .heading-stuck-content {\n    padding: 6px var(--grid-margin);\n  }\n\n  :host(:not([enable-offcanvas], [menu-length=\"0\"])) {\n    padding-left: 0;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  z-searchbar {\n    min-width: calc(var(--space-unit) * 45);\n  }\n}\n\n@keyframes slide-stuck-heading-in {\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n\n  100% {\n    transform: none;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n */\n@Component({\n  tag: \"z-app-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAppHeader implements ComponentInterface {\n  @Element() hostElement: HTMLZAppHeaderElement;\n\n  /**\n   * Stuck mode for the header.\n   * You can programmatically set it using an IntersectionObserver.\n   */\n  @Prop({reflect: true})\n  stuck = false;\n\n  /**\n   * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n   */\n  @Prop({reflect: true, mutable: true})\n  enableOffcanvas = false;\n\n  /**\n   * Enable the search bar.\n   */\n  @Prop({reflect: true})\n  enableSearch = false;\n\n  /**\n   * Visible label for the search bar.\n   */\n  @Prop()\n  searchLabel?: string;\n\n  /**\n   * Placeholder text for the search bar.\n   */\n  @Prop()\n  searchPlaceholder = \"Cerca\";\n\n  /**\n   * Label of the search button.\n   */\n  @Prop()\n  searchButtonLabel?: string;\n\n  /**\n   * Search string for the search bar.\n   */\n  @Prop({mutable: true})\n  searchString = \"\";\n\n  /**\n   * Url to the search page.\n   * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n   * The link will also appear on the sticky header.\n   */\n  @Prop()\n  searchPageUrl: string;\n\n  /**\n   * Enable laZ logo.\n   */\n  @Prop({reflect: true})\n  enableZLogo = true;\n\n  /**\n   * The opening state of the drawer.\n   */\n  @Prop({mutable: true})\n  drawerOpen = false;\n\n  /**\n   * Emitted when the `stuck` state of the header changes\n   */\n  @Event()\n  sticking: EventEmitter;\n\n  /**\n   * The stuck state of the bar.\n   */\n  @State()\n  private _stuck = false;\n\n  /**\n   * Current count of menu items.\n   */\n  @State()\n  private menuLength: number;\n\n  @State()\n  private isMobile = true;\n\n  @State()\n  private isTablet = false;\n\n  private container?: HTMLDivElement;\n\n  private menuElements: HTMLZMenuElement[] = [];\n\n  private menuWidth: number;\n\n  private closeDrawerButton: HTMLButtonElement;\n\n  private burgerButton: HTMLButtonElement;\n\n  private menuResizeObserver: ResizeObserver;\n\n  private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n    ? new IntersectionObserver(\n        ([entry]) => {\n          this._stuck = !entry.isIntersecting;\n        },\n        {threshold: 0.5}\n      )\n    : undefined;\n\n  @Watch(\"_stuck\")\n  onStuck(): void {\n    const scrollParent = this.scrollParent;\n    if (!scrollParent) {\n      return;\n    }\n\n    this.sticking.emit(this._stuck);\n  }\n\n  @Watch(\"drawerOpen\")\n  setMenuFloatingMode(): void {\n    if (this.menuElements.length === 0) {\n      return;\n    }\n\n    this.menuElements.forEach((element) => {\n      element.open = false;\n      element.verticalContext = this.drawerOpen;\n    });\n  }\n\n  @Watch(\"stuck\")\n  onStuckChange(): void {\n    if (!this.container) {\n      return;\n    }\n\n    if (this.stuck) {\n      this.stuckIntersecObserver?.observe(this.container);\n    } else {\n      this._stuck = false;\n      this.stuckIntersecObserver?.unobserve(this.container);\n    }\n  }\n\n  private get title(): string {\n    return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n  }\n\n  private get scrollParent(): Window | Element {\n    const parent = this.hostElement.offsetParent;\n    if (parent === document.body || parent === document.documentElement) {\n      return window;\n    }\n\n    return parent;\n  }\n\n  private get canShowMenu(): boolean {\n    return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n  }\n\n  private get focusableMenu(): HTMLZMenuElement {\n    return this.menuElements.find((el) => el.htmlTabindex === 0);\n  }\n\n  private openDrawer(): void {\n    this.drawerOpen = true;\n    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n    setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */\n  }\n\n  private closeDrawer(): void {\n    this.drawerOpen = false;\n    setTimeout(() => this.burgerButton.focus(), 100);\n  }\n\n  private collectMenuElements(): void {\n    this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n    this.menuLength = this.menuElements.length;\n    if (!this.enableOffcanvas) {\n      this.menuWidth =\n        this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n        (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;\n    }\n    this.setMenuFloatingMode();\n  }\n\n  /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */\n  private setupMenuResizeObserver(): void {\n    if (this.enableOffcanvas) {\n      return;\n    }\n\n    this.menuResizeObserver = new ResizeObserver((entries) => {\n      if (this.isMobile) {\n        this.enableOffcanvas = true;\n\n        return;\n      }\n\n      const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n      if (this.menuWidth === 0) {\n        return;\n      }\n\n      if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n        this.enableOffcanvas = true;\n      } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n        this.enableOffcanvas = false;\n      }\n    });\n    this.menuResizeObserver.observe(this.container);\n  }\n\n  private hasSlot(slotName: string): boolean {\n    return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n  }\n\n  private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n    current.htmlTabindex = -1;\n    receiver.setFocus();\n  }\n\n  private onOffcanvasKeydown(ev: KeyboardEvent): void {\n    if (ev.key !== KeyboardCode.TAB || !this.drawerOpen) {\n      return;\n    }\n\n    const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n    if (closestMenu) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      // restore tabindex to the zmenu containing the focused element\n      closestMenu.htmlTabindex = 0;\n      this.closeDrawerButton.focus();\n    } else if (ev.target === this.closeDrawerButton) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      if (ev.shiftKey) {\n        // give focus to the last open menu if any or the last menu otherwhise\n        (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n      } else {\n        // give focus to the first open menu if any or the first menu otherwhise\n        (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n      }\n    }\n  }\n\n  /** Close each menu except the one receiving focus/click, if any */\n  @Listen(\"focusin\", {target: \"document\", passive: true})\n  @Listen(\"click\", {target: \"document\", passive: true})\n  manageMenus(ev: FocusEvent | PointerEvent): void {\n    const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n    if (targetMenu) {\n      this.menuElements.forEach((menu) => {\n        if (menu === targetMenu) {\n          return;\n        }\n\n        menu.htmlTabindex = -1;\n        if (!this.drawerOpen) {\n          menu.open = false;\n        }\n      });\n    } else if (!this.drawerOpen) {\n      this.menuElements.forEach((menu) => {\n        menu.open = false;\n      });\n    }\n  }\n\n  @Listen(\"keydown\", {passive: true})\n  handleKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n      this.closeDrawer();\n\n      return;\n    }\n\n    if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n      return;\n    }\n\n    const current = this.focusableMenu;\n    const currentIndex = this.menuElements.indexOf(current);\n    let receiver: HTMLZMenuElement;\n    if (\n      (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||\n      (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n    ) {\n      receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n    } else if (\n      (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||\n      (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n    ) {\n      receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n    }\n    if (!receiver) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n      if (receiver.open) {\n        current.htmlTabindex = -1;\n        receiver.focusLastItem();\n\n        return;\n      }\n    }\n\n    this.moveFocus(current, receiver);\n  }\n\n  private renderSeachbar(): HTMLZButtonElement | HTMLZSearchbarElement | undefined {\n    if (this.isMobile && !this.searchPageUrl && this._stuck) {\n      return;\n    }\n\n    if (this.searchPageUrl && (this.isMobile || this.isTablet)) {\n      return (\n        <z-button\n          class=\"search-page-button\"\n          variant={ButtonVariant.SECONDARY}\n          href={this.searchPageUrl}\n          icon=\"search\"\n          size={ControlSize.X_SMALL}\n        />\n      );\n    }\n\n    return (\n      <z-searchbar\n        class={{\"has-label\": !!this.searchLabel}}\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        label={this.searchLabel}\n        showSearchButton={true}\n        searchButtonIconOnly={this.isMobile || this.isTablet}\n        searchButtonLabel={this.isMobile || this.isTablet ? undefined : this.searchButtonLabel}\n        size={ControlSize.X_SMALL}\n        variant={ButtonVariant.SECONDARY}\n        preventSubmit={this.searchString.length < 3}\n        onSearchTyping={(e) => (this.searchString = e.detail)}\n      />\n    );\n  }\n\n  private renderProductLogos(): HTMLElement | null {\n    return (\n      <Fragment>\n        {this.enableZLogo && (\n          <span class=\"z-logo\">\n            <img alt=\"Logo Zanichelli\" />\n          </span>\n        )}\n        {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n          <span class=\"product-logo\">\n            <slot name=\"product-logo\" />\n          </span>\n        )}\n      </Fragment>\n    );\n  }\n\n  private renderMenuButton(): HTMLButtonElement {\n    return (\n      this.menuLength > 0 &&\n      (this.enableOffcanvas || this._stuck || this.isMobile) && (\n        <button\n          ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n          class=\"drawer-trigger\"\n          aria-label=\"Apri menu\"\n          aria-haspopup=\"menu\"\n          aria-expanded={`${this.drawerOpen}`}\n          aria-controls=\"offcanvas-menu\"\n          onClick={this.openDrawer}\n        >\n          <z-icon name=\"burger-menu\" />\n        </button>\n      )\n    );\n  }\n\n  private renderOffcanvas(): HTMLZOffcanvasElement {\n    return (\n      <z-offcanvas\n        id=\"offcanvas-menu\"\n        variant={OffCanvasVariant.OVERLAY}\n        transitiondirection={TransitionDirection.RIGHT}\n        open={this.drawerOpen}\n        onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n        onKeyDown={this.onOffcanvasKeydown}\n      >\n        <div slot=\"canvasContent\">\n          <button\n            ref={(el) => (this.closeDrawerButton = el)}\n            class=\"drawer-close\"\n            aria-label=\"Chiudi menu\"\n            onClick={this.closeDrawer}\n            aria-hidden={`${!this.drawerOpen}`}\n            disabled={!this.drawerOpen}\n          >\n            <z-icon name=\"close\" />\n          </button>\n\n          <div\n            class=\"drawer-content\"\n            aria-hidden={`${!this.drawerOpen}`}\n          >\n            <slot\n              name=\"menu\"\n              onSlotchange={this.collectMenuElements}\n            />\n          </div>\n        </div>\n      </z-offcanvas>\n    );\n  }\n\n  private renderStuck(): HTMLElement {\n    return (\n      <div class=\"heading-stuck\">\n        <div class=\"heading-stuck-content\">\n          {this.renderMenuButton()}\n          <div class=\"heading-title\">\n            {this.renderProductLogos()}\n            <div class=\"stucked-title\">\n              <slot name=\"stucked-title\">{this.title}</slot>\n            </div>\n          </div>\n          {this.enableSearch && this.renderSeachbar()}\n        </div>\n      </div>\n    );\n  }\n\n  constructor() {\n    this.openDrawer = this.openDrawer.bind(this);\n    this.closeDrawer = this.closeDrawer.bind(this);\n    this.collectMenuElements = this.collectMenuElements.bind(this);\n    this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.collectMenuElements();\n\n    // mobile and tablet media queries listeners\n    const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n    const tabletMediaQuery = window.matchMedia(\n      `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n    );\n    this.isTablet = tabletMediaQuery.matches;\n    tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n  }\n\n  componentDidLoad(): void {\n    this.onStuckChange();\n    this.setupMenuResizeObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.menuResizeObserver?.disconnect();\n  }\n\n  render(): HTMLZAppHeaderElement {\n    const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n    return (\n      <Host menu-length={this.menuLength}>\n        <div\n          class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n          ref={(el) => (this.container = el)}\n        >\n          <div class={{\"heading-container\": true, \"has-top-subtitle\": hasTopSubtitle}}>\n            {((!this.enableSearch && this.isMobile) || !this.isMobile) && (\n              <div class={{\"top-subtitle\": true, \"has-product-logo\": hasTopSubtitle && this.hasSlot(\"product-logo\")}}>\n                <slot name=\"top-subtitle\" />\n              </div>\n            )}\n            <div class=\"heading-title\">\n              <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n              {!this._stuck && this.renderProductLogos()}\n              <slot name=\"title\" />\n              {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n            </div>\n            {this.enableSearch && this.isMobile && this.renderSeachbar()}\n          </div>\n\n          <nav\n            class=\"menu-container\"\n            aria-label={this.title || undefined}\n          >\n            {this.canShowMenu && (\n              <div\n                role=\"menubar\"\n                aria-label={this.title || undefined}\n              >\n                <slot\n                  name=\"menu\"\n                  onSlotchange={this.collectMenuElements}\n                />\n              </div>\n            )}\n          </nav>\n        </div>\n        {this.renderOffcanvas()}\n        {this._stuck && this.renderStuck()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["stylesCss","SUPPORT_INTERSECTION_OBSERVER","IntersectionObserver","ZAppHeader","__stencil_proxyCustomElement","HTMLElement","onStuck","scrollParent","this","sticking","emit","_stuck","setMenuFloatingMode","menuElements","length","forEach","element","open","verticalContext","drawerOpen","onStuckChange","container","stuck","_a","stuckIntersecObserver","observe","_b","unobserve","title","hostElement","querySelector","textContent","trim","parent","offsetParent","document","body","documentElement","window","canShowMenu","enableOffcanvas","isMobile","focusableMenu","find","el","htmlTabindex","openDrawer","index","setTimeout","setFocus","closeDrawer","burgerButton","focus","collectMenuElements","Array","from","querySelectorAll","menuLength","menuWidth","reduce","acc","getBoundingClientRect","width","setupMenuResizeObserver","menuResizeObserver","ResizeObserver","entries","containerWidth","contentBoxSize","inlineSize","hasSlot","slotName","moveFocus","current","receiver","onOffcanvasKeydown","ev","key","KeyboardCode","TAB","closestMenu","target","closest","preventDefault","stopPropagation","closeDrawerButton","shiftKey","filter","menu","pop","manageMenus","targetMenu","containsElement","handleKeydown","ESC","some","elem","contains","currentIndex","indexOf","ARROW_RIGHT","ARROW_DOWN","ARROW_LEFT","ARROW_UP","focusLastItem","renderSeachbar","searchPageUrl","isTablet","h","class","variant","ButtonVariant","SECONDARY","href","icon","size","ControlSize","X_SMALL","searchLabel","value","searchString","placeholder","searchPlaceholder","label","showSearchButton","searchButtonIconOnly","searchButtonLabel","undefined","preventSubmit","onSearchTyping","e","detail","renderProductLogos","Fragment","enableZLogo","alt","name","renderMenuButton","ref","onClick","renderOffcanvas","id","OffCanvasVariant","OVERLAY","transitiondirection","TransitionDirection","RIGHT","onCanvasOpenStatusChanged","onKeyDown","slot","disabled","onSlotchange","renderStuck","enableSearch","constructor","registerHost","entry","isIntersecting","threshold","bind","componentWillLoad","mobileMediaQuery","matchMedia","Breakpoints","MOBILE","matches","addEventListener","tabletMediaQuery","TABLET","componentDidLoad","disconnectedCallback","disconnect","render","hasTopSubtitle","Host","role"],"sources":["src/components/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/z-app-header/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n   * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.\n   * @prop --app-header-text-color: Header text color. Defaults to `--color-default-text`.\n   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.\n   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.\n   */\n  --app-header-content-max-width: ;\n  --app-header-top-offset: ;\n  --app-header-bg: ;\n  --app-header-text-color: ;\n  --app-header-stucked-bg: ;\n  --app-header-stucked-text-color: ;\n\n  position: relative;\n  display: block;\n  box-shadow: var(--shadow-2);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n.heading-panel {\n  --title-line-height: 1.333;\n  --title-font-size: var(--font-size-6);\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: var(--app-header-content-max-width, 100%);\n  flex-direction: column;\n  flex-grow: 0;\n  flex-shrink: 0;\n  align-items: baseline;\n  padding: calc(var(--space-unit) * 2);\n  margin: 0 auto;\n  background: var(--app-header-bg, var(--color-surface01));\n}\n\n:host(:empty) .heading-panel {\n  padding: 0;\n}\n\n.heading-container {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n\n.heading-panel.has-menubar {\n  padding-bottom: 0;\n}\n\n.heading-panel .heading-container {\n  flex-direction: column-reverse;\n}\n\n:host([enable-search]) .heading-panel .heading-container {\n  flex-direction: column;\n}\n\n:host([enable-search][search-page-url]) .heading-panel .heading-container {\n  flex-direction: row;\n}\n\n.heading-title {\n  display: flex;\n  width: 100%;\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.heading-title:not(:last-child) {\n  margin-right: var(--space-unit);\n}\n\n.z-logo,\n.search-page-button {\n  display: flex;\n  height: calc(var(--title-font-size) * var(--title-line-height));\n  align-items: center;\n}\n\n.z-logo img {\n  height: 24px;\n  margin: 0 var(--space-unit) 0 0;\n  content: url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>');\n}\n\n.product-logo {\n  display: none;\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) {\n  width: 32px;\n  height: 32px;\n  margin-right: var(--space-unit);\n}\n\n.product-logo ::slotted([slot=\"product-logo\"]) img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n::slotted([slot=\"title\"]),\n::slotted([slot=\"stucked-title\"]),\n.stucked-title {\n  margin: 0;\n  color: var(--app-header-text-color, var(--color-default-text));\n  font-family: var(--font-family-serif);\n  font-weight: var(--font-sb);\n}\n\n::slotted([slot=\"title\"]) {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  font-size: var(--title-font-size);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  line-height: var(--title-line-height);\n  text-overflow: ellipsis;\n}\n\n::slotted(a:is([slot=\"title\"], [slot=\"stucked-title\"])) {\n  text-decoration: none;\n}\n\n:host([enable-search]) ::slotted([slot=\"title\"]) + * {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle {\n  padding-left: calc(var(--space-unit) * 4 + var(--space-unit));\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n  display: -webkit-box;\n  overflow: hidden;\n  max-width: 80%;\n  margin: 0;\n  -webkit-box-orient: vertical;\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-2);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n}\n\n.search-page-button {\n  margin-left: auto;\n}\n\n.menu-container {\n  display: flex;\n  flex: 1 auto;\n  column-gap: calc(var(--space-unit) * 4);\n}\n\n.menu-container:focus:focus-visible {\n  outline: none;\n}\n\n:host([menu-length=\"0\"]) .menu-container,\n.menu-container:empty {\n  display: none;\n}\n\n.menu-container ::slotted([open]) {\n  position: relative;\n  z-index: 3;\n}\n\n.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after {\n  position: absolute;\n  top: calc(1.5em / 2); /* half the line-height of the label */\n  right: calc(var(--space-unit) * -2);\n  width: var(--border-size-small);\n  height: 1em;\n  background-color: var(--color-default-icon);\n  content: \"\";\n  font-size: var(--font-size-3);\n  transform: translateY(-50%);\n}\n\nz-searchbar {\n  z-index: 0;\n  display: flex;\n  width: 100%;\n  align-items: center;\n}\n\nz-searchbar.has-label {\n  align-items: flex-end;\n}\n\n.heading-stuck {\n  position: fixed;\n  z-index: 20;\n  top: var(--app-header-top-offset, 48px);\n  left: 0;\n  width: 100%;\n  max-width: 100%;\n  animation: slide-stuck-heading-in 250ms ease-out;\n  background: var(--app-header-stucked-bg, var(--color-surface01));\n  box-shadow: var(--shadow-2);\n  color: var(--app-header-stucked-text-color, var(--color-default-text));\n}\n\n.heading-stuck-content {\n  display: flex;\n  max-width: var(--app-header-content-max-width, 100%);\n  align-items: center;\n  padding: var(--space-unit) var(--grid-margin);\n  margin: 0 auto;\n}\n\n.heading-stuck .heading-title {\n  --title-font-size: var(--font-size-5);\n  --title-line-height: 1.4;\n\n  overflow: hidden;\n  align-items: center;\n}\n\n.heading-stuck .stucked-title {\n  overflow: hidden;\n  font-size: var(--title-font-size);\n  line-height: var(--title-line-height);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.drawer-trigger,\n::slotted([slot=\"menu-button\"]) {\n  display: flex;\n  height: calc(var(--title-font-size) * var(--title-line-height));\n  align-items: center;\n  padding: 0;\n  border: 0;\n  margin-right: var(--space-unit);\n  appearance: none;\n  background: none;\n  border-radius: 0;\n  color: inherit;\n  cursor: pointer;\n  outline: none;\n}\n\n.drawer-trigger:focus:focus-visible z-icon {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.drawer-trigger z-icon {\n  --z-icon-width: calc(var(--space-unit) * 4);\n  --z-icon-height: calc(var(--space-unit) * 4);\n\n  fill: var(--color-default-icon);\n}\n\n.drawer-content {\n  display: none;\n}\n\nz-offcanvas {\n  --z-offcanvas--top-space: var(--app-header-top-offset);\n}\n\nz-offcanvas[open] .drawer-content {\n  display: flex;\n  width: 100%;\n  flex: 1 auto;\n  flex-direction: column;\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n  width: 100%;\n}\n\n.drawer-close {\n  --z-icon-width: calc(var(--space-unit) * 4);\n  --z-icon-height: calc(var(--space-unit) * 4);\n\n  padding: 0;\n  border: 0;\n  margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n  appearance: none;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  outline: none;\n}\n\n.drawer-close z-icon {\n  fill: var(--color-default-icon);\n}\n\n.drawer-close:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n@media (max-width: 767px) {\n  :host([enable-search]) .heading-panel .heading-container {\n    row-gap: calc(var(--space-unit) * 1.5);\n  }\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .heading-panel {\n    --title-font-size: var(--font-size-9);\n\n    padding: calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25);\n  }\n\n  :host([enable-search][search-page-url]) .heading-panel .heading-container {\n    flex-direction: column;\n  }\n\n  .heading-panel .heading-container {\n    flex-direction: column;\n    margin-right: auto;\n  }\n\n  .z-logo img {\n    height: 32px;\n  }\n\n  .product-logo {\n    display: flex;\n    height: calc(var(--title-font-size) * var(--title-line-height));\n    align-items: center;\n  }\n\n  .has-top-subtitle .z-logo {\n    display: none;\n  }\n\n  .top-subtitle.has-product-logo {\n    padding-left: calc(32px + var(--space-unit));\n  }\n\n  z-searchbar {\n    width: 30%;\n    height: calc(var(--title-font-size) * var(--title-line-height));\n    margin-left: auto;\n  }\n\n  .menu-container {\n    flex: initial;\n  }\n\n  .menu-container > [role=\"menubar\"] {\n    display: contents;\n  }\n\n  :host(:not([enable-offcanvas])) .menu-container {\n    margin-top: calc((var(--space-unit) * 1.75));\n  }\n\n  :host(:not([enable-offcanvas])) .heading-container .drawer-trigger {\n    display: none;\n  }\n\n  .heading-stuck .heading-title {\n    --title-font-size: var(--font-size-8);\n    --title-line-height: 1.5;\n  }\n\n  .heading-stuck-content {\n    padding: 6px var(--grid-margin);\n  }\n\n  :host(:not([enable-offcanvas], [menu-length=\"0\"])) {\n    padding-left: 0;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  z-searchbar {\n    min-width: calc(var(--space-unit) * 45);\n  }\n}\n\n@keyframes slide-stuck-heading-in {\n  0% {\n    transform: translate3d(0, -100%, 0);\n  }\n\n  100% {\n    transform: none;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n */\n@Component({\n  tag: \"z-app-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAppHeader implements ComponentInterface {\n  @Element() hostElement: HTMLZAppHeaderElement;\n\n  /**\n   * Stuck mode for the header.\n   * You can programmatically set it using an IntersectionObserver.\n   */\n  @Prop({reflect: true})\n  stuck = false;\n\n  /**\n   * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n   */\n  @Prop({reflect: true, mutable: true})\n  enableOffcanvas = false;\n\n  /**\n   * Enable the search bar.\n   */\n  @Prop({reflect: true})\n  enableSearch = false;\n\n  /**\n   * Visible label for the search bar.\n   */\n  @Prop()\n  searchLabel?: string;\n\n  /**\n   * Placeholder text for the search bar.\n   */\n  @Prop()\n  searchPlaceholder = \"Cerca\";\n\n  /**\n   * Label of the search button.\n   */\n  @Prop()\n  searchButtonLabel?: string;\n\n  /**\n   * Search string for the search bar.\n   */\n  @Prop({mutable: true})\n  searchString = \"\";\n\n  /**\n   * Url to the search page.\n   * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n   * The link will also appear on the sticky header.\n   */\n  @Prop()\n  searchPageUrl: string;\n\n  /**\n   * Enable laZ logo.\n   */\n  @Prop({reflect: true})\n  enableZLogo = true;\n\n  /**\n   * The opening state of the drawer.\n   */\n  @Prop({mutable: true})\n  drawerOpen = false;\n\n  /**\n   * Emitted when the `stuck` state of the header changes\n   */\n  @Event()\n  sticking: EventEmitter;\n\n  /**\n   * The stuck state of the bar.\n   */\n  @State()\n  private _stuck = false;\n\n  /**\n   * Current count of menu items.\n   */\n  @State()\n  private menuLength: number;\n\n  @State()\n  private isMobile = true;\n\n  @State()\n  private isTablet = false;\n\n  private container?: HTMLDivElement;\n\n  private menuElements: HTMLZMenuElement[] = [];\n\n  private menuWidth: number;\n\n  private closeDrawerButton: HTMLButtonElement;\n\n  private burgerButton: HTMLButtonElement;\n\n  private menuResizeObserver: ResizeObserver;\n\n  private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n    ? new IntersectionObserver(\n        ([entry]) => {\n          this._stuck = !entry.isIntersecting;\n        },\n        {threshold: 0.5}\n      )\n    : undefined;\n\n  @Watch(\"_stuck\")\n  onStuck(): void {\n    const scrollParent = this.scrollParent;\n    if (!scrollParent) {\n      return;\n    }\n\n    this.sticking.emit(this._stuck);\n  }\n\n  @Watch(\"drawerOpen\")\n  setMenuFloatingMode(): void {\n    if (this.menuElements.length === 0) {\n      return;\n    }\n\n    this.menuElements.forEach((element) => {\n      element.open = false;\n      element.verticalContext = this.drawerOpen;\n    });\n  }\n\n  @Watch(\"stuck\")\n  onStuckChange(): void {\n    if (!this.container) {\n      return;\n    }\n\n    if (this.stuck) {\n      this.stuckIntersecObserver?.observe(this.container);\n    } else {\n      this._stuck = false;\n      this.stuckIntersecObserver?.unobserve(this.container);\n    }\n  }\n\n  private get title(): string {\n    return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n  }\n\n  private get scrollParent(): Window | Element {\n    const parent = this.hostElement.offsetParent;\n    if (parent === document.body || parent === document.documentElement) {\n      return window;\n    }\n\n    return parent;\n  }\n\n  private get canShowMenu(): boolean {\n    return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n  }\n\n  private get focusableMenu(): HTMLZMenuElement {\n    return this.menuElements.find((el) => el.htmlTabindex === 0);\n  }\n\n  private openDrawer(): void {\n    this.drawerOpen = true;\n    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n    setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */\n  }\n\n  private closeDrawer(): void {\n    this.drawerOpen = false;\n    setTimeout(() => this.burgerButton.focus(), 100);\n  }\n\n  private collectMenuElements(): void {\n    this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n    this.menuLength = this.menuElements.length;\n    if (!this.enableOffcanvas) {\n      this.menuWidth =\n        this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n        (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;\n    }\n    this.setMenuFloatingMode();\n  }\n\n  /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */\n  private setupMenuResizeObserver(): void {\n    if (this.enableOffcanvas) {\n      return;\n    }\n\n    this.menuResizeObserver = new ResizeObserver((entries) => {\n      if (this.isMobile) {\n        this.enableOffcanvas = true;\n\n        return;\n      }\n\n      const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n      if (this.menuWidth === 0) {\n        return;\n      }\n\n      if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n        this.enableOffcanvas = true;\n      } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n        this.enableOffcanvas = false;\n      }\n    });\n    this.menuResizeObserver.observe(this.container);\n  }\n\n  private hasSlot(slotName: string): boolean {\n    return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n  }\n\n  private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n    current.htmlTabindex = -1;\n    receiver.setFocus();\n  }\n\n  private onOffcanvasKeydown(ev: KeyboardEvent): void {\n    if (ev.key !== KeyboardCode.TAB || !this.drawerOpen) {\n      return;\n    }\n\n    const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n    if (closestMenu) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      // restore tabindex to the zmenu containing the focused element\n      closestMenu.htmlTabindex = 0;\n      this.closeDrawerButton.focus();\n    } else if (ev.target === this.closeDrawerButton) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      if (ev.shiftKey) {\n        // give focus to the last open menu if any or the last menu otherwhise\n        (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n      } else {\n        // give focus to the first open menu if any or the first menu otherwhise\n        (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n      }\n    }\n  }\n\n  /** Close each menu except the one receiving focus/click, if any */\n  @Listen(\"focusin\", {target: \"document\", passive: true})\n  @Listen(\"click\", {target: \"document\", passive: true})\n  manageMenus(ev: FocusEvent | PointerEvent): void {\n    const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n    if (targetMenu) {\n      this.menuElements.forEach((menu) => {\n        if (menu === targetMenu) {\n          return;\n        }\n\n        menu.htmlTabindex = -1;\n        if (!this.drawerOpen) {\n          menu.open = false;\n        }\n      });\n    } else if (!this.drawerOpen) {\n      this.menuElements.forEach((menu) => {\n        menu.open = false;\n      });\n    }\n  }\n\n  @Listen(\"keydown\", {passive: true})\n  handleKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n      this.closeDrawer();\n\n      return;\n    }\n\n    if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n      return;\n    }\n\n    const current = this.focusableMenu;\n    const currentIndex = this.menuElements.indexOf(current);\n    let receiver: HTMLZMenuElement;\n    if (\n      (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||\n      (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n    ) {\n      receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n    } else if (\n      (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||\n      (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n    ) {\n      receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n    }\n    if (!receiver) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n      if (receiver.open) {\n        current.htmlTabindex = -1;\n        receiver.focusLastItem();\n\n        return;\n      }\n    }\n\n    this.moveFocus(current, receiver);\n  }\n\n  private renderSeachbar(): HTMLZButtonElement | HTMLZSearchbarElement | undefined {\n    if (this.isMobile && !this.searchPageUrl && this._stuck) {\n      return;\n    }\n\n    if (this.searchPageUrl && (this.isMobile || this.isTablet)) {\n      return (\n        <z-button\n          class=\"search-page-button\"\n          variant={ButtonVariant.SECONDARY}\n          href={this.searchPageUrl}\n          icon=\"search\"\n          size={ControlSize.X_SMALL}\n        />\n      );\n    }\n\n    return (\n      <z-searchbar\n        class={{\"has-label\": !!this.searchLabel}}\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        label={this.searchLabel}\n        showSearchButton={true}\n        searchButtonIconOnly={this.isMobile || this.isTablet}\n        searchButtonLabel={this.isMobile || this.isTablet ? undefined : this.searchButtonLabel}\n        size={ControlSize.X_SMALL}\n        variant={ButtonVariant.SECONDARY}\n        preventSubmit={this.searchString.length < 3}\n        onSearchTyping={(e) => (this.searchString = e.detail)}\n      />\n    );\n  }\n\n  private renderProductLogos(): HTMLElement | null {\n    return (\n      <Fragment>\n        {this.enableZLogo && (\n          <span class=\"z-logo\">\n            <img alt=\"Logo Zanichelli\" />\n          </span>\n        )}\n        {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n          <span class=\"product-logo\">\n            <slot name=\"product-logo\" />\n          </span>\n        )}\n      </Fragment>\n    );\n  }\n\n  private renderMenuButton(): HTMLButtonElement {\n    return (\n      this.menuLength > 0 &&\n      (this.enableOffcanvas || this._stuck || this.isMobile) && (\n        <button\n          ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n          class=\"drawer-trigger\"\n          aria-label=\"Apri menu\"\n          aria-haspopup=\"menu\"\n          aria-expanded={`${this.drawerOpen}`}\n          aria-controls=\"offcanvas-menu\"\n          onClick={this.openDrawer}\n        >\n          <z-icon name=\"burger-menu\" />\n        </button>\n      )\n    );\n  }\n\n  private renderOffcanvas(): HTMLZOffcanvasElement {\n    return (\n      <z-offcanvas\n        id=\"offcanvas-menu\"\n        variant={OffCanvasVariant.OVERLAY}\n        transitiondirection={TransitionDirection.RIGHT}\n        open={this.drawerOpen}\n        onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n        onKeyDown={this.onOffcanvasKeydown}\n      >\n        <div slot=\"canvasContent\">\n          <button\n            ref={(el) => (this.closeDrawerButton = el)}\n            class=\"drawer-close\"\n            aria-label=\"Chiudi menu\"\n            onClick={this.closeDrawer}\n            aria-hidden={`${!this.drawerOpen}`}\n            disabled={!this.drawerOpen}\n          >\n            <z-icon name=\"close\" />\n          </button>\n\n          <div\n            class=\"drawer-content\"\n            aria-hidden={`${!this.drawerOpen}`}\n          >\n            <slot\n              name=\"menu\"\n              onSlotchange={this.collectMenuElements}\n            />\n          </div>\n        </div>\n      </z-offcanvas>\n    );\n  }\n\n  private renderStuck(): HTMLElement {\n    return (\n      <div class=\"heading-stuck\">\n        <div class=\"heading-stuck-content\">\n          {this.renderMenuButton()}\n          <div class=\"heading-title\">\n            {this.renderProductLogos()}\n            <div class=\"stucked-title\">\n              <slot name=\"stucked-title\">{this.title}</slot>\n            </div>\n          </div>\n          {this.enableSearch && this.renderSeachbar()}\n        </div>\n      </div>\n    );\n  }\n\n  constructor() {\n    this.openDrawer = this.openDrawer.bind(this);\n    this.closeDrawer = this.closeDrawer.bind(this);\n    this.collectMenuElements = this.collectMenuElements.bind(this);\n    this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.collectMenuElements();\n\n    // mobile and tablet media queries listeners\n    const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n    const tabletMediaQuery = window.matchMedia(\n      `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n    );\n    this.isTablet = tabletMediaQuery.matches;\n    tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n  }\n\n  componentDidLoad(): void {\n    this.onStuckChange();\n    this.setupMenuResizeObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.menuResizeObserver?.disconnect();\n  }\n\n  render(): HTMLZAppHeaderElement {\n    const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n    return (\n      <Host menu-length={this.menuLength}>\n        <div\n          class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n          ref={(el) => (this.container = el)}\n        >\n          <div class={{\"heading-container\": true, \"has-top-subtitle\": hasTopSubtitle}}>\n            {((!this.enableSearch && this.isMobile) || !this.isMobile) && (\n              <div class={{\"top-subtitle\": true, \"has-product-logo\": hasTopSubtitle && this.hasSlot(\"product-logo\")}}>\n                <slot name=\"top-subtitle\" />\n              </div>\n            )}\n            <div class=\"heading-title\">\n              <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n              {!this._stuck && this.renderProductLogos()}\n              <slot name=\"title\" />\n              {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n            </div>\n            {this.enableSearch && this.isMobile && this.renderSeachbar()}\n          </div>\n\n          <nav\n            class=\"menu-container\"\n            aria-label={this.title || undefined}\n          >\n            {this.canShowMenu && (\n              <div\n                role=\"menubar\"\n                aria-label={this.title || undefined}\n              >\n                <slot\n                  name=\"menu\"\n                  onSlotchange={this.collectMenuElements}\n                />\n              </div>\n            )}\n          </nav>\n        </div>\n        {this.renderOffcanvas()}\n        {this._stuck && this.renderStuck()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kmBAAA,MAAMA,EAAY,IAAM,81PCkBxB,MAAMC,SAAuCC,uBAAyB,Y,MAczDC,EAAUC,EAAA,MAAAD,UAAAE,EAgHrB,OAAAC,GACE,MAAMC,EAAeC,KAAKD,aAC1B,IAAKA,EAAc,CACjB,M,CAGFC,KAAKC,SAASC,KAAKF,KAAKG,O,CAI1B,mBAAAC,GACE,GAAIJ,KAAKK,aAAaC,SAAW,EAAG,CAClC,M,CAGFN,KAAKK,aAAaE,SAASC,IACzBA,EAAQC,KAAO,MACfD,EAAQE,gBAAkBV,KAAKW,UAAU,G,CAK7C,aAAAC,G,QACE,IAAKZ,KAAKa,UAAW,CACnB,M,CAGF,GAAIb,KAAKc,MAAO,EACdC,EAAAf,KAAKgB,yBAAqB,MAAAD,SAAA,SAAAA,EAAEE,QAAQjB,KAAKa,U,KACpC,CACLb,KAAKG,OAAS,OACde,EAAAlB,KAAKgB,yBAAqB,MAAAE,SAAA,SAAAA,EAAEC,UAAUnB,KAAKa,U,EAI/C,SAAYO,G,MACV,OAAOL,EAAAf,KAAKqB,YAAYC,cAAc,qBAAiB,MAAAP,SAAA,SAAAA,EAAEQ,YAAYC,M,CAGvE,gBAAYzB,GACV,MAAM0B,EAASzB,KAAKqB,YAAYK,aAChC,GAAID,IAAWE,SAASC,MAAQH,IAAWE,SAASE,gBAAiB,CACnE,OAAOC,M,CAGT,OAAOL,C,CAGT,eAAYM,GACV,OAAQ/B,KAAKgC,iBAAmBhC,KAAKK,aAAaC,OAAS,IAAMN,KAAKiC,WAAajC,KAAKW,U,CAG1F,iBAAYuB,GACV,OAAOlC,KAAKK,aAAa8B,MAAMC,GAAOA,EAAGC,eAAiB,G,CAGpD,UAAAC,GACNtC,KAAKW,WAAa,KAClBX,KAAKK,aAAaE,SAAQ,CAACC,EAAS+B,IAAW/B,EAAQ6B,aAAeE,IAAU,EAAI,GAAI,IACxFC,YAAW,IAAMxC,KAAKK,aAAa,GAAGoC,YAAY,I,CAG5C,WAAAC,GACN1C,KAAKW,WAAa,MAClB6B,YAAW,IAAMxC,KAAK2C,aAAaC,SAAS,I,CAGtC,mBAAAC,GACN7C,KAAKK,aAAeyC,MAAMC,KAAK/C,KAAKqB,YAAY2B,iBAAiB,kBACjEhD,KAAKK,aAAaE,SAAQ,CAACC,EAAS+B,IAAW/B,EAAQ6B,aAAeE,IAAU,EAAI,GAAI,IACxFvC,KAAKiD,WAAajD,KAAKK,aAAaC,OACpC,IAAKN,KAAKgC,gBAAiB,CACzBhC,KAAKkD,UACHlD,KAAKK,aAAa8C,QAAO,CAACC,EAAKhB,IAAOgB,EAAMhB,EAAGiB,wBAAwBC,OAAO,IAC7EtD,KAAKiD,WAAa,GAAK,E,CAE5BjD,KAAKI,qB,CAIC,uBAAAmD,GACN,GAAIvD,KAAKgC,gBAAiB,CACxB,M,CAGFhC,KAAKwD,mBAAqB,IAAIC,gBAAgBC,IAC5C,GAAI1D,KAAKiC,SAAU,CACjBjC,KAAKgC,gBAAkB,KAEvB,M,CAGF,MAAM2B,EAAiBD,EAAQ,GAAGE,eAAe,GAAGC,WACpD,GAAI7D,KAAKkD,YAAc,EAAG,CACxB,M,CAGF,GAAIlD,KAAKkD,UAAYS,IAAmB3D,KAAKgC,gBAAiB,CAC5DhC,KAAKgC,gBAAkB,I,MAClB,GAAIhC,KAAKkD,WAAaS,GAAkB3D,KAAKgC,gBAAiB,CACnEhC,KAAKgC,gBAAkB,K,KAG3BhC,KAAKwD,mBAAmBvC,QAAQjB,KAAKa,U,CAG/B,OAAAiD,CAAQC,GACd,OAAO/D,KAAKqB,YAAYC,cAAc,UAAUyC,SAAkB,I,CAG5D,SAAAC,CAAUC,EAA2BC,GAC3CD,EAAQ5B,cAAe,EACvB6B,EAASzB,U,CAGH,kBAAA0B,CAAmBC,G,QACzB,GAAIA,EAAGC,MAAQC,EAAaC,MAAQvE,KAAKW,WAAY,CACnD,M,CAGF,MAAM6D,EAAeJ,EAAGK,OAAuBC,QAAQ,UACvD,GAAIF,EAAa,CACfJ,EAAGO,iBACHP,EAAGQ,kBAEHJ,EAAYnC,aAAe,EAC3BrC,KAAK6E,kBAAkBjC,O,MAClB,GAAIwB,EAAGK,SAAWzE,KAAK6E,kBAAmB,CAC/CT,EAAGO,iBACHP,EAAGQ,kBACH,GAAIR,EAAGU,SAAU,GAEd/D,EAAAf,KAAKK,aAAa0E,QAAQC,GAASA,EAAKvE,OAAMwE,SAAK,MAAAlE,SAAA,EAAAA,EAAIf,KAAKK,aAAaL,KAAKiD,WAAa,IAAIR,U,KAC3F,GAEJvB,EAAAlB,KAAKK,aAAa8B,MAAM6C,GAASA,EAAKvE,UAAK,MAAAS,SAAA,EAAAA,EAAIlB,KAAKK,aAAa,IAAIoC,U,GAQ5E,WAAAyC,CAAYd,GACV,MAAMe,EAAanF,KAAKK,aAAa8B,MAAM6C,GAASI,EAAgBJ,EAAMZ,EAAGK,UAC7E,GAAIU,EAAY,CACdnF,KAAKK,aAAaE,SAASyE,IACzB,GAAIA,IAASG,EAAY,CACvB,M,CAGFH,EAAK3C,cAAe,EACpB,IAAKrC,KAAKW,WAAY,CACpBqE,EAAKvE,KAAO,K,UAGX,IAAKT,KAAKW,WAAY,CAC3BX,KAAKK,aAAaE,SAASyE,IACzBA,EAAKvE,KAAO,KAAK,G,EAMvB,aAAA4E,CAAcjB,G,QACZ,GAAIA,EAAGC,MAAQC,EAAagB,KAAOtF,KAAKW,WAAY,CAClDX,KAAK0C,cAEL,M,CAGF,IAAK1C,KAAKK,aAAakF,MAAMC,GAASA,EAAKC,SAASrB,EAAGK,UAAyB,CAC9E,M,CAGF,MAAMR,EAAUjE,KAAKkC,cACrB,MAAMwD,EAAe1F,KAAKK,aAAasF,QAAQ1B,GAC/C,IAAIC,EACJ,GACGE,EAAGC,MAAQC,EAAasB,cAAgB3B,EAAQvD,iBAChD0D,EAAGC,MAAQC,EAAauB,YAAc5B,EAAQvD,gBAC/C,CACAwD,GAAWnD,EAAAf,KAAKK,aAAaqF,EAAe,MAAE,MAAA3E,SAAA,EAAAA,EAAIf,KAAKK,aAAa,E,MAC/D,GACJ+D,EAAGC,MAAQC,EAAawB,aAAe7B,EAAQvD,iBAC/C0D,EAAGC,MAAQC,EAAayB,UAAY9B,EAAQvD,gBAC7C,CACAwD,GAAWhD,EAAAlB,KAAKK,aAAaqF,EAAe,MAAE,MAAAxE,SAAA,EAAAA,EAAIlB,KAAKK,aAAaL,KAAKiD,WAAa,E,CAExF,IAAKiB,EAAU,CACb,M,CAGF,GAAIE,EAAGC,MAAQC,EAAayB,UAAY9B,EAAQvD,gBAAiB,CAC/D,GAAIwD,EAASzD,KAAM,CACjBwD,EAAQ5B,cAAe,EACvB6B,EAAS8B,gBAET,M,EAIJhG,KAAKgE,UAAUC,EAASC,E,CAGlB,cAAA+B,GACN,GAAIjG,KAAKiC,WAAajC,KAAKkG,eAAiBlG,KAAKG,OAAQ,CACvD,M,CAGF,GAAIH,KAAKkG,gBAAkBlG,KAAKiC,UAAYjC,KAAKmG,UAAW,CAC1D,OACEC,EAAA,YACEC,MAAM,qBACNC,QAASC,EAAcC,UACvBC,KAAMzG,KAAKkG,cACXQ,KAAK,SACLC,KAAMC,EAAYC,S,CAKxB,OACET,EAAA,eACEC,MAAO,CAAC,cAAerG,KAAK8G,aAC5BC,MAAO/G,KAAKgH,aACZC,YAAajH,KAAKkH,kBAClBC,MAAOnH,KAAK8G,YACZM,iBAAkB,KAClBC,qBAAsBrH,KAAKiC,UAAYjC,KAAKmG,SAC5CmB,kBAAmBtH,KAAKiC,UAAYjC,KAAKmG,SAAWoB,UAAYvH,KAAKsH,kBACrEX,KAAMC,EAAYC,QAClBP,QAASC,EAAcC,UACvBgB,cAAexH,KAAKgH,aAAa1G,OAAS,EAC1CmH,eAAiBC,GAAO1H,KAAKgH,aAAeU,EAAEC,Q,CAK5C,kBAAAC,GACN,OACExB,EAACyB,EAAQ,KACN7H,KAAK8H,aACJ1B,EAAA,QAAMC,MAAM,UACVD,EAAA,OAAK2B,IAAI,qBAGZ/H,KAAKqB,YAAYC,cAAc,0BAC9B8E,EAAA,QAAMC,MAAM,gBACVD,EAAA,QAAM4B,KAAK,kB,CAOb,gBAAAC,GACN,OACEjI,KAAKiD,WAAa,IACjBjD,KAAKgC,iBAAmBhC,KAAKG,QAAUH,KAAKiC,WAC3CmE,EAAA,UACE8B,IAAM9F,GAAQpC,KAAK2C,aAAeP,EAClCiE,MAAM,iBAAgB,aACX,YAAW,gBACR,OAAM,gBACL,GAAGrG,KAAKW,aAAY,gBACrB,iBACdwH,QAASnI,KAAKsC,YAEd8D,EAAA,UAAQ4B,KAAK,gB,CAMb,eAAAI,GACN,OACEhC,EAAA,eACEiC,GAAG,iBACH/B,QAASgC,EAAiBC,QAC1BC,oBAAqBC,EAAoBC,MACzCjI,KAAMT,KAAKW,WACXgI,0BAA4BvE,GAAQpE,KAAKW,WAAayD,EAAGuD,OACzDiB,UAAW5I,KAAKmE,oBAEhBiC,EAAA,OAAKyC,KAAK,iBACRzC,EAAA,UACE8B,IAAM9F,GAAQpC,KAAK6E,kBAAoBzC,EACvCiE,MAAM,eAAc,aACT,cACX8B,QAASnI,KAAK0C,YAAW,cACZ,IAAI1C,KAAKW,aACtBmI,UAAW9I,KAAKW,YAEhByF,EAAA,UAAQ4B,KAAK,WAGf5B,EAAA,OACEC,MAAM,iBAAgB,cACT,IAAIrG,KAAKW,cAEtByF,EAAA,QACE4B,KAAK,OACLe,aAAc/I,KAAK6C,wB,CAQvB,WAAAmG,GACN,OACE5C,EAAA,OAAKC,MAAM,iBACTD,EAAA,OAAKC,MAAM,yBACRrG,KAAKiI,mBACN7B,EAAA,OAAKC,MAAM,iBACRrG,KAAK4H,qBACNxB,EAAA,OAAKC,MAAM,iBACTD,EAAA,QAAM4B,KAAK,iBAAiBhI,KAAKoB,SAGpCpB,KAAKiJ,cAAgBjJ,KAAKiG,kB,CAMnC,WAAAiD,CAAAC,G,qGAhbAnJ,KAAAc,MAAQ,MAMRd,KAAAgC,gBAAkB,MAMlBhC,KAAAiJ,aAAe,MAYfjJ,KAAAkH,kBAAoB,QAYpBlH,KAAAgH,aAAe,GAcfhH,KAAA8H,YAAc,KAMd9H,KAAAW,WAAa,MAYLX,KAAAG,OAAS,MASTH,KAAAiC,SAAW,KAGXjC,KAAAmG,SAAW,MAIXnG,KAAAK,aAAmC,GAUnCL,KAAAgB,sBAA+CvB,EACnD,IAAIC,sBACF,EAAE0J,MACApJ,KAAKG,QAAUiJ,EAAMC,cAAc,GAErC,CAACC,UAAW,KAEd/B,UA4UFvH,KAAKsC,WAAatC,KAAKsC,WAAWiH,KAAKvJ,MACvCA,KAAK0C,YAAc1C,KAAK0C,YAAY6G,KAAKvJ,MACzCA,KAAK6C,oBAAsB7C,KAAK6C,oBAAoB0G,KAAKvJ,MACzDA,KAAKmE,mBAAqBnE,KAAKmE,mBAAmBoF,KAAKvJ,KACxD,CAED,iBAAAwJ,GACExJ,KAAK6C,sBAGL,MAAM4G,EAAmB3H,OAAO4H,WAAW,eAAeC,EAAYC,aACtE5J,KAAKiC,SAAWwH,EAAiBI,QACjCJ,EAAiBK,iBAAiB,UAAWpC,GAAO1H,KAAKiC,SAAWyF,EAAEmC,UACtE,MAAME,EAAmBjI,OAAO4H,WAC9B,eAAeC,EAAYC,OAAS,wBAAwBD,EAAYK,aAE1EhK,KAAKmG,SAAW4D,EAAiBF,QACjCE,EAAiBD,iBAAiB,UAAWpC,GAAO1H,KAAKmG,SAAWuB,EAAEmC,S,CAGxE,gBAAAI,GACEjK,KAAKY,gBACLZ,KAAKuD,yB,CAGP,oBAAA2G,G,OACEnJ,EAAAf,KAAKwD,sBAAkB,MAAAzC,SAAA,SAAAA,EAAEoJ,Y,CAG3B,MAAAC,GACE,MAAMC,EAAiBrK,KAAK8D,QAAQ,gBAEpC,OACEsC,EAACkE,EAAI,CAAAjG,IAAA,yDAAcrE,KAAKiD,YACtBmD,EAAA,OAAA/B,IAAA,2CACEgC,MAAO,CAAC,gBAAiB,KAAM,cAAerG,KAAKiD,WAAa,IAAMjD,KAAKgC,iBAC3EkG,IAAM9F,GAAQpC,KAAKa,UAAYuB,GAE/BgE,EAAA,OAAA/B,IAAA,2CAAKgC,MAAO,CAAC,oBAAqB,KAAM,mBAAoBgE,MACtDrK,KAAKiJ,cAAgBjJ,KAAKiC,WAAcjC,KAAKiC,WAC/CmE,EAAA,OAAA/B,IAAA,2CAAKgC,MAAO,CAAC,eAAgB,KAAM,mBAAoBgE,GAAkBrK,KAAK8D,QAAQ,kBACpFsC,EAAA,QAAA/B,IAAA,2CAAM2D,KAAK,kBAGf5B,EAAA,OAAA/B,IAAA,2CAAKgC,MAAM,iBACTD,EAAA,QAAA/B,IAAA,2CAAM2D,KAAK,eAAehI,KAAKiI,qBAC7BjI,KAAKG,QAAUH,KAAK4H,qBACtBxB,EAAA,QAAA/B,IAAA,2CAAM2D,KAAK,UACVhI,KAAKiJ,eAAiBjJ,KAAKiC,UAAYjC,KAAKiG,kBAE9CjG,KAAKiJ,cAAgBjJ,KAAKiC,UAAYjC,KAAKiG,kBAG9CG,EAAA,OAAA/B,IAAA,2CACEgC,MAAM,iBAAgB,aACVrG,KAAKoB,OAASmG,WAEzBvH,KAAK+B,aACJqE,EAAA,OAAA/B,IAAA,2CACEkG,KAAK,UAAS,aACFvK,KAAKoB,OAASmG,WAE1BnB,EAAA,QAAA/B,IAAA,2CACE2D,KAAK,OACLe,aAAc/I,KAAK6C,yBAM5B7C,KAAKoI,kBACLpI,KAAKG,QAAUH,KAAKgJ,c","ignoreList":[]}