@zanichelli/albe-web-components 19.2.3-RC1 → 19.2.3

package/www/build/p-93bb075f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZToastNotificationListStyle0","ZToastNotificationList","this","notificationArray","ToastNotificationPosition","TOP_RIGHT","watchPropNewestontop","newValue","hostElement","append","reverse","shadowRoot","addEventListener","slotChangeHandler","removeEventListener","componentWillLoad","newestontop","handleNewestOnTop","Array","from","children","bind","difference","filter","elem","includes","forEach","push","newElem","remove","prepend","render","h","key","name"],"sources":["src/components/z-toast-notification-list/styles.css?tag=z-toast-notification-list&encapsulation=shadow","src/components/z-toast-notification-list/index.tsx"],"sourcesContent":[":host {\n  position: fixed;\n  z-index: 10000;\n  display: flex;\n  flex-flow: column nowrap;\n  margin-top: calc(var(--space-unit) * 2);\n  margin-bottom: calc(var(--space-unit) * 2);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n::slotted(z-toast-notification) {\n  width: 100vw;\n}\n\n::slotted(:not(:last-child)) {\n  margin-bottom: calc(var(--space-unit) * 1);\n}\n\n:host([position=\"bottom-centre\"]),\n:host([position=\"bottom-right\"]),\n:host([position=\"bottom-left\"]) {\n  bottom: 0;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n:host([position=\"top-left\"]),\n:host([position=\"top-right\"]),\n:host([position=\"top-centre\"]) {\n  top: 0;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n/* Tablet breakpoint */\n@media only screen and (min-width: 768px) {\n  :host {\n    margin: calc(var(--space-unit) * 3);\n  }\n\n  :host([position=\"top-centre\"]) {\n    top: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-start;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"top-left\"]) {\n    top: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"top-right\"]) {\n    top: 0;\n    right: 0;\n    align-items: flex-end;\n    justify-content: flex-start;\n  }\n\n  :host([position=\"bottom-centre\"]) {\n    bottom: 0;\n    left: 50%;\n    align-items: center;\n    justify-content: flex-end;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"bottom-right\"]) {\n    right: 0;\n    bottom: 0;\n    align-items: flex-end;\n    justify-content: flex-end;\n  }\n\n  :host([position=\"bottom-left\"]) {\n    bottom: 0;\n    left: 0;\n    align-items: flex-start;\n    justify-content: flex-end;\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 50vw;\n  }\n}\n\n/* Wide breakpoint */\n@media only screen and (min-width: 1366px) {\n  :host {\n    margin: calc(var(--space-unit) * 4);\n  }\n\n  ::slotted(z-toast-notification) {\n    width: 33vw;\n  }\n}\n","import {Component, Element, Prop, Watch, h} from \"@stencil/core\";\nimport {ToastNotificationPosition} from \"../../beans\";\n\n@Component({\n  tag: \"z-toast-notification-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToastNotificationList {\n  @Element() hostElement: HTMLZToastNotificationListElement;\n\n  /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */\n  @Prop({reflect: true})\n  position: ToastNotificationPosition = ToastNotificationPosition.TOP_RIGHT;\n\n  /**Set the entry position of new notification in the list */\n  @Prop()\n  newestontop?: boolean = true;\n\n  private notificationArray: Element[] = [];\n\n  @Watch(\"newestontop\")\n  watchPropNewestontop(newValue: boolean): void {\n    this.hostElement.append(...this.notificationArray.reverse());\n    if (newValue) {\n      this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler);\n    } else {\n      this.hostElement.shadowRoot.removeEventListener(\"slotchange\", this.slotChangeHandler);\n    }\n  }\n\n  componentWillLoad(): void {\n    if (this.newestontop) {\n      this.handleNewestOnTop();\n    }\n  }\n\n  private handleNewestOnTop(): void {\n    this.notificationArray = Array.from(this.hostElement.children);\n    this.hostElement.append(...this.notificationArray.reverse());\n    this.hostElement.shadowRoot.addEventListener(\"slotchange\", this.slotChangeHandler.bind(this));\n  }\n\n  private slotChangeHandler(): void {\n    const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));\n    if (difference) {\n      difference.forEach((elem) => {\n        this.notificationArray.push(elem);\n        const newElem = elem;\n        elem.remove();\n        this.hostElement.prepend(newElem);\n      });\n    }\n  }\n\n  render(): HTMLSlotElement {\n    return <slot name=\"toasts\"></slot>;\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,m+CAClB,MAAAC,EAAeD,E,MCOFE,EAAsB,M,yBAWzBC,KAAAC,kBAA+B,G,cANDC,EAA0BC,U,iBAIxC,I,CAKxB,oBAAAC,CAAqBC,GACnBL,KAAKM,YAAYC,UAAUP,KAAKC,kBAAkBO,WAClD,GAAIH,EAAU,CACZL,KAAKM,YAAYG,WAAWC,iBAAiB,aAAcV,KAAKW,kB,KAC3D,CACLX,KAAKM,YAAYG,WAAWG,oBAAoB,aAAcZ,KAAKW,kB,EAIvE,iBAAAE,GACE,GAAIb,KAAKc,YAAa,CACpBd,KAAKe,mB,EAID,iBAAAA,GACNf,KAAKC,kBAAoBe,MAAMC,KAAKjB,KAAKM,YAAYY,UACrDlB,KAAKM,YAAYC,UAAUP,KAAKC,kBAAkBO,WAClDR,KAAKM,YAAYG,WAAWC,iBAAiB,aAAcV,KAAKW,kBAAkBQ,KAAKnB,M,CAGjF,iBAAAW,GACN,MAAMS,EAAaJ,MAAMC,KAAKjB,KAAKM,YAAYY,UAAUG,QAAQC,IAAUtB,KAAKC,kBAAkBsB,SAASD,KAC3G,GAAIF,EAAY,CACdA,EAAWI,SAASF,IAClBtB,KAAKC,kBAAkBwB,KAAKH,GAC5B,MAAMI,EAAUJ,EAChBA,EAAKK,SACL3B,KAAKM,YAAYsB,QAAQF,EAAQ,G,EAKvC,MAAAG,GACE,OAAOC,EAAA,QAAAC,IAAA,2CAAMC,KAAK,U","ignoreList":[]}

package/www/build/p-93d349ee.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as s,a as i,g as o}from"./p-75c4a726.js";import{g as a}from"./p-86618221.js";const n=':host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-primary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items[hidden]{display:none}::slotted([slot="section"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot="section"]:last-of-type){border:none}::slotted([slot="section"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}::slotted([slot="section"]:hover),::slotted([slot="section"]:focus:focus-visible),::slotted([slot="section"]:active),::slotted([slot="section"][active]),::slotted([slot="section"][data-active]){color:var(--color-primary01);font-weight:var(--font-bd)}';const h=n;const l=class{get focusableItem(){return this.items.find((({tabIndex:t})=>t===0))}toggle(){if(!this.hasItems){return}this.open=!this.open}setItemsA11yAttrs(){if(!this.hasItems){return}this.items.forEach((t=>{t.setAttribute("role","menuitem");t.tabIndex=-1}))}onItemsChange(){this.items=Array.from(this.host.querySelectorAll('[slot="section"]'));this.hasItems=this.items.length>0;this.setItemsA11yAttrs()}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null||e===void 0?void 0:e.textContent}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===a.ENTER||t.key===a.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.focustFirstItem()}}}moveFocus(t,e){t.tabIndex=0;setTimeout((()=>{t.focus()}),100);if(e){e.tabIndex=-1}}focustFirstItem(){this.moveFocus(this.items[0])}async focusLastItem(){this.moveFocus(this.items[this.items.length-1])}async setFocus(){this.htmlTabindex=0;setTimeout((()=>{this.label.focus()}),100)}onOpenChange(){if(!this.open){this.setItemsA11yAttrs();this.closed.emit()}else{this.opened.emit()}}onTabindexChange(){if(!this.label){return}this.label.tabIndex=this.htmlTabindex}onItemsKeydown(t){switch(t.key){case a.ESC:case a.ARROW_LEFT:if(!this.open){break}t.preventDefault();t.stopPropagation();this.moveFocus(this.label,this.focusableItem);this.open=false;break;case a.ARROW_RIGHT:if(this.open){break}t.preventDefault();t.stopPropagation();this.open=true;this.focustFirstItem();break;case a.ARROW_DOWN:{if(!this.open){break}if(document.activeElement===this.host){t.preventDefault();t.stopPropagation();this.focustFirstItem();break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e+1];if(s){t.preventDefault();t.stopPropagation();this.moveFocus(s,this.focusableItem)}else{this.htmlTabindex=0;this.focusableItem.tabIndex=-1}break}case a.ARROW_UP:{if(!this.open||document.activeElement===this.host){break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e-1];t.preventDefault();t.stopPropagation();if(s){this.moveFocus(s,this.focusableItem)}else{this.focusableItem.tabIndex=-1;this.setFocus()}break}}}constructor(s){t(this,s);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.htmlTabindex=-1;this.open=undefined;this.hasItems=undefined;this.items=undefined;this.toggle=this.toggle.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this);this.onItemsKeydown=this.onItemsKeydown.bind(this)}connectedCallback(){this.onItemsChange()}render(){return s(i,{key:"4dce34f277ab3c8c41171a15a02fd174c45742cd",open:this.open},s("button",{key:"b6c535e87dbb5af8808d7a19556ad116cbcca72b",ref:t=>this.label=t,class:"label","aria-haspopup":`${!!this.hasItems}`,"aria-expanded":`${!!this.open}`,role:"menuitem",tabindex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},s("slot",{key:"fbbba483ca5fe6d45440c01a89f061565ce641aa",onSlotchange:this.onLabelSlotChange}),this.hasItems&&s("z-icon",{key:"b4c67b7cada94580b4f5853aaa8cbb9818bece74",name:this.open?"chevron-up":"chevron-down"})),s("div",{key:"711c085b5d74affb2c23ebd1acdd774b5903e7e5",class:"items",role:"menu",hidden:!this.open},s("slot",{key:"a2fe12f235f6b23a96f2bd3a8a18f3a095fcff2d",name:"section",onSlotchange:this.onItemsChange})))}get host(){return o(this)}static get watchers(){return{open:["onOpenChange"],htmlTabindex:["onTabindexChange"]}}};l.style=h;export{l as z_menu_section};
+//# sourceMappingURL=p-93d349ee.entry.js.map

package/www/build/p-93d349ee.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMenuSectionStyle0","ZMenuSection","focusableItem","this","items","find","tabIndex","toggle","hasItems","open","setItemsA11yAttrs","forEach","item","setAttribute","onItemsChange","Array","from","host","querySelectorAll","length","onLabelSlotChange","ev","labelElement","target","assignedElements","dataset","text","textContent","onLabelClick","setFocus","onLabelKeydown","key","KeyboardCode","ENTER","SPACE","preventDefault","stopPropagation","focustFirstItem","moveFocus","receiver","current","setTimeout","focus","focusLastItem","htmlTabindex","label","onOpenChange","closed","emit","opened","onTabindexChange","onItemsKeydown","ESC","ARROW_LEFT","ARROW_RIGHT","ARROW_DOWN","document","activeElement","currentIndex","indexOf","ARROW_UP","constructor","hostRef","bind","connectedCallback","render","h","Host","ref","el","class","role","tabindex","onClick","onKeyDown","onSlotchange","name","hidden"],"sources":["src/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/z-menu-section/index.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: var(--space-unit) 0;\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n:host(:last-child:not([open])) .label {\n  border-bottom: none;\n}\n\n:host(:is([active], [open])) .label,\n.label:focus:focus-visible,\n.label:hover {\n  border-color: var(--color-primary01);\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.5;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items[hidden] {\n  display: none;\n}\n\n::slotted([slot=\"section\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-1);\n  line-height: 1.333;\n  outline: none;\n}\n\n::slotted([slot=\"section\"]:last-of-type) {\n  border: none;\n}\n\n::slotted([slot=\"section\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n}\n\n::slotted([slot=\"section\"]:hover),\n::slotted([slot=\"section\"]:focus:focus-visible),\n::slotted([slot=\"section\"]:active),\n::slotted([slot=\"section\"][active]),\n::slotted([slot=\"section\"][data-active]) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `data-active` attribute to a slotted element to highlight it (`active` also works but `data-active` is preferable).\n */\n@Component({\n  tag: \"z-menu-section\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSection {\n  @Element() host: HTMLZMenuSectionElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Tabindex value to set on the label button.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\n   */\n  @Prop()\n  htmlTabindex = -1;\n\n  /** The opening state of the section. */\n  @Prop({mutable: true})\n  open: boolean;\n\n  @State()\n  hasItems: boolean;\n\n  @State()\n  items: HTMLElement[];\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private label: HTMLButtonElement;\n\n  private get focusableItem(): HTMLElement {\n    return this.items.find(({tabIndex}) => tabIndex === 0);\n  }\n\n  private toggle(): void {\n    if (!this.hasItems) {\n      return;\n    }\n\n    this.open = !this.open;\n  }\n\n  private setItemsA11yAttrs(): void {\n    if (!this.hasItems) {\n      return;\n    }\n\n    this.items.forEach((item) => {\n      item.setAttribute(\"role\", \"menuitem\");\n      item.tabIndex = -1;\n    });\n  }\n\n  private onItemsChange(): void {\n    this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n    this.hasItems = this.items.length > 0;\n    this.setItemsA11yAttrs();\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.focustFirstItem();\n      }\n    }\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   */\n  private moveFocus(receiver: HTMLElement, current?: HTMLElement): void {\n    receiver.tabIndex = 0;\n    setTimeout(() => {\n      receiver.focus();\n    }, 100);\n    if (current) {\n      current.tabIndex = -1;\n    }\n  }\n\n  private focustFirstItem(): void {\n    this.moveFocus(this.items[0]);\n  }\n\n  /** Focus the last item. */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    this.moveFocus(this.items[this.items.length - 1]);\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    setTimeout(() => {\n      this.label.focus();\n    }, 100);\n  }\n\n  @Watch(\"open\")\n  onOpenChange(): void {\n    if (!this.open) {\n      this.setItemsA11yAttrs();\n      this.closed.emit();\n    } else {\n      this.opened.emit();\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  onTabindexChange(): void {\n    if (!this.label) {\n      return;\n    }\n\n    this.label.tabIndex = this.htmlTabindex;\n  }\n\n  @Listen(\"keydown\")\n  private onItemsKeydown(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open) {\n          break;\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.moveFocus(this.label, this.focusableItem);\n        this.open = false;\n        break;\n      case KeyboardCode.ARROW_RIGHT:\n        if (this.open) {\n          break;\n        }\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = true;\n        this.focustFirstItem();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (!this.open) {\n          break;\n        }\n        if (document.activeElement === this.host) {\n          ev.preventDefault();\n          ev.stopPropagation();\n          this.focustFirstItem();\n          break;\n        }\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        const receiver = this.items[currentIndex + 1];\n        if (receiver) {\n          ev.preventDefault();\n          ev.stopPropagation();\n          this.moveFocus(receiver, this.focusableItem);\n        } else {\n          this.htmlTabindex = 0;\n          this.focusableItem.tabIndex = -1;\n        }\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (!this.open || document.activeElement === this.host) {\n          break;\n        }\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        const receiver = this.items[currentIndex - 1];\n        ev.preventDefault();\n        ev.stopPropagation();\n        if (receiver) {\n          this.moveFocus(receiver, this.focusableItem);\n        } else {\n          // since there isn't a previous item to focus, give the focus to the label element\n          this.focusableItem.tabIndex = -1;\n          this.setFocus();\n        }\n        break;\n      }\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n    this.onItemsKeydown = this.onItemsKeydown.bind(this);\n  }\n\n  connectedCallback(): void {\n    this.onItemsChange();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host open={this.open}>\n        <button\n          ref={(el) => (this.label = el)}\n          class=\"label\"\n          aria-haspopup={`${!!this.hasItems}`}\n          aria-expanded={`${!!this.open}`}\n          role=\"menuitem\"\n          tabindex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          {this.hasItems && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        <div\n          class=\"items\"\n          role=\"menu\"\n          hidden={!this.open}\n        >\n          <slot\n            name=\"section\"\n            onSlotchange={this.onItemsChange}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-943db3a8.entry.js

@@ -0,0 +1,2 @@
+import{r as i,h as L,a as t}from"./p-75c4a726.js";const o=":host{display:inline-block;width:255px;height:64px;vertical-align:top}img{display:block;width:100%;height:100%;margin:auto;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}a{display:block;width:100%;height:100%}:host(.mobile){width:31px;height:40px}:host(.mobile) img{content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}";const e=o;const l=class{constructor(L){i(this,L);this.width=undefined;this.height=undefined;this.imageAlt=undefined;this.link=undefined;this.targetBlank=undefined;this.mobileLogo=undefined}render(){const i={};if(this.width){i["width"]=i["max-width"]=`${this.width}px`}if(this.height){i["height"]=i["max-height"]=`${this.height}px`}return L(t,{key:"75a515faadd75ea3f21ae80ca6a4f579223ad1cd",style:i,class:{mobile:!!this.mobileLogo}},this.link?L("a",{href:this.link,target:this.targetBlank?"_blank":"_self"},L("img",{alt:this.imageAlt})):L("img",{alt:this.imageAlt}))}};l.style=e;export{l as z_logo};
+//# sourceMappingURL=p-943db3a8.entry.js.map

package/www/build/p-943db3a8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZLogoStyle0","ZLogo","render","style","this","width","height","h","Host","key","class","mobile","mobileLogo","link","href","target","targetBlank","alt","imageAlt"],"sources":["src/components/z-logo/styles.css?tag=z-logo&encapsulation=shadow","src/components/z-logo/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 255px;\n  height: 64px;\n  vertical-align: top;\n}\n\nimg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  margin: auto;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n\na {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n:host(.mobile) {\n  width: 31px;\n  height: 40px;\n}\n\n:host(.mobile) img {\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-logo\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZLogo {\n  /** image width */\n  @Prop()\n  width?: number;\n\n  /** image height */\n  @Prop()\n  height?: number;\n\n  /** alternative image text */\n  @Prop()\n  imageAlt?: string;\n\n  /** link url (optional) */\n  @Prop()\n  link?: string;\n\n  /** link target: true means _blank, false means _self */\n  @Prop()\n  targetBlank?: boolean;\n\n  /** if true, the mobile logo is displayed, otherwise the desktop one */\n  @Prop()\n  mobileLogo?: boolean;\n\n  render(): HTMLZLogoElement {\n    const style = {};\n\n    if (this.width) {\n      style[\"width\"] = style[\"max-width\"] = `${this.width}px`;\n    }\n\n    if (this.height) {\n      style[\"height\"] = style[\"max-height\"] = `${this.height}px`;\n    }\n\n    return (\n      <Host\n        style={style}\n        class={{mobile: !!this.mobileLogo}}\n      >\n        {this.link ? (\n          <a\n            href={this.link}\n            target={this.targetBlank ? \"_blank\" : \"_self\"}\n          >\n            <img alt={this.imageAlt} />\n          </a>\n        ) : (\n          <img alt={this.imageAlt} />\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,m1IAClB,MAAAC,EAAeD,E,MCMFE,EAAK,M,qKAyBhB,MAAAC,GACE,MAAMC,EAAQ,GAEd,GAAIC,KAAKC,MAAO,CACdF,EAAM,SAAWA,EAAM,aAAe,GAAGC,KAAKC,S,CAGhD,GAAID,KAAKE,OAAQ,CACfH,EAAM,UAAYA,EAAM,cAAgB,GAAGC,KAAKE,U,CAGlD,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHN,MAAOA,EACPO,MAAO,CAACC,SAAUP,KAAKQ,aAEtBR,KAAKS,KACJN,EAAA,KACEO,KAAMV,KAAKS,KACXE,OAAQX,KAAKY,YAAc,SAAW,SAEtCT,EAAA,OAAKU,IAAKb,KAAKc,YAGjBX,EAAA,OAAKU,IAAKb,KAAKc,W","ignoreList":[]}

package/www/build/p-9814f864.entry.js

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as e,a as s,g as o}from"./p-75c4a726.js";import{U as n,V as r,p as a,g as l,P as h,i as p}from"./p-86618221.js";import{g as c,d}from"./p-061e28d6.js";import"./p-5145a606.js";const f=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}*{box-sizing:border-box}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;align-items:center}ol{display:flex;align-items:center;padding:0;margin:0;column-gap:var(--space-unit);list-style:none}li{display:flex;align-items:center;justify-content:flex-start;column-gap:var(--space-unit)}ol li>a,ol li>button{font-size:var(--font-size-2);letter-spacing:0.16px;line-height:1.4}a:focus,button:focus{box-shadow:var(--shadow-focus-primary);outline:none}a{color:var(--color-text-link-blue);white-space:nowrap}a.missing-path{color:var(--color-default-text)}.text-ellipsis{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:initial}nav.semibold>ol>li>a:not(.missing-path),nav.semibold>ol>li>button{font-weight:var(--font-sb);text-decoration:none}nav.underlined a,nav.underlined button{text-decoration:underline}z-icon{--z-icon-width:16px;--z-icon-height:16px;display:block;fill:var(--color-text-link-blue)}z-icon.separator{--z-icon-width:10px;--z-icon-height:10px;fill:var(--gray500)}button.dots{display:inline-block;color:var(--color-text-link-blue);cursor:pointer}.hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}.hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}.hidden-paths-popover{--z-popover-theme--surface:var(--color-background);--z-popover-padding:0;--background-color-list-element:var(--color-background)}.hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}.full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}.tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover);line-clamp:var(--line-clamp-popover)}}@media (max-width: 767px){li a{display:flex;align-items:center;column-gap:var(--space-unit)}}";const u=f;const m=class{constructor(e){i(this,e);this.clickOnNode=t(this,"clickOnNode",7);this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null;this.pathStyle=n.UNDERLINED;this.homepageVariant=r.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.viewPortWidth=undefined;this.hasOverflow=false;this.popoverEllipsisOpen=false}handleResize(){this.viewPortWidth=c();if(this.viewPortWidth!==a.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb()}handleResizeUp(i,t){if(i===a.MOBILE||t===a.MOBILE&&i===a.TABLET||t===a.MOBILE&&i===a.DESKTOP||t===a.MOBILE&&i===a.DESKTOP_WIDE||t===a.TABLET&&i===a.DESKTOP||t===a.TABLET&&i===a.DESKTOP_WIDE||t===a.DESKTOP&&i===a.DESKTOP_WIDE){this.initializeBreadcrumb()}}componentWillLoad(){this.viewPortWidth=c();this.initializeBreadcrumb()}componentWillRender(){if(this.viewPortWidth!==a.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==a.MOBILE){requestAnimationFrame((()=>{if(this.wrapElement.scrollWidth>this.wrapElement.clientWidth){if(!this.hasOverflow){this.hasOverflow=true}}}))}}initializeBreadcrumb(){if(this.viewPortWidth===a.MOBILE){this.pathsList=this.getPathsItemsList().filter((i=>!!i.path))}else{this.pathsList=this.getPathsItemsList()}this.homepageNode=this.pathsList.shift();this.pathListCopy=[...this.pathsList];this.collapsedElements=[];if(this.pathsList.length>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){for(let i=0;i<this.pathsList.length;i++){if(this.pathsList[i].text.length<=this.truncateChar){continue}if(this.truncatePosition>0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}else if(this.truncatePosition===0){this.collapsedElements.push(...this.pathListCopy.splice(0,this.truncatePosition+1));this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}if(i!==this.pathsList.length-1){const t=this.truncateWithEllipsis(this.pathsList[i].text,this.truncateChar);this.currentEllipsisText=this.pathsList[i].text;this.pathsList[i].text=t;this.pathsList[i].hasTooltip=true;this.truncatePosition=i;return}}}truncateWithEllipsis(i,t){if(i.length<=t){return i}return i.substring(0,t-1)+"&mldr;"}getPathsItemsList(){return Array.from(this.hostElement.children).map((i=>({text:i.textContent,path:i.href,hasTooltip:false})))}renderHomepageNode(){return e("li",null,e("a",{class:{"homepage-text":this.homepageVariant===r.TEXT},href:this.homepageNode.path,onClick:i=>this.handlePreventFollowUrl(i,this.homepageNode),innerHTML:this.homepageVariant===r.ICON?`<z-icon name="home" />`:this.homepageNode.text||"Home"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right"}))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(i,t){if(this.preventFollowUrl){i.preventDefault();this.clickOnNode.emit(t.path)}}handleOverflowMenuAccessibility(i){const t=this.anchorElements.length;if(i.key===l.TAB){i.preventDefault();return}i.stopPropagation();const e=[l.ARROW_DOWN,l.ARROW_UP];if(e.includes(i.key)){i.preventDefault();if(i.key===l.ARROW_DOWN){this.currentIndex=t===this.currentIndex+1?0:this.currentIndex+1}if(i.key===l.ARROW_UP){this.currentIndex=this.currentIndex<=0?t-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(i.key===l.ESC){this.triggerButton.focus()}}renderOverflowMenu(){return e("li",null,e("z-popover",{class:"hidden-paths-popover",ref:i=>this.collapsedElementsRef=i,bindTo:this.triggerButton,position:h.BOTTOM_RIGHT,closable:true,showArrow:true},e("div",{class:"popover-content"},e("z-list",null,e("z-list-group",{size:p.SMALL},this.collapsedElements.map(((i,t,s)=>e("div",null,e("z-list-element",{clickable:true},e("a",{class:"text-ellipsis",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i),onKeyDown:i=>this.handleOverflowMenuAccessibility(i),innerHTML:i.text})),t<s.length-1&&e("z-divider",{color:"color-surface03"})))))))),e("button",{class:"dots",ref:i=>this.triggerButton=i,"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",onClick:()=>{this.togglePopover()},onKeyDown:i=>{d(i,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)},innerHTML:"&mldr;"}),this.pathsList.length>0&&e("z-icon",{class:"separator",name:"chevron-right"}))}renderMobileItems(){const i=this.pathsList[this.pathsList.length-1];if(!i){return}return e("li",null,e("a",{"aria-current":i.path?undefined:"page",href:i.path,onClick:t=>this.handlePreventFollowUrl(t,i)},e("z-icon",{name:"chevron-left"}),e("span",{class:{"missing-path":!i.path,"text-ellipsis":true}},i.text)))}renderItems(){let i;return[this.renderHomepageNode(),this.collapsedElements.length>0&&this.renderOverflowMenu(),...this.pathsList.map(((t,s)=>e("li",null,t.hasTooltip&&e("z-popover",{class:"full-path-tooltip",bindTo:i,open:this.popoverEllipsisOpen,position:h.BOTTOM_RIGHT,closable:false,showArrow:true},e("span",{class:"tooltip-content"},this.currentEllipsisText)),e("a",{class:{"missing-path":!t.path},ref:t=>i=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:t.text}),s!==this.pathsList.length-1&&e("z-icon",{class:"separator",name:"chevron-right"}))))]}render(){return e(s,{key:"d1237ebe6e8f96e4b43f4197a85c0084050f076d",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},e("nav",{key:"03fb62eefc39de3f78890d857ae23fb4f4a3307f",ref:i=>this.wrapElement=i,"aria-label":"Breadcrumb",class:{semibold:this.pathStyle===n.SEMIBOLD,underlined:this.pathStyle===n.UNDERLINED}},e("ol",{key:"bccdd02377c6bb41f54baf717c987fcef541d95a"},this.viewPortWidth===a.MOBILE?this.renderMobileItems():this.renderItems())))}get hostElement(){return o(this)}static get watchers(){return{maxNodesToShow:["handlePropChange"],viewPortWidth:["handleResizeUp"]}}};m.style=u;export{m as z_breadcrumb};
+//# sourceMappingURL=p-9814f864.entry.js.map

package/www/build/p-9814f864.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZBreadcrumbStyle0","ZBreadcrumb","this","collapsedElements","currentIndex","truncatePosition","BreadcrumbPathStyle","UNDERLINED","BreadcrumbHomepageVariant","ICON","handleResize","viewPortWidth","getDevice","Device","MOBILE","wrapElement","scrollWidth","clientWidth","hasOverflow","handlePropChange","initializeBreadcrumb","handleResizeUp","newValue","oldValue","TABLET","DESKTOP","DESKTOP_WIDE","componentWillLoad","componentWillRender","checkEllipsisOrOverflowMenu","componentDidRender","collapsedElementsRef","anchorElements","Array","from","hostElement","shadowRoot","querySelectorAll","requestAnimationFrame","pathsList","getPathsItemsList","filter","item","path","homepageNode","shift","pathListCopy","length","maxNodesToShow","splice","i","text","truncateChar","push","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","maxLength","substring","children","map","textContent","href","renderHomepageNode","h","class","homepageVariant","TEXT","onClick","e","handlePreventFollowUrl","innerHTML","name","togglePopover","open","preventFollowUrl","preventDefault","clickOnNode","emit","handleOverflowMenuAccessibility","anchorElementsLenght","key","KeyboardCode","TAB","stopPropagation","arrows","ARROW_DOWN","ARROW_UP","includes","focus","ESC","triggerButton","renderOverflowMenu","ref","val","bindTo","position","PopoverPosition","BOTTOM_RIGHT","closable","showArrow","size","ListSize","SMALL","index","array","clickable","onKeyDown","color","el","handleKeyboardSubmit","bind","setTimeout","renderMobileItems","secondToLastPath","undefined","renderItems","trigger","popoverEllipsisOpen","onMouseOver","onMouseLeave","render","Host","style","overflowMenuItemRows","semibold","pathStyle","SEMIBOLD","underlined"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --line-clamp-popover: 0;\n  --line-clamp-mobile: 1;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: transparent;\n}\n\nnav {\n  display: flex;\n  align-items: center;\n}\n\nol {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin: 0;\n  column-gap: var(--space-unit);\n  list-style: none;\n}\n\nli {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  column-gap: var(--space-unit);\n}\n\nol li > a,\nol li > button {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\na:focus,\nbutton:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na {\n  color: var(--color-text-link-blue);\n  white-space: nowrap;\n}\n\na.missing-path {\n  color: var(--color-default-text);\n}\n\n.text-ellipsis {\n  display: -webkit-box;\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--line-clamp-mobile);\n  line-clamp: var(--line-clamp-mobile);\n  text-overflow: ellipsis;\n  white-space: initial;\n}\n\nnav.semibold > ol > li > a:not(.missing-path),\nnav.semibold > ol > li > button {\n  font-weight: var(--font-sb);\n  text-decoration: none;\n}\n\nnav.underlined a,\nnav.underlined button {\n  text-decoration: underline;\n}\n\nz-icon {\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n\n  display: block;\n  fill: var(--color-text-link-blue);\n}\n\nz-icon.separator {\n  --z-icon-width: 10px;\n  --z-icon-height: 10px;\n\n  fill: var(--gray500);\n}\n\nbutton.dots {\n  display: inline-block;\n  color: var(--color-text-link-blue);\n  cursor: pointer;\n}\n\n.hidden-paths-popover .popover-content {\n  max-width: 302px;\n  padding: calc(var(--space-unit) / 2) var(--space-unit);\n  text-align: left;\n}\n\n.hidden-paths-popover .popover-content a {\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\n.hidden-paths-popover {\n  --z-popover-theme--surface: var(--color-background);\n  --z-popover-padding: 0;\n  --background-color-list-element: var(--color-background);\n}\n\n.hidden-paths-popover::before,\n.full-path-tooltip::before {\n  --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n.full-path-tooltip {\n  --z-popover-theme--surface: var(--color-surface05);\n  --z-popover-theme--text: var(--color-text-inverse);\n  --z-popover-padding: 0;\n}\n\n.tooltip-content {\n  padding: 0 var(--space-unit);\n  font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n  .text-ellipsis {\n    -webkit-line-clamp: var(--line-clamp-popover);\n    line-clamp: var(--line-clamp-popover);\n  }\n}\n\n@media (max-width: 767px) {\n  li a {\n    display: flex;\n    align-items: center;\n    column-gap: var(--space-unit);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {\n  BreadcrumbHomepageVariant,\n  BreadcrumbPath,\n  BreadcrumbPathStyle,\n  Device,\n  KeyboardCode,\n  ListSize,\n  PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n  tag: \"z-breadcrumb\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZBreadcrumb {\n  /* Accessibility references */\n  /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n  /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n  /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n  @Element() hostElement: HTMLZBreadcrumbElement;\n\n  /** [optional] Sets the path style */\n  @Prop({reflect: true})\n  pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n  /** [optional] Variant of first node */\n  @Prop()\n  homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n  /** [optional] Sets max number of element to show */\n  @Prop()\n  maxNodesToShow? = 5;\n\n  /** [optional] Controls the behaviour on <a> tag click/enter */\n  @Prop()\n  preventFollowUrl? = false;\n\n  /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n  @Prop()\n  overflowMenuItemRows? = 0;\n\n  /** [optional] Sets the maximun number of chars per single node */\n  @Prop()\n  truncateChar? = 30;\n\n  /** Handle mobile */\n  @State()\n  viewPortWidth: Device;\n\n  /** Detect whether the length of the nodes shown exceeds the container length */\n  @State()\n  hasOverflow = false;\n\n  @State()\n  popoverEllipsisOpen = false;\n\n  /** Emitted when preventFollowUrl=true to handle custom page transition */\n  @Event()\n  clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n  private pathsList: BreadcrumbPath[];\n\n  private pathListCopy: BreadcrumbPath[];\n\n  private collapsedElements: BreadcrumbPath[] = [];\n\n  private collapsedElementsRef: HTMLZPopoverElement;\n\n  private triggerButton: HTMLButtonElement;\n\n  private wrapElement: HTMLElement;\n\n  private currentIndex = 0;\n\n  private homepageNode: BreadcrumbPath;\n\n  private anchorElements;\n\n  private currentEllipsisText: string;\n\n  private truncatePosition = null;\n\n  @Listen(\"resize\", {target: \"window\"})\n  handleResize(): void {\n    this.viewPortWidth = getDevice();\n    if (\n      this.viewPortWidth !== Device.MOBILE &&\n      this.wrapElement &&\n      this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n    ) {\n      this.hasOverflow = true;\n    }\n  }\n  // eslint-disable-next-line lines-between-class-members\n  @Watch(\"maxNodesToShow\")\n  handlePropChange(): void {\n    this.initializeBreadcrumb();\n  }\n\n  @Watch(\"viewPortWidth\")\n  handleResizeUp(newValue: Device, oldValue: Device): void {\n    if (\n      newValue === Device.MOBILE ||\n      (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n      (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n      (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n      (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n    ) {\n      this.initializeBreadcrumb();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.viewPortWidth = getDevice();\n    this.initializeBreadcrumb();\n  }\n\n  componentWillRender(): void {\n    if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n      this.checkEllipsisOrOverflowMenu();\n      this.hasOverflow = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.collapsedElementsRef) {\n      this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n    }\n\n    if (this.viewPortWidth !== Device.MOBILE) {\n      requestAnimationFrame(() => {\n        if (this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n          if (!this.hasOverflow) {\n            this.hasOverflow = true;\n          }\n        }\n      });\n    }\n  }\n\n  private initializeBreadcrumb(): void {\n    if (this.viewPortWidth === Device.MOBILE) {\n      this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n    } else {\n      this.pathsList = this.getPathsItemsList();\n    }\n    this.homepageNode = this.pathsList.shift();\n    this.pathListCopy = [...this.pathsList];\n    this.collapsedElements = [];\n    if (this.pathsList.length > this.maxNodesToShow) {\n      this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n    }\n  }\n\n  private checkEllipsisOrOverflowMenu(): void {\n    for (let i = 0; i < this.pathsList.length; i++) {\n      if (this.pathsList[i].text.length <= this.truncateChar) {\n        continue;\n      }\n\n      if (this.truncatePosition > 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition));\n        this.pathsList.splice(0, this.truncatePosition);\n        this.truncatePosition = 0;\n\n        return;\n      } else if (this.truncatePosition === 0) {\n        this.collapsedElements.push(...this.pathListCopy.splice(0, this.truncatePosition + 1));\n        this.pathsList.splice(0, this.truncatePosition + 1);\n        this.truncatePosition = null;\n\n        return;\n      }\n\n      if (i !== this.pathsList.length - 1) {\n        const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n        this.currentEllipsisText = this.pathsList[i].text;\n        this.pathsList[i].text = truncatedString;\n        this.pathsList[i].hasTooltip = true;\n        this.truncatePosition = i;\n\n        return;\n      }\n    }\n  }\n\n  private truncateWithEllipsis(str: string, maxLength: number): string {\n    if (str.length <= maxLength) {\n      return str;\n    }\n\n    return str.substring(0, maxLength - 1) + \"&mldr;\";\n  }\n\n  private getPathsItemsList(): BreadcrumbPath[] {\n    return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n      return {\n        text: item.textContent,\n        path: item.href,\n        hasTooltip: false,\n      };\n    });\n  }\n\n  private renderHomepageNode(): HTMLLIElement {\n    return (\n      <li>\n        <a\n          class={{\n            \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n          }}\n          href={this.homepageNode.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, this.homepageNode)}\n          innerHTML={\n            this.homepageVariant === BreadcrumbHomepageVariant.ICON\n              ? `<z-icon name=\"home\" />`\n              : this.homepageNode.text || \"Home\"\n          }\n        />\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private togglePopover(): void {\n    if (!this.collapsedElementsRef.open) {\n      this.collapsedElementsRef.open = true;\n    }\n  }\n\n  private handlePreventFollowUrl(e: MouseEvent, item): void {\n    if (this.preventFollowUrl) {\n      e.preventDefault();\n      this.clickOnNode.emit(item.path);\n    }\n  }\n\n  private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n    const anchorElementsLenght = this.anchorElements.length;\n    if (e.key === KeyboardCode.TAB) {\n      e.preventDefault();\n\n      return;\n    }\n    e.stopPropagation();\n    const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n    if (arrows.includes(e.key as KeyboardCode)) {\n      e.preventDefault();\n\n      if (e.key === KeyboardCode.ARROW_DOWN) {\n        this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n      }\n      if (e.key === KeyboardCode.ARROW_UP) {\n        this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n      }\n\n      this.anchorElements[this.currentIndex].focus();\n    }\n\n    if (e.key === KeyboardCode.ESC) {\n      this.triggerButton.focus();\n    }\n  }\n\n  private renderOverflowMenu(): HTMLLIElement {\n    return (\n      <li>\n        <z-popover\n          class=\"hidden-paths-popover\"\n          ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n          bindTo={this.triggerButton}\n          position={PopoverPosition.BOTTOM_RIGHT}\n          closable\n          showArrow\n        >\n          <div class=\"popover-content\">\n            <z-list>\n              <z-list-group size={ListSize.SMALL}>\n                {this.collapsedElements.map((item, index, array) => {\n                  return (\n                    <div>\n                      <z-list-element clickable>\n                        <a\n                          class=\"text-ellipsis\"\n                          href={item.path}\n                          onClick={(e) => this.handlePreventFollowUrl(e, item)}\n                          onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n                          innerHTML={item.text}\n                        />\n                      </z-list-element>\n                      {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n                    </div>\n                  );\n                })}\n              </z-list-group>\n            </z-list>\n          </div>\n        </z-popover>\n        <button\n          class=\"dots\"\n          ref={(el) => (this.triggerButton = el)}\n          aria-label=\"Mostra più breadcrumb\"\n          aria-haspopup=\"true\"\n          onClick={() => {\n            this.togglePopover();\n          }}\n          onKeyDown={(e) => {\n            handleKeyboardSubmit(e, this.togglePopover.bind(this));\n            setTimeout(() => {\n              this.anchorElements[0].focus();\n            }, 100);\n          }}\n          innerHTML=\"&mldr;\"\n        ></button>\n        {this.pathsList.length > 0 && (\n          <z-icon\n            class=\"separator\"\n            name=\"chevron-right\"\n          />\n        )}\n      </li>\n    );\n  }\n\n  private renderMobileItems(): HTMLLIElement {\n    // show only the second to last element\n    const secondToLastPath = this.pathsList[this.pathsList.length - 1];\n\n    if (!secondToLastPath) {\n      return;\n    }\n\n    return (\n      <li>\n        <a\n          aria-current={secondToLastPath.path ? undefined : \"page\"}\n          href={secondToLastPath.path}\n          onClick={(e) => this.handlePreventFollowUrl(e, secondToLastPath)}\n        >\n          <z-icon name=\"chevron-left\" />\n          <span\n            class={{\n              \"missing-path\": !secondToLastPath.path,\n              \"text-ellipsis\": true,\n            }}\n          >\n            {secondToLastPath.text}\n          </span>\n        </a>\n      </li>\n    );\n  }\n\n  private renderItems(): HTMLElement[] {\n    let trigger;\n\n    return [\n      this.renderHomepageNode(),\n      this.collapsedElements.length > 0 && this.renderOverflowMenu(),\n      ...this.pathsList.map((item, index) => (\n        <li>\n          {item.hasTooltip && (\n            <z-popover\n              class=\"full-path-tooltip\"\n              bindTo={trigger}\n              open={this.popoverEllipsisOpen}\n              position={PopoverPosition.BOTTOM_RIGHT}\n              closable={false}\n              showArrow\n            >\n              <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n            </z-popover>\n          )}\n          <a\n            class={{\"missing-path\": !item.path}}\n            ref={(val) => (trigger = val)}\n            aria-current={item.path ? undefined : \"page\"}\n            href={item.path}\n            onClick={(e) => this.handlePreventFollowUrl(e, item)}\n            onMouseOver={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = true;\n              }\n            }}\n            onMouseLeave={() => {\n              if (item.hasTooltip) {\n                this.popoverEllipsisOpen = false;\n              }\n            }}\n            innerHTML={item.text}\n          />\n          {index !== this.pathsList.length - 1 && (\n            <z-icon\n              class=\"separator\"\n              name=\"chevron-right\"\n            />\n          )}\n        </li>\n      )),\n    ];\n  }\n\n  render(): HTMLZBreadcrumbElement {\n    return (\n      <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n        <nav\n          ref={(val) => (this.wrapElement = val)}\n          aria-label=\"Breadcrumb\"\n          class={{\n            semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n            underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n          }}\n        >\n          <ol>{this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()}</ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-988a58dd.entry.js

@@ -0,0 +1,2 @@
+export{Z as z_tbody}from"./p-623fdee4.js";import"./p-75c4a726.js";
+//# sourceMappingURL=p-988a58dd.entry.js.map

package/www/build/p-988a58dd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/www/build/p-9ae0c0c6.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,a as o,g as s}from"./p-75c4a726.js";const a=':host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:is([active],[open])) .label,.label:hover{border-color:var(--color-primary01)}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}.label{display:flex;width:100%;align-items:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items>::slotted([slot="item"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"][active]){color:var(--color-primary01);font-weight:var(--font-bd)}';const l=a;const n=class{constructor(i){t(this,i);this.opened=e(this,"opened",7);this.closed=e(this,"closed",7);this.active=undefined;this.open=undefined;this.hasContent=undefined}toggle(){if(!this.hasContent){return}this.open=!this.open;this.open?this.opened.emit():this.closed.emit()}handleClick(t){if(!this.open||this.hostElement.contains(t.target)){return}this.open=false;this.closed.emit()}checkContent(){this.hasContent=this.hostElement.querySelectorAll('[slot="item"]').length>0}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=(e===null||e===void 0?void 0:e.innerText)||null}componentWillLoad(){this.checkContent()}render(){return i(o,{key:"6cc06eccce2d2c9611936c2b804f3c7744774aad",role:"menu",open:this.open},i("button",{key:"2cc287717a677392b5084f61b6eca0fd88dc13c0",class:"label","aria-pressed":this.open?"true":"false",onClick:this.toggle.bind(this)},i("slot",{key:"2b3d76700bea806f8b0db6a9d3fd915885b275c2",onSlotchange:this.onLabelSlotChange.bind(this)}),this.hasContent&&i("z-icon",{key:"16162d96f5d3d3fb475db88525ce9e23e34a08c6",name:this.open?"chevron-up":"chevron-down"})),this.open&&i("div",{key:"801f6e8e3f54fc7a64e3b6388f4c4d7297a3e757",class:"items"},i("slot",{key:"875889ac362c006c632db4eb04f32e228f7cb13c",name:"item",onSlotchange:this.checkContent.bind(this)})))}get hostElement(){return s(this)}};n.style=l;export{n as z_menu_section_deprecated};
+//# sourceMappingURL=p-9ae0c0c6.entry.js.map

package/www/build/p-9ae0c0c6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMenuSectionDeprecatedStyle0","ZMenuSectionDeprecated","toggle","this","hasContent","open","opened","emit","closed","handleClick","ev","hostElement","contains","target","checkContent","querySelectorAll","length","onLabelSlotChange","labelElement","assignedElements","dataset","text","innerText","componentWillLoad","render","h","Host","key","role","class","onClick","bind","onSlotchange","name"],"sources":["src/components/deprecated/z-menu-section-deprecated/styles.css?tag=z-menu-section-deprecated&encapsulation=shadow","src/components/deprecated/z-menu-section-deprecated/index.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0;\n  font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host(:is([active], [open])) .label,\n.label:hover {\n  border-color: var(--color-primary01);\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n  font-weight: var(--font-bd);\n}\n\n.label {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2);\n  border: 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface05);\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  cursor: pointer;\n  text-align: left;\n}\n\n::slotted([data-text]) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n  overflow: hidden;\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text])::after {\n    display: none;\n  }\n}\n\n.label ::slotted(*) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.25;\n}\n\n.label:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.label z-icon {\n  margin-left: calc(var(--space-unit) * 4);\n  fill: var(--color-default-icon);\n}\n\n.items {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  padding: calc(var(--space-unit) / 2);\n  padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  display: inline-flex;\n  padding: calc(var(--space-unit) / 2);\n  margin: 0;\n  font-size: var(--font-size-2);\n  line-height: 1.4;\n  outline: none;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n  color: var(--color-primary01);\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"][active]) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, h} from \"@stencil/core\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot item - Single entry of the section. Set the same slot name to different items to put many of them. Add the `active` attribute to a slotted item to highlight it.\n */\n@Component({\n  tag: \"z-menu-section-deprecated\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenuSectionDeprecated {\n  @Element() hostElement: HTMLZMenuSectionDeprecatedElement;\n\n  /** Active state */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  @State()\n  open: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The section has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The section has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    this.open ? this.opened.emit() : this.closed.emit();\n  }\n\n  /** Close the list when a click is performed outside of this Element. */\n  @Listen(\"click\", {target: \"document\"})\n  handleClick(ev: MouseEvent): void {\n    if (!this.open || this.hostElement.contains(ev.target as Node)) {\n      return;\n    }\n\n    this.open = false;\n    this.closed.emit();\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasContent = this.hostElement.querySelectorAll('[slot=\"item\"]').length > 0;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.innerText || null;\n  }\n\n  componentWillLoad(): void {\n    this.checkContent();\n  }\n\n  render(): HTMLZMenuSectionElement {\n    return (\n      <Host\n        role=\"menu\"\n        open={this.open}\n      >\n        <button\n          class=\"label\"\n          aria-pressed={this.open ? \"true\" : \"false\"}\n          onClick={this.toggle.bind(this)}\n        >\n          <slot onSlotchange={this.onLabelSlotChange.bind(this)}></slot>\n          {this.hasContent && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n        </button>\n        {this.open && (\n          <div class=\"items\">\n            <slot\n              name=\"item\"\n              onSlotchange={this.checkContent.bind(this)}\n            ></slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,67DAClB,MAAAC,EAAeD,E,MCWFE,EAAsB,M,2JAqBzB,MAAAC,GACN,IAAKC,KAAKC,WAAY,CACpB,M,CAGFD,KAAKE,MAAQF,KAAKE,KAClBF,KAAKE,KAAOF,KAAKG,OAAOC,OAASJ,KAAKK,OAAOD,M,CAK/C,WAAAE,CAAYC,GACV,IAAKP,KAAKE,MAAQF,KAAKQ,YAAYC,SAASF,EAAGG,QAAiB,CAC9D,M,CAGFV,KAAKE,KAAO,MACZF,KAAKK,OAAOD,M,CAMN,YAAAO,GACNX,KAAKC,WAAaD,KAAKQ,YAAYI,iBAAiB,iBAAiBC,OAAS,C,CAOxE,iBAAAC,CAAkBP,GACxB,MAAMQ,EAAgBR,EAAGG,OAA2BM,mBAAmB,GACvED,EAAaE,QAAQC,MAAOH,IAAY,MAAZA,SAAY,SAAZA,EAAcI,YAAa,I,CAGzD,iBAAAC,GACEpB,KAAKW,c,CAGP,MAAAU,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OACLvB,KAAMF,KAAKE,MAEXoB,EAAA,UAAAE,IAAA,2CACEE,MAAM,QAAO,eACC1B,KAAKE,KAAO,OAAS,QACnCyB,QAAS3B,KAAKD,OAAO6B,KAAK5B,OAE1BsB,EAAA,QAAAE,IAAA,2CAAMK,aAAc7B,KAAKc,kBAAkBc,KAAK5B,QAC/CA,KAAKC,YAAcqB,EAAA,UAAAE,IAAA,2CAAQM,KAAM9B,KAAKE,KAAO,aAAe,kBAE9DF,KAAKE,MACJoB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,SACTJ,EAAA,QAAAE,IAAA,2CACEM,KAAK,OACLD,aAAc7B,KAAKW,aAAaiB,KAAK5B,S","ignoreList":[]}

package/www/build/p-9c816a3b.js

@@ -0,0 +1,2 @@
+import{r as o,h as s,a as e,g as t}from"./p-75c4a726.js";const r=":host{--z-table--cells-bottom-border-size:var(\n    --border-size-medium\n  );--z-table--cells-background:var(\n    --color-background\n  );display:block;box-sizing:border-box}:host([sticky]){position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px var(--shadow-color-base)}:host(:focus-visible){box-shadow:none;outline:none}";const c=r;const a=class{constructor(s){o(this,s);this.sticky=false;this.isFocusable=false}render(){return s(e,{key:"d975481f3702161c0d76f42c47d6194c39d08f42",role:"rowgroup",tabIndex:this.isFocusable?0:-1},s("slot",{key:"97e675dc4bbefd4aac970d10dc4499c4bc80ac23"}))}get host(){return t(this)}};a.style=c;export{a as Z};
+//# sourceMappingURL=p-9c816a3b.js.map

package/www/build/p-9c816a3b.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZTheadStyle0","ZThead","render","h","Host","key","role","tabIndex","this","isFocusable"],"sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-bottom-border-size: var(\n    --border-size-medium\n  ); /* Needed to handle the border of the expand button cell */\n\n  --z-table--cells-background: var(\n    --color-background\n  ); /* Needed to handle the background-color of the expand button cell */\n\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n\n:host(:focus-visible) {\n  box-shadow: none;\n  outline: none;\n}\n","import {Component, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead {\n  @Element() host: HTMLZTheadElement;\n\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * The element is focusable\n   */\n  @Prop({reflect: true})\n  isFocusable = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={this.isFocusable ? 0 : -1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,yUAClB,MAAAC,EAAeD,E,MCUFE,EAAM,M,qCAOR,M,iBAMK,K,CAEd,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,SAAUC,KAAKC,YAAc,GAAK,GAElCN,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/www/build/p-a2ee659d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,a as l,g as n}from"./p-75c4a726.js";import{g as s}from"./p-86618221.js";const a=':host{font-family:var(--font-family-sans)}z-list-element{position:relative;display:block;padding-top:var(--space-unit)}z-list-element::before,z-list-element::after{position:absolute;z-index:100;top:0.125rem;left:-0.5rem;content:""}z-list z-list-element::before{width:var(--space-unit);height:calc(var(--space-unit) * 2);border-bottom:var(--border-size-small) solid var(--color-disabled01-icon);border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element::after{width:var(--space-unit);height:100%;border-left:var(--border-size-small) solid var(--color-disabled01-icon)}z-list z-list-element:last-child::after,z-list>z-list-element::before,z-list>z-list-element::after,z-list>z-list-group>z-list-element::before,z-list>z-list-group>z-list-element::after{display:none}z-list>div.children-node{padding-left:calc(var(--space-unit) * 2)}z-list-element>.list-element{z-index:100;display:flex;justify-content:space-between;padding:0;color:var(--color-default-text);font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);text-decoration:none}z-list-element>.list-element.link-clickable{color:var(--color-primary01)}z-list-element>.list-element.link-clickable:hover{text-decoration:underline}z-list-element>.list-element .item.ellipsis{overflow:hidden}z-list-element .list-element::after{position:absolute;top:0;right:-0.0625rem;display:block;width:100%;height:calc(var(--space-unit) * 5);content:"";transform:translateX(-100%)}.item-label{overflow:hidden;flex-grow:1;font-size:var(--font-size-2);font-style:normal;font-weight:var(--font-rg);letter-spacing:0.0032rem;line-height:1.25rem;text-overflow:ellipsis;white-space:nowrap}.item-label.bold-item{font-weight:var(--font-sb)}.item.ellipsis{display:flex;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.children-node>z-list-element{padding:0;padding-top:0.125;padding-left:calc(var(--space-unit) * 1.25)}.item-icon{margin-right:var(--space-unit)}.no-icon-label{padding-left:var(--space-unit)}.children-node>z-list-element.no-icon-elm{padding-left:0}z-list-element>.list-element:focus:focus-visible{position:relative;z-index:200;box-shadow:var(--shadow-focus-primary);outline:none}@media (max-width: 767px){z-list-element::before,z-list-element::after{top:0.1875rem}z-list z-list-element::before{height:calc(var(--space-unit) * 2.5)}.children-node>z-list-element{padding-top:var(--space-unit)}}';const r=a;const o=class{constructor(i){e(this,i);this.treeItemClicked=t(this,"treeItemClicked",7);this.parsedItems=[];this.items=[];this.htmlAriaLabelledby=undefined;this.htmlSectionTitle=undefined}watchItems(){this.parsedItems=typeof this.items==="string"?JSON.parse(this.items):this.items}componentWillLoad(){this.watchItems()}handleClick(e){this.treeItemClicked.emit({id:e.id,name:e.name,url:e.url})}getFocusableElements(){return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex="0"]'))}getAncestor(e,t){let i=e;for(let e=0;e<t;e++){i=i===null||i===void 0?void 0:i.parentElement;if(!i){return}}return i}handleArrowNav(e){if(e.code===s.TAB){e.preventDefault();return}const t=this.getFocusableElements();const i=t.indexOf(e.target);if(i===-1){return}if(e.code===s.ARROW_DOWN||e.code===s.ARROW_UP){e.preventDefault();const l=i+(e.code===s.ARROW_DOWN?1:-1);if(l<0||l>=t.length){return}t[l].focus()}if(e.code===s.ARROW_LEFT){e.preventDefault();const l=this.getAncestor(t[i],4);if(!l||!l.children[0]||l.children[0].tagName.toLowerCase()!=="a"&&l.getAttribute("tabindex")===null){return}l.children[0].focus()}if(e.code===s.ARROW_RIGHT){e.preventDefault();const t=e.target.closest("z-list-element");if(!t){return}const i=t.querySelector("z-list");if(!i){return}const l=i.querySelector('a[tabindex="0"]');if(!l){return}l.focus()}}renderTreeList(e,t,l=1){var n,a;this.htmlTag=e.url?"a":"span";const r=i("z-list-element",{id:t,class:!e.icon?"no-icon-elm":"",clickable:Boolean(e.url),hasTreeItems:true,role:"none","aria-hidden":undefined},i(this.htmlTag,{class:{"list-element":true,"z-link":Boolean(e.url),"link-clickable":Boolean(e.url)},tabIndex:e.url?0:-1,onClick:()=>this.handleClick(e),onKeyUp:t=>{if(t.code===s.ENTER||t.code===s.SPACE){this.handleClick(e)}},onKeyDown:e=>this.handleArrowNav(e),role:e.url?"treeitem":undefined,"aria-hidden":e.url?undefined:"true","aria-expanded":((n=e.children)===null||n===void 0?void 0:n.length)>0&&true,"aria-level":l,"aria-label":e.name,href:e.url},i("span",{class:"item ellipsis"},e.icon&&i("z-icon",{width:16,height:16,fill:e.url?"color-primary01":"color-default-icon",class:"item-icon",name:e.icon}),i("span",{class:{"item-label":true,"no-icon-label":!e.icon,"bold-item":e.bold},title:e.name},e.name))),((a=e.children)===null||a===void 0?void 0:a.length)>0&&i("z-list",{role:"group"},i("div",{class:"children-node"},e.children.map(((e,t)=>this.renderTreeList(e,`${t}`,l+1))))));return r}render(){const e=this.parsedItems.some((e=>!!e.url));return i(l,{key:"2dec1105883f67ec44180943079ad9bc3386102a",class:"tree-list",role:e?"navigation":"none","aria-hidden":e?undefined:"true","aria-labelledby":this.htmlAriaLabelledby},i("div",{key:"bbe5bf141b17412719b230c4848a5aa2385a8adc",tabIndex:-1,role:e?"tree":"none","aria-hidden":e?undefined:"true","aria-label":this.htmlSectionTitle},this.parsedItems.map(((e,t)=>this.renderTreeList(e,`${t}`)))))}get host(){return n(this)}static get watchers(){return{items:["watchItems"]}}};o.style=r;export{o as z_tree_list};
+//# sourceMappingURL=p-a2ee659d.entry.js.map

package/www/build/p-a2ee659d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZTreeListStyle0","ZTreeList","this","parsedItems","watchItems","items","JSON","parse","componentWillLoad","handleClick","item","treeItemClicked","emit","id","name","url","getFocusableElements","Array","from","host","shadowRoot","querySelectorAll","getAncestor","element","levels","ancestor","i","parentElement","handleArrowNav","event","code","KeyboardCode","TAB","preventDefault","focusableElements","currentIndex","indexOf","target","ARROW_DOWN","ARROW_UP","nextIndex","length","focus","ARROW_LEFT","children","tagName","toLowerCase","getAttribute","ARROW_RIGHT","parentElm","closest","childrenContainer","querySelector","firstChild","renderTreeList","key","level","htmlTag","treeListContent","h","class","icon","clickable","Boolean","hasTreeItems","role","undefined","tabIndex","onClick","onKeyUp","ENTER","SPACE","onKeyDown","_a","href","width","height","fill","bold","title","_b","map","child","render","hasClickableItems","some","Host","htmlAriaLabelledby","htmlSectionTitle"],"sources":["src/components/list/z-tree-list/styles.css?tag=z-tree-list&encapsulation=shadow","src/components/list/z-tree-list/index.tsx"],"sourcesContent":[":host {\n  font-family: var(--font-family-sans);\n}\n\nz-list-element {\n  position: relative;\n  display: block;\n  padding-top: var(--space-unit);\n}\n\nz-list-element::before,\nz-list-element::after {\n  position: absolute;\n  z-index: 100;\n  top: 0.125rem;\n  left: -0.5rem;\n  content: \"\";\n}\n\nz-list z-list-element::before {\n  width: var(--space-unit);\n  height: calc(var(--space-unit) * 2);\n  border-bottom: var(--border-size-small) solid var(--color-disabled01-icon);\n  border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n}\n\nz-list z-list-element::after {\n  width: var(--space-unit);\n  height: 100%;\n  border-left: var(--border-size-small) solid var(--color-disabled01-icon);\n}\n\nz-list z-list-element:last-child::after,\nz-list > z-list-element::before,\nz-list > z-list-element::after,\nz-list > z-list-group > z-list-element::before,\nz-list > z-list-group > z-list-element::after {\n  display: none;\n}\n\nz-list > div.children-node {\n  padding-left: calc(var(--space-unit) * 2);\n}\n\nz-list-element > .list-element {\n  z-index: 100;\n  display: flex;\n  justify-content: space-between;\n  padding: 0;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-style: normal;\n  font-weight: var(--font-rg);\n  text-decoration: none;\n}\n\nz-list-element > .list-element.link-clickable {\n  color: var(--color-primary01);\n}\n\nz-list-element > .list-element.link-clickable:hover {\n  text-decoration: underline;\n}\n\nz-list-element > .list-element .item.ellipsis {\n  overflow: hidden;\n}\n\nz-list-element .list-element::after {\n  position: absolute;\n  top: 0;\n  right: -0.0625rem;\n  display: block;\n  width: 100%;\n  height: calc(var(--space-unit) * 5);\n  content: \"\";\n  transform: translateX(-100%);\n}\n\n.item-label {\n  overflow: hidden;\n  flex-grow: 1;\n  font-size: var(--font-size-2);\n  font-style: normal;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.0032rem;\n  line-height: 1.25rem;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.item-label.bold-item {\n  font-weight: var(--font-sb);\n}\n\n.item.ellipsis {\n  display: flex;\n  overflow: hidden;\n  max-width: 100%;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.children-node > z-list-element {\n  padding: 0;\n  padding-top: 0.125;\n  padding-left: calc(var(--space-unit) * 1.25);\n}\n\n.item-icon {\n  margin-right: var(--space-unit);\n}\n\n.no-icon-label {\n  padding-left: var(--space-unit);\n}\n\n.children-node > z-list-element.no-icon-elm {\n  padding-left: 0;\n}\n\nz-list-element > .list-element:focus:focus-visible {\n  position: relative;\n  z-index: 200;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n@media (max-width: 767px) {\n  z-list-element::before,\n  z-list-element::after {\n    top: 0.1875rem;\n  }\n\n  z-list z-list-element::before {\n    height: calc(var(--space-unit) * 2.5);\n  }\n\n  .children-node > z-list-element {\n    padding-top: var(--space-unit);\n  }\n}\n","import {Component, Element, Event, EventEmitter, Host, Prop, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode, TreeListItem} from \"../../../beans\";\n\n@Component({\n  tag: \"z-tree-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTreeList {\n  @Element() host: HTMLZTreeListElement;\n\n  /** Items to render, if they have the url property they will be rendered as clickable links */\n  @Prop()\n  items: TreeListItem[] | string = [];\n\n  /** Used for aria-labelledby attribute, sets name in \"navigation\" */\n  @Prop({reflect: true})\n  htmlAriaLabelledby: string;\n\n  /** Used for aria-label attribute, sets name in \"tree\" */\n  @Prop({reflect: true})\n  htmlSectionTitle: string;\n\n  /** Emitted on item click, it return the id, name and url of the clicked item */\n  @Event()\n  treeItemClicked: EventEmitter<{id: string; name: string; url: string}>;\n\n  private parsedItems: TreeListItem[] = [];\n\n  private htmlTag: string;\n\n  @Watch(\"items\")\n  watchItems(): void {\n    this.parsedItems = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n  }\n\n  componentWillLoad(): void {\n    this.watchItems();\n  }\n\n  private handleClick(item: TreeListItem): void {\n    this.treeItemClicked.emit({id: item.id, name: item.name, url: item.url});\n  }\n\n  private getFocusableElements(): HTMLElement[] {\n    return Array.from(this.host.shadowRoot.querySelectorAll('a[tabindex=\"0\"]'));\n  }\n\n  private getAncestor(element: HTMLElement, levels: number): HTMLElement | null {\n    let ancestor: HTMLElement | null = element;\n\n    for (let i = 0; i < levels; i++) {\n      ancestor = ancestor?.parentElement;\n      if (!ancestor) {\n        return;\n      }\n    }\n\n    return ancestor;\n  }\n\n  private handleArrowNav(event: KeyboardEvent): void {\n    if (event.code === KeyboardCode.TAB) {\n      event.preventDefault();\n\n      return;\n    }\n\n    const focusableElements = this.getFocusableElements();\n    const currentIndex = focusableElements.indexOf(event.target as HTMLElement);\n\n    if (currentIndex === -1) {\n      return;\n    }\n\n    if (event.code === KeyboardCode.ARROW_DOWN || event.code === KeyboardCode.ARROW_UP) {\n      event.preventDefault();\n\n      const nextIndex = currentIndex + (event.code === KeyboardCode.ARROW_DOWN ? 1 : -1);\n      if (nextIndex < 0 || nextIndex >= focusableElements.length) {\n        return;\n      }\n\n      focusableElements[nextIndex].focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_LEFT) {\n      event.preventDefault();\n      const ancestor = this.getAncestor(focusableElements[currentIndex], 4);\n\n      if (\n        !ancestor ||\n        !ancestor.children[0] ||\n        (ancestor.children[0].tagName.toLowerCase() !== \"a\" && ancestor.getAttribute(\"tabindex\") === null)\n      ) {\n        return;\n      }\n\n      (ancestor.children[0] as HTMLElement).focus();\n    }\n\n    if (event.code === KeyboardCode.ARROW_RIGHT) {\n      event.preventDefault();\n\n      const parentElm = (event.target as HTMLElement).closest(\"z-list-element\") as HTMLElement;\n\n      if (!parentElm) {\n        return;\n      }\n\n      const childrenContainer = parentElm.querySelector(\"z-list\") as HTMLElement;\n\n      if (!childrenContainer) {\n        return;\n      }\n\n      const firstChild = childrenContainer.querySelector('a[tabindex=\"0\"]') as HTMLElement;\n\n      if (!firstChild) {\n        return;\n      }\n\n      firstChild.focus();\n    }\n  }\n\n  private renderTreeList(item: TreeListItem, key: string, level = 1): HTMLZListElementElement {\n    this.htmlTag = item.url ? \"a\" : \"span\";\n\n    const treeListContent = (\n      <z-list-element\n        id={key}\n        class={!item.icon ? \"no-icon-elm\" : \"\"}\n        clickable={Boolean(item.url)}\n        hasTreeItems={true}\n        role=\"none\"\n        aria-hidden={undefined}\n      >\n        <this.htmlTag\n          class={{\n            \"list-element\": true,\n            \"z-link\": Boolean(item.url),\n            \"link-clickable\": Boolean(item.url),\n          }}\n          tabIndex={item.url ? 0 : -1}\n          onClick={() => this.handleClick(item)}\n          onKeyUp={(event: KeyboardEvent) => {\n            if (event.code === KeyboardCode.ENTER || event.code === KeyboardCode.SPACE) {\n              this.handleClick(item);\n            }\n          }}\n          onKeyDown={(event: KeyboardEvent) => this.handleArrowNav(event)}\n          role={item.url ? \"treeitem\" : undefined}\n          aria-hidden={item.url ? undefined : \"true\"}\n          aria-expanded={item.children?.length > 0 && true}\n          aria-level={level}\n          aria-label={item.name}\n          href={item.url}\n        >\n          <span class=\"item ellipsis\">\n            {item.icon && (\n              <z-icon\n                width={16}\n                height={16}\n                fill={item.url ? \"color-primary01\" : \"color-default-icon\"}\n                class=\"item-icon\"\n                name={item.icon}\n              />\n            )}\n            <span\n              class={{\n                \"item-label\": true,\n                \"no-icon-label\": !item.icon,\n                \"bold-item\": item.bold,\n              }}\n              title={item.name}\n            >\n              {item.name}\n            </span>\n          </span>\n        </this.htmlTag>\n        {item.children?.length > 0 && (\n          <z-list role=\"group\">\n            <div class=\"children-node\">\n              {item.children.map((child, key) => this.renderTreeList(child, `${key}`, level + 1))}\n            </div>\n          </z-list>\n        )}\n      </z-list-element>\n    );\n\n    return treeListContent;\n  }\n\n  render(): HTMLZTreeListElement {\n    const hasClickableItems = this.parsedItems.some((item) => !!item.url);\n\n    return (\n      <Host\n        class=\"tree-list\"\n        role={hasClickableItems ? \"navigation\" : \"none\"}\n        aria-hidden={hasClickableItems ? undefined : \"true\"}\n        aria-labelledby={this.htmlAriaLabelledby}\n      >\n        <div\n          tabIndex={-1}\n          role={hasClickableItems ? \"tree\" : \"none\"}\n          aria-hidden={hasClickableItems ? undefined : \"true\"}\n          aria-label={this.htmlSectionTitle}\n        >\n          {this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-a3f9a5da.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as e,a as s,g as o}from"./p-75c4a726.js";import{g as n}from"./p-86618221.js";import{a}from"./p-061e28d6.js";import"./p-5145a606.js";const r=':host,::slotted(*),*{box-sizing:border-box;outline:none}:host{position:relative;display:inline-flex;height:fit-content;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;display:flex;width:100%;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-primary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:calc(var(--border-size-small) * -1);left:0;width:100%;height:var(--border-size-large);background-color:var(--color-primary01);content:""}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::slotted(*){display:inline-flex;width:100%;min-width:fit-content;padding-bottom:2px;margin:0;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::slotted([data-text]:not([slot]))::after{height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:inline-flex;flex-direction:column}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot="header"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot="header"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot="item"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot="item"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot="item"]:last-child){border-bottom:0}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"]:active),.items>::slotted([slot="item"][active]),.items>::slotted([slot="item"][data-active]){border-color:var(--color-primary01);font-weight:var(--font-bd)}';const h=r;const l=t=>(t===null||t===void 0?void 0:t.tagName)==="Z-MENU-SECTION";const c=class{get focusableItem(){return this.items.find((t=>l(t)?t.htmlTabindex===0:t.tabIndex===0))}toggle(){if(!this.hasContent){return}this.open=!this.open}onLabelSlotChange(t){const i=t.target.assignedElements()[0];i.dataset.text=i===null||i===void 0?void 0:i.textContent;this.setLabelA11yAttrs()}reflow(t=false){if(!this.floating){return}if(this.content&&this.hasContent){const{style:t}=this.content;const{left:i}=this.host.getBoundingClientRect();const e=getComputedStyle(this.content).width;const s=e?parseFloat(e.replace("px","")):375;const o=30;t.left=`${Math.min(window.innerWidth-i-s-o,0)}px`}if(t){this.raf=requestAnimationFrame(this.reflow.bind(this,t))}}checkContent(){this.hasHeader=!!this.host.querySelectorAll("[slot=header]").length;this.hasContent=!!this.host.querySelectorAll("[slot=item]").length||this.hasHeader}setItemTabindex(t,i){if(l(t)){t.htmlTabindex=i}else{t.tabIndex=i}}setItemsA11yAttrs(){this.items.forEach(((t,i)=>{const e=i===0?0:-1;this.setItemTabindex(t,e);if(!l(t)){t.setAttribute("role","menuitem")}}))}onItemsChange(){this.checkContent();this.items=Array.from(this.host.children).filter((({slot:t})=>t==="item"));this.setItemsA11yAttrs();this.items.forEach((t=>{if(!l(t)){t.dataset.text=t.textContent}}))}moveFocus(t,i){if(l(t)){t.setFocus()}else{t.tabIndex=0;setTimeout((()=>{t.focus()}),100)}if(!i){return}this.setItemTabindex(i,-1)}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===n.ENTER||t.key===n.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.moveFocus(this.items[0])}return}if(!this.verticalContext){return}if(t.key===n.ARROW_RIGHT&&!this.open){t.preventDefault();t.stopPropagation();this.open=true;this.moveFocus(this.items[0])}}async setFocus(){this.htmlTabindex=0;const t=this.hasContent?this.labelButton:this.host.firstElementChild;t.focus()}async focusLastItem(){const t=this.items[this.items.length-1];if(l(t)&&t.open){t.focusLastItem();return}this.moveFocus(t)}onOpenChanged(){if(!this.open){cancelAnimationFrame(this.raf);this.closed.emit();this.items.forEach((t=>{if(l(t)&&t.open){t.open=false}}));return}this.setItemsA11yAttrs();this.opened.emit();if(this.floating){this.reflow(true)}}setLabelA11yAttrs(){if(this.hasContent&&this.labelButton){this.labelButton.tabIndex=this.htmlTabindex;return}const t=this.host.firstElementChild;t.role="menuitem";t.tabIndex=this.htmlTabindex}onItemClick(t){const i=this.items.find((i=>a(i,t.target)));if(i){this.items.forEach((t=>{if(t===i){return}if(l(t)){t.htmlTabindex=-1}else{t.tabIndex=-1}}))}}onKeyDown(t){var i;if(!this.hasContent){return}switch(t.key){case n.ESC:if(!this.open){break}t.stopPropagation();t.preventDefault();this.open=false;this.setFocus();break;case n.ARROW_DOWN:{if(document.activeElement===this.host){if(this.verticalContext&&!this.open){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[0]);break}const i=this.items.indexOf(this.focusableItem);if(this.verticalContext&&i===this.items.length-1){this.setItemTabindex(this.items[i],-1);this.htmlTabindex=0;break}t.stopPropagation();t.preventDefault();const e=this.items[i+1];this.moveFocus(e!==null&&e!==void 0?e:this.items[0],this.focusableItem);break}case n.ARROW_UP:{if(document.activeElement===this.host){if(this.verticalContext){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[this.items.length-1],this.focusableItem);break}t.stopPropagation();t.preventDefault();const e=this.items.indexOf(this.focusableItem);if(e===0&&this.verticalContext){this.setItemTabindex(this.focusableItem,-1);this.setFocus();break}const s=(i=this.items[e-1])!==null&&i!==void 0?i:this.items[this.items.length-1];if(l(s)&&s.open){this.setItemTabindex(this.focusableItem,-1);s.focusLastItem();break}this.moveFocus(s,this.focusableItem);break}case n.ARROW_LEFT:if(!this.open||!this.verticalContext){break}t.preventDefault();t.stopPropagation();this.open=false;this.setFocus()}}constructor(e){t(this,e);this.opened=i(this,"opened",7);this.closed=i(this,"closed",7);this.items=[];this.active=undefined;this.floating=true;this.open=false;this.verticalContext=false;this.htmlTabindex=-1;this.hasHeader=undefined;this.hasContent=undefined;this.toggle=this.toggle.bind(this);this.checkContent=this.checkContent.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this)}componentWillLoad(){this.setLabelA11yAttrs();this.onItemsChange()}render(){if(!this.hasContent){return e("div",{class:"menu-label"},e("slot",{onSlotchange:this.onLabelSlotChange}))}return e(s,null,e("button",{ref:t=>this.labelButton=t,class:"menu-label","aria-expanded":`${!!this.open}`,"aria-haspopup":`${this.hasContent}`,"aria-label":this.open?"Chiudi menù":"Apri menù",role:"menuitem",tabIndex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},e("slot",{onSlotchange:this.onLabelSlotChange}),e("z-icon",{name:this.open?"chevron-up":"chevron-down"})),e("div",{class:"content",ref:t=>this.content=t},this.hasHeader&&e("header",{class:"header"},e("slot",{name:"header",onSlotchange:this.checkContent})),e("div",{class:"items",role:"menu"},e("slot",{name:"item",onSlotchange:this.onItemsChange}))))}get host(){return o(this)}static get watchers(){return{open:["onOpenChanged"],htmlTabindex:["setLabelA11yAttrs"]}}};c.style=h;export{c as z_menu};
+//# sourceMappingURL=p-a3f9a5da.entry.js.map

package/www/build/p-a3f9a5da.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZMenuStyle0","isZMenuSection","el","tagName","ZMenu","focusableItem","this","items","find","item","htmlTabindex","tabIndex","toggle","hasContent","open","onLabelSlotChange","ev","labelElement","target","assignedElements","dataset","text","textContent","setLabelA11yAttrs","reflow","live","floating","content","style","left","host","getBoundingClientRect","widthPx","getComputedStyle","width","parseFloat","replace","safeScrollbarSpace","Math","min","window","innerWidth","raf","requestAnimationFrame","bind","checkContent","hasHeader","querySelectorAll","length","setItemTabindex","setItemsA11yAttrs","forEach","index","tabindex","setAttribute","onItemsChange","Array","from","children","filter","slot","moveFocus","receiver","current","setFocus","setTimeout","focus","onLabelClick","onLabelKeydown","key","KeyboardCode","ENTER","SPACE","preventDefault","stopPropagation","verticalContext","ARROW_RIGHT","label","labelButton","firstElementChild","focusLastItem","lastItem","onOpenChanged","cancelAnimationFrame","closed","emit","opened","slottedLabel","role","onItemClick","clickedItem","containsElement","onKeyDown","ESC","ARROW_DOWN","document","activeElement","currentIndex","indexOf","ARROW_UP","_a","ARROW_LEFT","constructor","hostRef","componentWillLoad","render","h","class","onSlotchange","Host","ref","onClick","name"],"sources":["src/components/z-menu/styles.css?tag=z-menu&encapsulation=shadow","src/components/z-menu/index.tsx"],"sourcesContent":[":host,\n::slotted(*),\n* {\n  box-sizing: border-box;\n  outline: none;\n}\n\n:host {\n  --z-menu-label-color: ;\n\n  position: relative;\n  display: inline-flex;\n  height: fit-content;\n  flex-direction: column;\n}\n\n::slotted(a) {\n  text-decoration: none;\n}\n\n::slotted(*) {\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n.menu-label {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  border-bottom: var(--border-size-large) solid transparent;\n  margin: 0;\n  background: transparent;\n  border-radius: 0;\n  color: inherit;\n  text-align: left;\n}\n\nbutton.menu-label {\n  cursor: pointer;\n}\n\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(:is([active], [open])) .menu-label ::slotted(*),\n.menu-label:focus-visible ::slotted(*),\ndiv.menu-label:focus-within ::slotted(*) {\n  color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n\n:host([vertical-context]) .menu-label {\n  padding: var(--space-unit) 0;\n  border-width: var(--border-size-small);\n  border-color: var(--color-surface03);\n}\n\n:host(:is([active], [open])) .menu-label,\n.menu-label:hover,\n.menu-label:focus-visible,\ndiv.menu-label:focus-within {\n  border-color: var(--color-primary01);\n}\n\n:host([vertical-context]:is([active], [open])) .menu-label::after,\n:host([vertical-context]) .menu-label:hover::after,\n:host([vertical-context]) .menu-label:focus-visible::after,\n:host([vertical-context]) div.menu-label:focus-within::after {\n  position: absolute;\n  bottom: calc(var(--border-size-small) * -1);\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n  background-color: var(--color-primary01);\n  content: \"\";\n}\n\n:host([vertical-context]) .menu-label ::slotted(*) {\n  padding: 0;\n}\n\n.menu-label ::slotted(*) {\n  display: inline-flex;\n  width: 100%;\n  min-width: fit-content;\n  padding-bottom: 2px;\n  margin: 0;\n  appearance: none;\n  color: var(--z-menu-label-color, var(--color-default-text));\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: inherit;\n  line-height: 1.5;\n  white-space: nowrap;\n}\n\n.menu-label z-icon {\n  margin-left: calc(var(--space-unit) * 1.5);\n  fill: var(--color-default-icon);\n}\n\n/* Prevents layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text]:not([slot]))::after {\n  height: 0;\n  content: attr(data-text);\n  content: attr(data-text) / \"\";\n  font-weight: var(--font-bd);\n  letter-spacing: normal;\n  pointer-events: none;\n  user-select: none;\n  visibility: hidden;\n}\n\n@media speech {\n  ::slotted([data-text]:not([slot]))::after {\n    display: none;\n  }\n}\n\n::slotted([data-text]:not([slot])) {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.content {\n  background: var(--color-surface01);\n}\n\n:host(:not([open])) .content {\n  display: none;\n}\n\n:host([floating]:not([vertical-context])) .content {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 375px;\n  min-width: 100%;\n  max-width: 100vw;\n  padding: 0 calc(var(--space-unit) * 2);\n  box-shadow: var(--shadow-2);\n}\n\n:host(:not([floating])) .content {\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  padding: var(--space-unit) 0 calc(var(--space-unit) * 2);\n}\n\n.header ::slotted(img[slot=\"header\"]) {\n  width: calc(var(--space-unit) * 11.25);\n  height: auto;\n  object-fit: contain;\n}\n\n.header ::slotted([slot=\"header\"]:not(:first-child)) {\n  margin: auto 0;\n  margin-left: calc(var(--space-unit) * 2.5);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-sb);\n  line-height: 1.5;\n}\n\n.items {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  background: inherit;\n}\n\n.items > ::slotted([slot=\"item\"]) {\n  width: 100%;\n  margin: 0;\n  font-size: var(--font-size-3);\n  line-height: 1.5;\n}\n\n.items > ::slotted([slot=\"item\"]:focus:focus-visible) {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.items > ::slotted([slot=\"item\"]:not(z-menu-section)) {\n  padding: var(--space-unit) 0;\n  border-bottom: var(--border-size-small) solid var(--color-surface03);\n}\n\n:host(:not([vertical-context])) .items > ::slotted([slot=\"item\"]:last-child) {\n  border-bottom: 0;\n}\n\n.items > ::slotted([slot=\"item\"]:hover),\n.items > ::slotted([slot=\"item\"]:focus:focus-visible),\n.items > ::slotted([slot=\"item\"]:active),\n.items > ::slotted([slot=\"item\"][active]),\n.items > ::slotted([slot=\"item\"][data-active]) {\n  border-color: var(--color-primary01);\n  font-weight: var(--font-bd);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, Watch, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst isZMenuSection = (el: HTMLElement | HTMLZMenuSectionElement): el is HTMLZMenuSectionElement =>\n  el?.tagName === \"Z-MENU-SECTION\";\n\n/**\n * @slot - Menu label\n * @slot header - Header to display as the first entry of the open menu.\n * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Set the `data-active` HTML attribute on the element to highlight it (`active` also works but `data-active` is preferable). Use `z-menu-section` for submenus.\n * @cssprop --z-menu-label-color - Color of the label's text.\n */\n@Component({\n  tag: \"z-menu\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMenu {\n  @Element() host: HTMLZMenuElement;\n\n  /** Flag to set the active status of the menu. */\n  @Prop({reflect: true})\n  active?: boolean;\n\n  /**\n   * Flag to set the display mode of the list.\n   * If true, the list will be absolutely positioned under the menu label,\n   * stacked beneath it otherwise.\n   */\n  @Prop({reflect: true})\n  floating? = true;\n\n  /** The opening state of the menu. */\n  @Prop({mutable: true, reflect: true})\n  open = false;\n\n  /**\n   * Tells the component that it's placed in a vertical context with other `ZMenu`s (usually in the ZAppHeader's offcanvas).\n   * A small border is placed under it as a separator from other elements.\n   */\n  @Prop({reflect: true})\n  verticalContext = false;\n\n  /**\n   * Tabindex value to set on the menu label.\n   * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZAppHeader).\n   */\n  @Prop({mutable: true})\n  htmlTabindex = -1;\n\n  @State()\n  hasHeader: boolean;\n\n  @State()\n  hasContent: boolean;\n\n  /** The menu has been opened. */\n  @Event()\n  opened: EventEmitter;\n\n  /** The menu has been closed. */\n  @Event()\n  closed: EventEmitter;\n\n  private labelButton: HTMLButtonElement;\n\n  private content: HTMLElement;\n\n  private items: (HTMLElement | HTMLZMenuSectionElement)[] = [];\n\n  /** Animation frame request id. */\n  private raf: number;\n\n  private get focusableItem(): HTMLZMenuSectionElement | HTMLElement | null {\n    return this.items.find((item) => (isZMenuSection(item) ? item.htmlTabindex === 0 : item.tabIndex === 0));\n  }\n\n  private toggle(): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    this.open = !this.open;\n  }\n\n  /**\n   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n   * @param ev Slotchange event\n   */\n  private onLabelSlotChange(ev: Event): void {\n    const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n    labelElement.dataset.text = labelElement?.textContent;\n    this.setLabelA11yAttrs();\n  }\n\n  /**\n   * Correctly set position of the floating menu in order to prevent overflow.\n   * @param live Should run the method on every refresh frame.\n   */\n  private reflow(live = false): void {\n    if (!this.floating) {\n      return;\n    }\n\n    if (this.content && this.hasContent) {\n      const {style} = this.content;\n      const {left} = this.host.getBoundingClientRect();\n      const widthPx = getComputedStyle(this.content).width;\n      const width = widthPx ? parseFloat(widthPx.replace(\"px\", \"\")) : 375;\n      const safeScrollbarSpace = 30;\n      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;\n    }\n    if (live) {\n      this.raf = requestAnimationFrame(this.reflow.bind(this, live));\n    }\n  }\n\n  /**\n   * Check if some content slot is set.\n   */\n  private checkContent(): void {\n    this.hasHeader = !!this.host.querySelectorAll(\"[slot=header]\").length;\n    this.hasContent = !!this.host.querySelectorAll(\"[slot=item]\").length || this.hasHeader;\n  }\n\n  private setItemTabindex(item: HTMLElement | HTMLZMenuSectionElement, tabIndex: number): void {\n    if (isZMenuSection(item)) {\n      item.htmlTabindex = tabIndex;\n    } else {\n      item.tabIndex = tabIndex;\n    }\n  }\n\n  /**\n   * Set `menuitem` role to all menu items (ZMenuSection items already have it).\n   * Set -1 to the tabindex of the items and 0 to the first one.\n   */\n  private setItemsA11yAttrs(): void {\n    this.items.forEach((item, index) => {\n      const tabindex = index === 0 ? 0 : -1;\n      this.setItemTabindex(item, tabindex);\n      if (!isZMenuSection(item)) {\n        item.setAttribute(\"role\", \"menuitem\");\n      }\n    });\n  }\n\n  private onItemsChange(): void {\n    this.checkContent();\n    this.items = Array.from(this.host.children).filter(({slot}) => slot === \"item\") as HTMLElement[];\n    this.setItemsA11yAttrs();\n    this.items.forEach((item) => {\n      if (!isZMenuSection(item)) {\n        item.dataset.text = item.textContent;\n      }\n    });\n  }\n\n  /**\n   * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n   * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n   * If the receiver is a ZMenuSection and it's open, focus its first focusable item.\n   */\n  private moveFocus(\n    receiver: HTMLElement | HTMLZMenuSectionElement,\n    current?: HTMLElement | HTMLZMenuSectionElement\n  ): void {\n    if (isZMenuSection(receiver)) {\n      receiver.setFocus();\n    } else {\n      receiver.tabIndex = 0;\n      setTimeout(() => {\n        receiver.focus();\n      }, 100);\n    }\n    if (!current) {\n      return;\n    }\n\n    this.setItemTabindex(current, -1);\n  }\n\n  private onLabelClick(): void {\n    this.toggle();\n    this.setFocus();\n  }\n\n  private onLabelKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.toggle();\n      if (this.open) {\n        this.moveFocus(this.items[0]);\n      }\n\n      return;\n    }\n\n    if (!this.verticalContext) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_RIGHT && !this.open) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      this.open = true;\n      this.moveFocus(this.items[0]);\n    }\n  }\n\n  /** Set tabindex of the label to 0, then focus it. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.htmlTabindex = 0;\n    const label = this.hasContent ? this.labelButton : (this.host.firstElementChild as HTMLElement);\n    label.focus();\n  }\n\n  /**\n   * Focus the last item.\n   */\n  @Method()\n  async focusLastItem(): Promise<void> {\n    const lastItem = this.items[this.items.length - 1];\n    if (isZMenuSection(lastItem) && lastItem.open) {\n      lastItem.focusLastItem();\n\n      return;\n    }\n\n    this.moveFocus(lastItem);\n  }\n\n  @Watch(\"open\")\n  onOpenChanged(): void {\n    if (!this.open) {\n      cancelAnimationFrame(this.raf);\n      this.closed.emit();\n      this.items.forEach((item) => {\n        if (isZMenuSection(item) && item.open) {\n          item.open = false;\n        }\n      });\n\n      return;\n    }\n\n    this.setItemsA11yAttrs();\n    this.opened.emit();\n    if (this.floating) {\n      this.reflow(true);\n    }\n  }\n\n  @Watch(\"htmlTabindex\")\n  setLabelA11yAttrs(): void {\n    if (this.hasContent && this.labelButton) {\n      this.labelButton.tabIndex = this.htmlTabindex;\n\n      return;\n    }\n\n    const slottedLabel = this.host.firstElementChild as HTMLElement;\n    slottedLabel.role = \"menuitem\";\n    slottedLabel.tabIndex = this.htmlTabindex;\n  }\n\n  /**\n   * Set tabindex to -1 to all siblings of the clicked item.\n   */\n  @Listen(\"click\", {target: \"document\"})\n  onItemClick(ev: MouseEvent): void {\n    const clickedItem = this.items.find((item) => containsElement(item, ev.target as HTMLElement));\n    if (clickedItem) {\n      this.items.forEach((item) => {\n        if (item === clickedItem) {\n          return;\n        }\n\n        if (isZMenuSection(item)) {\n          item.htmlTabindex = -1;\n        } else {\n          item.tabIndex = -1;\n        }\n      });\n    }\n  }\n\n  @Listen(\"keydown\")\n  onKeyDown(ev: KeyboardEvent): void {\n    if (!this.hasContent) {\n      return;\n    }\n\n    switch (ev.key) {\n      case KeyboardCode.ESC:\n        if (!this.open) {\n          break;\n        }\n        ev.stopPropagation();\n        ev.preventDefault();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.ARROW_DOWN: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext && !this.open) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[0]);\n          break;\n        }\n\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (this.verticalContext && currentIndex === this.items.length - 1) {\n          // navigation is going to leave this menu. restore tabindex to the label and let the parent handle it\n          this.setItemTabindex(this.items[currentIndex], -1);\n          this.htmlTabindex = 0;\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const receiver = this.items[currentIndex + 1];\n        // if the last item is already focused, navigate to the first one\n        this.moveFocus(receiver ?? this.items[0], this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_UP: {\n        if (document.activeElement === this.host) {\n          if (this.verticalContext) {\n            break;\n          }\n\n          ev.stopPropagation();\n          ev.preventDefault();\n          // open the menu and focus the last item\n          if (!this.open) {\n            this.open = true;\n          }\n          this.moveFocus(this.items[this.items.length - 1], this.focusableItem);\n          break;\n        }\n\n        ev.stopPropagation();\n        ev.preventDefault();\n        const currentIndex = this.items.indexOf(this.focusableItem);\n        if (currentIndex === 0 && this.verticalContext) {\n          this.setItemTabindex(this.focusableItem, -1);\n          this.setFocus();\n          break;\n        }\n\n        const receiver = this.items[currentIndex - 1] ?? this.items[this.items.length - 1];\n        // if the receiver is a ZMenuSection and it's open, focus its last item\n        if (isZMenuSection(receiver) && receiver.open) {\n          this.setItemTabindex(this.focusableItem, -1);\n          receiver.focusLastItem();\n          break;\n        }\n\n        this.moveFocus(receiver, this.focusableItem);\n        break;\n      }\n      case KeyboardCode.ARROW_LEFT:\n        if (!this.open || !this.verticalContext) {\n          break;\n        }\n\n        // close the menu and focus the label\n        ev.preventDefault();\n        ev.stopPropagation();\n        this.open = false;\n        this.setFocus();\n    }\n  }\n\n  constructor() {\n    this.toggle = this.toggle.bind(this);\n    this.checkContent = this.checkContent.bind(this);\n    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n    this.onLabelClick = this.onLabelClick.bind(this);\n    this.onItemsChange = this.onItemsChange.bind(this);\n    this.onLabelKeydown = this.onLabelKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.setLabelA11yAttrs();\n    this.onItemsChange();\n  }\n\n  render(): HTMLDivElement | HTMLZMenuElement {\n    if (!this.hasContent) {\n      return (\n        <div class=\"menu-label\">\n          <slot onSlotchange={this.onLabelSlotChange} />\n        </div>\n      );\n    }\n\n    return (\n      <Host>\n        <button\n          ref={(el) => (this.labelButton = el)}\n          class=\"menu-label\"\n          aria-expanded={`${!!this.open}`}\n          aria-haspopup={`${this.hasContent}`}\n          aria-label={this.open ? \"Chiudi menù\" : \"Apri menù\"}\n          role=\"menuitem\"\n          tabIndex={this.htmlTabindex}\n          onClick={this.onLabelClick}\n          onKeyDown={this.onLabelKeydown}\n        >\n          <slot onSlotchange={this.onLabelSlotChange} />\n          <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />\n        </button>\n\n        <div\n          class=\"content\"\n          ref={(el) => (this.content = el)}\n        >\n          {this.hasHeader && (\n            <header class=\"header\">\n              <slot\n                name=\"header\"\n                onSlotchange={this.checkContent}\n              />\n            </header>\n          )}\n\n          <div\n            class=\"items\"\n            role=\"menu\"\n          >\n            <slot\n              name=\"item\"\n              onSlotchange={this.onItemsChange}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-a4d2cf55.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as i,a as t,g as o}from"./p-75c4a726.js";import{H as a,e as r}from"./p-86618221.js";const n=':host{--z-info-reveal-panel-width:384px;--trigger-size:44px;position:relative}:host *{box-sizing:border-box}button{--trigger-icon-size:calc(var(--trigger-size) / 2);display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:transparent;cursor:pointer;font-family:inherit;letter-spacing:inherit}button:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}.z-info-reveal-trigger{min-width:var(--trigger-size);height:var(--trigger-size);padding:calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);background-color:var(--color-surface05);border-radius:var(--border-radius);color:var(--color-text-inverse);column-gap:var(--space-unit);font-weight:var(--font-sb);line-height:1rem}:host([size="big"]) .z-info-reveal-trigger{font-size:var(--font-size-2)}:host([size="small"]) .z-info-reveal-trigger{--trigger-size:36px;font-size:var(--font-size-2)}:host([size="x-small"]) .z-info-reveal-trigger{--trigger-size:32px;padding:var(--space-unit);font-size:var(--font-size-1)}:host>.z-info-reveal-trigger z-icon{--z-icon-width:var(--trigger-icon-size);--z-icon-height:var(--trigger-icon-size);display:flex;fill:var(--color-inverse-icon)}:host([size="small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-small, 18px)}:host([size="x-small"])>.z-info-reveal-trigger z-icon{--trigger-icon-size:var(--trigger-icon-size-x-small, 16px)}.z-info-reveal-panel{position:absolute;z-index:19;display:flex;width:var(--z-info-reveal-panel-width);height:fit-content;align-items:flex-start;padding:calc(var(--space-unit) * 1.5);background-color:var(--color-surface05);border-radius:var(--border-radius);box-shadow:var(--shadow-4);color:var(--color-text-inverse);column-gap:var(--space-unit)}.z-info-reveal-panel[hidden]{display:none}:host([position="top_left"]) .z-info-reveal-panel,:host([position="top_right"]) .z-info-reveal-panel{top:0}:host([position="bottom_left"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{bottom:0}:host([position="top_right"]) .z-info-reveal-panel,:host([position="bottom_right"]) .z-info-reveal-panel{right:0}:host([position="top_left"]) .z-info-reveal-panel,:host([position="bottom_left"]) .z-info-reveal-panel{left:0}.z-info-reveal-panel .z-info-reveal-close{margin-left:auto}.z-info-reveal-panel z-icon{fill:var(--color-inverse-icon)}@media (max-width: 767px){.z-info-reveal-panel{top:auto !important;bottom:auto !important;width:calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;margin-top:calc(var(--trigger-size) * -1)}}';const s=n;const l=class{constructor(i){e(this,i);this.icon="informationsource";this.position=a.BOTTOM_RIGHT;this.label=undefined;this.ariaLabel="Apri pannello informazioni";this.size=r.BIG;this.open=false}adjustPanelPosition(){if(!this.open||!this.panel){return}const e=this.host.getBoundingClientRect();const i=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--grid-margin"),10);const t=document.documentElement.offsetWidth;const o=Math.round((this.position.includes("left")?t-e.left:e.right)-i);this.panel.style.maxWidth=`${o}px`}togglePanel(){this.open=!this.open}closePanel(){this.open=false}handleEscapeKey(e){if(e.key==="Escape"&&this.open){this.closePanel()}}render(){return i(t,{key:"250676e5bde8cb158ff19dd85c5b65aba329ab6d",open:this.open},i("button",{key:"ae9bd0a7a96c781ebc6e68f70b0553d9d08b8c4d",class:"z-info-reveal-trigger",type:"button",onClick:this.togglePanel.bind(this),"aria-label":!this.label?this.ariaLabel:undefined,"aria-expanded":this.open?"true":"false","aria-controls":"z-info-reveal-panel"},this.icon&&i("z-icon",{key:"cda367464294fcdb6e87b7dd8804470fc600a196",name:this.icon}),this.label&&i("span",{key:"33ee450958960b0eed18c6b630655c87d34d4b0f",class:"z-info-reveal-label"},this.label)),i("div",{key:"717f241bbbd1034b8f7117d0875a859a27ecc3d0",class:"z-info-reveal-panel",id:"z-info-reveal-panel",ref:e=>this.panel=e,hidden:!this.open},i("slot",{key:"f44d74a6183fdda5560fe8ced2e07ef12748b4b9"}),i("button",{key:"5071effe3449b8fe0285c080a0d9cb14be2b033c",class:"z-info-reveal-close",type:"button",onClick:this.closePanel.bind(this),"aria-label":"Chiudi pannello informazioni"},i("z-icon",{key:"9f3088b1e5398bea476ea2da203cb8e2e106ea89",name:"multiply"}))))}get host(){return o(this)}static get watchers(){return{position:["adjustPanelPosition"],open:["adjustPanelPosition"]}}};l.style=s;export{l as z_info_reveal};
+//# sourceMappingURL=p-a4d2cf55.entry.js.map

package/www/build/p-a4d2cf55.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZInfoRevealStyle0","ZInfoReveal","InfoRevealPosition","BOTTOM_RIGHT","ControlSize","BIG","adjustPanelPosition","this","open","panel","rect","host","getBoundingClientRect","gridMargin","parseInt","getComputedStyle","document","documentElement","getPropertyValue","pageWidth","offsetWidth","availableSpace","Math","round","position","includes","left","right","style","maxWidth","togglePanel","closePanel","handleEscapeKey","event","key","render","h","Host","class","type","onClick","bind","label","ariaLabel","undefined","icon","name","id","ref","el","hidden"],"sources":["src/components/z-info-reveal/styles.css?tag=z-info-reveal&encapsulation=shadow","src/components/z-info-reveal/index.tsx"],"sourcesContent":[":host {\n  --z-info-reveal-panel-width: 384px; /* defaults half the size of the mobile breakpoint */\n  --trigger-size: 44px;\n\n  position: relative;\n}\n\n:host * {\n  box-sizing: border-box;\n}\n\nbutton {\n  --trigger-icon-size: calc(var(--trigger-size) / 2);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-family: inherit;\n  letter-spacing: inherit;\n}\n\nbutton:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n.z-info-reveal-trigger {\n  min-width: var(--trigger-size);\n  height: var(--trigger-size);\n  padding: calc((var(--trigger-size) - var(--trigger-icon-size)) / 2);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n  font-weight: var(--font-sb);\n  line-height: 1rem;\n}\n\n:host([size=\"big\"]) .z-info-reveal-trigger {\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"small\"]) .z-info-reveal-trigger {\n  --trigger-size: 36px;\n\n  font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) .z-info-reveal-trigger {\n  --trigger-size: 32px;\n\n  padding: var(--space-unit);\n  font-size: var(--font-size-1);\n}\n\n:host > .z-info-reveal-trigger z-icon {\n  --z-icon-width: var(--trigger-icon-size);\n  --z-icon-height: var(--trigger-icon-size);\n\n  display: flex;\n  fill: var(--color-inverse-icon);\n}\n\n:host([size=\"small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: var(--trigger-icon-size-small, 18px);\n}\n\n:host([size=\"x-small\"]) > .z-info-reveal-trigger z-icon {\n  --trigger-icon-size: var(--trigger-icon-size-x-small, 16px);\n}\n\n.z-info-reveal-panel {\n  position: absolute;\n  z-index: 19;\n  display: flex;\n  width: var(--z-info-reveal-panel-width);\n  height: fit-content;\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 1.5);\n  background-color: var(--color-surface05);\n  border-radius: var(--border-radius);\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: var(--space-unit);\n}\n\n.z-info-reveal-panel[hidden] {\n  display: none;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"top_right\"]) .z-info-reveal-panel {\n  top: 0;\n}\n\n:host([position=\"bottom_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  bottom: 0;\n}\n\n:host([position=\"top_right\"]) .z-info-reveal-panel,\n:host([position=\"bottom_right\"]) .z-info-reveal-panel {\n  right: 0;\n}\n\n:host([position=\"top_left\"]) .z-info-reveal-panel,\n:host([position=\"bottom_left\"]) .z-info-reveal-panel {\n  left: 0;\n}\n\n.z-info-reveal-panel .z-info-reveal-close {\n  margin-left: auto;\n}\n\n.z-info-reveal-panel z-icon {\n  fill: var(--color-inverse-icon);\n}\n\n@media (max-width: 767px) {\n  .z-info-reveal-panel {\n    top: auto !important;\n    bottom: auto !important;\n    width: calc(var(--z-info-reveal-panel-width) - (var(--grid-margin) * 4)) !important;\n    margin-top: calc(var(--trigger-size) * -1);\n  }\n}\n","import {Component, Element, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ControlSize, InfoRevealPosition} from \"../../beans\";\n\n/**\n * Info reveal component.\n *\n * @slot - content of the info panel.\n * @cssprop --z-info-reveal-panel-width - Width of the info panel.\n * @cssprop --trigger-icon-size - Size of the trigger icon for big size.\n * @cssprop --trigger-icon-size-small - Size of the trigger icon for small size.\n * @cssprop --trigger-icon-size-x-small - Size of the trigger icon for x-small size.\n */\n@Component({\n  tag: \"z-info-reveal\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoReveal {\n  /** Name of the icon for the trigger button */\n  @Prop()\n  icon? = \"informationsource\";\n\n  /**\n   * The position of the z-info-reveal in the page. This helps to correctly place the info panel.\n   * The panel will grow in the opposite direction of the position.\n   * For example, with the default position `BOTTOM_RIGHT`, the panel will grow vertically upwards and horizontally to the left.\n   */\n  @Prop({reflect: true})\n  position?: InfoRevealPosition = InfoRevealPosition.BOTTOM_RIGHT;\n\n  /** Label of the trigger button. */\n  @Prop()\n  label?: string;\n\n  /** Aria label of the trigger button. It will be only used when `label` prop is empty. */\n  @Prop()\n  ariaLabel = \"Apri pannello informazioni\";\n\n  /** Size of the trigger button */\n  @Prop({reflect: true})\n  size?: ControlSize = ControlSize.BIG;\n\n  /** Whether the info panel is open. */\n  @State()\n  open = false;\n\n  @Element() host: HTMLZInfoRevealElement;\n\n  private panel: HTMLDivElement;\n\n  /**\n   * Adjust the position of the info panel to prevent exiting the viewport.\n   */\n  @Watch(\"position\")\n  @Watch(\"open\")\n  @Listen(\"resize\", {target: \"window\", passive: true})\n  adjustPanelPosition(): void {\n    if (!this.open || !this.panel) {\n      return;\n    }\n\n    const rect = this.host.getBoundingClientRect();\n    const gridMargin = parseInt(getComputedStyle(document.documentElement).getPropertyValue(\"--grid-margin\"), 10);\n    const pageWidth = document.documentElement.offsetWidth;\n    // Available space for the info panel to grow towards the edge of the page, based on the `position` prop.\n    const availableSpace = Math.round(\n      (this.position.includes(\"left\") ? pageWidth - rect.left : rect.right) - gridMargin\n    );\n    this.panel.style.maxWidth = `${availableSpace}px`;\n  }\n\n  /**\n   * Toggle the open state of the info panel.\n   */\n  private togglePanel(): void {\n    this.open = !this.open;\n  }\n\n  /**\n   * Close the info panel.\n   */\n  private closePanel(): void {\n    this.open = false;\n  }\n\n  @Listen(\"keydown\", {target: \"window\", capture: true})\n  handleEscapeKey(event: KeyboardEvent): void {\n    if (event.key === \"Escape\" && this.open) {\n      this.closePanel();\n    }\n  }\n\n  render(): HTMLZInfoRevealElement {\n    return (\n      <Host open={this.open}>\n        <button\n          class=\"z-info-reveal-trigger\"\n          type=\"button\"\n          onClick={this.togglePanel.bind(this)}\n          aria-label={!this.label ? this.ariaLabel : undefined}\n          aria-expanded={this.open ? \"true\" : \"false\"}\n          aria-controls=\"z-info-reveal-panel\"\n        >\n          {this.icon && <z-icon name={this.icon} />}\n          {this.label && <span class=\"z-info-reveal-label\">{this.label}</span>}\n        </button>\n        <div\n          class=\"z-info-reveal-panel\"\n          id=\"z-info-reveal-panel\"\n          ref={(el) => (this.panel = el)}\n          hidden={!this.open}\n        >\n          <slot></slot>\n          <button\n            class=\"z-info-reveal-close\"\n            type=\"button\"\n            onClick={this.closePanel.bind(this)}\n            aria-label=\"Chiudi pannello informazioni\"\n          >\n            <z-icon name=\"multiply\" />\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAY,ghFAClB,MAAAC,EAAeD,E,MCgBFE,EAAW,M,mCAGd,oB,cAQwBC,EAAmBC,a,oCAQvC,6B,UAISC,EAAYC,I,UAI1B,K,CAYP,mBAAAC,GACE,IAAKC,KAAKC,OAASD,KAAKE,MAAO,CAC7B,M,CAGF,MAAMC,EAAOH,KAAKI,KAAKC,wBACvB,MAAMC,EAAaC,SAASC,iBAAiBC,SAASC,iBAAiBC,iBAAiB,iBAAkB,IAC1G,MAAMC,EAAYH,SAASC,gBAAgBG,YAE3C,MAAMC,EAAiBC,KAAKC,OACzBhB,KAAKiB,SAASC,SAAS,QAAUN,EAAYT,EAAKgB,KAAOhB,EAAKiB,OAASd,GAE1EN,KAAKE,MAAMmB,MAAMC,SAAW,GAAGR,K,CAMzB,WAAAS,GACNvB,KAAKC,MAAQD,KAAKC,I,CAMZ,UAAAuB,GACNxB,KAAKC,KAAO,K,CAId,eAAAwB,CAAgBC,GACd,GAAIA,EAAMC,MAAQ,UAAY3B,KAAKC,KAAM,CACvCD,KAAKwB,Y,EAIT,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAH,IAAA,2CAAC1B,KAAMD,KAAKC,MACf4B,EAAA,UAAAF,IAAA,2CACEI,MAAM,wBACNC,KAAK,SACLC,QAASjC,KAAKuB,YAAYW,KAAKlC,MAAK,cACvBA,KAAKmC,MAAQnC,KAAKoC,UAAYC,UAAS,gBACrCrC,KAAKC,KAAO,OAAS,QAAO,gBAC7B,uBAEbD,KAAKsC,MAAQT,EAAA,UAAAF,IAAA,2CAAQY,KAAMvC,KAAKsC,OAChCtC,KAAKmC,OAASN,EAAA,QAAAF,IAAA,2CAAMI,MAAM,uBAAuB/B,KAAKmC,QAEzDN,EAAA,OAAAF,IAAA,2CACEI,MAAM,sBACNS,GAAG,sBACHC,IAAMC,GAAQ1C,KAAKE,MAAQwC,EAC3BC,QAAS3C,KAAKC,MAEd4B,EAAA,QAAAF,IAAA,6CACAE,EAAA,UAAAF,IAAA,2CACEI,MAAM,sBACNC,KAAK,SACLC,QAASjC,KAAKwB,WAAWU,KAAKlC,MAAK,aACxB,gCAEX6B,EAAA,UAAAF,IAAA,2CAAQY,KAAK,e","ignoreList":[]}

package/www/build/p-a6c07588.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,a as o,g as e}from"./p-75c4a726.js";import{g as i}from"./p-86618221.js";const r=":host,*{box-sizing:border-box}:host{display:flex;width:fit-content;align-items:center;padding:0;border:var(--border-size-small) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:calc(var(--border-radius) + var(--border-size-small));box-shadow:var(--shadow-4);gap:calc(var(--space-unit) / 2)}::slotted(z-divider){height:calc(var(--space-unit) * 4.5) !important}@media (max-width: 767px){:host{--z-toolbar-columns:6;position:relative;display:grid;max-width:100%;background:repeating-linear-gradient(\n        to bottom,\n        transparent 0,\n        transparent calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n      )\n      center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);gap:var(--border-size-small) calc(var(--space-unit) / 2);grid-template-columns:repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto))}::slotted(z-divider){display:none !important}}";const a=r;const n=class{constructor(s){t(this,s);this.toolItems=[];this.htmlAriaLabel=undefined;this.currentFocusIndex=0}componentDidLoad(){this.collectToolItems();this.updateTabIndexes();let t=parseInt(getComputedStyle(this.hostElement).getPropertyValue("--z-toolbar-columns")||"6");t=this.toolItems.length<=t?this.toolItems.length:t;this.hostElement.style.setProperty("--z-toolbar-columns",t.toString())}collectToolItems(){this.toolItems=Array.from(this.hostElement.querySelectorAll("z-tool:not(:scope z-tool z-tool)"))}updateTabIndexes(){this.toolItems.forEach(((t,s)=>{t.setTabIndex(s===this.currentFocusIndex?0:-1)}))}focusToolAt(t,s="next"){const o=this.toolItems[t];if(!o){return}this.currentFocusIndex=t;if(!o.disabled){o.setFocus();this.updateTabIndexes();return}if(s==="next"){this.focusNextTool()}else{this.focusPreviousTool()}}focusNextTool(){const t=(this.currentFocusIndex+1)%this.toolItems.length;this.focusToolAt(t)}focusPreviousTool(){const t=(this.currentFocusIndex-1+this.toolItems.length)%this.toolItems.length;this.focusToolAt(t,"previous")}closeSiblingSubmenusOnOpen(t){if(t.detail!==true){return}const s=t.target.closest("z-tool");if(!s||!this.toolItems.includes(s)){return}this.toolItems.forEach((t=>{if(t!==s&&t.open){t.open=false}}))}closeSiblingTooltipsOnOpen(t){if(t.detail!==true){return}const s=t.target;if(!this.toolItems.includes(s)){return}this.toolItems.forEach((t=>{if(t!==s){t.closeTooltip()}}))}handleKeyDown(t){const s=t.target;const o=s.closest("z-tool");if(!o||!this.toolItems.includes(o)){return}const e=this.toolItems.indexOf(o);if(e!==-1){this.currentFocusIndex=e}switch(t.key){case i.ARROW_RIGHT:t.preventDefault();this.focusNextTool();break;case i.ARROW_LEFT:t.preventDefault();this.focusPreviousTool();break}}handleFocusIn(t){const s=t.target;const o=s.closest("z-tool");const e=this.toolItems.indexOf(o);if(e!==-1&&e!==this.currentFocusIndex){this.currentFocusIndex=e;this.updateTabIndexes()}}render(){return s(o,{key:"5e00c2233560e5050ede29f987b8eb42e2af5935",role:"toolbar","aria-label":this.htmlAriaLabel},s("slot",{key:"9ea69fc40ffaa25d900ad80dc9ca42b8ddcb1140",onSlotchange:()=>{this.collectToolItems();this.updateTabIndexes()}}))}get hostElement(){return e(this)}};n.style=a;export{n as z_toolbar};
+//# sourceMappingURL=p-a6c07588.entry.js.map

package/www/build/p-a6c07588.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stylesCss","ZToolbarStyle0","ZToolbar","this","toolItems","componentDidLoad","collectToolItems","updateTabIndexes","mobileColumnCount","parseInt","getComputedStyle","hostElement","getPropertyValue","length","style","setProperty","toString","Array","from","querySelectorAll","forEach","tool","index","setTabIndex","currentFocusIndex","focusToolAt","fallback","disabled","setFocus","focusNextTool","focusPreviousTool","nextIndex","prevIndex","closeSiblingSubmenusOnOpen","event","detail","targetTool","target","closest","includes","open","closeSiblingTooltipsOnOpen","closeTooltip","handleKeyDown","toolElement","focusedIndex","indexOf","key","KeyboardCode","ARROW_RIGHT","preventDefault","ARROW_LEFT","handleFocusIn","render","h","Host","role","htmlAriaLabel","onSlotchange"],"sources":["src/components/z-toolbar/styles.css?tag=z-toolbar&encapsulation=shadow","src/components/z-toolbar/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  width: fit-content;\n  align-items: center;\n  padding: 0;\n  border: var(--border-size-small) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: calc(var(--border-radius) + var(--border-size-small)); /* ensure correct radius for nested items */\n  box-shadow: var(--shadow-4);\n  gap: calc(var(--space-unit) / 2);\n}\n\n::slotted(z-divider) {\n  height: calc(var(--space-unit) * 4.5) !important;\n}\n\n@media (max-width: 767px) {\n  :host {\n    --z-toolbar-columns: 6;\n\n    position: relative;\n    display: grid;\n    max-width: 100%;\n\n    /* Draws a horizontal separator line between rows */\n    background: repeating-linear-gradient(\n        to bottom,\n        transparent 0,\n        transparent calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5),\n        var(--color-surface03) calc(var(--space-unit) * 5.5 + 1px)\n      )\n      center / calc(100% - var(--space-unit)) 100% no-repeat var(--color-surface01);\n    gap: var(--border-size-small) calc(var(--space-unit) / 2);\n    grid-template-columns: repeat(var(--z-toolbar-columns, auto-fill), minmax(44px, auto));\n  }\n\n  ::slotted(z-divider) {\n    display: none !important;\n  }\n}\n","import {Component, Element, Host, Listen, Prop, State, h} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\nimport {ZToolCustomEvent} from \"../../components\";\n\n/**\n * ZToolbar component. This component mainly serves as a container for `z-tool` elements, but can also be nested inside a `z-tool` to create submenus.\n * Implements WCAG toolbar pattern with roving tabindex keyboard navigation.\n * Tools can be visually grouped using `z-divider` elements as separators.\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n *\n * @cssprop --z-toolbar-columns - Number of items per row in the toolbar. Only applies on mobile viewport, when the toolbar can be displayed in a multi-row layout. Default: `6`.\n */\n@Component({\n  tag: \"z-toolbar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZToolbar {\n  @Element() hostElement: HTMLZToolbarElement;\n\n  /** Accessible label for the toolbar. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Index of the currently focusable item (roving tabindex). */\n  @State()\n  currentFocusIndex = 0;\n\n  /** List of focusable tool elements. */\n  private toolItems: HTMLZToolElement[] = [];\n\n  componentDidLoad(): void {\n    this.collectToolItems();\n    this.updateTabIndexes();\n    // set css variable `--z-toolbar-columns` based on the number of tools in the toolbar, so that the background pattern can adapt to the number of rows\n    let mobileColumnCount = parseInt(getComputedStyle(this.hostElement).getPropertyValue(\"--z-toolbar-columns\") || \"6\");\n    mobileColumnCount = this.toolItems.length <= mobileColumnCount ? this.toolItems.length : mobileColumnCount;\n    this.hostElement.style.setProperty(\"--z-toolbar-columns\", mobileColumnCount.toString());\n  }\n\n  /** Collect first level children `z-tool` elements in the toolbar (not nested ones). */\n  private collectToolItems(): void {\n    this.toolItems = Array.from(this.hostElement.querySelectorAll(\"z-tool:not(:scope z-tool z-tool)\"));\n  }\n\n  /**\n   * Update the `tabindex` of all children tools based on the current focus index,\n   * so that only the currently focusable tool is in the tab order (tabindex=\"0\") and all others are not focusable via keyboard (tabindex=\"-1\").\n   */\n  private updateTabIndexes(): void {\n    this.toolItems.forEach((tool, index) => {\n      tool.setTabIndex(index === this.currentFocusIndex ? 0 : -1);\n    });\n  }\n\n  private focusToolAt(index: number, fallback: \"previous\" | \"next\" = \"next\"): void {\n    const tool = this.toolItems[index];\n    if (!tool) {\n      return;\n    }\n\n    this.currentFocusIndex = index;\n    if (!tool.disabled) {\n      tool.setFocus();\n      this.updateTabIndexes();\n\n      return;\n    }\n\n    if (fallback === \"next\") {\n      this.focusNextTool();\n    } else {\n      this.focusPreviousTool();\n    }\n  }\n\n  private focusNextTool(): void {\n    const nextIndex = (this.currentFocusIndex + 1) % this.toolItems.length;\n    this.focusToolAt(nextIndex);\n  }\n\n  private focusPreviousTool(): void {\n    const prevIndex = (this.currentFocusIndex - 1 + this.toolItems.length) % this.toolItems.length;\n    this.focusToolAt(prevIndex, \"previous\");\n  }\n\n  /**\n   * Listen for custom \"toggleSubmenu\" events from child tools and close sibling submenus when one is opened,\n   * to prevent multiple submenus from being open at the same time.\n   */\n  @Listen(\"toggleSubmenu\")\n  closeSiblingSubmenusOnOpen(event: ZToolCustomEvent<boolean>): void {\n    if (event.detail !== true) {\n      return;\n    }\n\n    const targetTool = (event.target as HTMLElement).closest(\"z-tool\") as HTMLZToolElement | null;\n    if (!targetTool || !this.toolItems.includes(targetTool)) {\n      return;\n    }\n\n    this.toolItems.forEach((tool) => {\n      if (tool !== targetTool && tool.open) {\n        tool.open = false;\n      }\n    });\n  }\n\n  /**\n   * Listen for custom \"toggleTooltip\" events from child tools and close sibling tooltips when one is opened,\n   * to prevent multiple tooltips from being open at the same time.\n   */\n  @Listen(\"toggleTooltip\")\n  closeSiblingTooltipsOnOpen(event: ZToolCustomEvent<boolean>): void {\n    if (event.detail !== true) {\n      return;\n    }\n\n    const targetTool = event.target;\n    if (!this.toolItems.includes(targetTool)) {\n      return;\n    }\n\n    this.toolItems.forEach((tool) => {\n      if (tool !== targetTool) {\n        tool.closeTooltip();\n      }\n    });\n  }\n\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n\n    if (!toolElement || !this.toolItems.includes(toolElement)) {\n      return;\n    }\n\n    const focusedIndex = this.toolItems.indexOf(toolElement);\n    if (focusedIndex !== -1) {\n      this.currentFocusIndex = focusedIndex;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ARROW_RIGHT:\n        event.preventDefault();\n        this.focusNextTool();\n        break;\n      case KeyboardCode.ARROW_LEFT:\n        event.preventDefault();\n        this.focusPreviousTool();\n        break;\n    }\n  }\n\n  /**\n   * When focus enters the toolbar, update the current focus index to match the focused tool,\n   * so that roving tabindex is in sync with actual focus.\n   */\n  @Listen(\"focusin\")\n  handleFocusIn(event: FocusEvent): void {\n    const target = event.target as HTMLElement;\n    const toolElement = target.closest(\"z-tool\") as HTMLZToolElement;\n    const index = this.toolItems.indexOf(toolElement);\n    if (index !== -1 && index !== this.currentFocusIndex) {\n      this.currentFocusIndex = index;\n      this.updateTabIndexes();\n    }\n  }\n\n  render(): HTMLZToolbarElement {\n    return (\n      <Host\n        role=\"toolbar\"\n        aria-label={this.htmlAriaLabel}\n      >\n        <slot\n          onSlotchange={() => {\n            this.collectToolItems();\n            this.updateTabIndexes();\n          }}\n        ></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,ohCAClB,MAAAC,EAAeD,E,MCgBFE,EAAQ,M,yBAYXC,KAAAC,UAAgC,G,oDAHpB,C,CAKpB,gBAAAC,GACEF,KAAKG,mBACLH,KAAKI,mBAEL,IAAIC,EAAoBC,SAASC,iBAAiBP,KAAKQ,aAAaC,iBAAiB,wBAA0B,KAC/GJ,EAAoBL,KAAKC,UAAUS,QAAUL,EAAoBL,KAAKC,UAAUS,OAASL,EACzFL,KAAKQ,YAAYG,MAAMC,YAAY,sBAAuBP,EAAkBQ,W,CAItE,gBAAAV,GACNH,KAAKC,UAAYa,MAAMC,KAAKf,KAAKQ,YAAYQ,iBAAiB,oC,CAOxD,gBAAAZ,GACNJ,KAAKC,UAAUgB,SAAQ,CAACC,EAAMC,KAC5BD,EAAKE,YAAYD,IAAUnB,KAAKqB,kBAAoB,GAAK,EAAE,G,CAIvD,WAAAC,CAAYH,EAAeI,EAAgC,QACjE,MAAML,EAAOlB,KAAKC,UAAUkB,GAC5B,IAAKD,EAAM,CACT,M,CAGFlB,KAAKqB,kBAAoBF,EACzB,IAAKD,EAAKM,SAAU,CAClBN,EAAKO,WACLzB,KAAKI,mBAEL,M,CAGF,GAAImB,IAAa,OAAQ,CACvBvB,KAAK0B,e,KACA,CACL1B,KAAK2B,mB,EAID,aAAAD,GACN,MAAME,GAAa5B,KAAKqB,kBAAoB,GAAKrB,KAAKC,UAAUS,OAChEV,KAAKsB,YAAYM,E,CAGX,iBAAAD,GACN,MAAME,GAAa7B,KAAKqB,kBAAoB,EAAIrB,KAAKC,UAAUS,QAAUV,KAAKC,UAAUS,OACxFV,KAAKsB,YAAYO,EAAW,W,CAQ9B,0BAAAC,CAA2BC,GACzB,GAAIA,EAAMC,SAAW,KAAM,CACzB,M,CAGF,MAAMC,EAAcF,EAAMG,OAAuBC,QAAQ,UACzD,IAAKF,IAAejC,KAAKC,UAAUmC,SAASH,GAAa,CACvD,M,CAGFjC,KAAKC,UAAUgB,SAASC,IACtB,GAAIA,IAASe,GAAcf,EAAKmB,KAAM,CACpCnB,EAAKmB,KAAO,K,KAUlB,0BAAAC,CAA2BP,GACzB,GAAIA,EAAMC,SAAW,KAAM,CACzB,M,CAGF,MAAMC,EAAaF,EAAMG,OACzB,IAAKlC,KAAKC,UAAUmC,SAASH,GAAa,CACxC,M,CAGFjC,KAAKC,UAAUgB,SAASC,IACtB,GAAIA,IAASe,EAAY,CACvBf,EAAKqB,c,KAMX,aAAAC,CAAcT,GACZ,MAAMG,EAASH,EAAMG,OACrB,MAAMO,EAAcP,EAAOC,QAAQ,UAEnC,IAAKM,IAAgBzC,KAAKC,UAAUmC,SAASK,GAAc,CACzD,M,CAGF,MAAMC,EAAe1C,KAAKC,UAAU0C,QAAQF,GAC5C,GAAIC,KAAkB,EAAG,CACvB1C,KAAKqB,kBAAoBqB,C,CAG3B,OAAQX,EAAMa,KACZ,KAAKC,EAAaC,YAChBf,EAAMgB,iBACN/C,KAAK0B,gBACL,MACF,KAAKmB,EAAaG,WAChBjB,EAAMgB,iBACN/C,KAAK2B,oBACL,M,CASN,aAAAsB,CAAclB,GACZ,MAAMG,EAASH,EAAMG,OACrB,MAAMO,EAAcP,EAAOC,QAAQ,UACnC,MAAMhB,EAAQnB,KAAKC,UAAU0C,QAAQF,GACrC,GAAItB,KAAW,GAAKA,IAAUnB,KAAKqB,kBAAmB,CACpDrB,KAAKqB,kBAAoBF,EACzBnB,KAAKI,kB,EAIT,MAAA8C,GACE,OACEC,EAACC,EAAI,CAAAR,IAAA,2CACHS,KAAK,UAAS,aACFrD,KAAKsD,eAEjBH,EAAA,QAAAP,IAAA,2CACEW,aAAc,KACZvD,KAAKG,mBACLH,KAAKI,kBAAkB,I","ignoreList":[]}

package/www/build/p-a8790237.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as s,g as i}from"./p-75c4a726.js";import{e as l,g as c,l as r,i as n}from"./p-86618221.js";import{r as a,e as o,b as h,f as d,i as z}from"./p-061e28d6.js";import"./p-5145a606.js";const p='.sc-z-select-h{display:inline-block;width:inherit;color:var(--color-form-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg)}[size="small"].sc-z-select-h,[size="x-small"].sc-z-select-h{font-size:var(--font-size-2)}.select-wrapper.sc-z-select>z-input.sc-z-select{width:100%}.select-wrapper.sc-z-select>z-input.sc-z-select .input-icon.sc-z-select{cursor:pointer}.select-wrapper.sc-z-select>div.sc-z-select{position:relative}.select-wrapper.sc-z-select>div.closed.sc-z-select{overflow:hidden;height:0}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select{position:absolute;width:100%;box-sizing:border-box;border-top:none;background:var(--color-form-background);box-shadow:var(--shadow-2);outline:none}.select-wrapper.sc-z-select .closed.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:10}.select-wrapper.sc-z-select .open.sc-z-select .ul-scroll-wrapper.sc-z-select{z-index:20}.select-wrapper.sc-z-select .ul-scroll-wrapper.fixed.sc-z-select{position:static}.select-wrapper.sc-z-select z-list.sc-z-select{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select>z-list.sc-z-select{position:relative;overflow:auto;max-height:240px;padding:var(--space-unit) calc(var(--space-unit) * 1.5);margin:0;outline:none}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element[disabled].sc-z-select{color:var(--color-form-disabled03)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select{display:flex;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);column-gap:var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.active.sc-z-select{box-shadow:var(--shadow-focus-primary)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{margin-right:auto}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:calc(var(--space-unit) * 0.5) var(--space-unit)}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.sc-z-select{padding:0}[size="small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:16px;--z-icon-height:16px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select{--z-icon-width:14px;--z-icon-height:14px}[size="x-small"].sc-z-select-h .select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select>z-icon.sc-z-select+.list-element-content.sc-z-select{padding:0 var(--space-unit)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select z-list.sc-z-select z-list-element.sc-z-select .list-element-container.sc-z-select .list-element-content.selected.sc-z-select{font-weight:var(--font-sb)}.select-wrapper.sc-z-select .ul-scroll-wrapper.sc-z-select .no-results.sc-z-select z-icon.sc-z-select{margin-right:var(--space-unit)}.z-list-group-title.sc-z-select{color:var(--color-form-default-text)}.reset-item.sc-z-select{color:var(--color-form-active-primary);fill:var(--color-form-active-primary)}.reset-item-content.sc-z-select{display:flex;align-items:center}.reset-item.sc-z-select .reset-item-content.active.sc-z-select{box-shadow:var(--shadow-focus-primary)}.reset-item.reset-item-margin.sc-z-select .reset-item-content.sc-z-select{margin-left:var(--space-unit)}.reset-item.sc-z-select .reset-item-content.sc-z-select>z-icon.sc-z-select{margin-right:var(--space-unit)}.reset-item.hide.sc-z-select{display:none}.tree-list-reset-item.sc-z-select{padding:var(--space-unit) 0}z-list-element.sc-z-select{position:relative;display:block}z-list.sc-z-select z-list-element.sc-z-select::before{position:absolute;z-index:100;top:3px;left:-8px;width:8px;height:1em;border-bottom:1px solid var(--color-form-disabled01-icon);border-left:1px solid var(--color-form-disabled01-icon);content:"";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select::after{position:absolute;z-index:100;top:5px;left:-8px;width:8px;height:100%;border-left:1px solid var(--color-form-disabled01-icon);content:"";cursor:pointer}z-list.sc-z-select z-list-element.sc-z-select:last-child::after{display:none}z-list.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-element.sc-z-select::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::before,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.sc-z-select::after{display:none}z-list.sc-z-select>div.children-node.sc-z-select{padding-left:calc(var(--space-unit) * 2)}z-list-element.sc-z-select>.list-element.sc-z-select{display:flex;justify-content:space-between;padding:calc(var(--space-unit) * 1.5) var(--space-unit);cursor:pointer}z-list-element.sc-z-select>.list-element.active.sc-z-select{box-shadow:var(--shadow-focus-primary)}z-list-element.sc-z-select:not([disabled])>.list-element.sc-z-select:hover,z-list-element.sc-z-select:not([disabled])>.list-element.sc-z-select:hover::after{background-color:var(--background-hover-color-list-element, var(--color-background))}z-list-element.sc-z-select>.list-element.sc-z-select .item.ellipsis.sc-z-select{overflow:hidden}z-list-element.sc-z-select .list-element.sc-z-select::after{position:absolute;top:0;right:-1px;display:block;width:100%;height:45px;content:"";transform:translateX(-100%)}z-list-element.tree-search-item.sc-z-select{padding-top:0}z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select::after{position:absolute;right:-25px;display:block;width:100%;height:45px;content:"";transform:translateX(-100%)}z-list-element.grouped-tree-parent-node.sc-z-select .list-element.sc-z-select::after{position:absolute;right:-25px;display:block;width:100%;height:45px;content:"";transform:translateX(-100%)}.item-label.selected.sc-z-select{font-weight:bold}.item.ellipsis.sc-z-select{display:inline-block;overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}z-list.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after,z-list-element.tree-search-item.sc-z-select .list-element.sc-z-select:hover::after,z-list.sc-z-select>z-list-group.sc-z-select>z-list-element.grouped-tree-parent-node.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;right:-18px;display:block;width:100%;height:45px;content:"";transform:translateX(-100%)}z-list-element.sc-z-select>.list-element.sc-z-select:hover::after{position:absolute;z-index:-1;top:0;right:0;display:block;width:100%;height:45px;content:"";transform:translateX(-100%)}.children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select z-list-element.sc-z-select::after{left:-8px}.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::before,.children-node.sc-z-select .children-node.sc-z-select z-list-element.sc-z-select::after{left:-8px}.children-node.sc-z-select>z-list-element.sc-z-select{padding:0}';const u=p;const m=class{constructor(s){e(this,s);this.optionSelect=t(this,"optionSelect",7);this.resetSelect=t(this,"resetSelect",7);this.itemsList=[];this.htmlid=`id-${a()}`;this.items=[];this.name=undefined;this.label=undefined;this.ariaLabel="";this.disabled=false;this.readonly=false;this.placeholder=undefined;this.htmltitle=undefined;this.status=undefined;this.message=true;this.autocomplete=false;this.noresultslabel="Nessun risultato";this.hasGroupItems=undefined;this.hasTreeItems=undefined;this.showChildrenOfMatchingParent=undefined;this.isfixed=false;this.resetItem=undefined;this.size=l.BIG;this.isOpen=false;this.selectedItem=null;this.focusedItemId=undefined;this.searchString=undefined;this.toggleSelectUl=this.toggleSelectUl.bind(this);this.handleSelectFocus=this.handleSelectFocus.bind(this)}watchItems(){this.itemsList=this.getInitialItemsArray();this.selectedItem=this.findSelectedItem(this.itemsList)}async getSelectedItem(){return this.selectedItem}async getValue(){return this.getSelectedValue()}async setValue(e){let t=[];if(typeof e==="string"){t.push(e)}else{t=e}this.itemsList=this.getInitialItemsArray();if(t.length){this.updateSelection(this.itemsList,t[0])}this.selectedItem=this.findSelectedItem(this.itemsList)}emitOptionSelect(){this.optionSelect.emit({id:this.htmlid,selected:this.getSelectedValue()})}emitResetSelect(){this.resetSelect.emit({id:this.htmlid})}componentWillLoad(){this.watchItems()}componentWillRender(){this.filterItems(this.searchString)}getInitialItemsArray(){return typeof this.items==="string"?JSON.parse(this.items):this.items}mapSelectedItemToItemsArray(){var e;const t=this.getInitialItemsArray();this.updateSelection(t,(e=this.selectedItem)===null||e===void 0?void 0:e.id);return t}getSelectedValue(){var e;return(e=this.selectedItem)===null||e===void 0?void 0:e.id}getOptionId(e){return`${this.htmlid}_key_${e.id}`}getResetOptionId(){return`${this.htmlid}_key_reset`}getItemIdFromOptionId(e){return e.replace(`${this.htmlid}_key_`,``)}getGroupedItems(){if(!this.itemsList.length){return[]}return Object.entries(this.itemsList.reduce(((e,t)=>{const s=t.category||"Altra categoria";e[s]=e[s]||[];e[s].push(t);return e}),{}))}filterItems(e){let t=this.mapSelectedItemToItemsArray();if(!(e===null||e===void 0?void 0:e.length)){this.itemsList=t;return}t=t.map((e=>Object.assign(Object.assign({},e),{name:o(e.name)})));if(this.hasTreeItems){this.itemsList=this.filterTree(t,e,false)}else{this.itemsList=t.filter((t=>t.name.toUpperCase().includes(e.toUpperCase()))).map((t=>{t.name=this.getHighlightedText(t.name,e);return t}))}}filterTree(e,t,s){if(!e){return[]}return e.map((e=>{const i=e.name.toUpperCase().includes(t.toUpperCase());const l=Object.assign({},e);if(l.children&&l.children.length>0){l.children=this.filterTree(l.children.map((e=>Object.assign(Object.assign({},e),{name:o(e.name)}))),t,i)}if(i){l.name=this.getHighlightedText(l.name,t)}if(i||l.children&&l.children.length>0||this.showChildrenOfMatchingParent&&s){return l}return null})).filter((e=>e!==null))}getHighlightedText(e,t){const s=e.toUpperCase();const i=t.toUpperCase();const l=s.indexOf(i);if(l===-1){return e}const c=l+t.length;return e.substring(0,l)+`<strong>${e.substring(l,c)}</strong>`+e.substring(c)}hasAutocomplete(){return h(this.autocomplete)===true}handleInputChange(e){this.searchString=e.detail.value;if(!this.isOpen){this.toggleSelectUl()}}updateSelection(e,t){if(e){e.forEach((e=>{e.selected=e.id===t;if(e.children&&e.children.length>0){this.updateSelection(e.children,t)}}))}}findSelectedItem(e){if(e){for(const t of e){if(t.selected){return t}if(t.children&&t.children.length>0){const e=this.findSelectedItem(t.children);if(e){return e}}}}return null}selectItem(e){if(e===null||e===void 0?void 0:e.disabled){return}this.itemsList=this.getInitialItemsArray();if(e){this.updateSelection(this.itemsList,e.id)}this.selectedItem=this.findSelectedItem(this.itemsList);this.emitOptionSelect();this.toggleSelectUl();if(this.searchString){this.searchString=null}}handleResetClick(){this.selectedItem=null;this.searchString=null;this.focusedItemId="";this.emitResetSelect();this.toggleSelectUl()}handleInputKeyDown(e){switch(e.code){case c.ENTER:case c.SPACE:if(this.focusedItemId){if(this.focusedItemId===this.getResetOptionId()){this.handleResetClick()}else{const e=this.getItemIdFromOptionId(this.focusedItemId);const t=this.itemsList.find((t=>t.id===e))||null;if(t){this.selectedItem=t;this.emitOptionSelect();this.toggleSelectUl()}}}break;case c.ARROW_DOWN:case c.ARROW_UP:this.arrowsSelectNav(e);break}}arrowsSelectNav(e){const t=[c.ARROW_DOWN,c.ARROW_UP];if(!t.includes(e.key)){return}e.preventDefault();e.stopPropagation();const s=this.focusedItemId?this.host.querySelector(`#${this.focusedItemId}`):null;const i=Array.from(this.host.querySelectorAll('[role="option"]'));if(!i.length){return}const l=s?i.indexOf(s):null;const r=0;const n=i.length-1;if(!this.isOpen){this.toggleSelectUl();if(this.selectedItem){this.focusSelectItem(this.getOptionId(this.selectedItem));return}}let a=null;if(e.code===c.ARROW_DOWN){a=l===null?i[r]:i[l+1]||i[n]}else if(e.code===c.ARROW_UP){a=l===null?i[n]:i[l-1]||i[r]}this.focusSelectItem(a.id)}focusSelectItem(e){this.focusedItemId=e;const t=this.host.querySelector(`#${e}`);t.scrollIntoView({block:"nearest",container:"nearest"})}toggleSelectUl(e=false){var t;if(this.disabled||this.readonly){return}if(!this.isOpen){document.addEventListener("click",this.handleSelectFocus);document.addEventListener("keyup",this.handleSelectFocus)}else{document.removeEventListener("click",this.handleSelectFocus);document.removeEventListener("keyup",this.handleSelectFocus);if(e){(t=this.host.querySelector(`#${this.htmlid}_select_input`))===null||t===void 0?void 0:t.focus()}if(this.selectedItem&&this.searchString){this.searchString=null;this.filterItems(this.searchString)}}this.focusedItemId="";this.isOpen=!this.isOpen}handleInputClick(e){if(e.target.closest(".reset-icon")){e.stopPropagation();return}this.toggleSelectUl()}handleSelectFocus(e){if(e instanceof KeyboardEvent&&e.key===c.ESC){e.stopPropagation();return this.toggleSelectUl(true)}if(e instanceof KeyboardEvent&&e.key!==c.TAB){return}const t=z();if(t===null||t===void 0?void 0:t.hasAttribute("disabled")){return}if(!d(t).find((e=>e.nodeName.toLowerCase()==="z-input"&&e.id===`${this.htmlid}_input`))){const e=d(t).find((e=>e.nodeName==="Z-SELECT"));this.toggleSelectUl(e===this.host)}}scrollToLetter(e){if(!this.itemsList.length){return}const t=this.itemsList.find((t=>t.name.toLowerCase().charAt(0)===e.toLowerCase()));if(t){if(!this.isOpen){this.toggleSelectUl()}this.focusSelectItem(this.getOptionId(t))}}renderInput(){let e=null;if(this.selectedItem){e=o(this.selectedItem.name)}if(this.isOpen&&this.searchString!==undefined){e=this.searchString}return[s("z-input",{class:{"active-select":this.isOpen,"cursor-select":!this.autocomplete},id:`${this.htmlid}_input`,htmlid:`${this.htmlid}_select_input`,placeholder:this.placeholder,value:e,label:this.label,autocomplete:"off","aria-label":this.ariaLabel,icon:this.isOpen?"caret-up":"caret-down",hasclearicon:false,message:false,name:this.name,disabled:this.disabled,readonly:this.readonly||!this.hasAutocomplete()&&this.isOpen,status:this.isOpen?undefined:this.status,size:this.size,role:"combobox","html-aria-expanded":this.isOpen?"true":"false","html-aria-controls":`${this.htmlid}_list`,"html-aria-activedescendant":this.isOpen?this.focusedItemId:"","html-aria-autocomplete":this.hasAutocomplete()?"list":undefined,onClick:e=>this.handleInputClick(e),onKeyDown:e=>this.handleInputKeyDown(e),onInputChange:e=>this.handleInputChange(e),onKeyPress:e=>{if(!this.hasAutocomplete()){e.preventDefault();this.scrollToLetter(e.key)}}})]}renderSelectUl(){return s("div",{class:this.isOpen?"open":"closed"},s("div",{class:{"ul-scroll-wrapper":true,fixed:this.isfixed}},s("z-list",{role:"listbox","aria-label":this.ariaLabel||this.label,tabindex:this.disabled||this.readonly||!this.isOpen?-1:0,id:`${this.htmlid}_list`,"aria-multiselectable":false,size:this.listSizeType(),class:{disabled:this.disabled,readonly:this.readonly,[`input-${this.status}`]:!this.isOpen&&!!this.status,"z-scrollbar":true}},this.resetItem&&this.renderResetItem(),this.renderSelectUlItems())))}renderResetItem(){const e=!this.selectedItem||!this.resetItem;return s("z-list-element",{class:{hide:e,"reset-item":true,"reset-item-margin":!this.hasGroupItems},clickable:true,disabled:false,dividerType:r.ELEMENT,role:e?"presentation":"option","html-tabindex":0,"aria-selected":"false","aria-label":e?undefined:this.resetItem,id:this.getResetOptionId(),size:this.hasTreeItems?n.MEDIUM:this.listSizeType(),onClickItem:()=>this.handleResetClick()},s("div",{class:{"reset-item-content":true,"tree-list-reset-item":this.hasTreeItems,active:this.focusedItemId===this.getResetOptionId()},"aria-hidden":"true"},s("z-icon",{name:"multiply-circled"}),s("span",null,this.resetItem)))}renderItem(e,t){return s("z-list-element",{clickable:!e.disabled,disabled:e.disabled,dividerType:t?r.HEADER:r.ELEMENT,role:e.disabled?"presentation":"option","html-tabindex":-1,"aria-selected":e.selected?"true":"false","aria-label":e.disabled?undefined:o(e.name),id:this.getOptionId(e),size:this.listSizeType(),onClickItem:()=>this.selectItem(e)},s("div",{class:{"list-element-container":true,active:this.focusedItemId===this.getOptionId(e)},"aria-hidden":"true"},s("div",{class:{selected:!!e.selected,"list-element-content":true},innerHTML:e.name}),e.icon&&s("z-tag",{icon:e.icon})))}listSizeType(){if(this.hasTreeItems){return n.NONE}if(this.size===l.SMALL||this.size===l.X_SMALL){return n.SMALL}return n.MEDIUM}renderSelectUlItems(){if(!this.itemsList.length){return this.renderNoSearchResults()}if(this.hasGroupItems){if(this.hasTreeItems){return this.renderGroupedTree()}return this.renderSelectGroupItems()}return this.itemsList.map(((e,t,s)=>{const i=t===s.length-1;const l=s.length>1;if(this.hasTreeItems){return this.renderTreeItems(e,i,l,true,e.disabled)}return this.renderItem(e,i)}))}renderTreeItems(e,t,i,l,c){var n,a;const h=e.disabled||c;const d=this.hasGroupItems?undefined:this.hasGroupItems?t&&!i?r.ELEMENT:undefined:l&&i&&!t?r.ELEMENT:undefined;return s("z-list-element",{clickable:!e.disabled,disabled:h,class:{"grouped-tree-parent-node":this.hasGroupItems&&!!((n=e.children)===null||n===void 0?void 0:n.length),"tree-search-item":this.hasGroupItems&&l&&!((a=e.children)===null||a===void 0?void 0:a.length)&&!!this.searchString},size:this.listSizeType(),dividerType:d,hasTreeItems:this.hasTreeItems,"html-tabindex":null,role:"presentation"},s("div",{id:this.getOptionId(e),role:h?"presentation":"option","aria-label":h?undefined:o(e.name),class:{"list-element":true,active:this.focusedItemId===this.getOptionId(e)},onClick:()=>this.selectItem(e)},s("span",{class:"item ellipsis","aria-hidden":"true"},s("span",{class:{"item-label":true,selected:!!e.selected},title:e.name,innerHTML:e.name})),e.icon&&s("z-tag",{icon:e.icon})),e.children&&e.children.length>0?s("z-list",{role:"presentation"},s("div",{class:"children-node"},e.children.map(((e,t,s)=>this.renderTreeItems(e,t===s.length-1,s.length>1,false,h))))):null)}renderGroupedTree(){const e=this.getGroupedItems();return e.map((([t,i],l,c)=>{const n=Object.values(e).some((e=>e.length>1));return s("z-list-group",{"divider-type":l===c.length-1?undefined:r.ELEMENT,hasTreeItems:true,"aria-labelledby":`${this.htmlid}_tree_${l}`},s("span",{class:"body-3-sb z-list-group-title",slot:"header-title",id:`${this.htmlid}_tree_${l}`,"aria-hidden":"true"},t),s("z-list",{role:"presentation"},i.map(((e,t,i)=>[this.renderTreeItems(e,t===i.length-1,n,true,e.disabled),t<i.length-1?s("z-divider",{key:`divider-${t}`,style:{zIndex:"100",height:"var(--border-size-small)"}}):null]))),l!==c.length-1&&s("z-divider",{style:{zIndex:"100",height:"var(--border-size-small)"}}))}))}renderSelectGroupItems(){const e=this.getGroupedItems();return e.map((([t,i],l)=>{const c=e.length===l+1;return s("z-list-group",{"divider-type":r.ELEMENT,"aria-labelledby":`${this.htmlid}_group_${l}`},s("span",{class:"body-3-sb z-list-group-title",slot:"header-title",id:`${this.htmlid}_group_${l}`,"aria-hidden":"true"},t),i.map(((e,t)=>{const s=i.length===t+1;return this.renderItem(e,c&&s)})))}))}renderNoSearchResults(){return s("z-list-element",{class:"no-results",size:this.hasTreeItems?n.MEDIUM:this.listSizeType(),"html-tabindex":null,role:"presentation"},this.noresultslabel)}renderMessage(){if(h(this.message)===false){return}return s("z-input-message",{message:h(this.message)===true?undefined:this.message,status:this.status,class:this.size,disabled:this.disabled})}render(){return s("div",{key:"85aeff414269872f796631044ffcafe9e500d6e6",class:"select-wrapper"},this.renderInput(),this.renderSelectUl(),this.renderMessage())}get host(){return i(this)}static get watchers(){return{items:["watchItems"]}}};m.style=u;export{m as z_select};
+//# sourceMappingURL=p-a8790237.entry.js.map