@zanichelli/albe-web-components 20.0.2 → 21.0.0-RC2

package/dist/components/z-tree-list.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZTreeList","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","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":"mSAAA,MAAMA,EAAY,IAAM,i3E,MCQXC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,mHAUEC,KAAAC,MAAiC,GAczBD,KAAAE,YAA8B,EA4LvC,CAvLC,UAAAC,GACEH,KAAKE,mBAAqBF,KAAKC,QAAU,SAAWG,KAAKC,MAAML,KAAKC,OAASD,KAAKC,K,CAGpF,iBAAAK,GACEN,KAAKG,Y,CAGC,WAAAI,CAAYC,GAClBR,KAAKS,gBAAgBC,KAAK,CAACC,GAAIH,EAAKG,GAAIC,KAAMJ,EAAKI,KAAMC,IAAKL,EAAKK,K,CAG7D,oBAAAC,GACN,OAAOC,MAAMC,KAAKhB,KAAKiB,KAAKC,WAAWC,iBAAiB,mB,CAGlD,WAAAC,CAAYC,EAAsBC,GACxC,IAAIC,EAA+BF,EAEnC,IAAK,IAAIG,EAAI,EAAGA,EAAIF,EAAQE,IAAK,CAC/BD,EAAWA,IAAQ,MAARA,SAAQ,SAARA,EAAUE,cACrB,IAAKF,EAAU,CACb,M,EAIJ,OAAOA,C,CAGD,cAAAG,CAAeC,GACrB,GAAIA,EAAMC,OAASC,EAAaC,IAAK,CACnCH,EAAMI,iBAEN,M,CAGF,MAAMC,EAAoBhC,KAAKc,uBAC/B,MAAMmB,EAAeD,EAAkBE,QAAQP,EAAMQ,QAErD,GAAIF,KAAiB,EAAI,CACvB,M,CAGF,GAAIN,EAAMC,OAASC,EAAaO,YAAcT,EAAMC,OAASC,EAAaQ,SAAU,CAClFV,EAAMI,iBAEN,MAAMO,EAAYL,GAAgBN,EAAMC,OAASC,EAAaO,WAAa,GAAI,GAC/E,GAAIE,EAAY,GAAKA,GAAaN,EAAkBO,OAAQ,CAC1D,M,CAGFP,EAAkBM,GAAWE,O,CAG/B,GAAIb,EAAMC,OAASC,EAAaY,WAAY,CAC1Cd,EAAMI,iBACN,MAAMR,EAAWvB,KAAKoB,YAAYY,EAAkBC,GAAe,GAEnE,IACGV,IACAA,EAASmB,SAAS,IAClBnB,EAASmB,SAAS,GAAGC,QAAQC,gBAAkB,KAAOrB,EAASsB,aAAa,cAAgB,KAC7F,CACA,M,CAGDtB,EAASmB,SAAS,GAAmBF,O,CAGxC,GAAIb,EAAMC,OAASC,EAAaiB,YAAa,CAC3CnB,EAAMI,iBAEN,MAAMgB,EAAapB,EAAMQ,OAAuBa,QAAQ,kBAExD,IAAKD,EAAW,CACd,M,CAGF,MAAME,EAAoBF,EAAUG,cAAc,UAElD,IAAKD,EAAmB,CACtB,M,CAGF,MAAME,EAAaF,EAAkBC,cAAc,mBAEnD,IAAKC,EAAY,CACf,M,CAGFA,EAAWX,O,EAIP,cAAAY,CAAe5C,EAAoB6C,EAAaC,EAAQ,G,QAC9DtD,KAAKuD,QAAU/C,EAAKK,IAAM,IAAM,OAEhC,MAAM2C,EACJC,EAAA,kBACE9C,GAAI0C,EACJK,OAAQlD,EAAKmD,KAAO,cAAgB,GACpCC,UAAWC,QAAQrD,EAAKK,KACxBiD,aAAc,KACdC,KAAK,OAAM,cACEC,WAEbP,EAACzD,KAAKuD,QAAO,CACXG,MAAO,CACL,eAAgB,KAChB,SAAUG,QAAQrD,EAAKK,KACvB,iBAAkBgD,QAAQrD,EAAKK,MAEjCoD,SAAUzD,EAAKK,IAAM,GAAI,EACzBqD,QAAS,IAAMlE,KAAKO,YAAYC,GAChC2D,QAAUxC,IACR,GAAIA,EAAMC,OAASC,EAAauC,OAASzC,EAAMC,OAASC,EAAawC,MAAO,CAC1ErE,KAAKO,YAAYC,E,GAGrB8D,UAAY3C,GAAyB3B,KAAK0B,eAAeC,GACzDoC,KAAMvD,EAAKK,IAAM,WAAamD,UAAS,cAC1BxD,EAAKK,IAAMmD,UAAY,OAAM,kBAC3BO,EAAA/D,EAAKkC,YAAQ,MAAA6B,SAAA,SAAAA,EAAEhC,QAAS,GAAK,KAAI,aACpCe,EAAK,aACL9C,EAAKI,KACjB4D,KAAMhE,EAAKK,KAEX4C,EAAA,QAAMC,MAAM,iBACTlD,EAAKmD,MACJF,EAAA,UACEgB,MAAO,GACPC,OAAQ,GACRC,KAAMnE,EAAKK,IAAM,kBAAoB,qBACrC6C,MAAM,YACN9C,KAAMJ,EAAKmD,OAGfF,EAAA,QACEC,MAAO,CACL,aAAc,KACd,iBAAkBlD,EAAKmD,KACvB,YAAanD,EAAKoE,MAEpBC,MAAOrE,EAAKI,MAEXJ,EAAKI,UAIXkE,EAAAtE,EAAKkC,YAAQ,MAAAoC,SAAA,SAAAA,EAAEvC,QAAS,GACvBkB,EAAA,UAAQM,KAAK,SACXN,EAAA,OAAKC,MAAM,iBACRlD,EAAKkC,SAASqC,KAAI,CAACC,EAAO3B,IAAQrD,KAAKoD,eAAe4B,EAAO,GAAG3B,IAAOC,EAAQ,QAO1F,OAAOE,C,CAGT,MAAAyB,GACE,MAAMC,EAAoBlF,KAAKE,YAAYiF,MAAM3E,KAAWA,EAAKK,MAEjE,OACE4C,EAAC2B,EAAI,CAAA/B,IAAA,2CACHK,MAAM,YACNK,KAAMmB,EAAoB,aAAe,OAAM,cAClCA,EAAoBlB,UAAY,OAAM,kBAClChE,KAAKqF,oBAEtB5B,EAAA,OAAAJ,IAAA,2CACEY,UAAU,EACVF,KAAMmB,EAAoB,OAAS,OAAM,cAC5BA,EAAoBlB,UAAY,OAAM,aACvChE,KAAKsF,kBAEhBtF,KAAKE,YAAY6E,KAAI,CAACvE,EAAM6C,IAAQrD,KAAKoD,eAAe5C,EAAM,GAAG6C,Q","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZTreeList","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","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":"sPAAA,MAAMA,EAAY,IAAM,i3E,MCQXC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,mHAUEC,KAAAC,MAAiC,GAczBD,KAAAE,YAA8B,EA4LvC,CAvLC,UAAAC,GACEH,KAAKE,mBAAqBF,KAAKC,QAAU,SAAWG,KAAKC,MAAML,KAAKC,OAASD,KAAKC,K,CAGpF,iBAAAK,GACEN,KAAKG,Y,CAGC,WAAAI,CAAYC,GAClBR,KAAKS,gBAAgBC,KAAK,CAACC,GAAIH,EAAKG,GAAIC,KAAMJ,EAAKI,KAAMC,IAAKL,EAAKK,K,CAG7D,oBAAAC,GACN,OAAOC,MAAMC,KAAKhB,KAAKiB,KAAKC,WAAWC,iBAAiB,mB,CAGlD,WAAAC,CAAYC,EAAsBC,GACxC,IAAIC,EAA+BF,EAEnC,IAAK,IAAIG,EAAI,EAAGA,EAAIF,EAAQE,IAAK,CAC/BD,EAAWA,IAAQ,MAARA,SAAQ,SAARA,EAAUE,cACrB,IAAKF,EAAU,CACb,M,EAIJ,OAAOA,C,CAGD,cAAAG,CAAeC,GACrB,GAAIA,EAAMC,OAASC,EAAaC,IAAK,CACnCH,EAAMI,iBAEN,M,CAGF,MAAMC,EAAoBhC,KAAKc,uBAC/B,MAAMmB,EAAeD,EAAkBE,QAAQP,EAAMQ,QAErD,GAAIF,KAAiB,EAAI,CACvB,M,CAGF,GAAIN,EAAMC,OAASC,EAAaO,YAAcT,EAAMC,OAASC,EAAaQ,SAAU,CAClFV,EAAMI,iBAEN,MAAMO,EAAYL,GAAgBN,EAAMC,OAASC,EAAaO,WAAa,GAAI,GAC/E,GAAIE,EAAY,GAAKA,GAAaN,EAAkBO,OAAQ,CAC1D,M,CAGFP,EAAkBM,GAAWE,O,CAG/B,GAAIb,EAAMC,OAASC,EAAaY,WAAY,CAC1Cd,EAAMI,iBACN,MAAMR,EAAWvB,KAAKoB,YAAYY,EAAkBC,GAAe,GAEnE,IACGV,IACAA,EAASmB,SAAS,IAClBnB,EAASmB,SAAS,GAAGC,QAAQC,gBAAkB,KAAOrB,EAASsB,aAAa,cAAgB,KAC7F,CACA,M,CAGDtB,EAASmB,SAAS,GAAmBF,O,CAGxC,GAAIb,EAAMC,OAASC,EAAaiB,YAAa,CAC3CnB,EAAMI,iBAEN,MAAMgB,EAAapB,EAAMQ,OAAuBa,QAAQ,kBAExD,IAAKD,EAAW,CACd,M,CAGF,MAAME,EAAoBF,EAAUG,cAAc,UAElD,IAAKD,EAAmB,CACtB,M,CAGF,MAAME,EAAaF,EAAkBC,cAAc,mBAEnD,IAAKC,EAAY,CACf,M,CAGFA,EAAWX,O,EAIP,cAAAY,CAAe5C,EAAoB6C,EAAaC,EAAQ,G,QAC9DtD,KAAKuD,QAAU/C,EAAKK,IAAM,IAAM,OAEhC,MAAM2C,EACJC,EAAA,kBACE9C,GAAI0C,EACJK,OAAQlD,EAAKmD,KAAO,cAAgB,GACpCC,UAAWC,QAAQrD,EAAKK,KACxBiD,aAAc,KACdC,KAAK,OAAM,cACEC,WAEbP,EAACzD,KAAKuD,QAAO,CACXG,MAAO,CACL,eAAgB,KAChB,SAAUG,QAAQrD,EAAKK,KACvB,iBAAkBgD,QAAQrD,EAAKK,MAEjCoD,SAAUzD,EAAKK,IAAM,GAAI,EACzBqD,QAAS,IAAMlE,KAAKO,YAAYC,GAChC2D,QAAUxC,IACR,GAAIA,EAAMC,OAASC,EAAauC,OAASzC,EAAMC,OAASC,EAAawC,MAAO,CAC1ErE,KAAKO,YAAYC,E,GAGrB8D,UAAY3C,GAAyB3B,KAAK0B,eAAeC,GACzDoC,KAAMvD,EAAKK,IAAM,WAAamD,UAAS,cAC1BxD,EAAKK,IAAMmD,UAAY,OAAM,kBAC3BO,EAAA/D,EAAKkC,YAAQ,MAAA6B,SAAA,SAAAA,EAAEhC,QAAS,GAAK,KAAI,aACpCe,EAAK,aACL9C,EAAKI,KACjB4D,KAAMhE,EAAKK,KAEX4C,EAAA,QAAMC,MAAM,iBACTlD,EAAKmD,MACJF,EAAA,UACEgB,MAAO,GACPC,OAAQ,GACRC,KAAMnE,EAAKK,IAAM,kBAAoB,qBACrC6C,MAAM,YACN9C,KAAMJ,EAAKmD,OAGfF,EAAA,QACEC,MAAO,CACL,aAAc,KACd,iBAAkBlD,EAAKmD,KACvB,YAAanD,EAAKoE,MAEpBC,MAAOrE,EAAKI,MAEXJ,EAAKI,UAIXkE,EAAAtE,EAAKkC,YAAQ,MAAAoC,SAAA,SAAAA,EAAEvC,QAAS,GACvBkB,EAAA,UAAQM,KAAK,SACXN,EAAA,OAAKC,MAAM,iBACRlD,EAAKkC,SAASqC,KAAI,CAACC,EAAO3B,IAAQrD,KAAKoD,eAAe4B,EAAO,GAAG3B,IAAOC,EAAQ,QAO1F,OAAOE,C,CAGT,MAAAyB,GACE,MAAMC,EAAoBlF,KAAKE,YAAYiF,MAAM3E,KAAWA,EAAKK,MAEjE,OACE4C,EAAC2B,EAAI,CAAA/B,IAAA,2CACHK,MAAM,YACNK,KAAMmB,EAAoB,aAAe,OAAM,cAClCA,EAAoBlB,UAAY,OAAM,kBAClChE,KAAKqF,oBAEtB5B,EAAA,OAAAJ,IAAA,2CACEY,UAAU,EACVF,KAAMmB,EAAoB,OAAS,OAAM,cAC5BA,EAAoBlB,UAAY,OAAM,aACvChE,KAAKsF,kBAEhBtF,KAAKE,YAAY6E,KAAI,CAACvE,EAAM6C,IAAQrD,KAAKoD,eAAe5C,EAAM,GAAG6C,Q","ignoreList":[]}

package/dist/components/z-visually-hidden.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as s,transformTag as n}from"@stencil/core/internal/client";const i=()=>`:host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}`;const o=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return s("slot",{key:"3378671bfdbab0bf278c0e8aeb3f8ea9bd555422"})}static get style(){return i()}},[257,"z-visually-hidden"]);function c(){if(typeof customElements==="undefined"){return}const e=["z-visually-hidden"];e.forEach((e=>{switch(e){case"z-visually-hidden":if(!customElements.get(n(e))){customElements.define(n(e),o)}break}}))}const r=o;const l=c;export{r as ZVisuallyHidden,l as defineCustomElement};
+import{p as e,H as t,h as s,t as i}from"./p-RmbDDbWd.js";const n=()=>`:host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}`;const o=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return s("slot",{key:"3378671bfdbab0bf278c0e8aeb3f8ea9bd555422"})}static get style(){return n()}},[257,"z-visually-hidden"]);function r(){if(typeof customElements==="undefined"){return}const e=["z-visually-hidden"];e.forEach((e=>{switch(e){case"z-visually-hidden":if(!customElements.get(i(e))){customElements.define(i(e),o)}break}}))}const c=o;const a=r;export{c as ZVisuallyHidden,a as defineCustomElement};
 //# sourceMappingURL=z-visually-hidden.js.map

package/dist/components/z-visually-hidden.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZVisuallyHidden","__stencil_proxyCustomElement","HTMLElement","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":"6GAAA,MAAMA,EAAY,IAAM,mK,MCOXC,EAAeC,EAAA,MAAAD,UAAAE,E,iFAC1B,MAAAC,GACE,OAAOC,EAAA,QAAAC,IAAA,4C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZVisuallyHidden","__stencil_proxyCustomElement","HTMLElement","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":"yDAAA,MAAMA,EAAY,IAAM,mK,MCOXC,EAAeC,EAAA,MAAAD,UAAAE,E,iFAC1B,MAAAC,GACE,OAAOC,EAAA,QAAAC,IAAA,4C","ignoreList":[]}