@zanichelli/albe-web-components 20.0.4 → 20.1.0

package/dist/web-components-library/p-fa11fd2d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZVisuallyHidden","render","h","key"],"sources":["src/components/z-visually-hidden/styles.css?tag=z-visually-hidden&encapsulation=shadow","src/components/z-visually-hidden/index.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  margin: 0 -1px -1px 0;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n","import {Component, ComponentInterface, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-visually-hidden\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZVisuallyHidden implements ComponentInterface {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,IAAM,mK,MCOXC,EAAe,M,yBAC1B,MAAAC,GACE,OAAOC,EAAA,QAAAC,IAAA,4C","ignoreList":[]}

package/dist/web-components-library/p-ffe7860b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,H as i,d as o}from"./p-BcDWN4F1.js";import{g as a}from"./p-DdetsoIY.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 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.htmlTabindex=-1;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:"64aaea4f98c08d9d570aedb2a73847247d6972cf",open:this.open},s("button",{key:"3a3e7917674e8db446e986b24fed9a3079d7d6ab",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:"3e13783b40135def11773286f16c45070ee9eade",onSlotchange:this.onLabelSlotChange}),this.hasItems&&s("z-icon",{key:"be1dffed69eabe2fb40b46d7c1ff4cbef9512cf0",name:this.open?"chevron-up":"chevron-down"})),s("div",{key:"51c8c7e3560941fe67614c92c8e153233cc97691",class:"items",role:"menu",hidden:!this.open},s("slot",{key:"c37e273f536f6d1f8d3e4585b14290fc70ddce86",name:"section",onSlotchange:this.onItemsChange})))}get host(){return o(this)}static get watchers(){return{open:[{onOpenChange:0}],htmlTabindex:[{onTabindexChange:0}]}}};l.style=n();export{l as z_menu_section};
-//# sourceMappingURL=p-ffe7860b.entry.js.map

package/dist/web-components-library/p-ffe7860b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","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 {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} 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 implements ComponentInterface {\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/dist/web-components-library/web-components-library.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"web-components-library.esm.js","sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAIzB,EAA0B;AAC1B,IAAI,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;AAClC;AAIA,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;AACD,IAAI,iBAAiB,GAAG,CAAC,oBAAoB,KAAK;AAClD,EAAE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,SAAS;AAC1D,EAAE,oBAAoB,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AAClD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,MAAM,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/C;AACA,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;AAC1D,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;AACzC,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC7C,UAAU,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAClE;AACA;AACA;AACA,IAAI,OAAO,UAAU;AACrB,GAAG;AACH,CAAC;;ACrCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}

package/www/build/index.esm.js

@@ -1,2 +0,0 @@
-import{c as aa}from"./p-DPrEzmhI.js";export{a0 as AccordionVariant,o as AlertType,A as AvatarSize,$ as BookCardDeprecatedVariant,_ as BookCardVariant,X as BreadcrumbHomepageVariant,W as BreadcrumbPathStyle,d as ButtonSize,c as ButtonType,B as ButtonVariant,C as CardVariant,U as CarouselArrowsPosition,V as CarouselProgressMode,a2 as ColorPickerPalette,e as ControlSize,R as CoverHeroContentPosition,Q as CoverHeroVariant,p as Device,h as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,a1 as IconPosition,M as InfoRevealPosition,f as InputStatus,I as InputType,g as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,i as ListSize,m as ListType,b as NavigationTabsKeyboardEvents,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,v as OffCanvasVariant,O as Orientation,P as PopoverPosition,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,Y as VisibilityCondition,t as ZAriaAlertMode,x as ZChipType,y as ZChipVariant,F as ZDatePickerMode,G as ZDatePickerModeValue,H as ZDatePickerPosition,w as ZFileUploadType,J as ZRangePickerMode,z as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./p-DdetsoIY.js";export{I as ICONS}from"./p-D1c5gR45.js";import"./p-Q-tWjk7P.js";const ia={colorFromId:aa};export{ia as Utils};
-//# sourceMappingURL=index.esm.js.map

package/www/build/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":["src/index.ts"],"sourcesContent":["import {colorFromId} from \"./utils/utils\";\n\nconst UTILS = {\n  colorFromId,\n};\n\nexport * from \"./beans\";\nexport * from \"./components\";\nexport {ICONS, IconName} from \"./constants/iconset\";\nexport {UTILS as Utils};\n"],"names":[],"mappings":";;;;;AAEA,MAAM,KAAK,GAAG;IACZ,WAAW;;;;;"}

package/www/build/p-04b6a9f8.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as e,h as t,H as n}from"./p-BcDWN4F1.js";const i=()=>`:host,*,::slotted(*){box-sizing:border-box}:host{--z-info-box--border-color:unset;--z-info-box--left-icon-color:var(--z-info-box--border-color, var(--color-primary01-icon));--z-info-box--background-color:var(--color-primary03);display:flex;flex-direction:column;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);border:var(--border-size-medium) solid var(--z-info-box--border-color, transparent);background:var(--z-info-box--background-color);border-radius:var(--border-radius);font-family:var(--font-family-sans);font-weight:var(--font-rg);gap:calc(var(--space-unit) * 2)}.main-content{display:flex;align-items:flex-start}.main-content .left-icon,.close-button{display:flex;height:1.25rem;align-items:center}.main-content .left-icon z-icon{--z-icon-width:1rem;--z-icon-height:1rem;fill:var(--z-info-box--left-icon-color)}::slotted([slot="content"]){color:var(--color-default-text);font-size:var(--font-size-2);line-height:1.25rem}.main-content .left-icon+::slotted([slot="content"]){margin-left:var(--space-unit)}:host([isclosable]) ::slotted([slot="content"]){margin-right:calc(var(--space-unit) * 2)}.close-button{padding:0;border:none;margin:0;margin-left:auto;background:none;cursor:pointer}.close-button z-icon{fill:var(--color-primary01-icon)}`;const c=class{constructor(t){o(this,t);this.infoBoxClose=e(this,"infoBoxClose",7);this.isclosable=true;this.closeButtonAriaLabel="Chiudi pannello informazioni"}emitInfoBoxClose(){this.infoBoxClose.emit({boxid:this.boxid})}render(){return t(n,{key:"4cd2008ec9cd85fe976cca7f4e1d89c53b5dc538",id:this.boxid},t("div",{key:"aac0bd67dedd12740d3b14af25b17d90b96341a2",class:"main-content"},this.leftIcon&&t("div",{key:"2df226b5e1569ee41e282fa9d4d69df82d25278f",class:"left-icon"},t("z-icon",{key:"421f5d58e5db25f17f2b5402138899ccc36d81cf",name:this.leftIcon})),t("slot",{key:"75eca851c2ae4febe1dbd1498333947e591a2e85",name:"content"}),this.isclosable&&t("button",{key:"3b88257dd4ad70c58ef7c04628dc644b87c69659",class:"close-button","aria-label":this.closeButtonAriaLabel,onClick:()=>this.emitInfoBoxClose()},t("z-icon",{key:"ed577a2e5ec651ee872b2872f81153d5ec73700f",name:"multiply"}))),t("slot",{key:"631ba8f5dcf905ca4225c3f94f6427d42be87551",name:"additional-content"}))}};c.style=i();export{c as z_info_box};
-//# sourceMappingURL=p-04b6a9f8.entry.js.map

package/www/build/p-04b6a9f8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZInfoBox","constructor","hostRef","this","isclosable","closeButtonAriaLabel","emitInfoBoxClose","infoBoxClose","emit","boxid","render","h","Host","key","id","class","leftIcon","name","onClick"],"sources":["src/components/z-info-box/styles.css?tag=z-info-box&encapsulation=shadow","src/components/z-info-box/index.tsx"],"sourcesContent":[":host,\n*,\n::slotted(*) {\n  box-sizing: border-box;\n}\n\n:host {\n  /**\n   * @prop --z-info-box--border-color: The border color of the info box.\n   * @prop --z-info-box--background-color: The background color of the info box.\n   * @prop --z-info-box--left-icon-color: The fill color of the icon displayed on the top left of the info box. If `--z-info-box--border-color` is set, this property will default to that value. Otherwise, it will default to `--color-primary01-icon`.\n   */\n  --z-info-box--border-color: unset;\n  --z-info-box--left-icon-color: var(--z-info-box--border-color, var(--color-primary01-icon));\n  --z-info-box--background-color: var(--color-primary03);\n\n  display: flex;\n  flex-direction: column;\n  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n  border: var(--border-size-medium) solid var(--z-info-box--border-color, transparent);\n  background: var(--z-info-box--background-color);\n  border-radius: var(--border-radius);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  gap: calc(var(--space-unit) * 2);\n}\n\n.main-content {\n  display: flex;\n  align-items: flex-start;\n}\n\n/* visually vertically align the icons to the first line of the text content */\n.main-content .left-icon,\n.close-button {\n  display: flex;\n  height: 1.25rem;\n  align-items: center;\n}\n\n.main-content .left-icon z-icon {\n  --z-icon-width: 1rem;\n  --z-icon-height: 1rem;\n\n  fill: var(--z-info-box--left-icon-color);\n}\n\n::slotted([slot=\"content\"]) {\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  line-height: 1.25rem;\n}\n\n.main-content .left-icon + ::slotted([slot=\"content\"]) {\n  margin-left: var(--space-unit);\n}\n\n:host([isclosable]) ::slotted([slot=\"content\"]) {\n  margin-right: calc(var(--space-unit) * 2);\n}\n\n.close-button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  margin-left: auto;\n  background: none;\n  cursor: pointer;\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01-icon);\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {IconName} from \"../../constants/iconset\";\n\n/**\n * @slot content - set the info box content\n */\n@Component({\n  tag: \"z-info-box\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoBox implements ComponentInterface {\n  /** info box unique id */\n  @Prop()\n  boxid: string;\n\n  /** render close icon */\n  @Prop({reflect: true})\n  isclosable = true;\n\n  /** Aria label for the close button */\n  @Prop()\n  closeButtonAriaLabel = \"Chiudi pannello informazioni\";\n\n  /**\n   * Name of the icon to display on the top left of the info box.\n   * The icon's color will be inherited from the border color set through the `--z-info-box--border-color` CSS variable, if set.\n   * Otherwise it can be customized using the `--z-info-box--left-icon-color` CSS variable.\n   * If none of them is set, the icon will be colored using the `--color-primary01-icon` token.\n   */\n  @Prop()\n  leftIcon: IconName;\n\n  /** emitted on close icon click */\n  @Event()\n  infoBoxClose: EventEmitter<{boxid: string}>;\n\n  private emitInfoBoxClose(): void {\n    this.infoBoxClose.emit({boxid: this.boxid});\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <Host id={this.boxid}>\n        <div class=\"main-content\">\n          {this.leftIcon && (\n            <div class=\"left-icon\">\n              <z-icon name={this.leftIcon} />\n            </div>\n          )}\n\n          <slot name=\"content\" />\n\n          {this.isclosable && (\n            <button\n              class=\"close-button\"\n              aria-label={this.closeButtonAriaLabel}\n              onClick={() => this.emitInfoBoxClose()}\n            >\n              <z-icon name=\"multiply\" />\n            </button>\n          )}\n        </div>\n\n        <slot name=\"additional-content\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,IAAM,qvC,MCWXC,EAAQ,MALrB,WAAAC,CAAAC,G,qDAYEC,KAAAC,WAAa,KAIbD,KAAAE,qBAAuB,8BA8CxB,CA/BS,gBAAAC,GACNH,KAAKI,aAAaC,KAAK,CAACC,MAAON,KAAKM,O,CAGtC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,GAAIX,KAAKM,OACbE,EAAA,OAAAE,IAAA,2CAAKE,MAAM,gBACRZ,KAAKa,UACJL,EAAA,OAAAE,IAAA,2CAAKE,MAAM,aACTJ,EAAA,UAAAE,IAAA,2CAAQI,KAAMd,KAAKa,YAIvBL,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEVd,KAAKC,YACJO,EAAA,UAAAE,IAAA,2CACEE,MAAM,eAAc,aACRZ,KAAKE,qBACjBa,QAAS,IAAMf,KAAKG,oBAEpBK,EAAA,UAAAE,IAAA,2CAAQI,KAAK,eAKnBN,EAAA,QAAAE,IAAA,2CAAMI,KAAK,uB","ignoreList":[]}

package/www/build/p-09ac8cb2.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as o,d as n}from"./p-BcDWN4F1.js";import{P as s,g as a}from"./p-DdetsoIY.js";import{a as r}from"./p-DPrEzmhI.js";import"./p-Q-tWjk7P.js";const h=()=>`:host,*{box-sizing:border-box}.z-tool{--z-tool-size:calc(var(--space-unit) * 5.5);--z-tool-icon-size:calc(var(--space-unit) * 2.5);position:relative;display:inline-flex;width:var(--z-tool-size);height:var(--z-tool-size);align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--color-surface01);border-radius:var(--border-radius);cursor:pointer}:host(:is([active],[open])) .z-tool{box-shadow:inset 0 0 0 2px var(--color-primary01)}:host([open]) .z-tool{background:var(--color-primary03)}@media (hover: hover){:host(:hover),:host(.z-tool-tooltip-open){z-index:1}:host(:not([disabled])) .z-tool:hover{background-color:var(--color-primary03)}}.z-tool:focus:focus-visible{background-color:var(--color-primary03);outline:none}z-icon{--z-icon-width:var(--z-tool-icon-size);--z-icon-height:var(--z-tool-icon-size);display:block;fill:var(--color-default-icon)}:host([disabled]) .z-tool{color:var(--color-disabled01-icon);cursor:not-allowed}:host([disabled]) z-icon{fill:var(--color-disabled01-icon)}.z-tool-tooltip{--z-tooltip-padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);--z-tooltip-shadow-filter:drop-shadow(0 4px 8px var(--shadow-color-base));position:relative;z-index:2;font-family:var(--font-family-sans);white-space:nowrap}.z-tool-submenu{z-index:3;border-radius:calc(var(--border-radius) + var(--border-size-small))}.z-tool-submenu ::slotted(z-color-picker){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}@media (max-width: 767px) and (hover: none){.z-tool-tooltip{display:none !important}}`;const l=()=>`:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}`;const f=class{constructor(i){t(this,i);this.toggleSubmenu=e(this,"toggleSubmenu",7);this.toggleTooltip=e(this,"toggleTooltip",7);this.tooltipPosition=s.TOP;this.active=false;this.disabled=false;this.open=false;this.tooltipOpen=false;this.hasSlottedContent=false;this.isMobile=false;this.hasNestedOpenTools=false;this.isNested=false;this.handleTooltipOpen=t=>{if(!this.tooltip||this.open||!this.buttonRef.contains(t.target)){return}clearTimeout(this.hoverDelay);this.hoverDelay=setTimeout((()=>{this.tooltipOpen=true}),1e3)};this.handleTooltipClose=t=>{var e;if(!this.tooltip||((e=t.relatedTarget)===null||e===void 0?void 0:e.closest("z-tooltip"))===this.tooltipRef){return}clearTimeout(this.hoverDelay);this.tooltipOpen=false};this.handleClick=()=>{if(this.disabled||!this.hasSlottedContent){return}this.open=!this.open;if(this.open){const t=this.hostElement.querySelector(":scope > z-color-picker");if(t){t.setFocus();return}const e=this.hostElement.querySelector(":scope > z-toolbar z-tool[active]:not(:disabled)")||this.hostElement.querySelector(":scope > z-toolbar z-tool:not(:disabled)");e===null||e===void 0?void 0:e.setFocus()}};this.onTooltipOpenChange=t=>{if(t.target===this.tooltipRef){return}this.tooltipOpen=t.detail.open}}handleOpenChange(){this.toggleSubmenu.emit(this.open)}handleTooltipOpenChange(){this.toggleTooltip.emit(this.tooltipOpen)}handleKeyDown(t){if(!this.open||this.hasNestedOpenTools){return}switch(t.key){case a.ESC:t.stopPropagation();this.open=false;this.setFocus();break;case a.TAB:if(t.shiftKey&&t.target.closest("z-tool:not(:scope)")===this.hostElement){this.open=false}break}}onOutsideClick(t){const e=t.composedPath()[0];if(!this.open||r(this.hostElement,e)||this.hasNestedOpenTools){return}this.open=false}onNestedToolToggle(t){if(t.target===this.hostElement){return}if(t.detail===true){this.hasNestedOpenTools=true;return}this.hasNestedOpenTools=Array.from(this.hostElement.querySelectorAll("z-tool")).some((t=>t.open))}handleColorSelected(t){if(!Array.from(this.hostElement.children).includes(t.target)){return}this.indicatorColor=t.detail;this.open=false;this.setFocus()}handleExternalFocusin(t){const e=t.target;if(!r(this.hostElement,e)){this.open=false}}async setFocus(){if(this.disabled){return}setTimeout((()=>{var t;(t=this.buttonRef)===null||t===void 0?void 0:t.focus()}),50)}async setTabIndex(t){if(!this.buttonRef){return}this.buttonRef.tabIndex=this.disabled?-1:t}async closeTooltip(){clearTimeout(this.hoverDelay);this.tooltipOpen=false}componentWillLoad(){this.hasSlottedContent=this.hostElement.children.length>0;this.isNested=!!this.hostElement.closest("z-tool:not(:scope)");this.mainToolbar=this.hostElement.closest("z-toolbar:not(z-toolbar z-toolbar)");this.hasNestedOpenTools=!!this.hostElement.querySelector("z-tool[open]");this.mql=matchMedia("(max-width: 767px)");this.onMobileViewChange=t=>this.isMobile=t.matches;this.mql.addEventListener("change",this.onMobileViewChange);this.isMobile=this.mql.matches}disconnectedCallback(){var t;clearTimeout(this.hoverDelay);(t=this.mql)===null||t===void 0?void 0:t.removeEventListener("change",this.onMobileViewChange)}render(){return i(o,{key:"e3637bd703158c99bb7d0476beb71d60c005ec3f",class:{"z-tool-tooltip-open":this.tooltipOpen}},i("button",{key:"48112a7fe05418ad573757ca5c95eee245edeebc",class:"z-tool",type:"button",ref:t=>this.buttonRef=t,"aria-pressed":this.hasSlottedContent?undefined:this.active?"true":"false","aria-expanded":this.hasSlottedContent?this.open?"true":"false":undefined,"aria-haspopup":this.hasSlottedContent?"true":undefined,"aria-label":this.htmlAriaLabel||this.tooltip||undefined,disabled:this.disabled,onClick:this.handleClick,onMouseEnter:this.handleTooltipOpen,onMouseLeave:this.handleTooltipClose,onFocus:this.handleTooltipOpen,onBlur:this.handleTooltipClose},i("z-icon",{key:"60d4061b70583558ec17de689f612792cc586543",ref:t=>this.iconRef=t,name:this.icon,indicatorColor:this.indicatorColor})),this.tooltip&&i("z-tooltip",{key:"0334200fa40f510c0580e8f3b49f6b67c60d6b94",class:"z-tool-tooltip",ref:t=>this.tooltipRef=t,bindTo:this.iconRef,open:this.tooltipOpen&&!this.open,position:this.isNested?s.BOTTOM:this.tooltipPosition,dark:true,onMouseLeave:this.handleTooltipClose,onBlur:this.handleTooltipClose,onOpenChange:this.onTooltipOpenChange},i("span",{key:"36a829ac0b6acec5bdbfc47a393e52c90499e977",class:"body-4"},this.tooltip)),this.hasSlottedContent&&i("z-popover",{key:"055469441b39c1814730c31e40736d8f4cc9182a",class:"z-tool-submenu",open:this.open,bindTo:this.isMobile&&this.mainToolbar?this.mainToolbar:this.hostElement,center:true,closable:false,position:this.isMobile?s.TOP:s.BOTTOM},i("slot",{key:"d26415aa8a3fb91dc02f71b7f0ba068c08d002d9"})))}get hostElement(){return n(this)}static get watchers(){return{open:[{handleOpenChange:0}],tooltipOpen:[{handleTooltipOpenChange:0}]}}};f.style=h()+l();export{f as z_tool};
-//# sourceMappingURL=p-09ac8cb2.entry.js.map

package/www/build/p-09ac8cb2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","typographyCss","ZTool","constructor","hostRef","this","tooltipPosition","PopoverPosition","TOP","active","disabled","open","tooltipOpen","hasSlottedContent","isMobile","hasNestedOpenTools","isNested","handleTooltipOpen","ev","tooltip","buttonRef","contains","target","clearTimeout","hoverDelay","setTimeout","handleTooltipClose","_a","relatedTarget","closest","tooltipRef","handleClick","colorPicker","hostElement","querySelector","setFocus","firstActiveOrEnabledNestedTool","onTooltipOpenChange","event","detail","handleOpenChange","toggleSubmenu","emit","handleTooltipOpenChange","toggleTooltip","handleKeyDown","key","KeyboardCode","ESC","stopPropagation","TAB","shiftKey","onOutsideClick","composedPath","containsElement","onNestedToolToggle","Array","from","querySelectorAll","some","tool","handleColorSelected","children","includes","indicatorColor","handleExternalFocusin","focus","setTabIndex","value","tabIndex","closeTooltip","componentWillLoad","length","mainToolbar","mql","matchMedia","onMobileViewChange","e","matches","addEventListener","disconnectedCallback","removeEventListener","render","h","Host","class","type","ref","el","undefined","htmlAriaLabel","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","iconRef","name","icon","bindTo","position","BOTTOM","dark","onOpenChange","center","closable"],"sources":["src/components/z-tool/styles.css?tag=z-tool&encapsulation=shadow","src/tokens/typography.css?tag=z-tool&encapsulation=shadow","src/components/z-tool/index.tsx"],"sourcesContent":[":host,\n* {\n  box-sizing: border-box;\n}\n\n.z-tool {\n  --z-tool-size: calc(var(--space-unit) * 5.5);\n  --z-tool-icon-size: calc(var(--space-unit) * 2.5);\n\n  position: relative;\n  display: inline-flex;\n  width: var(--z-tool-size);\n  height: var(--z-tool-size);\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border: none;\n  margin: 0;\n  background-color: var(--color-surface01);\n  border-radius: var(--border-radius);\n  cursor: pointer;\n}\n\n:host(:is([active], [open])) .z-tool {\n  box-shadow: inset 0 0 0 2px var(--color-primary01);\n}\n\n:host([open]) .z-tool {\n  background: var(--color-primary03);\n}\n\n@media (hover: hover) {\n  :host(:hover),\n  :host(.z-tool-tooltip-open) {\n    /* ensure any open tooltip is shown over sibling elements */\n    z-index: 1;\n  }\n\n  :host(:not([disabled])) .z-tool:hover {\n    background-color: var(--color-primary03);\n  }\n}\n\n.z-tool:focus:focus-visible {\n  background-color: var(--color-primary03);\n  outline: none;\n}\n\nz-icon {\n  --z-icon-width: var(--z-tool-icon-size);\n  --z-icon-height: var(--z-tool-icon-size);\n\n  display: block;\n  fill: var(--color-default-icon);\n}\n\n:host([disabled]) .z-tool {\n  color: var(--color-disabled01-icon);\n  cursor: not-allowed;\n}\n\n:host([disabled]) z-icon {\n  fill: var(--color-disabled01-icon);\n}\n\n.z-tool-tooltip {\n  --z-tooltip-padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n  --z-tooltip-shadow-filter: drop-shadow(0 4px 8px var(--shadow-color-base));\n\n  position: relative;\n  z-index: 2;\n  font-family: var(--font-family-sans);\n  white-space: nowrap;\n}\n\n.z-tool-submenu {\n  z-index: 3;\n  border-radius: calc(var(--border-radius) + var(--border-size-small));\n}\n\n.z-tool-submenu ::slotted(z-color-picker) {\n  border: var(--border-size-small) solid var(--color-surface03);\n  border-radius: var(--border-radius);\n}\n\n@media (max-width: 767px) and (hover: none) {\n  .z-tool-tooltip {\n    display: none !important;\n  }\n}\n",":root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {ColorPickerPalette, KeyboardCode, PopoverPosition} from \"../../beans\";\nimport {ZColorPickerCustomEvent, ZToolCustomEvent, ZTooltipCustomEvent} from \"../../components\";\nimport {IconName} from \"../../constants/iconset\";\nimport {containsElement} from \"../../utils/utils\";\n\n/**\n * ZTool component. Can display an icon, an optional tooltip (mainly for hints about the tool's functionality), and can contain a nested `z-toolbar` as a submenu that opens on click.\n * @slot - Optional slot for nested content (e.g., a secondary `z-toolbar`) that appears when the tool is open/clicked.\n */\n@Component({\n  tag: \"z-tool\",\n  styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n  shadow: true,\n})\nexport class ZTool implements ComponentInterface {\n  @Element() hostElement: HTMLZToolElement;\n\n  /** Tool icon */\n  @Prop()\n  icon: IconName;\n\n  /** Text displayed inside the tooltip. */\n  @Prop()\n  tooltip?: string;\n\n  /** Preferred tooltip position. Defaults to true. */\n  @Prop()\n  tooltipPosition: PopoverPosition = PopoverPosition.TOP;\n\n  /** Accessible label for the tool trigger. Falls back to tooltip content. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** Visual active state. */\n  @Prop({reflect: true})\n  active = false;\n\n  /** Disabled state. */\n  @Prop({reflect: true})\n  disabled = false;\n\n  /** Open state. */\n  @Prop({reflect: true, mutable: true})\n  open = false;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * The value of this prop is passed down to the `z-icon` component inside the tool.\n   *\n   * If `z-color-picker` component is used inside the tool's slot, its `colorSelected` event is listened\n   * to automatically update `indicatorColor` and change the color of the icon indicator accordingly.\n   */\n  @Prop({mutable: true})\n  indicatorColor?: string;\n\n  @State()\n  tooltipOpen = false;\n\n  @State()\n  hasSlottedContent = false;\n\n  @State()\n  isMobile = false;\n\n  /** Indicates if the tool has nested open tools. Used to decide whether to auto-close the submenu. */\n  @State()\n  hasNestedOpenTools = false;\n\n  /** Emitted when the open state changes. */\n  @Event()\n  toggleSubmenu: EventEmitter;\n\n  /** Emitted when the tooltip open state changes. */\n  @Event()\n  toggleTooltip: EventEmitter;\n\n  private buttonRef?: HTMLButtonElement;\n\n  private iconRef?: HTMLElement;\n\n  private tooltipRef?: HTMLZTooltipElement;\n\n  private hoverDelay?: ReturnType<typeof setTimeout>;\n\n  /** Indicates if the tool is nested inside another tool. */\n  private isNested = false;\n\n  /** Main `z-toolbar` ancestor element, meant to be the top-level toolbar not nested inside another tool. */\n  private mainToolbar?: HTMLZToolbarElement;\n\n  /** Media query list for detecting mobile view. */\n  private mql?: MediaQueryList;\n\n  /** Listener for changes in the mobile view media query. */\n  private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n  /**\n   * Opens the tooltip with a delay when the button is hovered or focused, and if the tool's content isn't already visible.\n   */\n  private handleTooltipOpen = (ev: FocusEvent | MouseEvent): void => {\n    if (!this.tooltip || this.open || !this.buttonRef.contains(ev.target as Node)) {\n      return;\n    }\n\n    clearTimeout(this.hoverDelay);\n    this.hoverDelay = setTimeout(() => {\n      this.tooltipOpen = true;\n    }, 1000);\n  };\n\n  /**\n   * Closes the tooltip immediately on button blur or when the mouse leaves the button or the tooltip, clearing any pending hover delay.\n   */\n  private handleTooltipClose = (ev: FocusEvent | MouseEvent): void => {\n    if (!this.tooltip || (ev.relatedTarget as HTMLElement)?.closest(\"z-tooltip\") === this.tooltipRef) {\n      return;\n    }\n\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  };\n\n  /**\n   * Handles click events on the tool's button element.\n   * If the tool has slotted content, toggles the open state and focuses the active/selected item in the nested toolbar or color picker,\n   * or the first item if no active/selected item is found.\n   */\n  private handleClick = (): void => {\n    if (this.disabled || !this.hasSlottedContent) {\n      return;\n    }\n\n    this.open = !this.open;\n    if (this.open) {\n      const colorPicker = this.hostElement.querySelector(\":scope > z-color-picker\") as HTMLZColorPickerElement | null;\n      if (colorPicker) {\n        colorPicker.setFocus();\n\n        return;\n      }\n\n      // Focus the first active tool in the nested toolbar, or the first enabled if no active tool is found.\n      const firstActiveOrEnabledNestedTool = (this.hostElement.querySelector(\n        \":scope > z-toolbar z-tool[active]:not(:disabled)\"\n      ) || this.hostElement.querySelector(\":scope > z-toolbar z-tool:not(:disabled)\")) as HTMLZToolElement | null;\n\n      firstActiveOrEnabledNestedTool?.setFocus();\n    }\n  };\n\n  /**\n   * Handles `openChange` events from the tooltip popover to keep the `tooltipOpen` state in sync, but only if the event is coming from this tool's tooltip (and not from nested tools' tooltips).\n   */\n  private onTooltipOpenChange = (event: ZTooltipCustomEvent<{open: boolean}>): void => {\n    if ((event.target as HTMLElement) === this.tooltipRef) {\n      return;\n    }\n\n    this.tooltipOpen = event.detail.open;\n  };\n\n  @Watch(\"open\")\n  handleOpenChange(): void {\n    this.toggleSubmenu.emit(this.open);\n  }\n\n  @Watch(\"tooltipOpen\")\n  handleTooltipOpenChange(): void {\n    this.toggleTooltip.emit(this.tooltipOpen);\n  }\n\n  /**\n   * Handle `ESC` and `shift+TAB` to close the submenu and move focus back to the button.\n   */\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    if (!this.open || this.hasNestedOpenTools) {\n      return;\n    }\n\n    switch (event.key) {\n      case KeyboardCode.ESC:\n        event.stopPropagation();\n        this.open = false;\n        this.setFocus();\n        break;\n      case KeyboardCode.TAB:\n        if (event.shiftKey && (event.target as Element).closest(\"z-tool:not(:scope)\") === this.hostElement) {\n          this.open = false;\n        }\n        break;\n    }\n  }\n\n  /**\n   * Close the popover on clicks outside the component, only if there are no nested open tools.\n   * In that case any outside click should close the nested submenu(s) first.\n   */\n  @Listen(\"click\", {target: \"body\"})\n  onOutsideClick(event: MouseEvent): void {\n    const target = event.composedPath()[0] as HTMLElement;\n    if (!this.open || containsElement(this.hostElement, target) || this.hasNestedOpenTools) {\n      return;\n    }\n\n    this.open = false;\n  }\n\n  @Listen(\"toggleSubmenu\")\n  onNestedToolToggle(ev: ZToolCustomEvent<boolean>): void {\n    if (ev.target === this.hostElement) {\n      return;\n    }\n\n    if (ev.detail === true) {\n      this.hasNestedOpenTools = true;\n\n      return;\n    }\n\n    this.hasNestedOpenTools = Array.from(this.hostElement.querySelectorAll(\"z-tool\")).some((tool) => tool.open);\n  }\n\n  /**\n   * Handles the `colorSelected` event from a nested `z-color-picker` component.\n   * Updates the `indicatorColor` and closes the tool's popover.\n   */\n  @Listen(\"colorSelected\")\n  handleColorSelected(event: ZColorPickerCustomEvent<ColorPickerPalette>): void {\n    if (!Array.from(this.hostElement.children).includes(event.target as Element)) {\n      return;\n    }\n\n    this.indicatorColor = event.detail;\n    this.open = false;\n    this.setFocus();\n  }\n\n  /**\n   * Close the submenu when focus moves outside the tool.\n   */\n  @Listen(\"focusin\", {target: \"body\", passive: true})\n  handleExternalFocusin(ev: FocusEvent): void {\n    const target = ev.target as Node;\n    if (!containsElement(this.hostElement, target)) {\n      this.open = false;\n    }\n  }\n\n  /** Focuses the tool's button element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.disabled) {\n      return;\n    }\n\n    setTimeout(() => {\n      this.buttonRef?.focus();\n    }, 50);\n  }\n\n  /** Sets the tab index of the tool's internal button element. */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    if (!this.buttonRef) {\n      return;\n    }\n\n    this.buttonRef.tabIndex = this.disabled ? -1 : value;\n  }\n\n  /** Closes the tooltip. */\n  @Method()\n  async closeTooltip(): Promise<void> {\n    clearTimeout(this.hoverDelay);\n    this.tooltipOpen = false;\n  }\n\n  componentWillLoad(): void {\n    this.hasSlottedContent = this.hostElement.children.length > 0;\n    this.isNested = !!this.hostElement.closest(\"z-tool:not(:scope)\");\n    this.mainToolbar = this.hostElement.closest(\"z-toolbar:not(z-toolbar z-toolbar)\");\n    this.hasNestedOpenTools = !!this.hostElement.querySelector(\"z-tool[open]\");\n\n    this.mql = matchMedia(\"(max-width: 767px)\");\n    this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n    this.mql.addEventListener(\"change\", this.onMobileViewChange);\n    this.isMobile = this.mql.matches;\n  }\n\n  disconnectedCallback(): void {\n    clearTimeout(this.hoverDelay);\n    this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n  }\n\n  render(): HTMLZToolElement {\n    return (\n      <Host class={{\"z-tool-tooltip-open\": this.tooltipOpen}}>\n        <button\n          class=\"z-tool\"\n          type=\"button\"\n          ref={(el) => (this.buttonRef = el)}\n          aria-pressed={this.hasSlottedContent ? undefined : this.active ? \"true\" : \"false\"}\n          aria-expanded={this.hasSlottedContent ? (this.open ? \"true\" : \"false\") : undefined}\n          aria-haspopup={this.hasSlottedContent ? \"true\" : undefined}\n          aria-label={this.htmlAriaLabel || this.tooltip || undefined}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          onMouseEnter={this.handleTooltipOpen}\n          onMouseLeave={this.handleTooltipClose}\n          onFocus={this.handleTooltipOpen}\n          onBlur={this.handleTooltipClose}\n        >\n          <z-icon\n            ref={(el) => (this.iconRef = el)}\n            name={this.icon}\n            indicatorColor={this.indicatorColor}\n          ></z-icon>\n        </button>\n        {this.tooltip && (\n          <z-tooltip\n            class=\"z-tool-tooltip\"\n            ref={(el) => (this.tooltipRef = el)}\n            bindTo={this.iconRef}\n            open={this.tooltipOpen && !this.open}\n            position={this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition}\n            dark\n            onMouseLeave={this.handleTooltipClose}\n            onBlur={this.handleTooltipClose}\n            onOpenChange={this.onTooltipOpenChange}\n          >\n            <span class=\"body-4\">{this.tooltip}</span>\n          </z-tooltip>\n        )}\n        {this.hasSlottedContent && (\n          <z-popover\n            class=\"z-tool-submenu\"\n            open={this.open}\n            bindTo={this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement}\n            center\n            /* disable auto-close to prevent unwanted close behaviors on mobile,\n            when the bound element is the main toolbar */\n            closable={false}\n            position={this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM}\n          >\n            <slot></slot>\n          </z-popover>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/www/build/p-10ffee06.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as i,H as l,d as n}from"./p-BcDWN4F1.js";import{g as s}from"./p-DdetsoIY.js";const r=()=>`: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 a=class{constructor(i){e(this,i);this.treeItemClicked=t(this,"treeItemClicked",7);this.items=[];this.parsedItems=[]}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,r;this.htmlTag=e.url?"a":"span";const a=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))),((r=e.children)===null||r===void 0?void 0:r.length)>0&&i("z-list",{role:"group"},i("div",{class:"children-node"},e.children.map(((e,t)=>this.renderTreeList(e,`${t}`,l+1))))));return a}render(){const e=this.parsedItems.some((e=>!!e.url));return i(l,{key:"8bc473fe54ef8e0cea9e2deeb85cc798a9201482",class:"tree-list",role:e?"navigation":"none","aria-hidden":e?undefined:"true","aria-labelledby":this.htmlAriaLabelledby},i("div",{key:"da18ff5c34d384aa37ef1edbdb242a3f572f471b",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:0}]}}};a.style=r();export{a as z_tree_list};
-//# sourceMappingURL=p-10ffee06.entry.js.map

package/www/build/p-10ffee06.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZTreeList","constructor","hostRef","this","items","parsedItems","watchItems","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, ComponentInterface, 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 implements ComponentInterface {\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-13bc7433.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as r}from"./p-BcDWN4F1.js";const o=()=>`:host{display:block;box-sizing:border-box}`;const a=()=>`z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;const l=class{constructor(e){t(this,e)}render(){return e(r,{key:"9cae384882eb06e5e0ec93393ac6849e22da48c5",role:"rowgroup"},e("slot",{key:"64c4e7e784638e3f7319783429b29f1e2a38b584"}))}};l.style=o()+a();export{l as z_tbody};
-//# sourceMappingURL=p-13bc7433.entry.js.map

package/www/build/p-13bc7433.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZTbody","render","h","Host","key","role"],"sources":["src/components/deprecated/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-tbody&encapsulation=shadow","src/components/deprecated/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrls: [\"styles.css\", \"../../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTbody implements ComponentInterface {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,IAAM,6CCAxB,MAAMA,EAAY,IAAM,6sD,MCWXC,EAAM,M,yBACjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/www/build/p-16423e69.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as o,h as e,H as i}from"./p-BcDWN4F1.js";const n=()=>`:host{--z-notification--top-offset:0;--z-notification--content-max-width:100%;display:block;width:100%}.main-container{display:flex;max-width:var(--z-notification--content-max-width);align-items:flex-start;padding:calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));margin:0 auto;background-color:transparent;font-family:var(--font-family-sans)}:host([sticky]){position:sticky;top:var(--z-notification--top-offset)}:host([sticky]),:host([showshadow]){box-shadow:var(--shadow-3)}:host([type="success"]){background:var(--color-inverse-success)}:host([type="warning"]){background:var(--color-inverse-warning)}:host([type="error"]){background:var(--color-inverse-error)}.status-icon,.close-button{display:flex;height:20px;align-items:center}:host([type="success"]) .status-icon{fill:var(--color-default-success)}:host([type="warning"]) .status-icon{fill:var(--color-default-warning)}:host([type="error"]) .status-icon{fill:var(--color-default-error)}:host([borderposition="bottom"]){border-bottom:var(--border-size-medium) solid var(--color-surface03)}:host([borderposition="top"]){border-top:var(--border-size-medium) solid var(--color-surface03)}button{padding:0;border:none;margin:0;background:transparent;cursor:pointer;font-family:inherit}.status-icon+.content-container{margin-left:var(--space-unit)}.content-container{display:flex;flex:1 auto;flex-wrap:wrap;align-items:baseline;justify-content:space-between;row-gap:calc(var(--space-unit) * 2)}.content-text{width:100%;color:var(--color-default-text);font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.action-button{color:var(--color-primary01);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:1.333;outline:none}.action-button:focus-visible{box-shadow:var(--shadow-focus-primary)}.content-container+.close-button{margin-left:calc(var(--space-unit) * 2)}.close-button z-icon{fill:var(--color-primary01)}@media (min-width: 768px){.content-container{flex-wrap:nowrap}.content-text+.action-button{margin-left:calc(var(--space-unit) * 5)}}`;const a=class{handleActionButtonClick(t){t.preventDefault();this.notificationAction.emit()}handleCloseButtonClick(t){t.preventDefault();this.notificationClose.emit()}constructor(e){t(this,e);this.notificationAction=o(this,"notificationAction",7);this.notificationClose=o(this,"notificationClose",7);this.showclose=false;this.showshadow=false;this.sticky=false;this.borderposition="bottom";this.handleActionButtonClick=this.handleActionButtonClick.bind(this);this.handleCloseButtonClick=this.handleCloseButtonClick.bind(this)}render(){var t;return e(i,{key:"4fd2f22c56fba4e7809d407dcbd16cefab495c04"},e("div",{key:"cfe35b1852e3e203efe9e02f1b77d61e0d41db9a",class:"main-container"},this.contenticonname&&e("z-icon",{key:"3ce7c0d1206305eed36ff96459842d2748293ae9",class:"status-icon",name:this.contenticonname,width:16,height:16}),e("div",{key:"c80079713e7df578506dc269473562034c5d1f5b",class:"content-container"},e("div",{key:"f58d8522ee597abc370199362715fb3a294e7d03",class:"content-text"},e("slot",{key:"c3c5bfefeb9808ed5446b25df3bb79e5ed715e97"})),!!((t=this.actiontext)===null||t===void 0?void 0:t.trim())&&e("button",{key:"6d41c5e0273debff7f5d2beca0b5a0e9b31e6c8a",class:"action-button",type:"button",onClick:this.handleActionButtonClick},this.actiontext)),this.showclose&&e("button",{key:"7eb5261947cadf3264eb71f731ee27b86b660285",class:"close-button",type:"button",onClick:this.handleCloseButtonClick},e("z-icon",{key:"4113a60cd35f6ba083f1abce5cc46856871cc312",name:"multiply-circle",width:16,height:16}))))}};a.style=n();export{a as z_notification};
-//# sourceMappingURL=p-16423e69.entry.js.map

package/www/build/p-16423e69.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stylesCss","ZNotification","handleActionButtonClick","e","preventDefault","this","notificationAction","emit","handleCloseButtonClick","notificationClose","constructor","hostRef","showclose","showshadow","sticky","borderposition","bind","render","h","Host","key","class","contenticonname","name","width","height","_a","actiontext","trim","type","onClick"],"sources":["src/components/z-notification/styles.css?tag=z-notification&encapsulation=shadow","src/components/z-notification/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-notification--top-offset: The top offset of the notification. Use it when `sticky` prop is set to `true` and you need the notification to stay under other sticky elements. Default: 0px.\n   * @prop --z-notification--content-max-width: The max width of the notification content. Useful to align the content with other elements on the page, keeping the colored background full width. Default: 100%. Note: the content is automatically centered, so if you want to limit the width only for the slotted content, you can wrap it in a container with the desired width and leave the `z-notification` width to 100%.\n   * @prop --z-notification--inline-padding: The inline padding of the notification content. It can be useful to align the content when the `--z-notification--content-max-width` is set. Default: calc(var(--space-unit) * 2).\n   */\n  --z-notification--top-offset: 0;\n  --z-notification--content-max-width: 100%;\n  --z-notification--inline-padding: ;\n\n  display: block;\n  width: 100%;\n}\n\n.main-container {\n  display: flex;\n  max-width: var(--z-notification--content-max-width);\n  align-items: flex-start;\n  padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));\n  margin: 0 auto;\n  background-color: transparent;\n  font-family: var(--font-family-sans);\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--z-notification--top-offset);\n}\n\n:host([sticky]),\n:host([showshadow]) {\n  box-shadow: var(--shadow-3);\n}\n\n:host([type=\"success\"]) {\n  background: var(--color-inverse-success);\n}\n\n:host([type=\"warning\"]) {\n  background: var(--color-inverse-warning);\n}\n\n:host([type=\"error\"]) {\n  background: var(--color-inverse-error);\n}\n\n.status-icon,\n.close-button {\n  /* simulate the line-height of the text\n  to make the icon look correctly aligned with it. */\n  display: flex;\n  height: 20px;\n  align-items: center;\n}\n\n:host([type=\"success\"]) .status-icon {\n  fill: var(--color-default-success);\n}\n\n:host([type=\"warning\"]) .status-icon {\n  fill: var(--color-default-warning);\n}\n\n:host([type=\"error\"]) .status-icon {\n  fill: var(--color-default-error);\n}\n\n:host([borderposition=\"bottom\"]) {\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\n:host([borderposition=\"top\"]) {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n}\n\nbutton {\n  padding: 0;\n  border: none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n  font-family: inherit;\n}\n\n.status-icon + .content-container {\n  margin-left: var(--space-unit);\n}\n\n.content-container {\n  display: flex;\n  flex: 1 auto;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  row-gap: calc(var(--space-unit) * 2);\n}\n\n.content-text {\n  width: 100%;\n  color: var(--color-default-text);\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.action-button {\n  color: var(--color-primary01);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n  outline: none;\n}\n\n.action-button:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n.content-container + .close-button {\n  margin-left: calc(var(--space-unit) * 2);\n}\n\n.close-button z-icon {\n  fill: var(--color-primary01);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .content-container {\n    flex-wrap: nowrap;\n  }\n\n  .content-text + .action-button {\n    margin-left: calc(var(--space-unit) * 5);\n  }\n}\n","import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {NotificationType} from \"../../beans\";\n\n/**\n * Notification bar component.\n * @slot - The text of the notification.\n */\n@Component({\n  tag: \"z-notification\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZNotification implements ComponentInterface {\n  /** Name of the icon on the left of the content */\n  @Prop()\n  contenticonname?: string;\n\n  /** Action button text */\n  @Prop()\n  actiontext?: string;\n\n  /** Alert variant type */\n  @Prop({reflect: true})\n  type: NotificationType;\n\n  /** Enable close icon */\n  @Prop()\n  showclose?: boolean = false;\n\n  /**\n   * Enable shadow.\n   * @deprecated shadow is available only for the `sticky` version of the notification.\n   */\n  @Prop({reflect: true})\n  showshadow?: boolean = false;\n\n  /** Enable sticky notification bar. */\n  @Prop({reflect: true})\n  sticky?: boolean = false;\n\n  /** Border position */\n  @Prop({reflect: true})\n  borderposition?: \"top\" | \"bottom\" = \"bottom\";\n\n  /** Call to action clicked */\n  @Event()\n  notificationAction: EventEmitter;\n\n  private handleActionButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationAction.emit();\n  }\n\n  /** Close button clicked */\n  @Event()\n  notificationClose: EventEmitter;\n\n  private handleCloseButtonClick(e: MouseEvent): void {\n    e.preventDefault();\n    this.notificationClose.emit();\n  }\n\n  constructor() {\n    this.handleActionButtonClick = this.handleActionButtonClick.bind(this);\n    this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);\n  }\n\n  render(): HTMLZNotificationElement {\n    return (\n      <Host>\n        <div class=\"main-container\">\n          {this.contenticonname && (\n            <z-icon\n              class=\"status-icon\"\n              name={this.contenticonname}\n              width={16}\n              height={16}\n            />\n          )}\n          <div class=\"content-container\">\n            <div class=\"content-text\">\n              <slot></slot>\n            </div>\n            {!!this.actiontext?.trim() && (\n              <button\n                class=\"action-button\"\n                type=\"button\"\n                onClick={this.handleActionButtonClick}\n              >\n                {this.actiontext}\n              </button>\n            )}\n          </div>\n          {this.showclose && (\n            <button\n              class=\"close-button\"\n              type=\"button\"\n              onClick={this.handleCloseButtonClick}\n            >\n              <z-icon\n                name=\"multiply-circle\"\n                width={16}\n                height={16}\n              />\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,IAAM,wkE,MCYXC,EAAa,MAoChB,uBAAAC,CAAwBC,GAC9BA,EAAEC,iBACFC,KAAKC,mBAAmBC,M,CAOlB,sBAAAC,CAAuBL,GAC7BA,EAAEC,iBACFC,KAAKI,kBAAkBF,M,CAGzB,WAAAG,CAAAC,G,sHAnCAN,KAAAO,UAAsB,MAOtBP,KAAAQ,WAAuB,MAIvBR,KAAAS,OAAmB,MAInBT,KAAAU,eAAoC,SAqBlCV,KAAKH,wBAA0BG,KAAKH,wBAAwBc,KAAKX,MACjEA,KAAKG,uBAAyBH,KAAKG,uBAAuBQ,KAAKX,KAChE,CAED,MAAAY,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACRhB,KAAKiB,iBACJJ,EAAA,UAAAE,IAAA,2CACEC,MAAM,cACNE,KAAMlB,KAAKiB,gBACXE,MAAO,GACPC,OAAQ,KAGZP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,QAAAE,IAAA,kDAECM,EAAArB,KAAKsB,cAAU,MAAAD,SAAA,SAAAA,EAAEE,SAClBV,EAAA,UAAAE,IAAA,2CACEC,MAAM,gBACNQ,KAAK,SACLC,QAASzB,KAAKH,yBAEbG,KAAKsB,aAIXtB,KAAKO,WACJM,EAAA,UAAAE,IAAA,2CACEC,MAAM,eACNQ,KAAK,SACLC,QAASzB,KAAKG,wBAEdU,EAAA,UAAAE,IAAA,2CACEG,KAAK,kBACLC,MAAO,GACPC,OAAQ,O","ignoreList":[]}

package/www/build/p-1702efd5.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,d as i}from"./p-BcDWN4F1.js";import{e as l,g as c,i as r,l as n}from"./p-DdetsoIY.js";import{r as a,e as o,b as h,d,f as z,i as p}from"./p-DPrEzmhI.js";import"./p-Q-tWjk7P.js";const u=()=>`.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 m=class{constructor(s){e(this,s);this.optionSelect=t(this,"optionSelect",7);this.resetSelect=t(this,"resetSelect",7);this.htmlid=`id-${a()}`;this.disabled=false;this.readonly=false;this.required=false;this.message=true;this.autocomplete=false;this.noresultslabel="Nessun risultato";this.isfixed=false;this.size=l.BIG;this.isOpen=false;this.selectedItem=null;this.itemsList=[];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?o(`${e.id}`):o(`${e.name}`)}`}getResetOptionId(){return`${this.htmlid}_key_reset`}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:h(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:h(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 d(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.itemsList.find((e=>this.getOptionId(e)===this.focusedItemId))||null;if(e){this.selectedItem=e;this.emitOptionSelect();this.toggleSelectUl()}}}else if(!this.hasAutocomplete()){e.preventDefault();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(!p(t).find((e=>e.nodeName.toLowerCase()==="z-input"&&e.id===`${this.htmlid}_input`))){const e=p(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=h(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",htmlAriaLabel:this.htmlAriaLabel||undefined,icon:this.isOpen?"caret-up":"caret-down",hasclearicon:false,message:false,name:this.name,disabled:this.disabled,readonly:this.readonly||!this.hasAutocomplete()&&this.isOpen,required:this.required,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.htmlAriaLabel||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:n.ELEMENT,role:e?"presentation":"option",htmlTabindex:this.isOpen?0:null,"aria-selected":"false","aria-label":e?undefined:this.resetItem,id:this.getResetOptionId(),size:this.hasTreeItems?r.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?n.HEADER:n.ELEMENT,role:e.disabled?"presentation":"option",htmlTabindex:-1,"aria-selected":e.selected?"true":"false","aria-label":e.disabled?undefined:h(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 r.NONE}if(this.size===l.SMALL||this.size===l.X_SMALL){return r.SMALL}return r.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 r,a;const o=e.disabled||c;const d=this.hasGroupItems?undefined:this.hasGroupItems?t&&!i?n.ELEMENT:undefined:l&&i&&!t?n.ELEMENT:undefined;return s("z-list-element",{clickable:!e.disabled,disabled:o,class:{"grouped-tree-parent-node":this.hasGroupItems&&!!((r=e.children)===null||r===void 0?void 0:r.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,htmlTabindex:null,role:"presentation"},s("div",{id:this.getOptionId(e),role:o?"presentation":"option","aria-label":o?undefined:h(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,o))))):null)}renderGroupedTree(){const e=this.getGroupedItems();return e.map((([t,i],l,c)=>{const r=Object.values(e).some((e=>e.length>1));return s("z-list-group",{"divider-type":l===c.length-1?undefined:n.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,r,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":n.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?r.MEDIUM:this.listSizeType(),htmlTabindex:null,role:"presentation"},this.noresultslabel)}renderMessage(){if(d(this.message)===false){return}return s("z-input-message",{message:d(this.message)===true?undefined:this.message,status:this.status,class:this.size,disabled:this.disabled})}render(){return s("div",{key:"47cc6b51d4eb4ac1df4a67fc592672a43a30e27b",class:"select-wrapper"},this.renderInput(),this.renderSelectUl(),this.renderMessage())}get host(){return i(this)}static get watchers(){return{items:[{watchItems:0}]}}};m.style=u();export{m as z_select};
-//# sourceMappingURL=p-1702efd5.entry.js.map