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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-anchor-navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AACvE,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC;AAEvD;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,iBAAiB;;8BAMX,KAAK;2BASR,IAAI;8BAMD,SAAS;2BAOZ,KAAK;yBAMP,KAAK;;IAOjB;;OAEG;IACK,UAAU;QAChB,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CACpE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAClE,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC7C,MAAM,MAAM,GAAG,IAAI,YAAY,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAClF,MAAM,SAAS,GAAG,MAAM,KAAK,cAAc,CAAC;YAC5C,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC1D,IAAI,CAAC,eAAe,CAAC,cAAc,EAAE,SAAS,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YAClE,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,aAAa;YAEnB,iEACE,KAAK,EAAC,QAAQ,EACd,IAAI,EAAE,WAAW,CAAC,KAAK,EACvB,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EACpD,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAEvC,IAAI,CAAC,cAAc,CACX;YACX,4DAAK,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC;gBAC/B,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize} from \"../../beans\";\n\n/**\n * Anchor navigation component.\n * @slot - Anchor navigation items. Use `<a>` elements inside. If you need an extra action element, use a wrapper around it and the anchor.\n * @example\n * ```\n * <z-anchor-navigation>\n *  <div>\n *    <a href=\"#section-id\">Section name</a>\n *    <button type=\"button\">\n *      <z-icon name=\"share\" />\n *    </button>\n *  </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n  tag: \"z-anchor-navigation\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n})\nexport class ZAnchorNavigation {\n  /**\n   * If enabled, the text of each anchor will be hidden unless\n   * for the current one or the one the user is hovering.\n   */\n  @Prop({reflect: true})\n  hideUnselected = false;\n\n  /**\n   * Enables automatic inference of the current item, listening for hash change\n   * and checking the `href` of the slotted anchors.\n   * When disabled, the highlight of current item must be handled manually by setting the `data-current`\n   * attribute to the correct slotted items and the `aria-current` attribute to the anchors.\n   */\n  @Prop()\n  autoCurrent = true;\n\n  /**\n   * Sets the label of the button displayed on mobile viewport when the anchor navigation is collapsed\n   */\n  @Prop()\n  collapsedLabel = \"salta a\";\n\n  /**\n   * Explicitly collapse anchor navigation.\n   * If false will collapse automatically only on mobile.\n   */\n  @Prop({reflect: true})\n  isCollapsed = false;\n\n  /**\n   * Whether the mobile list is collapsed.\n   */\n  @State()\n  collapsed = false;\n\n  @Element() host: HTMLZAnchorNavigationElement;\n\n  /** Reference to the nav element. */\n  private nav: HTMLElement;\n\n  /**\n   * Set `aria-current` attribute to the anchors.\n   */\n  private setCurrent(): void {\n    const currentElement = Array.from(this.nav.querySelectorAll(\"a\")).find(\n      (anchor) => anchor.href === this.host.ownerDocument.location.href\n    );\n    Array.from(this.nav.children).forEach((item) => {\n      const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n      const isCurrent = anchor === currentElement;\n      anchor.setAttribute(\"aria-current\", isCurrent.toString());\n      item.toggleAttribute(\"data-current\", isCurrent);\n    });\n  }\n\n  /**\n   * Toggle collapsed state.\n   */\n  private toggleCollapsed(): void {\n    this.collapsed = !this.collapsed;\n  }\n\n  componentDidLoad(): void {\n    if (this.autoCurrent) {\n      window.addEventListener(\"hashchange\", this.setCurrent.bind(this));\n      this.setCurrent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    window.removeEventListener(\"hashchange\", this.setCurrent);\n  }\n\n  render(): HTMLZAnchorNavigationElement {\n    return (\n      <Host\n        collapsed={this.collapsed}\n        class=\"z-scrollbar\"\n      >\n        <z-button\n          class=\"toggle\"\n          size={ControlSize.SMALL}\n          variant={ButtonVariant.SECONDARY}\n          icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n          onClick={this.toggleCollapsed.bind(this)}\n        >\n          {this.collapsedLabel}\n        </z-button>\n        <nav ref={(el) => (this.nav = el)}>\n          <slot></slot>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-anchor-navigation/index.stories.js

@@ -348,3 +348,4 @@ export const AutoCurrentDisabling = {
     </div>
   `,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-anchor-navigation/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-anchor-navigation/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;QACrB,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,KAAK;KACnB;CACgC,CAAC;AAEpC,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;oDAC4B,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;0BAE7D,IAAI,CAAC,cAAc;0BACnB,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyIpC;CACoC,CAAC;AAExC;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,aAAa,CAAC;SACzB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA+CE,IAAI,CAAC,cAAc;0BACnB,IAAI,CAAC,cAAc;uBACtB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HpC;CACoC,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAnchorNavigation} from \".\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZAnchorNavigation\",\n  component: \"z-anchor-navigation\",\n  args: {\n    hideUnselected: false,\n    collapsedLabel: \"salta a\",\n    isCollapsed: false,\n  },\n} satisfies Meta<ZAnchorNavigation>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) => html`\n    <div class=\"z-anchor-navigation-story-wrapper ${args.isCollapsed ? \"collapsed\" : \"\"}\">\n      <z-anchor-navigation\n        collapsed-label=${args.collapsedLabel}\n        .hideUnselected=${args.hideUnselected}\n        .isCollapsed=${args.isCollapsed}\n      >\n        <div>\n          <a\n            href=\"#first-section\"\n            target=\"_self\"\n            >First section</a\n          >\n          <z-button\n            variant=\"tertiary\"\n            icon=\"share\"\n            size=\"x-small\"\n          ></z-button>\n        </div>\n        <div>\n          <a\n            href=\"#second-section\"\n            target=\"_self\"\n            >Second section</a\n          >\n        </div>\n        <div>\n          <a\n            href=\"#third-section\"\n            target=\"_self\"\n            >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n            Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          </a>\n          <button\n            type=\"button\"\n            aria-label=\"share\"\n          >\n            <z-icon name=\"share\" />\n          </button>\n        </div>\n        <a\n          href=\"#fourth-section\"\n          target=\"_self\"\n          >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n        </a>\n      </z-anchor-navigation>\n      <div>\n        <div\n          class=\"section\"\n          id=\"first-section\"\n        >\n          <h4>First section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"second-section\"\n        >\n          <h4>Second section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"third-section\"\n        >\n          <h4>Third section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"fourth-section\"\n        >\n          <h4>Fourth section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n      </div>\n    </div>\n  `,\n} satisfies StoryObj<ZAnchorNavigation>;\n\n/**\n * Setting `autoCurrent` to `false` disables the automatic highlighting of the current section in the anchor navigation\n * and allows manual handling.\n * In this story, for example, the highlighting of the current section is done by clicking on the related button.\n */\nexport const AutoCurrentDisabling = {\n  args: {\n    autoCurrent: false,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"autoCurrent\"],\n    },\n  },\n  render: (args) => html`\n    <script>\n      Array.from(document.querySelectorAll(\".z-anchor-navigation-manual-current z-button\")).forEach((item) =>\n        item.addEventListener(\"click\", (ev) => {\n          const sectionID = ev.target.closest(\"z-button\")?.dataset.to;\n          const current = document.querySelector(\"#\" + sectionID + \"-anchor\");\n          const nav = current?.closest(\"nav\");\n          Array.from(nav?.children ?? []).forEach((item) => {\n            const isCurrent = item.contains(current);\n            if (isCurrent) {\n              item.setAttribute(\"data-current\", \"\");\n            } else {\n              item.removeAttribute(\"data-current\");\n            }\n            const anchor = item.tagName === \"A\" ? item : item.querySelector(\"a\");\n            item?.setAttribute(\"aria-current\", isCurrent.toString());\n          });\n          const section = document.querySelector(\"#\" + sectionID);\n          section?.scrollIntoView();\n        })\n      );\n    </script>\n\n    <div class=\"z-anchor-navigation-manual-current\">\n      <z-button\n        size=\"x-small\"\n        data-to=\"first-section\"\n        >To first section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"second-section\"\n        >To second section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"third-section\"\n        >To third section</z-button\n      >\n      <z-button\n        size=\"x-small\"\n        data-to=\"fourth-section\"\n        >Highlight fourth section</z-button\n      >\n    </div>\n    <div class=\"z-anchor-navigation-story-wrapper\">\n      <z-anchor-navigation\n        collapsed-label=${args.collapsedLabel}\n        .hideUnselected=${args.hideUnselected}\n        .autoCurrent=${args.autoCurrent}\n      >\n        <div>\n          <a id=\"first-section-anchor\">First section</a>\n          <z-button\n            variant=\"tertiary\"\n            icon=\"share\"\n            size=\"x-small\"\n          ></z-button>\n        </div>\n        <div>\n          <a id=\"second-section-anchor\">Second section</a>\n        </div>\n        <div>\n          <a id=\"third-section-anchor\"\n            >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n            Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          </a>\n          <button\n            type=\"button\"\n            aria-label=\"share\"\n          >\n            <z-icon name=\"share\" />\n          </button>\n        </div>\n        <a id=\"fourth-section-anchor\"\n          >Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n          Third section with a very very long title and an icon and the title is repeated so it can go over 2 lines\n        </a>\n      </z-anchor-navigation>\n      <div class=\"z-anchor-navigation-demo-sections\">\n        <div\n          class=\"section\"\n          id=\"first-section\"\n        >\n          <h4>First section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"second-section\"\n        >\n          <h4>Second section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"third-section\"\n        >\n          <h4>Third section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n        <div\n          class=\"section\"\n          id=\"fourth-section\"\n        >\n          <h4>Fourth section</h4>\n          <p>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n            Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit?\n            Possumusne ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo\n            affectus, exul, orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo,\n            oblivisci non possum quae volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo\n            Reges: constructio interrete. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem\n            loco tantum explicemus haec honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte\n            natura per se esse expetenda. Te enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni\n            licuit, cum rem aliquam invenisset inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat\n            Catoni? Ita cum ea volunt retinere, quae superiori sententiae conveniunt, in Aristonem incidunt; Istam\n            voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas\n            commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas? Stuprata per vim Lucretia a regis\n            filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod negas animi ullum esse gaudium,\n            quod non referatur ad corpus.\n          </p>\n        </div>\n        <div class=\"separator\"></div>\n      </div>\n    </div>\n  `,\n} satisfies StoryObj<ZAnchorNavigation>;\n"]}

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

@@ -1,4 +1,4 @@
-import { Fragment, Host, h, } from "@stencil/core";
+import { Fragment, Host, h } from "@stencil/core";
 import { ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans";
 import { Breakpoints } from "../../constants/breakpoints";
 import { containsElement } from "../../utils/utils";
@@ -214,47 +214,24 @@ export class ZAppHeader {
         return (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.renderMenuButton(), h("div", { class: "heading-title" }, this.renderProductLogos(), h("div", { class: "stucked-title" }, h("slot", { name: "stucked-title" }, this.title))), this.enableSearch && this.renderSeachbar())));
     }
     constructor() {
-        /**
-         * Stuck mode for the header.
-         * You can programmatically set it using an IntersectionObserver.
-         */
+        this.menuElements = [];
+        this.stuckIntersecObserver = SUPPORT_INTERSECTION_OBSERVER
+            ? new IntersectionObserver(([entry]) => {
+                this._stuck = !entry.isIntersecting;
+            }, { threshold: 0.5 })
+            : undefined;
         this.stuck = false;
-        /**
-         * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.
-         */
         this.enableOffcanvas = false;
-        /**
-         * Enable the search bar.
-         */
         this.enableSearch = false;
-        /**
-         * Placeholder text for the search bar.
-         */
         this.searchPlaceholder = "Cerca";
-        /**
-         * Search string for the search bar.
-         */
         this.searchString = "";
-        /**
-         * Enable laZ logo.
-         */
+        this.searchPageUrl = undefined;
         this.enableZLogo = true;
-        /**
-         * The opening state of the drawer.
-         */
         this.drawerOpen = false;
-        /**
-         * The stuck state of the bar.
-         */
         this._stuck = false;
+        this.menuLength = undefined;
         this.isMobile = true;
         this.isTablet = false;
-        this.menuElements = [];
-        this.stuckIntersecObserver = SUPPORT_INTERSECTION_OBSERVER
-            ? new IntersectionObserver(([entry]) => {
-                this._stuck = !entry.isIntersecting;
-            }, { threshold: 0.5 })
-            : undefined;
         this.openDrawer = this.openDrawer.bind(this);
         this.closeDrawer = this.closeDrawer.bind(this);
         this.collectMenuElements = this.collectMenuElements.bind(this);
@@ -280,7 +257,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'dc030db81c271ed36850fb287d29ace79851d4a1', "menu-length": this.menuLength }, h("div", { key: '49d34b66c216a92c80eb9216fa52e48add4cee0a', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '29639ab6d0620491c69651139ddf8311e2177122', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'bc685fb828a89777bec6dcc5bc754534f83361cd', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: 'cb2b1468f4b34d11dbf444f2cde0c7cce86cbd1e', name: "top-subtitle" }))), h("div", { key: '80036c45fcbd3d490b85f653efb35010b1639b6f', class: "heading-title" }, h("slot", { key: 'bc4a0397893534c0dac99e081ef0ba5d6db2ecd3', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'a72c2c657ae430e0cc6b134e843fec1c983e7777', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'b620b02b62b99b13e6b4c0c1be0997d3af448aeb', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '6c1887c703734a0e1ab4b77b821dad2e9bc0c3df', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '2daaf3501852cab84cf2b3a85a770553dc70a101', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'a823113610378e9d634bf1779f5be2f5dc0c39f1', "menu-length": this.menuLength }, h("div", { key: 'c93cc0d8ef6cfba9875b2a4be50f065a4c276329', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '5138c2f0828d182ca610696b341f7292a12dc29b', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '3ccea8b1134d18c47e7736683090a5cff1f5805c', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '7f2e046036bb62644b4d20ebcea6879d146f7900', name: "top-subtitle" }))), h("div", { key: 'a6be051f516f7e23348c7e3781463048f49c4fb5', class: "heading-title" }, h("slot", { key: '561fab39ded745bfc44a3ed6b16df481771b71eb', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'd0339b71194c5b61da665a3ccf38f9188a6b11c9', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '016d2598ab5e436713dc70a100100ecc7490729e', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '8cef304ecced8d2f4f6ba454db5c7ef74fcaed87', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '9bd29440ce257ab3b6f58567713823c2047d7b2c', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }
@@ -310,10 +287,8 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Stuck mode for the header.\nYou can programmatically set it using an IntersectionObserver."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "stuck",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "enableOffcanvas": {
@@ -330,10 +305,8 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "enable-offcanvas",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "enableSearch": {
@@ -350,10 +323,8 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Enable the search bar."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "enable-search",
+                "reflect": true,
                 "defaultValue": "false"
             },
             "searchPlaceholder": {
@@ -370,10 +341,8 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Placeholder text for the search bar."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "search-placeholder",
+                "reflect": false,
                 "defaultValue": "\"Cerca\""
             },
             "searchString": {
@@ -390,10 +359,8 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Search string for the search bar."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "search-string",
+                "reflect": false,
                 "defaultValue": "\"\""
             },
             "searchPageUrl": {
@@ -410,10 +377,8 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Url to the search page.\nSet this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\nThe link will also appear on the sticky header."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "search-page-url"
+                "attribute": "search-page-url",
+                "reflect": false
             },
             "enableZLogo": {
                 "type": "boolean",
@@ -429,10 +394,8 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "Enable laZ logo."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
                 "attribute": "enable-z-logo",
+                "reflect": true,
                 "defaultValue": "true"
             },
             "drawerOpen": {
@@ -449,10 +412,8 @@ export class ZAppHeader {
                     "tags": [],
                     "text": "The opening state of the drawer."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "drawer-open",
+                "reflect": false,
                 "defaultValue": "false"
             }
         };
@@ -518,3 +479,4 @@ export class ZAppHeader {
             }];
     }
 }
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-app-header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACrH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAC5G,OAAO,EAAC,WAAW,EAAC,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAElD,MAAM,6BAA6B,GAAG,OAAO,oBAAoB,KAAK,WAAW,CAAC;AAElF;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,UAAU;IAoGrB,OAAO;QACL,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAGD,mBAAmB;QACjB,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACnC,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;YACpC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;YACrB,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,aAAa;;QACX,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAA,IAAI,CAAC,qBAAqB,0CAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,MAAA,IAAI,CAAC,qBAAqB,0CAAE,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED,IAAY,KAAK;;QACf,OAAO,MAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,0CAAE,WAAW,CAAC,IAAI,EAAE,CAAC;IAC9E,CAAC;IAED,IAAY,YAAY;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;QAC7C,IAAI,MAAM,KAAK,QAAQ,CAAC,IAAI,IAAI,MAAM,KAAK,QAAQ,CAAC,eAAe,EAAE,CAAC;YACpE,OAAO,MAAM,CAAC;QAChB,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;IACrG,CAAC;IAED,IAAY,aAAa;QACvB,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7F,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAC,CAAC,6CAA6C;IACvG,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,mBAAmB;QACzB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;QACnF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7F,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,SAAS;gBACZ,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC;oBAChF,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,4CAA4C,CAAC;QAC5E,CAAC;QACD,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED,mFAAmF;IAC3E,uBAAuB;QAC7B,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,kBAAkB,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACvD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAE5B,OAAO;YACT,CAAC;YAED,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC;YAC/D,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,EAAE,CAAC;gBACzB,OAAO;YACT,CAAC;YAED,IAAI,IAAI,CAAC,SAAS,GAAG,cAAc,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC7D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC9B,CAAC;iBAAM,IAAI,IAAI,CAAC,SAAS,IAAI,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACpE,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAClD,CAAC;IAEO,OAAO,CAAC,QAAgB;QAC9B,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC;IACzE,CAAC;IAEO,SAAS,CAAC,OAAyB,EAAE,QAA0B;QACrE,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;QAC1B,QAAQ,CAAC,QAAQ,EAAE,CAAC;IACtB,CAAC;IAEO,kBAAkB,CAAC,EAAiB;;QAC1C,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACpD,OAAO;QACT,CAAC;QAED,MAAM,WAAW,GAAI,EAAE,CAAC,MAAsB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACjE,IAAI,WAAW,EAAE,CAAC;YAChB,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,+DAA+D;YAC/D,WAAW,CAAC,YAAY,GAAG,CAAC,CAAC;YAC7B,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QACjC,CAAC;aAAM,IAAI,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAChD,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC;gBAChB,sEAAsE;gBACtE,CAAC,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YAC7G,CAAC;iBAAM,CAAC;gBACN,wEAAwE;gBACxE,CAAC,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,mCAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACnF,CAAC;QACH,CAAC;IACH,CAAC;IAED,mEAAmE;IAGnE,WAAW,CAAC,EAA6B;QACvC,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,CAAC,MAAiB,CAAC,CAAC,CAAC;QACjG,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACjC,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;oBACxB,OAAO;gBACT,CAAC;gBAED,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;oBACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBACpB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;gBACjC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAGD,aAAa,CAAC,EAAiB;;QAC7B,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACnD,IAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAqB,CAAC,CAAC,EAAE,CAAC;YAC/E,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;QACnC,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACxD,IAAI,QAA0B,CAAC;QAC/B,IACE,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,WAAW,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;YACjE,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,IAAI,OAAO,CAAC,eAAe,CAAC,EAC/D,CAAC;YACD,QAAQ,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACzE,CAAC;aAAM,IACL,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,UAAU,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;YAChE,CAAC,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,IAAI,OAAO,CAAC,eAAe,CAAC,EAC7D,CAAC;YACD,QAAQ,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,CAAC,CAAC,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;QAC3F,CAAC;QACD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO;QACT,CAAC;QAED,IAAI,EAAE,CAAC,GAAG,KAAK,YAAY,CAAC,QAAQ,IAAI,OAAO,CAAC,eAAe,EAAE,CAAC;YAChE,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC;gBAClB,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;gBAC1B,QAAQ,CAAC,aAAa,EAAE,CAAC;gBAEzB,OAAO;YACT,CAAC;QACH,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACpC,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACxD,OAAO;QACT,CAAC;QAED,IAAI,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3D,OAAO,CACL,gBACE,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,WAAW,CAAC,OAAO,GACzB,CACH,CAAC;QACJ,CAAC;QAED,OAAO,CACL,mBACE,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,gBAAgB,EAAE,IAAI,EACtB,oBAAoB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACpD,IAAI,EAAE,WAAW,CAAC,OAAO,EACzB,OAAO,EAAE,aAAa,CAAC,SAAS,EAChC,aAAa,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,EAC3C,cAAc,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,GACrD,CACH,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,OAAO,CACL,EAAC,QAAQ;YACN,IAAI,CAAC,WAAW,IAAI,CACnB,YAAM,KAAK,EAAC,QAAQ;gBAClB,WAAK,GAAG,EAAC,iBAAiB,GAAG,CACxB,CACR;YACA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,uBAAuB,CAAC,IAAI,CAC1D,YAAM,KAAK,EAAC,cAAc;gBACxB,YAAM,IAAI,EAAC,cAAc,GAAG,CACvB,CACR,CACQ,CACZ,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,CACL,IAAI,CAAC,UAAU,GAAG,CAAC;YACnB,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CACxD,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAuB,CAAC,EAC1D,KAAK,EAAC,gBAAgB,gBACX,WAAW,mBACR,MAAM,mBACL,GAAG,IAAI,CAAC,UAAU,EAAE,mBACrB,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,UAAU;YAExB,cAAQ,IAAI,EAAC,aAAa,GAAG,CACtB,CACV,CACF,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,CACL,mBACE,EAAE,EAAC,gBAAgB,EACnB,OAAO,EAAE,gBAAgB,CAAC,OAAO,EACjC,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,EAC9C,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,yBAAyB,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC,EAChE,SAAS,EAAE,IAAI,CAAC,kBAAkB;YAElC,WAAK,IAAI,EAAC,eAAe;gBACvB,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EAC1C,KAAK,EAAC,cAAc,gBACT,aAAa,EACxB,OAAO,EAAE,IAAI,CAAC,WAAW,iBACZ,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,EAClC,QAAQ,EAAE,CAAC,IAAI,CAAC,UAAU;oBAE1B,cAAQ,IAAI,EAAC,OAAO,GAAG,CAChB;gBAET,WACE,KAAK,EAAC,gBAAgB,iBACT,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE;oBAElC,YACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,mBAAmB,GACtC,CACE,CACF,CACM,CACf,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,OAAO,CACL,WAAK,KAAK,EAAC,eAAe;YACxB,WAAK,KAAK,EAAC,uBAAuB;gBAC/B,IAAI,CAAC,gBAAgB,EAAE;gBACxB,WAAK,KAAK,EAAC,eAAe;oBACvB,IAAI,CAAC,kBAAkB,EAAE;oBAC1B,WAAK,KAAK,EAAC,eAAe;wBACxB,YAAM,IAAI,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACF;gBACL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,CACvC,CACF,CACP,CAAC;IACJ,CAAC;IAED;QAzVQ,iBAAY,GAAuB,EAAE,CAAC;QAUtC,0BAAqB,GAA0B,6BAA6B;YAClF,CAAC,CAAC,IAAI,oBAAoB,CACtB,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;gBACV,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;YACtC,CAAC,EACD,EAAC,SAAS,EAAE,GAAG,EAAC,CACjB;YACH,CAAC,CAAC,SAAS,CAAC;qBAzFN,KAAK;+BAMK,KAAK;4BAMR,KAAK;iCAMA,OAAO;4BAMZ,EAAE;;2BAcH,IAAI;0BAML,KAAK;sBAYD,KAAK;;wBASH,IAAI;wBAGJ,KAAK;QA8VtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/D,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9D;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAE3B,4CAA4C;QAC5C,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC;QACnF,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,OAAO,CAAC;QACzC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;QAChF,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CACxC,eAAe,WAAW,CAAC,MAAM,GAAG,CAAC,uBAAuB,WAAW,CAAC,MAAM,KAAK,CACpF,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,OAAO,CAAC;QACzC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAClF,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,kBAAkB,0CAAE,UAAU,EAAE,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAEpD,OAAO,CACL,EAAC,IAAI,oEAAc,IAAI,CAAC,UAAU;YAChC,4DACE,KAAK,EAAE,EAAC,eAAe,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAC,EAC3F,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;gBAElC,4DAAK,KAAK,EAAE,EAAC,mBAAmB,EAAE,IAAI,EAAE,kBAAkB,EAAE,cAAc,EAAC;oBACxE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAC5D,4DAAK,KAAK,EAAE,EAAC,cAAc,EAAE,IAAI,EAAE,kBAAkB,EAAE,cAAc,IAAI,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,EAAC;wBACpG,6DAAM,IAAI,EAAC,cAAc,GAAG,CACxB,CACP;oBACD,4DAAK,KAAK,EAAC,eAAe;wBACxB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,gBAAgB,EAAE,CAAQ;wBACxD,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,kBAAkB,EAAE;wBAC1C,6DAAM,IAAI,EAAC,OAAO,GAAG;wBACpB,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CACzD;oBACL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CACxD;gBAEN,4DACE,KAAK,EAAC,gBAAgB,gBACV,IAAI,CAAC,KAAK,IAAI,SAAS,IAElC,IAAI,CAAC,WAAW,IAAI,CACnB,4DACE,IAAI,EAAC,SAAS,gBACF,IAAI,CAAC,KAAK,IAAI,SAAS;oBAEnC,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,mBAAmB,GACtC,CACE,CACP,CACG,CACF;YACL,IAAI,CAAC,eAAe,EAAE;YACtB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAC7B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, Event, EventEmitter, Fragment, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot menu-button - Slot for a custom menu button. It will replace the default burger icon.\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n */\n@Component({\n  tag: \"z-app-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAppHeader {\n  @Element() hostElement: HTMLZAppHeaderElement;\n\n  /**\n   * Stuck mode for the header.\n   * You can programmatically set it using an IntersectionObserver.\n   */\n  @Prop({reflect: true})\n  stuck = false;\n\n  /**\n   * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n   */\n  @Prop({reflect: true, mutable: true})\n  enableOffcanvas = false;\n\n  /**\n   * Enable the search bar.\n   */\n  @Prop({reflect: true})\n  enableSearch = false;\n\n  /**\n   * Placeholder text for the search bar.\n   */\n  @Prop()\n  searchPlaceholder = \"Cerca\";\n\n  /**\n   * Search string for the search bar.\n   */\n  @Prop({mutable: true})\n  searchString = \"\";\n\n  /**\n   * Url to the search page.\n   * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n   * The link will also appear on the sticky header.\n   */\n  @Prop()\n  searchPageUrl: string;\n\n  /**\n   * Enable laZ logo.\n   */\n  @Prop({reflect: true})\n  enableZLogo = true;\n\n  /**\n   * The opening state of the drawer.\n   */\n  @Prop({mutable: true})\n  drawerOpen = false;\n\n  /**\n   * Emitted when the `stuck` state of the header changes\n   */\n  @Event()\n  sticking: EventEmitter;\n\n  /**\n   * The stuck state of the bar.\n   */\n  @State()\n  private _stuck = false;\n\n  /**\n   * Current count of menu items.\n   */\n  @State()\n  private menuLength: number;\n\n  @State()\n  private isMobile = true;\n\n  @State()\n  private isTablet = false;\n\n  private container?: HTMLDivElement;\n\n  private menuElements: HTMLZMenuElement[] = [];\n\n  private menuWidth: number;\n\n  private closeDrawerButton: HTMLButtonElement;\n\n  private burgerButton: HTMLButtonElement;\n\n  private menuResizeObserver: ResizeObserver;\n\n  private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n    ? new IntersectionObserver(\n        ([entry]) => {\n          this._stuck = !entry.isIntersecting;\n        },\n        {threshold: 0.5}\n      )\n    : undefined;\n\n  @Watch(\"_stuck\")\n  onStuck(): void {\n    const scrollParent = this.scrollParent;\n    if (!scrollParent) {\n      return;\n    }\n\n    this.sticking.emit(this._stuck);\n  }\n\n  @Watch(\"drawerOpen\")\n  setMenuFloatingMode(): void {\n    if (this.menuElements.length === 0) {\n      return;\n    }\n\n    this.menuElements.forEach((element) => {\n      element.open = false;\n      element.verticalContext = this.drawerOpen;\n    });\n  }\n\n  @Watch(\"stuck\")\n  onStuckChange(): void {\n    if (!this.container) {\n      return;\n    }\n\n    if (this.stuck) {\n      this.stuckIntersecObserver?.observe(this.container);\n    } else {\n      this._stuck = false;\n      this.stuckIntersecObserver?.unobserve(this.container);\n    }\n  }\n\n  private get title(): string {\n    return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n  }\n\n  private get scrollParent(): Window | Element {\n    const parent = this.hostElement.offsetParent;\n    if (parent === document.body || parent === document.documentElement) {\n      return window;\n    }\n\n    return parent;\n  }\n\n  private get canShowMenu(): boolean {\n    return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n  }\n\n  private get focusableMenu(): HTMLZMenuElement {\n    return this.menuElements.find((el) => el.htmlTabindex === 0);\n  }\n\n  private openDrawer(): void {\n    this.drawerOpen = true;\n    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n    setTimeout(() => this.menuElements[0].setFocus(), 400); /* wait for the 400ms offcanvas transition */\n  }\n\n  private closeDrawer(): void {\n    this.drawerOpen = false;\n    setTimeout(() => this.burgerButton.focus(), 100);\n  }\n\n  private collectMenuElements(): void {\n    this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n    this.menuLength = this.menuElements.length;\n    if (!this.enableOffcanvas) {\n      this.menuWidth =\n        this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n        (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;\n    }\n    this.setMenuFloatingMode();\n  }\n\n  /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */\n  private setupMenuResizeObserver(): void {\n    if (this.enableOffcanvas) {\n      return;\n    }\n\n    this.menuResizeObserver = new ResizeObserver((entries) => {\n      if (this.isMobile) {\n        this.enableOffcanvas = true;\n\n        return;\n      }\n\n      const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n      if (this.menuWidth === 0) {\n        return;\n      }\n\n      if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n        this.enableOffcanvas = true;\n      } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n        this.enableOffcanvas = false;\n      }\n    });\n    this.menuResizeObserver.observe(this.container);\n  }\n\n  private hasSlot(slotName: string): boolean {\n    return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n  }\n\n  private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n    current.htmlTabindex = -1;\n    receiver.setFocus();\n  }\n\n  private onOffcanvasKeydown(ev: KeyboardEvent): void {\n    if (ev.key !== KeyboardCode.TAB || !this.drawerOpen) {\n      return;\n    }\n\n    const closestMenu = (ev.target as HTMLElement).closest(\"z-menu\");\n    if (closestMenu) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      // restore tabindex to the zmenu containing the focused element\n      closestMenu.htmlTabindex = 0;\n      this.closeDrawerButton.focus();\n    } else if (ev.target === this.closeDrawerButton) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      if (ev.shiftKey) {\n        // give focus to the last open menu if any or the last menu otherwhise\n        (this.menuElements.filter((menu) => menu.open).pop() ?? this.menuElements[this.menuLength - 1]).setFocus();\n      } else {\n        // give focus to the first open menu if any or the first menu otherwhise\n        (this.menuElements.find((menu) => menu.open) ?? this.menuElements[0]).setFocus();\n      }\n    }\n  }\n\n  /** Close each menu except the one receiving focus/click, if any */\n  @Listen(\"focusin\", {target: \"document\", passive: true})\n  @Listen(\"click\", {target: \"document\", passive: true})\n  manageMenus(ev: FocusEvent | PointerEvent): void {\n    const targetMenu = this.menuElements.find((menu) => containsElement(menu, ev.target as Element));\n    if (targetMenu) {\n      this.menuElements.forEach((menu) => {\n        if (menu === targetMenu) {\n          return;\n        }\n\n        menu.htmlTabindex = -1;\n        if (!this.drawerOpen) {\n          menu.open = false;\n        }\n      });\n    } else if (!this.drawerOpen) {\n      this.menuElements.forEach((menu) => {\n        menu.open = false;\n      });\n    }\n  }\n\n  @Listen(\"keydown\", {passive: true})\n  handleKeydown(ev: KeyboardEvent): void {\n    if (ev.key === KeyboardCode.ESC && this.drawerOpen) {\n      this.closeDrawer();\n\n      return;\n    }\n\n    if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n      return;\n    }\n\n    const current = this.focusableMenu;\n    const currentIndex = this.menuElements.indexOf(current);\n    let receiver: HTMLZMenuElement;\n    if (\n      (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||\n      (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n    ) {\n      receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n    } else if (\n      (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||\n      (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n    ) {\n      receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n    }\n    if (!receiver) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n      if (receiver.open) {\n        current.htmlTabindex = -1;\n        receiver.focusLastItem();\n\n        return;\n      }\n    }\n\n    this.moveFocus(current, receiver);\n  }\n\n  private renderSeachbar(): HTMLZButtonElement | HTMLZSearchbarElement | undefined {\n    if (this.isMobile && !this.searchPageUrl && this._stuck) {\n      return;\n    }\n\n    if (this.searchPageUrl && (this.isMobile || this.isTablet)) {\n      return (\n        <z-button\n          class=\"search-page-button\"\n          variant={ButtonVariant.SECONDARY}\n          href={this.searchPageUrl}\n          icon=\"search\"\n          size={ControlSize.X_SMALL}\n        />\n      );\n    }\n\n    return (\n      <z-searchbar\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        showSearchButton={true}\n        searchButtonIconOnly={this.isMobile || this.isTablet}\n        size={ControlSize.X_SMALL}\n        variant={ButtonVariant.SECONDARY}\n        preventSubmit={this.searchString.length < 3}\n        onSearchTyping={(e) => (this.searchString = e.detail)}\n      />\n    );\n  }\n\n  private renderProductLogos(): HTMLElement | null {\n    return (\n      <Fragment>\n        {this.enableZLogo && (\n          <span class=\"z-logo\">\n            <img alt=\"Logo Zanichelli\" />\n          </span>\n        )}\n        {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n          <span class=\"product-logo\">\n            <slot name=\"product-logo\" />\n          </span>\n        )}\n      </Fragment>\n    );\n  }\n\n  private renderMenuButton(): HTMLButtonElement {\n    return (\n      this.menuLength > 0 &&\n      (this.enableOffcanvas || this._stuck || this.isMobile) && (\n        <button\n          ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n          class=\"drawer-trigger\"\n          aria-label=\"Apri menu\"\n          aria-haspopup=\"menu\"\n          aria-expanded={`${this.drawerOpen}`}\n          aria-controls=\"offcanvas-menu\"\n          onClick={this.openDrawer}\n        >\n          <z-icon name=\"burger-menu\" />\n        </button>\n      )\n    );\n  }\n\n  private renderOffcanvas(): HTMLZOffcanvasElement {\n    return (\n      <z-offcanvas\n        id=\"offcanvas-menu\"\n        variant={OffCanvasVariant.OVERLAY}\n        transitiondirection={TransitionDirection.RIGHT}\n        open={this.drawerOpen}\n        onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n        onKeyDown={this.onOffcanvasKeydown}\n      >\n        <div slot=\"canvasContent\">\n          <button\n            ref={(el) => (this.closeDrawerButton = el)}\n            class=\"drawer-close\"\n            aria-label=\"Chiudi menu\"\n            onClick={this.closeDrawer}\n            aria-hidden={`${!this.drawerOpen}`}\n            disabled={!this.drawerOpen}\n          >\n            <z-icon name=\"close\" />\n          </button>\n\n          <div\n            class=\"drawer-content\"\n            aria-hidden={`${!this.drawerOpen}`}\n          >\n            <slot\n              name=\"menu\"\n              onSlotchange={this.collectMenuElements}\n            />\n          </div>\n        </div>\n      </z-offcanvas>\n    );\n  }\n\n  private renderStuck(): HTMLElement {\n    return (\n      <div class=\"heading-stuck\">\n        <div class=\"heading-stuck-content\">\n          {this.renderMenuButton()}\n          <div class=\"heading-title\">\n            {this.renderProductLogos()}\n            <div class=\"stucked-title\">\n              <slot name=\"stucked-title\">{this.title}</slot>\n            </div>\n          </div>\n          {this.enableSearch && this.renderSeachbar()}\n        </div>\n      </div>\n    );\n  }\n\n  constructor() {\n    this.openDrawer = this.openDrawer.bind(this);\n    this.closeDrawer = this.closeDrawer.bind(this);\n    this.collectMenuElements = this.collectMenuElements.bind(this);\n    this.onOffcanvasKeydown = this.onOffcanvasKeydown.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.collectMenuElements();\n\n    // mobile and tablet media queries listeners\n    const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n    const tabletMediaQuery = window.matchMedia(\n      `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n    );\n    this.isTablet = tabletMediaQuery.matches;\n    tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n  }\n\n  componentDidLoad(): void {\n    this.onStuckChange();\n    this.setupMenuResizeObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.menuResizeObserver?.disconnect();\n  }\n\n  render(): HTMLZAppHeaderElement {\n    const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n    return (\n      <Host menu-length={this.menuLength}>\n        <div\n          class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n          ref={(el) => (this.container = el)}\n        >\n          <div class={{\"heading-container\": true, \"has-top-subtitle\": hasTopSubtitle}}>\n            {((!this.enableSearch && this.isMobile) || !this.isMobile) && (\n              <div class={{\"top-subtitle\": true, \"has-product-logo\": hasTopSubtitle && this.hasSlot(\"product-logo\")}}>\n                <slot name=\"top-subtitle\" />\n              </div>\n            )}\n            <div class=\"heading-title\">\n              <slot name=\"menu-button\">{this.renderMenuButton()}</slot>\n              {!this._stuck && this.renderProductLogos()}\n              <slot name=\"title\" />\n              {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n            </div>\n            {this.enableSearch && this.isMobile && this.renderSeachbar()}\n          </div>\n\n          <nav\n            class=\"menu-container\"\n            aria-label={this.title || undefined}\n          >\n            {this.canShowMenu && (\n              <div\n                role=\"menubar\"\n                aria-label={this.title || undefined}\n              >\n                <slot\n                  name=\"menu\"\n                  onSlotchange={this.collectMenuElements}\n                />\n              </div>\n            )}\n          </nav>\n        </div>\n        {this.renderOffcanvas()}\n        {this._stuck && this.renderStuck()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-app-header/index.stories.js

@@ -300,3 +300,4 @@ export const SearchPageButton = {
       ${menuTemplate()}
     </z-app-header>`,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-app-header/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-app-header/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {TemplateResult, html} from \"lit\";\nimport {ZAppHeader} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../z-menu-section/index\";\nimport \"../z-menu/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZAppHeaderStoriesArgs = ZAppHeader & CSSVarsArguments<\"app-header-content-max-width\">;\n\nconst StoryMeta = {\n  title: \"ZAppHeader\",\n  component: \"z-app-header\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  subcomponents: {\n    ZMenu: \"z-menu\",\n    ZMenuSection: \"z-menu-section\",\n  },\n  args: {\n    \"--app-header-content-max-width\": \"100%\",\n    \"enableSearch\": false,\n    \"searchPageUrl\": \"\",\n    \"enableZLogo\": false,\n    \"enableOffcanvas\": false,\n  },\n} satisfies Meta<ZAppHeaderStoriesArgs>;\n\nexport default StoryMeta;\n\nconst menuItemsTemplate = (): TemplateResult => {\n  return html`<a\n      href=\"\"\n      slot=\"item\"\n      >Item 1</a\n    >\n    <z-menu-section slot=\"item\">\n      <h3>Item 2</h3>\n      <a\n        href=\"\"\n        slot=\"section\"\n        >Item 2.1</a\n      >\n      <a\n        href=\"\"\n        slot=\"section\"\n        >Item 2.2</a\n      >\n    </z-menu-section>\n    <z-menu-section slot=\"item\">\n      <h3>Item 3</h3>\n      <a\n        href=\"\"\n        slot=\"section\"\n        >Item 3.1</a\n      >\n      <a\n        href=\"\"\n        slot=\"section\"\n        >Item 3.2</a\n      >\n    </z-menu-section>\n    <a\n      href=\"\"\n      slot=\"item\"\n      >Item 4</a\n    >\n    <z-menu-section slot=\"item\">\n      <h3>Item 5</h3>\n      <a\n        href=\"\"\n        slot=\"section\"\n        >Item 5.1</a\n      >\n      <a\n        href=\"\"\n        slot=\"section\"\n        >Item 5.2</a\n      >\n    </z-menu-section>`;\n};\n\nconst menuTemplate = (): TemplateResult => {\n  return html`\n    <z-menu slot=\"menu\">\n      <h3>Menu label 1</h3>\n      ${menuItemsTemplate()}\n    </z-menu>\n\n    <z-menu slot=\"menu\">\n      <a href>Menu label 2</a>\n    </z-menu>\n\n    <z-menu slot=\"menu\">\n      <h3>Menu label 3</h3>\n      ${menuItemsTemplate()}\n    </z-menu>\n\n    <z-menu slot=\"menu\">\n      <h3>Menu label 4</h3>\n      ${menuItemsTemplate()}\n    </z-menu>\n  `;\n};\n\ntype Story = Meta<ZAppHeaderStoriesArgs>;\n\nexport const Title = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${args.enableZLogo}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <a href=\"zanichelli.it\" slot=\"title\">Applicazione</h1>\n    </z-app-header>`,\n} satisfies Story;\n\nexport const ProductLogo = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${args.enableZLogo}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n      <div\n        class=\"story-product-logo\"\n        slot=\"product-logo\"\n      ></div>\n    </z-app-header>`,\n} satisfies Story;\n\nexport const TopTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\", \"enableZLogo\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n      <h1 slot=\"title\">Applicazione</h1>\n    </z-app-header>`,\n} satisfies Story;\n\nexport const TopTitleWithProductLogo = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\", \"enableZLogo\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${false}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n      <h1 slot=\"title\">Applicazione</h1>\n      <div\n        class=\"story-product-logo\"\n        slot=\"product-logo\"\n      ></div>\n    </z-app-header>`,\n} satisfies Story;\n\nexport const CustomMenuButton = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${args.enableZLogo}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <button slot=\"menu-button\"><z-icon name=\"gear\" /></button>\n      <a href=\"zanichelli.it\" slot=\"title\">Applicazione</h1>\n    </z-app-header>`,\n} satisfies Story;\n\nexport const MenuWithTopTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"enableZLogo\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableOffcanvas=${args.enableOffcanvas}\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n      <h1 slot=\"title\">Applicazione</h1>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const MenuWithTopTitleAndProductLogo = {\n  parameters: {\n    controls: {\n      exclude: [\"enableZLogo\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableOffcanvas=${args.enableOffcanvas}\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${false}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h2 slot=\"top-subtitle\">Payoff dell'applicazione</h2>\n      <h1 slot=\"title\">Applicazione</h1>\n      <div\n        class=\"story-product-logo\"\n        slot=\"product-logo\"\n      ></div>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const LongTitle = {\n  parameters: {\n    controls: {\n      exclude: [\"enableOffcanvas\", \"enableZLogo\", \"enableSearch\", \"searchPageUrl\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\">\n      <h1 slot=\"title\">Fondamenti di fisica 8e - Meccanica, Onde, Termodinamica, Elettromagnetismo, Ottica</h1>\n      <h2 slot=\"top-subtitle\">Jearl Walker, David Halliday, Robert Resnick</h2>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const OffcanvasMenu = {\n  args: {\n    enableOffcanvas: true,\n  },\n  render: (args) =>\n    html`<z-app-header\n      .enableOffcanvas=${args.enableOffcanvas}\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      .enableZLogo=${args.enableZLogo}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const Stuck = {\n  decorators: [\n    (Story) => html`\n      <div style=\"padding: 16px var(--grid-margin)\">Scroll to see <code>stuck</code> prop in action.</div>\n      <div style=\"height: 200vh\">${Story()}</div>\n    `,\n  ],\n  parameters: {\n    docs: {\n      story: {\n        inline: false,\n        iframeHeight: \"400px\",\n      },\n    },\n    controls: {\n      exclude: [\"enableOffcanvas\"],\n    },\n  },\n  render: (args) =>\n    html`<z-app-header\n      stuck\n      .enableZLogo=${args.enableZLogo}\n      .enableSearch=${args.enableSearch}\n      .searchPageUrl=${args.searchPageUrl}\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}; --app-header-top-offset: 0\"\n    >\n      <h1 slot=\"title\">Fondamenti di fisica 8e - Meccanica, Onde, Termodinamica, Elettromagnetismo, Ottica</h1>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n\nexport const SearchPageButton = {\n  parameters: {\n    controls: {\n      exclude: [\"searchPageUrl\", \"enableSearch\", \"enableOffcanvas\"],\n    },\n  },\n  decorators: [\n    (Story) => html`\n      <div style=\"padding: 16px var(--grid-margin)\">\n        The prop <code>searchPageUrl</code> only affects the component in tablet and mobile viewports.\n      </div>\n      ${Story()}\n    `,\n  ],\n  render: (args) =>\n    html`<z-app-header\n      enable-search\n      .enableZLogo=${args.enableZLogo}\n      search-page-url=\"https://www.zanichelli.it\"\n      style=\"--app-header-content-max-width: ${args[\"--app-header-content-max-width\"]}\"\n    >\n      <h1 slot=\"title\">Applicazione</h1>\n      <h2 slot=\"subtitle\">Payoff dell'applicazione</h2>\n      ${menuTemplate()}\n    </z-app-header>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-aria-alert/index.js

@@ -2,11 +2,10 @@ import { Host, h } from "@stencil/core";
 import { ZAriaAlertMode } from "../../beans";
 export class ZAriaAlert {
     constructor() {
-        /** Aria live mode */
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '13857c631b48af312fa399d224dd299d24ad7026', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'b5f4501e8230e2d669eb24d431a39e58232eab20' })));
+        return (h(Host, { key: '507fd85bea3bc6cdfa0915afaf57866e29cc36e3', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'b28a7129f907a00beb9e5aa186f2960d7d6c4d1d' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {
@@ -21,8 +20,7 @@ export class ZAriaAlert {
                         "ZAriaAlertMode": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ZAriaAlertMode",
-                            "referenceLocation": "ZAriaAlertMode"
+                            "id": "src/beans/index.tsx::ZAriaAlertMode"
                         }
                     }
                 },
@@ -32,12 +30,11 @@ export class ZAriaAlert {
                     "tags": [],
                     "text": "Aria live mode"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "mode",
+                "reflect": false,
                 "defaultValue": "ZAriaAlertMode.POLITE"
             }
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-aria-alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-aria-alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAM3C,MAAM,OAAO,UAAU;;oBAGE,cAAc,CAAC,MAAM;;IAE5C,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,iBACR,MAAM,mBACJ,WAAW;YAEzB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ZAriaAlertMode} from \"../../beans\";\n\n@Component({\n  tag: \"z-aria-alert\",\n  shadow: false,\n})\nexport class ZAriaAlert {\n  /** Aria live mode */\n  @Prop()\n  mode: ZAriaAlertMode = ZAriaAlertMode.POLITE;\n\n  render(): HTMLZAriaAlertElement {\n    return (\n      <Host\n        aria-live={this.mode}\n        aria-atomic=\"true\"\n        aria-relevant=\"additions\"\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-aria-alert/index.stories.js

@@ -73,3 +73,4 @@ export const VisuallyHidden = {
         </z-visually-hidden>
       </div>`,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-aria-alert/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-aria-alert/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,SAAS,CAAC;AAEjB,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC;SACvC;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,cAAc,CAAC,MAAM;KAC5B;CACyB,CAAC;AAC7B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;;;;;;kBAiBU,IAAI,CAAC,IAAI;;;;aAId;CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;oBAsBY,IAAI,CAAC,IAAI;;;;;aAKhB;CACZ,CAAC","sourcesContent":["import {Meta} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAriaAlert} from \".\";\nimport {ZAriaAlertMode} from \"../../beans\";\nimport \"../z-button/index\";\nimport \"../z-visually-hidden/index\";\nimport \"./index\";\n\nconst StoryMeta = {\n  title: \"ZAriaAlert\",\n  component: \"z-aria-alert\",\n  argTypes: {\n    mode: {\n      control: {\n        type: \"select\",\n      },\n      options: Object.values(ZAriaAlertMode),\n    },\n  },\n  args: {\n    mode: ZAriaAlertMode.POLITE,\n  },\n} satisfies Meta<ZAriaAlert>;\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<script>\n        function myFunction() {\n          const myTimeout = setTimeout(myDelayedFunction, 3000);\n        }\n        function myDelayedFunction() {\n          var myalert = document.getElementById(\"idAlert\");\n          myalert.innerHTML = \"Ecco un numero a caso: \" + Math.random();\n        }\n      </script>\n      <div>\n        <h2 class=\"heading-2\">ZAriaAlert deafult</h2>\n        <span>\n          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message\n        </span>\n        <z-button onclick=\"myFunction()\">Click to say something</z-button>\n        <z-aria-alert\n          id=\"idAlert\"\n          mode=\"${args.mode}\"\n        >\n          Testo NON nascosto\n        </z-aria-alert>\n      </div>`,\n};\n\nexport const VisuallyHidden = {\n  render: (args) =>\n    html`<script>\n        function myFunction2() {\n          const myTimeout = setTimeout(myDelayedFunction2, 3000);\n        }\n        function myDelayedFunction2() {\n          var myalert = document.getElementById(\"idAlert2\");\n          myalert.innerHTML = \"Ecco un numero a caso: \" + Math.random();\n        }\n      </script>\n      <div>\n        <h2 class=\"heading-2\">ZAriaAlert with VisuallyHidden</h2>\n        <span>\n          You can also wrap your <code>z-aria-alert</code> with a <code>z-visually-hidden</code> tag in order to\n          visually hide the text.\n        </span>\n        <span>\n          Open your ScreenReader, Click on the button and wait 3 seconds, the screenreader will read a message\n        </span>\n        <z-button onclick=\"myFunction2()\">Click to say something but visually hidden</z-button>\n        <z-visually-hidden>\n          <z-aria-alert\n            id=\"idAlert2\"\n            mode=\"${args.mode}\"\n          >\n            Testo qua\n          </z-aria-alert>\n        </z-visually-hidden>\n      </div>`,\n};\n"]}

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

@@ -3,12 +3,11 @@ import { AvatarSize } from "../../beans";
 export class ZAvatar {
     constructor() {
         var _a, _b;
-        /** [optional] Avatar size */
         this.size = AvatarSize.MEDIUM;
-        /** [optional] Avatar text color */
+        this.text = undefined;
         this.textColor = "color-white";
-        /** [optional] Avatar background color */
         this.backgroundColor = "gray700";
+        this.image = undefined;
         if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
             console.warn("z-avatar must contain at least one prop between text and image");
         }
@@ -25,10 +24,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '0193c1b81b0b8770c8bd1f807d128a110e6bdce9', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '8ce8c6ffe56b55036f9f47146041fcb91051ad36', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: 'c14637da56b4861d00a40d3b976293b3d9580dab' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'bfda459b40de8ece37f6fb3457d9b90d2986b7f0', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: 'b989378860518c05074dcf3cf445df062679f3c1' }, this.text.substring(0, 2)), this.image && (h("img", { key: '56a3a248fe3f88b2ed285f6a7c133b542ca21940', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }
@@ -54,8 +53,7 @@ export class ZAvatar {
                         "AvatarSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::AvatarSize",
-                            "referenceLocation": "AvatarSize"
+                            "id": "src/beans/index.tsx::AvatarSize"
                         }
                     }
                 },
@@ -65,10 +63,8 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar size"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "size",
+                "reflect": false,
                 "defaultValue": "AvatarSize.MEDIUM"
             },
             "text": {
@@ -85,10 +81,8 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar text"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "text"
+                "attribute": "text",
+                "reflect": false
             },
             "textColor": {
                 "type": "string",
@@ -104,10 +98,8 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar text color"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "text-color",
+                "reflect": false,
                 "defaultValue": "\"color-white\""
             },
             "backgroundColor": {
@@ -124,10 +116,8 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar background color"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
                 "attribute": "background-color",
+                "reflect": false,
                 "defaultValue": "\"gray700\""
             },
             "image": {
@@ -144,11 +134,10 @@ export class ZAvatar {
                     "tags": [],
                     "text": "[optional] Avatar image"
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "image"
+                "attribute": "image",
+                "reflect": false
             }
         };
     }
 }
+//# sourceMappingURL=index.js.map

package/dist/collection/components/z-avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-avatar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,UAAU,EAAC,MAAM,aAAa,CAAC;AAOvC,MAAM,OAAO,OAAO;IAqBlB;;oBAlBoB,UAAU,CAAC,MAAM;;yBAQhB,aAAa;+BAIP,SAAS;;QAOlC,IAAI,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,MAAK,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,MAAK,CAAC,EAAE,CAAC;YACxD,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;QACjF,CAAC;KACF;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YACnC,OAAO,GAAG,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM,EAAE,CAAC;YAC3C,OAAO,GAAG,CAAC;QACb,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,KAAK,EAAE,CAAC;YAC1C,OAAO,GAAG,CAAC;QACb,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,IAAI,EAAC,EACnE,KAAK,EAAE;gBACL,KAAK,EAAE,SAAS,IAAI,CAAC,SAAS,GAAG;gBACjC,eAAe,EAAE,SAAS,IAAI,CAAC,eAAe,GAAG;aAClD;YAEA,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,+DAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ;YACpE,IAAI,CAAC,KAAK,IAAI,CACb,4DACE,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAChC,CACH,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {AvatarSize} from \"../../beans\";\n\n@Component({\n  tag: \"z-avatar\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAvatar {\n  /** [optional] Avatar size */\n  @Prop()\n  size?: AvatarSize = AvatarSize.MEDIUM;\n\n  /** [optional] Avatar text */\n  @Prop()\n  text?: string;\n\n  /** [optional] Avatar text color */\n  @Prop()\n  textColor?: string = \"color-white\";\n\n  /** [optional] Avatar background color */\n  @Prop()\n  backgroundColor?: string = \"gray700\";\n\n  /** [optional] Avatar image */\n  @Prop({mutable: true})\n  image?: string;\n\n  constructor() {\n    if (this.text?.length === 0 && this.image?.length === 0) {\n      console.warn(\"z-avatar must contain at least one prop between text and image\");\n    }\n  }\n\n  private getTextSize(): string {\n    if (this.size === AvatarSize.SMALL) {\n      return \"5\";\n    } else if (this.size === AvatarSize.MEDIUM) {\n      return \"4\";\n    } else if (this.size === AvatarSize.LARGE) {\n      return \"2\";\n    }\n  }\n\n  render(): HTMLZAvatarElement {\n    return (\n      <Host\n        class={{[this.size]: true, [`body-${this.getTextSize()}-sb`]: true}}\n        style={{\n          color: `var(--${this.textColor})`,\n          backgroundColor: `var(--${this.backgroundColor})`,\n        }}\n      >\n        {this.text && !this.image && <span>{this.text.substring(0, 2)}</span>}\n        {this.image && (\n          <img\n            src={this.image}\n            onError={() => (this.image = \"\")}\n          />\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-avatar/index.stories.js

@@ -48,3 +48,4 @@ export const Default = {
       image="${args.image}"
     ></z-avatar>`,
 };
+//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-avatar/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-avatar/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,UAAU,EAAC,MAAM,aAAa,CAAC;AACvC,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,CAAC;AAEjB,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;AAE7E;;;GAGG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC;YAClC,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,eAAe,EAAE;YACf,OAAO,EAAE,WAAW;YACpB,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU,CAAC,MAAM;QACvB,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,aAAa;QACxB,eAAe,EAAE,SAAS;QAC1B,KAAK,EAAE,qEAAqE;KAC7E;CACsB,CAAC;AAE1B,eAAe,SAAS,CAAC;AAEzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;cACM,IAAI,CAAC,IAAI;cACT,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;0BACR,IAAI,CAAC,eAAe;eAC/B,IAAI,CAAC,KAAK;iBACR;CACY,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZAvatar} from \".\";\nimport {AvatarSize} from \"../../beans\";\nimport {getColorTokens} from \"../../utils/storybook-utils\";\nimport \"./index\";\n\nconst colorTokens = getColorTokens().map((token) => token.replace(\"--\", \"\"));\n\n/**\n * Pass at least one prop between `text` and `image`.\n * If prop `image` contains a broken URL, the component will show `text` prop, if given.\n */\nconst StoryMeta = {\n  title: \"ZAvatar\",\n  component: \"z-avatar\",\n  argTypes: {\n    size: {\n      options: Object.values(AvatarSize),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    textColor: {\n      options: colorTokens,\n      control: {\n        type: \"select\",\n      },\n    },\n    backgroundColor: {\n      options: colorTokens,\n      control: {\n        type: \"select\",\n      },\n    },\n  },\n  args: {\n    size: AvatarSize.MEDIUM,\n    text: \"Avatar\",\n    textColor: \"color-white\",\n    backgroundColor: \"gray700\",\n    image: \"https://www.cinematographe.it/wp-content/uploads/2019/04/Avatar.jpg\",\n  },\n} satisfies Meta<ZAvatar>;\n\nexport default StoryMeta;\n\nexport const Default = {\n  render: (args) =>\n    html`<z-avatar\n      size=\"${args.size}\"\n      text=\"${args.text}\"\n      text-color=\"${args.textColor}\"\n      background-color=\"${args.backgroundColor}\"\n      image=\"${args.image}\"\n    ></z-avatar>`,\n} satisfies StoryObj<ZAvatar>;\n"]}