npm - @zanichelli/albe-web-components - Versions diffs - 16.0.0-rc2 → 16.0.0 - Mend

@zanichelli/albe-web-components 16.0.0-rc2 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (764) hide show

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

@@ -1,5 +1,6 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { B as ButtonVariant, e as ControlSize, O as OffCanvasVariant, u as TransitionDirection } from './index2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
+import { p as Device, g as KeyboardCode, B as ButtonVariant, e as ControlSize, O as OffCanvasVariant, u as TransitionDirection } from './index2.js';
+import { g as getDevice } from './utils.js';
 import { d as defineCustomElement$c } from './index4.js';
 import { d as defineCustomElement$b } from './index6.js';
 import { d as defineCustomElement$a } from './index9.js';
@@ -12,7 +13,7 @@ import { d as defineCustomElement$4 } from './index21.js';
 import { d as defineCustomElement$3 } from './index23.js';
 import { d as defineCustomElement$2 } from './index24.js';
-const stylesCss = ":host{--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-content-max-width:100%;--app-header-height:auto;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-default-text);--app-header-title-font-size:var(--app-header-typography-3-size);--app-header-title-lineheight:var(--app-header-typography-3-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-3-tracking);--app-header-stucked-text-color:var(--color-default-text);position:relative;display:block;height:var(--app-header-height);color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5)}.hero-container+.heading-panel{background:transparent}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:flex-start;column-gap:calc(var(--space-unit) * 2)}::slotted([slot=\"title\"]),.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-weight:var(--font-bd)}::slotted([slot=\"title\"]){font-size:var(--app-header-title-font-size);letter-spacing:var(--app-header-title-letter-spacing);line-height:var(--app-header-title-lineheight)}.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking);line-height:var(--app-header-typography-3-lineheight)}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2))}::slotted([slot=\"top-subtitle\"]),::slotted([slot=\"subtitle\"]){margin:0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;line-height:26px}::slotted([slot=\"subtitle\"]){font-weight:500}::slotted([slot=\"top-subtitle\"]){font-weight:400}.menu-container{display:flex;width:100%;flex:1 auto;flex-flow:row wrap}:host([menu-length=\"0\"]:not([enable-search])) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}z-searchbar{z-index:0;display:flex;width:auto;min-width:calc(var(--space-unit) * 32);flex:1 auto;align-items:center;margin-left:auto}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto;column-gap:calc(var(--space-unit) * 2)}.heading-stuck .heading-title{overflow:hidden}.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin:0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none !important}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container :is(.drawer-trigger,z-button.search-page-button){display:flex;height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));align-items:center}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:none}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu){--z-menu-label-color:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host{--app-header-title-font-size:var(--app-header-typography-6-size);--app-header-title-lineheight:var(--app-header-typography-6-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-6-tracking)}.heading-panel{flex-flow:row wrap;align-items:center;padding-bottom:calc(var(--space-unit) * 2)}.heading-container{margin-right:auto}:host(:is([flow=\"offcanvas\"],[menu-length=\"0\"])) :is(.heading-container,.menu-container){width:auto}:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}.menu-container{flex:initial;align-items:center}:host([menu-length=\"0\"]) .menu-container:not(:empty){height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight))}:host(:not([flow=\"offcanvas\"])) .menu-container{gap:var(--space-unit) calc(var(--space-unit) * 5)}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}}@media (min-width: 1152px){:host{--app-header-title-font-size:var(--app-header-typography-7-size);--app-header-title-lineheight:var(--app-header-typography-7-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-7-tracking)}.heading-panel{justify-content:flex-start;padding-bottom:calc(var(--space-unit) * 3)}.heading-container,.menu-container{width:auto}:host([flow=\"stack\"]) .heading-panel{flex-flow:column;align-items:flex-start}:host([flow=\"stack\"]) .menu-container{width:100%}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-panel{row-gap:calc(var(--space-unit) * 3)}z-searchbar{min-width:calc(var(--space-unit) * 45);flex:initial}}@media (min-width: 1366px){:host{--app-header-title-font-size:var(--app-header-typography-9-size);--app-header-title-lineheight:var(--app-header-typography-9-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-9-tracking)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
+const stylesCss = ":host{--app-header-content-max-width:100%;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-default-text);--app-header-title-lineheight:1.25;--app-header-stucked-text-color:var(--color-default-text);position:relative;display:block;box-shadow:0 2px 4px 0 var(--shadow-color-base);color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg)}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host(:not([enable-search=\"false\"])[search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:start}img.z-logo{content:url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>')}.heading-title>img.z-logo{height:calc(var(--space-unit) * 3);margin:4px var(--space-unit) 0 0}:host([stuck]) .heading-stuck .heading-title>img.z-logo{margin-top:0}::slotted([slot=\"product-logo\"]){width:32px;height:32px;margin-right:var(--space-unit);border-radius:50%}::slotted([slot=\"title\"]),.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif}::slotted([slot=\"title\"]){display:-webkit-box;overflow:hidden;flex-grow:1;padding-right:calc(var(--space-unit) * 2);-webkit-box-orient:vertical;font-size:var(--font-size-6);-webkit-line-clamp:2;text-overflow:ellipsis;white-space:initial}:host(:not([menu-length=\"0\"])) .p-left{padding-left:calc(var(--app-header-drawer-trigger-size) + var(--space-unit))}:host(:is([enable-offcanvas=\"true\"]):not([menu-length=\"0\"])){padding-left:calc(var(--app-header-drawer-trigger-size) + var(--space-unit))}::slotted([slot=\"top-subtitle\"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;font-family:var(--font-family-sans);font-size:14px;font-style:italic;font-weight:400;-webkit-line-clamp:2;line-height:18.2px;white-space:initial}.menu-container{display:flex;width:100%;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length=\"0\"]:not([enable-search])) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after{position:absolute;top:50%;right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:currentcolor;content:\"\";transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center;padding-top:calc(var(--space-unit) * 2)}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{overflow:hidden}.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){font-size:var(--font-size-9);font-weight:var(--font-bd);line-height:1.25}.heading-stuck .heading-title [name=\"stucked-title\"]{display:block;overflow:hidden;margin-right:calc(var(--space-unit) * 2);font-size:var(--font-size-5);text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.drawer-trigger:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none !important}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:none}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (min-width: 768px){:host([enable-search]:not([search-page-url])) .heading-container .heading-title{flex-wrap:nowrap}z-searchbar{width:30%;padding-top:0}::slotted([slot=\"title\"]){font-size:var(--font-size-9)}.heading-title{align-items:center}.heading-container .heading-title{align-items:flex-start}div.heading-container .heading-title button,div.heading-container .heading-title z-searchbar,div.heading-container .heading-title img,div.heading-container .heading-title ::slotted([slot=\"product-logo\"]),div.heading-container .heading-title .search-page-button{margin-top:var(--space-unit)}.heading-title>img.z-logo{height:32px}.heading-panel{align-items:center;padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}.heading-panel.has-menu{padding-bottom:0}:host(:not([enable-search=\"false\"])[search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.menu-container{flex:initial;align-items:center}:host([menu-length=\"0\"]) .menu-container:not(:empty){height:calc(var(--space-unit) * 4.5 * var(--app-header-title-lineheight))}:host(:not([enable-offcanvas=\"false\"])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title>*,.heading-stuck .heading-title [name=\"stucked-title\"]{font-size:var(--font-size-8)}.heading-stuck-content{padding:6px var(--grid-margin)}::slotted([slot=\"product-logo\"]){margin-right:calc(var(--space-unit) * 1.5)}:host(:not([enable-offcanvas]):not([menu-length=\"0\"])){padding-left:0}}@media (min-width: 1152px){::slotted([slot=\"product-logo\"]){margin-right:var(--space-unit)}z-searchbar{min-width:calc(var(--space-unit) * 45);flex:initial}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
 const ZAppHeaderStyle0 = stylesCss;
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
@@ -22,6 +23,7 @@ const ZAppHeader$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader extends H
         this.__registerHost();
         this.__attachShadow();
         this.sticking = createEvent(this, "sticking", 7);
+        this.currentIndex = -1;
         this.observer = SUPPORT_INTERSECTION_OBSERVER &&
             new IntersectionObserver(([entry]) => {
                 this._stuck = !entry.isIntersecting;
@@ -29,32 +31,78 @@ const ZAppHeader$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader extends H
                 threshold: 0.5,
             });
         this.stuck = false;
-        this.hero = undefined;
-        this.overlay = false;
-        this.flow = "auto";
-        this.drawerOpen = false;
+        this.enableOffcanvas = false;
         this.enableSearch = false;
         this.searchPlaceholder = "Cerca";
         this.searchString = "";
         this.searchPageUrl = undefined;
+        this.enableZLogo = true;
         this._stuck = false;
-        this.currentViewport = "mobile";
+        this.currentViewport = Device.MOBILE;
         this.menuLength = undefined;
+        this.drawerOpen = false;
         this.openDrawer = this.openDrawer.bind(this);
         this.closeDrawer = this.closeDrawer.bind(this);
         this.collectMenuElements = this.collectMenuElements.bind(this);
     }
     evaluateViewport() {
-        if (window.innerWidth < 768) {
-            this.currentViewport = "mobile";
+        this.currentViewport = getDevice();
+    }
+    handleKeyDown(e) {
+        if (e.code === KeyboardCode.ESC && this.drawerOpen) {
+            this.closeDrawer();
+            return;
+        }
+        this.handleArrowsNav(e);
+    }
+    handleArrowsNav(e) {
+        if (e.code !== KeyboardCode.ARROW_DOWN && e.code !== KeyboardCode.ARROW_UP && this.enableOffcanvas) {
+            return;
         }
-        else if (window.innerWidth >= 768 && window.innerWidth < 1152) {
-            this.currentViewport = "tablet";
+        if (document.activeElement.slot === "item") {
+            return;
+        }
+        const menuItems = Array.from(this.menuElements).map((el) => el.shadowRoot.querySelector(".menu-label"));
+        let nextFocusableItem;
+        if (this.enableOffcanvas || this._stuck) {
+            // INFO: reset focus on all menu items
+            menuItems.forEach((item) => item.setAttribute("tabindex", "-1"));
+            e.preventDefault();
+            e.stopPropagation();
+            if (e.code === KeyboardCode.ARROW_DOWN) {
+                nextFocusableItem = this.getNextItem(menuItems, 1);
+            }
+            else if (e.code === KeyboardCode.ARROW_UP) {
+                nextFocusableItem = this.getNextItem(menuItems, -1);
+            }
         }
         else {
-            this.currentViewport = "desktop";
+            if (e.code === KeyboardCode.ARROW_DOWN || e.code === KeyboardCode.ARROW_UP) {
+                e.preventDefault();
+                return;
+            }
+            //INFO: reset focus on all menu items
+            menuItems.forEach((item) => item.setAttribute("tabindex", "-1"));
+            if (e.code === KeyboardCode.ARROW_RIGHT) {
+                nextFocusableItem = this.getNextItem(menuItems, 1);
+            }
+            else if (e.code === KeyboardCode.ARROW_LEFT) {
+                nextFocusableItem = this.getNextItem(menuItems, -1);
+            }
+        }
+        if (nextFocusableItem) {
+            nextFocusableItem.setAttribute("tabindex", "0");
+            nextFocusableItem.focus();
         }
     }
+    getNextItem(menuItems, direction) {
+        if (this.currentIndex === -1) {
+            this.currentIndex = direction === 1 ? 0 : menuItems.length - 1;
+            return menuItems[this.currentIndex];
+        }
+        this.currentIndex = (this.currentIndex + direction + menuItems.length) % menuItems.length;
+        return menuItems[this.currentIndex];
+    }
     onStuck() {
         const scrollParent = this.scrollParent;
         if (!scrollParent) {
@@ -66,13 +114,33 @@ const ZAppHeader$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader extends H
         if (this.menuElements.length === 0) {
             return;
         }
-        const elements = this.menuElements;
-        elements.forEach((element) => {
+        this.menuElements.forEach((element) => {
             element.open = false;
             element.floating = !this.drawerOpen;
             element.verticalContext = this.drawerOpen;
+            element.setAttribute("role", "menuitem");
+            element.setAttribute("tabindex", "-1");
         });
     }
+    onStuckMode() {
+        if (this.stuck) {
+            this.enableStuckObserver();
+        }
+        else {
+            this.disableStuckMode();
+        }
+    }
+    enableStuckObserver() {
+        if (this.observer) {
+            this.observer.observe(this.container);
+        }
+    }
+    disableStuckMode() {
+        this._stuck = false;
+        if (this.observer) {
+            this.observer.unobserve(this.container);
+        }
+    }
     get title() {
         const titleElement = this.hostElement.querySelector('[slot="title"]');
         if (titleElement === null) {
@@ -88,70 +156,133 @@ const ZAppHeader$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader extends H
         return parent;
     }
     get canShowMenu() {
-        return this.flow !== "offcanvas" && this.currentViewport !== "mobile" && !this.drawerOpen;
-    }
-    get canShowSearchbar() {
-        if (!this.enableSearch) {
-            return false;
-        }
-        // Always show the searchbar on desktop, even if a searchPageUrl is set
-        if (this.searchPageUrl) {
-            return this.currentViewport === "desktop";
-        }
-        return true;
-    }
-    /**
-     * Whether the header has a hero image, either as a prop or as a slot.
-     */
-    get hasHero() {
-        return !!this.hero || this.hostElement.querySelector("[slot=hero]") !== null;
+        return (!this.enableOffcanvas &&
+            this.menuElements.length > 0 &&
+            this.currentViewport !== Device.MOBILE &&
+            !this.drawerOpen);
     }
     openDrawer() {
         this.drawerOpen = true;
     }
     closeDrawer() {
         this.drawerOpen = false;
+        this.burgerButton.focus();
+        this.currentIndex = -1;
     }
     collectMenuElements() {
         const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
         this.menuLength = menuElements.length;
         this.setMenuFloatingMode();
     }
-    enableStuckObserver() {
-        if (this.observer) {
-            this.observer.observe(this.container);
+    isSlotPresent(slotName) {
+        const slot = this.hostElement.querySelector(`[slot="${slotName}"]`);
+        return !!slot;
+    }
+    renderSeachbar() {
+        const renderSearch = this.currentViewport === Device.MOBILE || this.currentViewport === Device.TABLET ? true : false;
+        if (this.currentViewport === Device.MOBILE && !this.searchPageUrl && this._stuck) {
+            return;
+        }
+        if (this.searchPageUrl && (this.currentViewport === Device.MOBILE || this.currentViewport === Device.TABLET)) {
+            return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
         }
+        return (h("z-searchbar", { ref: (el) => (this.searchbar = el), value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: renderSearch, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail), onKeyDown: (e) => {
+                if (e.code === KeyboardCode.ARROW_RIGHT || e.code === KeyboardCode.ARROW_LEFT) {
+                    e.stopPropagation();
+                }
+            } }));
     }
-    disableStuckMode() {
-        this._stuck = false;
-        if (this.observer) {
-            this.observer.unobserve(this.container);
+    renderProductLogos() {
+        return (h(Fragment, null, this.enableZLogo && (h("img", { class: "z-logo", alt: "Logo Zanichelli" })), this.currentViewport !== Device.MOBILE && h("slot", { name: "product-logo" })));
+    }
+    renderMenuButton() {
+        return (this.menuLength > 0 &&
+            (this.enableOffcanvas || this._stuck || this.currentViewport === Device.MOBILE) && (h("button", { ref: (el) => (this.burgerButton = el), "aria-label": "Apri menu", "aria-haspopup": "menu", "aria-expanded": `${this.drawerOpen}`, "aria-controls": "menu-offcanvas", class: "drawer-trigger", onClick: this.openDrawer, onKeyUp: (ev) => {
+                if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {
+                    this.closeMenuButton.focus();
+                }
+            } }, h("z-icon", { name: "burger-menu" }))));
+    }
+    renderOffcanvas() {
+        return (h("z-offcanvas", { variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("div", { slot: "canvasContent" }, h("button", { ref: (el) => (this.closeMenuButton = el), class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { name: "close" })), h("div", { class: "drawer-content", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { name: "menu", onSlotchange: this.collectMenuElements })))));
+    }
+    renderStuck() {
+        return (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.renderMenuButton(), h("div", { class: "heading-title" }, this.renderProductLogos(), h("slot", { name: "stucked-title" }, this.title)), this.enableSearch && this.renderSeachbar())));
+    }
+    getWidthMenu() {
+        if (this.menuElements.length === 0) {
+            return;
         }
+        return Array.from(this.menuElements).reduce((acc, item) => item.getBoundingClientRect().width + acc, 100);
     }
-    onStuckMode() {
-        if (this.stuck) {
-            this.enableStuckObserver();
+    focusToFirstItemMenu() {
+        const menuItems = Array.from(this.menuElements).map((el) => el.shadowRoot.querySelector(".menu-label"));
+        menuItems[0].focus();
+        this.currentIndex = 0;
+    }
+    handleFocusItem(e) {
+        const menuItems = Array.from(this.menuElements).map((el) => el.shadowRoot.querySelector(".menu-label"));
+        if (e.code === KeyboardCode.ARROW_DOWN ||
+            e.code === KeyboardCode.ARROW_UP ||
+            e.code === KeyboardCode.ENTER ||
+            e.code === KeyboardCode.TAB) {
+            return;
         }
-        else {
-            this.disableStuckMode();
+        if (document.activeElement.tagName === "Z-MENU-SECTION" || document.activeElement.tagName === "Z-MENU") {
+            return;
         }
-    }
-    renderSearchLinkButton() {
-        if (!this.enableSearch || !this.searchPageUrl || this.currentViewport === "desktop") {
-            return null;
+        if (this.enableSearch && this.currentIndex === 0) {
+            const input = this.searchbar.shadowRoot.querySelector("z-input input");
+            input.focus();
+            this.currentIndex = -1;
+        }
+        if (this.currentIndex !== -1) {
+            menuItems[this.currentIndex].focus();
         }
-        return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
     }
-    renderSeachbar(searchButtonIconOnly) {
-        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: searchButtonIconOnly, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+    componentWillLoad() {
+        this.collectMenuElements();
+        this.evaluateViewport();
     }
     componentDidLoad() {
-        this.collectMenuElements();
         this.onStuckMode();
-        this.evaluateViewport();
+        if (this.enableOffcanvas) {
+            return;
+        }
+        const menuWidth = this.getWidthMenu();
+        const containerSidePadding = 50;
+        this.resizeObserver = new ResizeObserver((observer) => {
+            const containerWidth = observer[0].contentRect.width;
+            if (this.currentViewport === Device.MOBILE) {
+                return (this.enableOffcanvas = true);
+            }
+            if (menuWidth > containerWidth - containerSidePadding && !this.enableOffcanvas) {
+                this.enableOffcanvas = true;
+            }
+            else if (menuWidth <= containerWidth - containerSidePadding && this.enableOffcanvas) {
+                this.enableOffcanvas = false;
+            }
+        });
+        this.resizeObserver.observe(this.container);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '6ef78f216bf32166c80027e6c8d8c3c8b46e11a4', "menu-length": this.menuLength }, this.hasHero && (h("div", { key: '097f49ab84c9c5a02b1919bbf0d8bea41a9e7475', class: "hero-container" }, h("slot", { key: 'e68c20961233eec80133281adfe2e5068de05ca9', name: "hero" }, this.hero && (h("img", { key: '3f639bca7f3c5ae1f9f1ea088f4f072a11b398fd', alt: "", src: this.hero }))))), h("div", { key: '7f9a9025ee6b36ce4ddf119fe29afc28cff3f575', class: "heading-panel", ref: (el) => (this.container = el) }, h("div", { key: 'bf9e7e0634b79f86f886dbad016c1ee7c3a2bd0c', class: "heading-container" }, h("div", { key: '5f105d5a5e0d1545b953049c2f10ea1e409c5dd3', class: "heading-subtitle" }, h("slot", { key: 'e5257749958900cbdf0da3abc97647a6ca199a9a', name: "top-subtitle" })), h("div", { key: 'cd422b72e4fa5a1ddb400d0af44a87e28e14e496', class: "heading-title" }, this.menuLength > 0 && (h("button", { key: '8d0fd05ecac894b7c123c2b1850636f5c42445bb', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '7d3c4426ed0cb81f5d871e1e9d4f0a08c6e4bd1a', name: "burger-menu" }))), h("slot", { key: 'eb4a376c9edf06a839e2eda8cae3ca9f5c0c98f7', name: "title" }), this.renderSearchLinkButton()), h("div", { key: 'ca4175ad587aaa14435112451e616b9d40f4058b', class: "heading-subtitle" }, h("slot", { key: '923548867c7ecf93e7e4d46cdd68aff309a301eb', name: "subtitle" }))), (this.canShowMenu || this.canShowSearchbar) && (h("div", { key: 'b424522341c597059c9be302d30c5af85c3c1d12', class: "menu-container" }, this.canShowMenu && (h("slot", { key: '97b5bd01961bb07d13dc16cdf0bda52ac7cf7261', name: "menu", onSlotchange: this.collectMenuElements })), this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== "desktop")))), h("z-offcanvas", { key: '42d89b3e9697aaf5c0781d69c6aca4a1fe44c389', variant: OffCanvasVariant.OVERLAY, transitiondirection: TransitionDirection.RIGHT, open: this.drawerOpen, onCanvasOpenStatusChanged: (ev) => (this.drawerOpen = ev.detail) }, h("button", { key: '29e9eedfba19cca2316bdde81d52052164fe2003', class: "drawer-close", "aria-label": "Chiudi menu", onClick: this.closeDrawer, slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}`, disabled: !this.drawerOpen }, h("z-icon", { key: '3f63af4cc3fc4e632a797b16e8530affc6f9ea79', name: "close" })), h("div", { key: '9925e208c3a9f45eebbbb210ad5b23041201b239', class: "drawer-content", slot: "canvasContent", "aria-hidden": `${!this.drawerOpen}` }, h("slot", { key: 'b687cd86e3e6dcb1cd5c8c5ac535dfdf9d1b9dd2', name: "menu", onSlotchange: this.collectMenuElements }))), this._stuck && (h("div", { key: 'a5eedb131fd6a50dad224c5016990b5a9256764b', class: "heading-stuck" }, h("div", { key: '9747f43c0c824f3c98c299071f92fa7d0d695529', class: "heading-stuck-content" }, this.menuLength > 0 && (h("button", { key: 'ad7fadb424d1b59852bd6f7bbfc875555495c163', class: "drawer-trigger", "aria-label": "Apri menu", onClick: this.openDrawer }, h("z-icon", { key: '4dbe75545f5e15fac2bd81c6726294d6f848681c', name: "burger-menu" }))), h("div", { key: 'a22d676527aa51b34942547a36651d85163b85ac', class: "heading-title" }, h("slot", { key: 'ba141592baf287d65faa4624f9c32c04471073d5', name: "stucked-title" }, this.title)), this.renderSearchLinkButton(), this.canShowSearchbar && this.currentViewport === "desktop" && this.renderSeachbar(false))))));
+        const hasTopSubtitle = this.isSlotPresent("top-subtitle");
+        return (h(Host, { key: '1b905f7f0c42a9688493a38353ad69282248dac3', "menu-length": this.menuLength }, h("div", { key: 'f69888ebf52067bc34385e3f455816594d9209a2', class: `heading-panel ${this.menuLength > 0 && !this.enableOffcanvas ? "has-menu" : ""}`, ref: (el) => (this.container = el) }, h("div", { key: '827f5ee62dd066de4b049453738f3a587ab34320', class: "heading-container" }, ((!this.enableSearch && this.currentViewport === Device.MOBILE) ||
+            this.currentViewport !== Device.MOBILE) && (h("div", { key: 'd520fb97f1fe09340b6265be94b09ff26dc0e9cf', class: `${this.enableOffcanvas ? "p-left" : ""}` }, h("slot", { key: 'a8f1d05fd7f71603f3b63c43317859ee8c5e37bf', name: "top-subtitle" }))), h("div", { key: 'ec1b3adc2e17d8713849166799c553122d1e7c80', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '263a9099b08065da250a1d0c228caac435dc9dd7', name: "title" }), this.enableSearch && this.currentViewport !== Device.MOBILE && this.renderSeachbar()), this.enableSearch && this.currentViewport === Device.MOBILE && this.renderSeachbar()), this.canShowMenu && (h("div", { key: '2c952c6e1b1ec608f73f5c5210ab5b5331d379bf', class: "menu-container", onKeyUp: (e) => {
+                if (this.enableOffcanvas) {
+                    return;
+                }
+                if (this.currentIndex === -1) {
+                    this.focusToFirstItemMenu();
+                }
+                else {
+                    this.handleFocusItem(e);
+                }
+            }, role: "hidden", tabIndex: 0 }, h("slot", { key: '0b71f1d0aa78599592213f61ee49e68daad5d04f', name: "menu", onSlotchange: this.collectMenuElements })))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return this; }
     static get watchers() { return {
@@ -162,18 +293,17 @@ const ZAppHeader$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader extends H
     static get style() { return ZAppHeaderStyle0; }
 }, [1, "z-app-header", {
         "stuck": [516],
-        "hero": [1],
-        "overlay": [516],
-        "flow": [513],
-        "drawerOpen": [516, "drawer-open"],
+        "enableOffcanvas": [1540, "enable-offcanvas"],
         "enableSearch": [516, "enable-search"],
         "searchPlaceholder": [1, "search-placeholder"],
         "searchString": [1025, "search-string"],
         "searchPageUrl": [1, "search-page-url"],
+        "enableZLogo": [516, "enable-z-logo"],
         "_stuck": [32],
         "currentViewport": [32],
-        "menuLength": [32]
-    }, [[9, "resize", "evaluateViewport"]], {
+        "menuLength": [32],
+        "drawerOpen": [32]
+    }, [[9, "resize", "evaluateViewport"], [0, "keydown", "handleKeyDown"]], {
         "_stuck": ["onStuck"],
         "drawerOpen": ["setMenuFloatingMode"],
         "stuck": ["onStuckMode"]

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

	@@ -1 +1 @@
1	- {"file":"z-app-header.js","mappings":"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","names":["ZAppHeader"],"sources":["src/components/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/z-app-header/index.tsx"],"sourcesContent":[":host {\n --app-header-typography-1-size: 24px;\n --app-header-typography-2-size: 28px;\n --app-header-typography-3-size: 32px;\n --app-header-typography-4-size: 36px;\n --app-header-typography-5-size: 42px;\n --app-header-typography-6-size: 48px;\n --app-header-typography-7-size: 54px;\n --app-header-typography-8-size: 60px;\n --app-header-typography-9-size: 68px;\n --app-header-typography-10-size: 76px;\n --app-header-typography-11-size: 84px;\n --app-header-typography-12-size: 92px;\n --app-header-typography-1-lineheight: 1.33;\n --app-header-typography-2-lineheight: 1.29;\n --app-header-typography-3-lineheight: 1.25;\n --app-header-typography-4-lineheight: 1.24;\n --app-header-typography-5-lineheight: 1.24;\n --app-header-typography-6-lineheight: 1.25;\n --app-header-typography-7-lineheight: 1.2;\n --app-header-typography-8-lineheight: 1.26;\n --app-header-typography-9-lineheight: 1.24;\n --app-header-typography-10-lineheight: 1.26;\n --app-header-typography-11-lineheight: 1.2;\n --app-header-typography-12-lineheight: 1.2;\n --app-header-typography-1-tracking: calc(-0.2 / 1em);\n --app-header-typography-2-tracking: calc(-0.4 / 1em);\n --app-header-typography-3-tracking: calc(-0.6 / 1em);\n --app-header-typography-4-tracking: calc(-0.8 / 1em);\n --app-header-typography-5-tracking: calc(-1 / 1em);\n --app-header-typography-6-tracking: calc(-1.2 / 1em);\n --app-header-typography-7-tracking: calc(-1.4 / 1em);\n --app-header-typography-8-tracking: calc(-1.6 / 1em);\n --app-header-typography-9-tracking: calc(-1.8 / 1em);\n --app-header-typography-10-tracking: calc(-2 / 1em);\n --app-header-typography-11-tracking: calc(-2.2 / 1em);\n --app-header-typography-12-tracking: calc(-2.4 / 1em);\n --app-header-content-max-width: 100%;\n --app-header-height: auto;\n\n /* Variable to set stuck header and drawer's top offset.\n Useful when something is absolutely positioned above the header. /\n --app-header-top-offset: 48px;\n --app-header-drawer-trigger-size: calc(var(--space-unit) 4);\n\n /* Variable to customize header background color. /\n --app-header-bg: var(--color-surface01);\n\n / Variable to customize stuck header background color. /\n --app-header-stucked-bg: var(--color-surface01);\n\n / Variable to customize text and icon color. /\n --app-header-text-color: var(--color-default-text);\n\n / Variable to customize the title's font size.\n NOTE: Only use one of the exported `--app-header-typography--size` as a value. /\n --app-header-title-font-size: var(--app-header-typography-3-size);\n\n /* Variable to customize the title's line-height.\n NOTE: Only use one of the exported `--app-header-typography--lineheight` as a value\n and use the same level as the one of the font size. /\n --app-header-title-lineheight: var(--app-header-typography-3-lineheight);\n\n /* Variable to customize the title's letter-spacing.\n NOTE: Only use one of the exported `--app-header-typography--tracking` as a value\n and use the same level as the one of the font size. /\n --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);\n\n /* Variable to customize stuck header's text and icon color. /\n --app-header-stucked-text-color: var(--color-default-text);\n\n position: relative;\n display: block;\n height: var(--app-header-height);\n color: var(--app-header-text-color);\n}\n\n:host,\n {\n box-sizing: border-box;\n}\n\n.heading-panel {\n position: relative;\n display: flex;\n width: 100%;\n max-width: var(--app-header-content-max-width);\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: baseline;\n padding: var(--grid-margin);\n margin: 0 auto;\n background: var(--app-header-bg);\n gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n}\n\n.hero-container + .heading-panel {\n background: transparent;\n}\n\n:host(:empty) .heading-panel {\n padding: 0;\n}\n\n.heading-container {\n position: relative;\n z-index: 1;\n display: flex;\n width: 100%;\n max-width: 100%;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.heading-title {\n display: flex;\n max-width: 100%;\n flex-direction: row;\n align-items: flex-start;\n column-gap: calc(var(--space-unit) * 2);\n}\n\n::slotted([slot=\"title\"]),\n.heading-stuck .heading-title > ,\n::slotted([slot=\"stucked-title\"]) {\n margin: 0;\n font-family: \"IBM Plex Serif\", serif;\n font-weight: var(--font-bd);\n}\n\n::slotted([slot=\"title\"]) {\n font-size: var(--app-header-title-font-size);\n letter-spacing: var(--app-header-title-letter-spacing);\n line-height: var(--app-header-title-lineheight);\n}\n\n.heading-stuck .heading-title > ,\n::slotted([slot=\"stucked-title\"]) {\n font-size: var(--app-header-typography-3-size);\n letter-spacing: var(--app-header-typography-3-tracking);\n line-height: var(--app-header-typography-3-lineheight);\n}\n\n:host(:not([menu-length=\"0\"])) .heading-subtitle {\n padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));\n}\n\n::slotted([slot=\"top-subtitle\"]),\n::slotted([slot=\"subtitle\"]) {\n margin: 0;\n font-family: var(--font-family-sans);\n font-size: 20px;\n font-style: italic;\n line-height: 26px;\n}\n\n::slotted([slot=\"subtitle\"]) {\n font-weight: 500;\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n font-weight: 400;\n}\n\n.menu-container {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-flow: row wrap;\n}\n\n:host([menu-length=\"0\"]:not([enable-search])) .menu-container,\n.menu-container:empty {\n display: none;\n}\n\n.menu-container ::slotted([open]) {\n position: relative;\n z-index: 3;\n}\n\nz-searchbar {\n z-index: 0;\n display: flex;\n width: auto;\n min-width: calc(var(--space-unit) * 32);\n flex: 1 auto;\n align-items: center;\n margin-left: auto;\n}\n\n.heading-stuck {\n position: fixed;\n z-index: 20;\n top: var(--app-header-top-offset);\n left: 0;\n width: 100%;\n max-width: 100%;\n animation: slide-stuck-heading-in 250ms ease-out;\n background: var(--app-header-stucked-bg);\n box-shadow: var(--shadow-2);\n color: var(--app-header-stucked-text-color);\n}\n\n.heading-stuck-content {\n display: flex;\n max-width: var(--app-header-content-max-width);\n align-items: center;\n padding: var(--space-unit) var(--grid-margin);\n margin: 0 auto;\n column-gap: calc(var(--space-unit) * 2);\n}\n\n.heading-stuck .heading-title {\n overflow: hidden;\n}\n\n.heading-stuck .heading-title > ,\n.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]) {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.heading-stuck-content z-button {\n margin-left: auto;\n}\n\n.drawer-trigger {\n padding: 0;\n border: 0;\n margin: 0;\n appearance: none;\n background: none;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n}\n\n.drawer-trigger:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n.drawer-trigger z-icon {\n --z-icon-width: var(--app-header-drawer-trigger-size);\n --z-icon-height: var(--app-header-drawer-trigger-size);\n\n fill: currentcolor;\n}\n\n/ Simulate the height of the first line of text,\nto correctly align drawer icon and search page button with the title /\n.heading-container :is(.drawer-trigger, z-button.search-page-button) {\n display: flex;\n height: calc(var(--app-header-title-font-size) var(--app-header-title-lineheight));\n align-items: center;\n}\n\n.heading-container z-button.search-page-button {\n margin-left: auto;\n}\n\n.drawer-content {\n display: none;\n}\n\nz-offcanvas[open] .drawer-content {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-direction: column;\n row-gap: calc(var(--space-unit) * 2.5);\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n width: 100%;\n}\n\n.drawer-close {\n --z-icon-width: var(--app-header-drawer-trigger-size);\n --z-icon-height: var(--app-header-drawer-trigger-size);\n\n padding: 0;\n border: 0;\n margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n appearance: none;\n background: transparent;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n fill: currentcolor;\n font-size: inherit;\n outline: none;\n}\n\n.drawer-close:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.hero-container {\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n:host([overlay]) .heading-panel .drawer-trigger z-icon,\n:host([overlay]) .heading-panel .heading-container,\n:host([overlay]) .heading-panel .menu-container {\n color: var(--color-white);\n fill: var(--color-white);\n}\n\n:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {\n --z-menu-label-color: var(--color-white);\n}\n\n:host([overlay]) .hero-container::after {\n position: absolute;\n z-index: 0;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-black);\n content: \"\";\n opacity: 0.5;\n}\n\n.hero-container img,\n.hero-container ::slotted() {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: top center;\n -webkit-user-drag: none;\n}\n\n/ Tablet breakpoint /\n@media (min-width: 768px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-6-size);\n --app-header-title-lineheight: var(--app-header-typography-6-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);\n }\n\n .heading-panel {\n flex-flow: row wrap;\n align-items: center;\n padding-bottom: calc(var(--space-unit) 2);\n }\n\n .heading-container {\n margin-right: auto;\n }\n\n :host(:is([flow=\"offcanvas\"], [menu-length=\"0\"])) :is(.heading-container, .menu-container) {\n width: auto;\n }\n\n :host(:not([flow=\"offcanvas\"])) .heading-subtitle {\n padding-left: 0;\n }\n\n .menu-container {\n flex: initial;\n align-items: center;\n }\n\n :host([menu-length=\"0\"]) .menu-container:not(:empty) {\n height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));\n }\n\n :host(:not([flow=\"offcanvas\"])) .menu-container {\n gap: var(--space-unit) calc(var(--space-unit) * 5);\n }\n\n :host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger {\n display: none;\n }\n}\n\n/* Desktop breakpoint /\n@media (min-width: 1152px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-7-size);\n --app-header-title-lineheight: var(--app-header-typography-7-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);\n }\n\n .heading-panel {\n justify-content: flex-start;\n padding-bottom: calc(var(--space-unit) 3);\n }\n\n .heading-container,\n .menu-container {\n width: auto;\n }\n\n :host([flow=\"stack\"]) .heading-panel {\n flex-flow: column;\n align-items: flex-start;\n }\n\n :host([flow=\"stack\"]) .menu-container {\n width: 100%;\n }\n\n :host(:not([flow=\"offcanvas\"], [menu-length=\"0\"])) .heading-panel {\n row-gap: calc(var(--space-unit) * 3);\n }\n\n z-searchbar {\n min-width: calc(var(--space-unit) * 45);\n flex: initial;\n }\n}\n\n/* Wide breakpoint /\n@media (min-width: 1366px) {\n :host {\n --app-header-title-font-size: var(--app-header-typography-9-size);\n --app-header-title-lineheight: var(--app-header-typography-9-lineheight);\n --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);\n }\n}\n\n@keyframes slide-stuck-heading-in {\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n\n 100% {\n transform: none;\n }\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection} from \"../../beans\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/\n @slot title - Slot for the main title\n * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.\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 * @cssprop --app-header-typography-1-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `24px`.\n * @cssprop --app-header-typography-2-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `28px`.\n * @cssprop --app-header-typography-3-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `32px`.\n * @cssprop --app-header-typography-4-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `36px`.\n * @cssprop --app-header-typography-5-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `42px`.\n * @cssprop --app-header-typography-6-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `48px`.\n * @cssprop --app-header-typography-7-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `54px`.\n * @cssprop --app-header-typography-8-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `60px`.\n * @cssprop --app-header-typography-9-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `68px`.\n * @cssprop --app-header-typography-10-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `76px`.\n * @cssprop --app-header-typography-11-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `84px`.\n * @cssprop --app-header-typography-12-size - Part of the heading typography's scale. Use it if you have to override the default value. Value: `92px`.\n * @cssprop --app-header-typography-1-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.33`.\n * @cssprop --app-header-typography-2-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.29`.\n * @cssprop --app-header-typography-3-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-4-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-5-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-6-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.25`.\n * @cssprop --app-header-typography-7-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-8-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-9-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.24`.\n * @cssprop --app-header-typography-10-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.26`.\n * @cssprop --app-header-typography-11-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-12-lineheight - Part of the heading typography's scale. Use it if you have to override the default value. Value: `1.2`.\n * @cssprop --app-header-typography-1-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.2 / 1em)`.\n * @cssprop --app-header-typography-2-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.4 / 1em)`.\n * @cssprop --app-header-typography-3-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.6 / 1em)`.\n * @cssprop --app-header-typography-4-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-0.8 / 1em)`.\n * @cssprop --app-header-typography-5-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1 / 1em)`.\n * @cssprop --app-header-typography-6-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.2 / 1em)`.\n * @cssprop --app-header-typography-7-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.4 / 1em)`.\n * @cssprop --app-header-typography-8-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.6 / 1em)`.\n * @cssprop --app-header-typography-9-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-1.8 / 1em)`.\n * @cssprop --app-header-typography-10-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2 / 1em)`.\n * @cssprop --app-header-typography-11-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.2 / 1em)`.\n * @cssprop --app-header-typography-12-tracking - Part of the heading typography's scale. Use it if you have to override the default value. Value: `calc(-2.4 / 1em)`.\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-height - Defaults to `auto`.\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-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Text color. Useful on `hero` variant to set text color based on the colors of the background image. Defaults to `--color-default-text`.\n * @cssprop --app-header-title-font-size - Variable to customize the title's font size.\n * NOTE: Only use one of the exported `--app-header-typography--size` as a value.\n Defaults to `--app-header-typography-3-size`.\n * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.\n * NOTE: Only use one of the exported `--app-header-typography--lineheight` as a value and use the same level as the one of the font size.\n Defaults to `--app-header-typography-3-lineheight`.\n * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.\n * NOTE: Only use one of the exported `--app-header-typography--tracking` as a value and use the same level as the one of the font size.\n Defaults to `--app-header-typography-3-tracking`.\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 Set the hero image source for the header.\n * You can also use a [slot=\"hero\"] node for advanced customization.\n /\n @Prop()\n hero: string;\n\n /\n Should place an overlay over the hero image.\n * Useful for legibility purpose.\n /\n @Prop({reflect: true})\n overlay = false;\n\n /\n Control menu bar position in the header.\n * - auto: the menu bar is positioned near the title\n * - stack: the menu bar is positioned below the title\n * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu\n /\n @Prop({reflect: true})\n flow: \"auto\" \| \"stack\" \| \"offcanvas\" = \"auto\";\n\n /\n The opening state of the drawer.\n /\n @Prop({reflect: true})\n drawerOpen = 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 The stuck state of the bar.\n /\n @State()\n private _stuck = false;\n\n /\n Current viewport.\n * Used to change the aspect of the search button (icon only) on mobile and tablet.\n /\n @State()\n private currentViewport: \"mobile\" \| \"tablet\" \| \"desktop\" = \"mobile\";\n\n /\n Current count of menu items.\n /\n @State()\n menuLength: number;\n\n /\n Emitted when the `stuck` state of the header changes\n /\n @Event()\n sticking: EventEmitter;\n\n private container?: HTMLDivElement;\n\n private menuElements?: NodeListOf<HTMLElement>;\n\n private observer?: IntersectionObserver =\n SUPPORT_INTERSECTION_OBSERVER &&\n new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {\n threshold: 0.5,\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 }\n\n @Listen(\"resize\", {target: \"window\", passive: true})\n evaluateViewport(): void {\n if (window.innerWidth < 768) {\n this.currentViewport = \"mobile\";\n } else if (window.innerWidth >= 768 && window.innerWidth < 1152) {\n this.currentViewport = \"tablet\";\n } else {\n this.currentViewport = \"desktop\";\n }\n }\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 const elements = this.menuElements;\n elements.forEach((element) => {\n (element as HTMLZMenuElement).open = false;\n (element as HTMLZMenuElement).floating = !this.drawerOpen;\n (element as HTMLZMenuElement).verticalContext = this.drawerOpen;\n });\n }\n\n private get title(): string {\n const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n if (titleElement === null) {\n return \"\";\n }\n\n return titleElement.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.flow !== \"offcanvas\" && this.currentViewport !== \"mobile\" && !this.drawerOpen;\n }\n\n private get canShowSearchbar(): boolean {\n if (!this.enableSearch) {\n return false;\n }\n\n // Always show the searchbar on desktop, even if a searchPageUrl is set\n if (this.searchPageUrl) {\n return this.currentViewport === \"desktop\";\n }\n\n return true;\n }\n\n /\n Whether the header has a hero image, either as a prop or as a slot.\n */\n private get hasHero(): boolean {\n return !!this.hero \|\| this.hostElement.querySelector(\"[slot=hero]\") !== null;\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n }\n\n private collectMenuElements(): void {\n const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuLength = menuElements.length;\n this.setMenuFloatingMode();\n }\n\n private enableStuckObserver(): void {\n if (this.observer) {\n this.observer.observe(this.container);\n }\n }\n\n private disableStuckMode(): void {\n this._stuck = false;\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n @Watch(\"stuck\")\n onStuckMode(): void {\n if (this.stuck) {\n this.enableStuckObserver();\n } else {\n this.disableStuckMode();\n }\n }\n\n private renderSearchLinkButton(): HTMLZButtonElement \| null {\n if (!this.enableSearch \|\| !this.searchPageUrl \|\| this.currentViewport === \"desktop\") {\n return null;\n }\n\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 ></z-button>\n );\n }\n\n private renderSeachbar(searchButtonIconOnly: boolean): HTMLZSearchbarElement {\n return (\n <z-searchbar\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n showSearchButton={true}\n searchButtonIconOnly={searchButtonIconOnly}\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 componentDidLoad(): void {\n this.collectMenuElements();\n this.onStuckMode();\n this.evaluateViewport();\n }\n\n render(): HTMLZAppHeaderElement {\n return (\n <Host menu-length={this.menuLength}>\n {this.hasHero && (\n <div class=\"hero-container\">\n <slot name=\"hero\">\n {this.hero && (\n <img\n alt=\"\"\n src={this.hero}\n />\n )}\n </slot>\n </div>\n )}\n\n <div\n class=\"heading-panel\"\n ref={(el) => (this.container = el)}\n >\n <div class=\"heading-container\">\n <div class=\"heading-subtitle\">\n <slot name=\"top-subtitle\"></slot>\n </div>\n <div class=\"heading-title\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <slot name=\"title\"></slot>\n\n {this.renderSearchLinkButton()}\n </div>\n\n <div class=\"heading-subtitle\">\n <slot name=\"subtitle\"></slot>\n </div>\n </div>\n\n {(this.canShowMenu \|\| this.canShowSearchbar) && (\n <div class=\"menu-container\">\n {this.canShowMenu && (\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n )}\n\n {this.canShowSearchbar && this.renderSeachbar(this.currentViewport !== \"desktop\")}\n </div>\n )}\n </div>\n\n <z-offcanvas\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n >\n <button\n class=\"drawer-close\"\n aria-label=\"Chiudi menu\"\n onClick={this.closeDrawer}\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n disabled={!this.drawerOpen}\n >\n <z-icon name=\"close\"></z-icon>\n </button>\n\n <div\n class=\"drawer-content\"\n slot=\"canvasContent\"\n aria-hidden={`${!this.drawerOpen}`}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n </div>\n </z-offcanvas>\n\n {this._stuck && (\n <div class=\"heading-stuck\">\n <div class=\"heading-stuck-content\">\n {this.menuLength > 0 && (\n <button\n class=\"drawer-trigger\"\n aria-label=\"Apri menu\"\n onClick={this.openDrawer}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )}\n\n <div class=\"heading-title\">\n <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n\n {this.renderSearchLinkButton()}\n {this.canShowSearchbar && this.currentViewport === \"desktop\" && this.renderSeachbar(false)}\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"z-app-header.js","mappings":";;;;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,o4QAAo4Q,CAAC;AACv5Q,yBAAe,SAAS;;ACGxB,MAAM,6BAA6B,GAAG,OAAO,oBAAoB,KAAK,WAAW,CAAC;MAmBrEA,YAAU;IAyGrB;;;;;QAbQ,iBAAY,GAAG,CAAC,CAAC,CAAC;QAElB,aAAQ,GACd,6BAA6B;YAC7B,IAAI,oBAAoB,CACtB,CAAC,CAAC,KAAK,CAAC;gBACN,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC;aACrC,EACD;gBACE,SAAS,EAAE,GAAG;aACf,CACF,CAAC;qBA/FI,KAAK;+BAMK,KAAK;4BAMR,KAAK;iCAMA,OAAO;4BAMZ,EAAE;;2BAcH,IAAI;sBAMD,KAAK;+BAOY,MAAM,CAAC,MAAM;;0BAkB1B,KAAK;QA6BxB,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;KAChE;IAGD,gBAAgB;QACd,IAAI,CAAC,eAAe,GAAG,SAAS,EAAE,CAAC;KACpC;IAGD,aAAa,CAAC,CAAgB;QAC5B,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,GAAG,IAAI,IAAI,CAAC,UAAU,EAAE;YAClD,IAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,OAAO;SACR;QACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;KACzB;IAEO,eAAe,CAAC,CAAgB;QACtC,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,EAAE;YAClG,OAAO;SACR;QAED,IAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,KAAK,MAAM,EAAE;YAC1C,OAAO;SACR;QAED,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CACjD,CAAC,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAgB,CAClE,CAAC;QAEF,IAAI,iBAA8B,CAAC;QACnC,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,MAAM,EAAE;;YAEvC,SAAS,CAAC,OAAO,CAAC,CAAC,IAAiB,KAAK,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;YAC9E,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,EAAE;gBACtC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;aACpD;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,EAAE;gBAC3C,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;aACrD;SACF;aAAM;YACL,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,EAAE;gBAC1E,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,OAAO;aACR;;YAED,SAAS,CAAC,OAAO,CAAC,CAAC,IAAiB,KAAK,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;YAC9E,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,WAAW,EAAE;gBACvC,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;aACpD;iBAAM,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,EAAE;gBAC7C,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC;aACrD;SACF;QACD,IAAI,iBAAiB,EAAE;YACrB,iBAAiB,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;YAChD,iBAAiB,CAAC,KAAK,EAAE,CAAC;SAC3B;KACF;IAEO,WAAW,CAAC,SAAwB,EAAE,SAAiB;QAC7D,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC,EAAE;YAC5B,IAAI,CAAC,YAAY,GAAG,SAAS,KAAK,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;YAE/D,OAAO,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACrC;QAED,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,SAAS,CAAC,MAAM,IAAI,SAAS,CAAC,MAAM,CAAC;QAE1F,OAAO,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KACrC;IAGD,OAAO;QACL,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,YAAY,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACjC;IAGD,mBAAmB;QACjB,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;YAClC,OAAO;SACR;QAED,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,OAAO;YAChC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;YACrB,OAAO,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;YACpC,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC;YAC1C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;YACzC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACxC,CAAC,CAAC;KACJ;IAGD,WAAW;QACT,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAEO,mBAAmB;QACzB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACvC;KACF;IAEO,gBAAgB;QACtB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACzC;KACF;IAED,IAAY,KAAK;QACf,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QACtE,IAAI,YAAY,KAAK,IAAI,EAAE;YACzB,OAAO,EAAE,CAAC;SACX;QAED,OAAO,YAAY,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACxC;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;YACnE,OAAO,MAAM,CAAC;SACf;QAED,OAAO,MAAM,CAAC;KACf;IAED,IAAY,WAAW;QACrB,QACE,CAAC,IAAI,CAAC,eAAe;YACrB,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;YAC5B,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM;YACtC,CAAC,IAAI,CAAC,UAAU,EAChB;KACH;IAEO,UAAU;QAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;KACxB;IAEO,mBAAmB;QACzB,MAAM,YAAY,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;QAC9F,IAAI,CAAC,UAAU,GAAG,YAAY,CAAC,MAAM,CAAC;QACtC,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAEO,aAAa,CAAC,QAAgB;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,CAAC;QAEpE,OAAO,CAAC,CAAC,IAAI,CAAC;KACf;IAEO,cAAc;QACpB,MAAM,YAAY,GAChB,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,GAAG,IAAI,GAAG,KAAK,CAAC;QAElG,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE;YAChF,OAAO;SACR;QAED,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,CAAC,EAAE;YAC5G,QACE,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,GACf,EACZ;SACH;QAED,QACE,mBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAA2B,CAAC,EAC3D,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,WAAW,EAAE,IAAI,CAAC,iBAAiB,EACnC,gBAAgB,EAAE,IAAI,EACtB,oBAAoB,EAAE,YAAY,EAClC,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,MAAM,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,EACrD,SAAS,EAAE,CAAC,CAAC;gBACX,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,EAAE;oBAC7E,CAAC,CAAC,eAAe,EAAE,CAAC;iBACrB;aACF,GACD,EACF;KACH;IAEO,kBAAkB;QACxB,QACE,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,KACf,WACE,KAAK,EAAC,QAAQ,EACd,GAAG,EAAC,iBAAiB,GACrB,CACH,EACA,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,IAAI,YAAM,IAAI,EAAC,cAAc,GAAQ,CACnE,EACX;KACH;IAEO,gBAAgB;QACtB,QACE,IAAI,CAAC,UAAU,GAAG,CAAC;aAClB,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,CAAC,KAC7E,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAuB,CAAC,gBAC/C,WAAW,mBACR,MAAM,mBACL,GAAG,IAAI,CAAC,UAAU,EAAE,mBACrB,gBAAgB,EAC9B,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,OAAO,EAAE,CAAC,EAAiB;gBACzB,IAAI,EAAE,CAAC,IAAI,KAAK,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC,IAAI,KAAK,YAAY,CAAC,KAAK,EAAE;oBACpE,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;iBAC9B;aACF,IAED,cAAQ,IAAI,EAAC,aAAa,GAAU,CAC7B,CACV,EACD;KACH;IAEO,eAAe;QACrB,QACE,mBACE,OAAO,EAAE,gBAAgB,CAAC,OAAO,EACjC,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,EAC9C,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,yBAAyB,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,MAAM,CAAC,IAEhE,WAAK,IAAI,EAAC,eAAe,IACvB,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAuB,CAAC,EAC7D,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,IAE1B,cAAQ,IAAI,EAAC,OAAO,GAAU,CACvB,EAET,WACE,KAAK,EAAC,gBAAgB,iBACT,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAElC,YACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,mBAAmB,GAChC,CACJ,CACF,CACM,EACd;KACH;IAEO,WAAW;QACjB,QACE,WAAK,KAAK,EAAC,eAAe,IACxB,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,gBAAgB,EAAE,EACxB,WAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,kBAAkB,EAAE,EAC1B,YAAM,IAAI,EAAC,eAAe,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,EACL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,CACvC,CACF,EACN;KACH;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE;YAClC,OAAO;SACR;QAED,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,GAAG,EAAE,GAAG,CAAC,CAAC;KAC3G;IAEO,oBAAoB;QAC1B,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CACjD,CAAC,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAgB,CAClE,CAAC;QAEF,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;KACvB;IAEO,eAAe,CAAC,CAAC;QACvB,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CACjD,CAAC,EAAE,KAAK,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,aAAa,CAAgB,CAClE,CAAC;QAEF,IACE,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU;YAClC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ;YAChC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,KAAK;YAC7B,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,GAAG,EAC3B;YACA,OAAO;SACR;QAED,IAAI,QAAQ,CAAC,aAAa,CAAC,OAAO,KAAK,gBAAgB,IAAI,QAAQ,CAAC,aAAa,CAAC,OAAO,KAAK,QAAQ,EAAE;YACtG,OAAO;SACR;QAED,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;YAChD,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAqB,CAAC;YAC3F,KAAK,CAAC,KAAK,EAAE,CAAC;YACd,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;SACxB;QAED,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC,EAAE;YAC5B,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAC;SACtC;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,gBAAgB;QACd,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,OAAO;SACR;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACtC,MAAM,oBAAoB,GAAG,EAAE,CAAC;QAChC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,QAAQ;YAChD,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;YACrD,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,EAAE;gBAC1C,QAAQ,IAAI,CAAC,eAAe,GAAG,IAAI,EAAE;aACtC;YAED,IAAI,SAAS,GAAG,cAAc,GAAG,oBAAoB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;gBAC9E,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;aAC7B;iBAAM,IAAI,SAAS,IAAI,cAAc,GAAG,oBAAoB,IAAI,IAAI,CAAC,eAAe,EAAE;gBACrF,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;aAC9B;SACF,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC7C;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;KACnC;IAED,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAE1D,QACE,EAAC,IAAI,oEAAc,IAAI,CAAC,UAAU,IAChC,4DACE,KAAK,EAAE,iBAAiB,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,UAAU,GAAG,EAAE,EAAE,EACxF,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,IAElC,4DAAK,KAAK,EAAC,mBAAmB,IAC3B,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM;YAC7D,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,MACtC,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,GAAG,QAAQ,GAAG,EAAE,EAAE,IACnD,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,CACP,EACD,4DAAK,KAAK,EAAC,eAAe,IACvB,IAAI,CAAC,gBAAgB,EAAE,EACvB,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAC7D,6DAAM,IAAI,EAAC,OAAO,GAAQ,EACzB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE,CACjF,EACL,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,eAAe,KAAK,MAAM,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,EAAE,CACjF,EAEL,IAAI,CAAC,WAAW,KACf,4DACE,KAAK,EAAC,gBAAgB,EACtB,OAAO,EAAE,CAAC,CAAC;gBACT,IAAI,IAAI,CAAC,eAAe,EAAE;oBACxB,OAAO;iBACR;gBAED,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC,EAAE;oBAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;iBAC7B;qBAAM;oBACL,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;iBACzB;aACF,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,IAEX,6DACE,IAAI,EAAC,MAAM,EACX,YAAY,EAAE,IAAI,CAAC,mBAAmB,GAChC,CACJ,CACP,CACG,EAEL,IAAI,CAAC,eAAe,EAAE,EAEtB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE,CAC7B,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZAppHeader"],"sources":["src/components/z-app-header/styles.css?tag=z-app-header&encapsulation=shadow","src/components/z-app-header/index.tsx"],"sourcesContent":[":host {\n --app-header-content-max-width: 100%;\n\n /* Variable to set stuck header and drawer's top offset.\n Useful when something is absolutely positioned above the header. /\n --app-header-top-offset: 48px;\n --app-header-drawer-trigger-size: calc(var(--space-unit) 4);\n\n /* Variable to customize header background color. /\n --app-header-bg: var(--color-surface01);\n\n / Variable to customize stuck header background color. /\n --app-header-stucked-bg: var(--color-surface01);\n\n / Variable to customize text and icon color. /\n --app-header-text-color: var(--color-default-text);\n\n / Variable to customize the title's line-height.\n NOTE: Only use one of the exported `--app-header-typography--lineheight` as a value\n and use the same level as the one of the font size. /\n --app-header-title-lineheight: 1.25;\n\n /* Variable to customize stuck header's text and icon color. /\n --app-header-stucked-text-color: var(--color-default-text);\n\n position: relative;\n display: block;\n box-shadow: 0 2px 4px 0 var(--shadow-color-base);\n color: var(--app-header-text-color);\n}\n\n:host,\n {\n box-sizing: border-box;\n}\n\n.heading-panel {\n position: relative;\n display: flex;\n width: 100%;\n max-width: var(--app-header-content-max-width);\n flex-direction: column;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: baseline;\n padding: calc(var(--space-unit) * 2);\n margin: 0 auto;\n background: var(--app-header-bg);\n}\n\n:host(:empty) .heading-panel {\n padding: 0;\n}\n\n.heading-container {\n position: relative;\n z-index: 1;\n display: flex;\n width: 100%;\n max-width: 100%;\n flex: 1 auto;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.heading-panel .heading-container {\n flex-direction: column-reverse;\n}\n\n:host([enable-search]) .heading-panel .heading-container {\n flex-direction: column;\n}\n\n:host(:not([enable-search=\"false\"])[search-page-url]) .heading-panel .heading-container {\n flex-direction: row;\n}\n\n.heading-title {\n display: flex;\n width: 100%;\n flex-direction: row;\n align-items: start;\n}\n\nimg.z-logo {\n content: url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>');\n}\n\n.heading-title > img.z-logo {\n height: calc(var(--space-unit) * 3);\n margin: 4px var(--space-unit) 0 0;\n}\n\n:host([stuck]) .heading-stuck .heading-title > img.z-logo {\n margin-top: 0;\n}\n\n::slotted([slot=\"product-logo\"]) {\n width: 32px;\n height: 32px;\n margin-right: var(--space-unit);\n border-radius: 50%;\n}\n\n::slotted([slot=\"title\"]),\n.heading-stuck .heading-title > ,\n::slotted([slot=\"stucked-title\"]) {\n margin: 0;\n font-family: \"IBM Plex Serif\", serif;\n}\n\n::slotted([slot=\"title\"]) {\n display: -webkit-box;\n overflow: hidden;\n flex-grow: 1;\n padding-right: calc(var(--space-unit) 2);\n -webkit-box-orient: vertical;\n font-size: var(--font-size-6);\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n white-space: initial;\n}\n\n:host(:not([menu-length=\"0\"])) .p-left {\n padding-left: calc(var(--app-header-drawer-trigger-size) + var(--space-unit));\n}\n\n:host(:is([enable-offcanvas=\"true\"]):not([menu-length=\"0\"])) {\n padding-left: calc(var(--app-header-drawer-trigger-size) + var(--space-unit));\n}\n\n::slotted([slot=\"top-subtitle\"]) {\n display: -webkit-box;\n overflow: hidden;\n max-width: 80%;\n margin: 0;\n -webkit-box-orient: vertical;\n font-family: var(--font-family-sans);\n font-size: 14px;\n font-style: italic;\n font-weight: 400;\n -webkit-line-clamp: 2;\n line-height: 18.2px;\n white-space: initial;\n}\n\n.menu-container {\n display: flex;\n width: 100%;\n flex: 1 auto;\n column-gap: calc(var(--space-unit) * 4);\n}\n\n.menu-container:focus:focus-visible {\n outline: none;\n}\n\n:host([menu-length=\"0\"]:not([enable-search])) .menu-container,\n.menu-container:empty {\n display: none;\n}\n\n.menu-container ::slotted([open]) {\n position: relative;\n z-index: 3;\n}\n\n.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after {\n position: absolute;\n top: 50%;\n right: calc(var(--space-unit) * -2);\n width: var(--border-size-small);\n height: 1em;\n background-color: currentcolor;\n content: \"\";\n transform: translateY(-50%);\n}\n\nz-searchbar {\n z-index: 0;\n display: flex;\n width: 100%;\n align-items: center;\n padding-top: calc(var(--space-unit) * 2);\n}\n\n.heading-stuck {\n position: fixed;\n z-index: 20;\n top: var(--app-header-top-offset);\n left: 0;\n width: 100%;\n max-width: 100%;\n animation: slide-stuck-heading-in 250ms ease-out;\n background: var(--app-header-stucked-bg);\n box-shadow: var(--shadow-2);\n color: var(--app-header-stucked-text-color);\n}\n\n.heading-stuck-content {\n display: flex;\n max-width: var(--app-header-content-max-width);\n align-items: center;\n padding: var(--space-unit) var(--grid-margin);\n margin: 0 auto;\n}\n\n.heading-stuck .heading-title {\n overflow: hidden;\n}\n\n.heading-stuck .heading-title > ,\n::slotted([slot=\"stucked-title\"]) {\n font-size: var(--font-size-9);\n font-weight: var(--font-bd);\n line-height: 1.25;\n}\n\n.heading-stuck .heading-title [name=\"stucked-title\"] {\n display: block;\n overflow: hidden;\n margin-right: calc(var(--space-unit) 2);\n font-size: var(--font-size-5);\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.heading-stuck-content z-button {\n margin-left: auto;\n}\n\n.drawer-trigger {\n padding: 0;\n border: 0;\n margin-right: var(--space-unit);\n appearance: none;\n background: none;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n outline: none;\n}\n\n.drawer-trigger:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n.drawer-trigger:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none !important;\n}\n\n.drawer-trigger z-icon {\n --z-icon-width: var(--app-header-drawer-trigger-size);\n --z-icon-height: var(--app-header-drawer-trigger-size);\n\n fill: currentcolor;\n}\n\n.heading-container z-button.search-page-button {\n margin-left: auto;\n}\n\n.drawer-content {\n display: none;\n}\n\nz-offcanvas[open] .drawer-content {\n display: flex;\n width: 100%;\n flex: 1 auto;\n flex-direction: column;\n row-gap: calc(var(--space-unit) * 2.5);\n}\n\nz-offcanvas[open] .drawer-content ::slotted(z-menu) {\n width: 100%;\n}\n\n.drawer-close {\n --z-icon-width: var(--app-header-drawer-trigger-size);\n --z-icon-height: var(--app-header-drawer-trigger-size);\n\n padding: 0;\n border: 0;\n margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);\n appearance: none;\n background: transparent;\n border-radius: 0;\n color: inherit;\n cursor: pointer;\n fill: currentcolor;\n font-size: inherit;\n outline: none;\n}\n\n.drawer-close:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n}\n\n/* Tablet breakpoint /\n@media (min-width: 768px) {\n :host([enable-search]:not([search-page-url])) .heading-container .heading-title {\n flex-wrap: nowrap;\n }\n\n z-searchbar {\n width: 30%;\n padding-top: 0;\n }\n\n ::slotted([slot=\"title\"]) {\n font-size: var(--font-size-9);\n }\n\n .heading-title {\n align-items: center;\n }\n\n .heading-container .heading-title {\n align-items: flex-start;\n }\n\n div.heading-container .heading-title button,\n div.heading-container .heading-title z-searchbar,\n div.heading-container .heading-title img,\n div.heading-container .heading-title ::slotted([slot=\"product-logo\"]),\n div.heading-container .heading-title .search-page-button {\n margin-top: var(--space-unit);\n }\n\n .heading-title > img.z-logo {\n height: 32px;\n }\n\n .heading-panel {\n align-items: center;\n padding: calc(var(--space-unit) 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25);\n }\n\n .heading-panel.has-menu {\n padding-bottom: 0;\n }\n\n :host(:not([enable-search=\"false\"])[search-page-url]) .heading-panel .heading-container {\n flex-direction: column;\n }\n\n .heading-panel .heading-container {\n flex-direction: column;\n margin-right: auto;\n }\n\n .menu-container {\n flex: initial;\n align-items: center;\n }\n\n :host([menu-length=\"0\"]) .menu-container:not(:empty) {\n height: calc(var(--space-unit) * 4.5 * var(--app-header-title-lineheight));\n }\n\n :host(:not([enable-offcanvas=\"false\"])) .menu-container {\n margin-top: calc((var(--space-unit) * 1.75));\n }\n\n :host(:not([enable-offcanvas])) .heading-container .drawer-trigger {\n display: none;\n }\n\n .heading-stuck .heading-title > ,\n .heading-stuck .heading-title [name=\"stucked-title\"] {\n font-size: var(--font-size-8);\n }\n\n .heading-stuck-content {\n padding: 6px var(--grid-margin);\n }\n\n ::slotted([slot=\"product-logo\"]) {\n margin-right: calc(var(--space-unit) 1.5);\n }\n\n /* stylelint-disable-next-line selector-not-notation /\n :host(:not([enable-offcanvas]):not([menu-length=\"0\"])) {\n padding-left: 0;\n }\n}\n\n/ Desktop breakpoint /\n@media (min-width: 1152px) {\n ::slotted([slot=\"product-logo\"]) {\n margin-right: var(--space-unit);\n }\n\n z-searchbar {\n min-width: calc(var(--space-unit) 45);\n flex: initial;\n }\n}\n\n@keyframes slide-stuck-heading-in {\n 0% {\n transform: translate3d(0, -100%, 0);\n }\n\n 100% {\n transform: none;\n }\n}\n","import {Component, Element, Event, EventEmitter, Fragment, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, Device, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {getDevice} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/*\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-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\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 the menu bar is not displayed and a burger icon appears to open the offcanvas menu\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 stuck state of the bar.\n /\n @State()\n private _stuck = false;\n\n /\n Current viewport.\n * Used to change the aspect of the search button (icon only) on mobile and tablet.\n /\n @State()\n private currentViewport: Device = Device.MOBILE;\n\n /\n Current count of menu items.\n /\n @State()\n menuLength: number;\n\n /\n Emitted when the `stuck` state of the header changes\n /\n @Event()\n sticking: EventEmitter;\n\n /\n The opening state of the drawer.\n /\n @State()\n private drawerOpen = false;\n\n private container?: HTMLDivElement;\n\n private menuElements?: NodeListOf<HTMLZMenuElement>;\n\n private closeMenuButton: HTMLButtonElement;\n\n private burgerButton: HTMLButtonElement;\n\n private searchbar: HTMLZSearchbarElement;\n\n /* Observer when the size of the element container changes */\n private resizeObserver: ResizeObserver;\n\n private currentIndex = -1;\n\n private observer?: IntersectionObserver =\n SUPPORT_INTERSECTION_OBSERVER &&\n new IntersectionObserver(\n ([entry]) => {\n this._stuck = !entry.isIntersecting;\n },\n {\n threshold: 0.5,\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 }\n\n @Listen(\"resize\", {target: \"window\", passive: true})\n evaluateViewport(): void {\n this.currentViewport = getDevice();\n }\n\n @Listen(\"keydown\")\n handleKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ESC && this.drawerOpen) {\n this.closeDrawer();\n\n return;\n }\n this.handleArrowsNav(e);\n }\n\n private handleArrowsNav(e: KeyboardEvent): void {\n if (e.code !== KeyboardCode.ARROW_DOWN && e.code !== KeyboardCode.ARROW_UP && this.enableOffcanvas) {\n return;\n }\n\n if (document.activeElement.slot === \"item\") {\n return;\n }\n\n const menuItems = Array.from(this.menuElements).map(\n (el) => el.shadowRoot.querySelector(\".menu-label\") as HTMLElement\n );\n\n let nextFocusableItem: HTMLElement;\n if (this.enableOffcanvas \|\| this._stuck) {\n // INFO: reset focus on all menu items\n menuItems.forEach((item: HTMLElement) => item.setAttribute(\"tabindex\", \"-1\"));\n e.preventDefault();\n e.stopPropagation();\n if (e.code === KeyboardCode.ARROW_DOWN) {\n nextFocusableItem = this.getNextItem(menuItems, 1);\n } else if (e.code === KeyboardCode.ARROW_UP) {\n nextFocusableItem = this.getNextItem(menuItems, -1);\n }\n } else {\n if (e.code === KeyboardCode.ARROW_DOWN \|\| e.code === KeyboardCode.ARROW_UP) {\n e.preventDefault();\n\n return;\n }\n //INFO: reset focus on all menu items\n menuItems.forEach((item: HTMLElement) => item.setAttribute(\"tabindex\", \"-1\"));\n if (e.code === KeyboardCode.ARROW_RIGHT) {\n nextFocusableItem = this.getNextItem(menuItems, 1);\n } else if (e.code === KeyboardCode.ARROW_LEFT) {\n nextFocusableItem = this.getNextItem(menuItems, -1);\n }\n }\n if (nextFocusableItem) {\n nextFocusableItem.setAttribute(\"tabindex\", \"0\");\n nextFocusableItem.focus();\n }\n }\n\n private getNextItem(menuItems: HTMLElement[], direction: number): HTMLElement {\n if (this.currentIndex === -1) {\n this.currentIndex = direction === 1 ? 0 : menuItems.length - 1;\n\n return menuItems[this.currentIndex];\n }\n\n this.currentIndex = (this.currentIndex + direction + menuItems.length) % menuItems.length;\n\n return menuItems[this.currentIndex];\n }\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.floating = !this.drawerOpen;\n element.verticalContext = this.drawerOpen;\n element.setAttribute(\"role\", \"menuitem\");\n element.setAttribute(\"tabindex\", \"-1\");\n });\n }\n\n @Watch(\"stuck\")\n onStuckMode(): void {\n if (this.stuck) {\n this.enableStuckObserver();\n } else {\n this.disableStuckMode();\n }\n }\n\n private enableStuckObserver(): void {\n if (this.observer) {\n this.observer.observe(this.container);\n }\n }\n\n private disableStuckMode(): void {\n this._stuck = false;\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n private get title(): string {\n const titleElement = this.hostElement.querySelector('[slot=\"title\"]');\n if (titleElement === null) {\n return \"\";\n }\n\n return titleElement.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 (\n !this.enableOffcanvas &&\n this.menuElements.length > 0 &&\n this.currentViewport !== Device.MOBILE &&\n !this.drawerOpen\n );\n }\n\n private openDrawer(): void {\n this.drawerOpen = true;\n }\n\n private closeDrawer(): void {\n this.drawerOpen = false;\n this.burgerButton.focus();\n this.currentIndex = -1;\n }\n\n private collectMenuElements(): void {\n const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n this.menuLength = menuElements.length;\n this.setMenuFloatingMode();\n }\n\n private isSlotPresent(slotName: string): boolean {\n const slot = this.hostElement.querySelector(`[slot=\"${slotName}\"]`);\n\n return !!slot;\n }\n\n private renderSeachbar(): HTMLZSearchbarElement \| HTMLZButtonElement {\n const renderSearch =\n this.currentViewport === Device.MOBILE \|\| this.currentViewport === Device.TABLET ? true : false;\n\n if (this.currentViewport === Device.MOBILE && !this.searchPageUrl && this._stuck) {\n return;\n }\n\n if (this.searchPageUrl && (this.currentViewport === Device.MOBILE \|\| this.currentViewport === Device.TABLET)) {\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 ></z-button>\n );\n }\n\n return (\n <z-searchbar\n ref={(el) => (this.searchbar = el as HTMLZSearchbarElement)}\n value={this.searchString}\n placeholder={this.searchPlaceholder}\n showSearchButton={true}\n searchButtonIconOnly={renderSearch}\n size={ControlSize.X_SMALL}\n variant={ButtonVariant.SECONDARY}\n preventSubmit={this.searchString.length < 3}\n onSearchTyping={(e) => (this.searchString = e.detail)}\n onKeyDown={(e) => {\n if (e.code === KeyboardCode.ARROW_RIGHT \|\| e.code === KeyboardCode.ARROW_LEFT) {\n e.stopPropagation();\n }\n }}\n />\n );\n }\n\n private renderProductLogos(): HTMLElement \| null {\n return (\n <Fragment>\n {this.enableZLogo && (\n <img\n class=\"z-logo\"\n alt=\"Logo Zanichelli\"\n />\n )}\n {this.currentViewport !== Device.MOBILE && <slot name=\"product-logo\"></slot>}\n </Fragment>\n );\n }\n\n private renderMenuButton(): HTMLButtonElement {\n return (\n this.menuLength > 0 &&\n (this.enableOffcanvas \|\| this._stuck \|\| this.currentViewport === Device.MOBILE) && (\n <button\n ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n aria-label=\"Apri menu\"\n aria-haspopup=\"menu\"\n aria-expanded={`${this.drawerOpen}`}\n aria-controls=\"menu-offcanvas\"\n class=\"drawer-trigger\"\n onClick={this.openDrawer}\n onKeyUp={(ev: KeyboardEvent) => {\n if (ev.code === KeyboardCode.ENTER \|\| ev.code === KeyboardCode.SPACE) {\n this.closeMenuButton.focus();\n }\n }}\n >\n <z-icon name=\"burger-menu\"></z-icon>\n </button>\n )\n );\n }\n\n private renderOffcanvas(): HTMLZOffcanvasElement {\n return (\n <z-offcanvas\n variant={OffCanvasVariant.OVERLAY}\n transitiondirection={TransitionDirection.RIGHT}\n open={this.drawerOpen}\n onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n >\n <div slot=\"canvasContent\">\n <button\n ref={(el) => (this.closeMenuButton = el as HTMLButtonElement)}\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\"></z-icon>\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 ></slot>\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 <slot name=\"stucked-title\">{this.title}</slot>\n </div>\n {this.enableSearch && this.renderSeachbar()}\n </div>\n </div>\n );\n }\n\n private getWidthMenu(): number {\n if (this.menuElements.length === 0) {\n return;\n }\n\n return Array.from(this.menuElements).reduce((acc, item) => item.getBoundingClientRect().width + acc, 100);\n }\n\n private focusToFirstItemMenu(): void {\n const menuItems = Array.from(this.menuElements).map(\n (el) => el.shadowRoot.querySelector(\".menu-label\") as HTMLElement\n );\n\n menuItems[0].focus();\n this.currentIndex = 0;\n }\n\n private handleFocusItem(e): void {\n const menuItems = Array.from(this.menuElements).map(\n (el) => el.shadowRoot.querySelector(\".menu-label\") as HTMLElement\n );\n\n if (\n e.code === KeyboardCode.ARROW_DOWN \|\|\n e.code === KeyboardCode.ARROW_UP \|\|\n e.code === KeyboardCode.ENTER \|\|\n e.code === KeyboardCode.TAB\n ) {\n return;\n }\n\n if (document.activeElement.tagName === \"Z-MENU-SECTION\" \|\| document.activeElement.tagName === \"Z-MENU\") {\n return;\n }\n\n if (this.enableSearch && this.currentIndex === 0) {\n const input = this.searchbar.shadowRoot.querySelector(\"z-input input\") as HTMLInputElement;\n input.focus();\n this.currentIndex = -1;\n }\n\n if (this.currentIndex !== -1) {\n menuItems[this.currentIndex].focus();\n }\n }\n\n componentWillLoad(): void {\n this.collectMenuElements();\n this.evaluateViewport();\n }\n\n componentDidLoad(): void {\n this.onStuckMode();\n\n if (this.enableOffcanvas) {\n return;\n }\n\n const menuWidth = this.getWidthMenu();\n const containerSidePadding = 50;\n this.resizeObserver = new ResizeObserver((observer) => {\n const containerWidth = observer[0].contentRect.width;\n if (this.currentViewport === Device.MOBILE) {\n return (this.enableOffcanvas = true);\n }\n\n if (menuWidth > containerWidth - containerSidePadding && !this.enableOffcanvas) {\n this.enableOffcanvas = true;\n } else if (menuWidth <= containerWidth - containerSidePadding && this.enableOffcanvas) {\n this.enableOffcanvas = false;\n }\n });\n\n this.resizeObserver.observe(this.container);\n }\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n }\n\n render(): HTMLZAppHeaderElement {\n const hasTopSubtitle = this.isSlotPresent(\"top-subtitle\");\n\n return (\n <Host menu-length={this.menuLength}>\n <div\n class={`heading-panel ${this.menuLength > 0 && !this.enableOffcanvas ? \"has-menu\" : \"\"}`}\n ref={(el) => (this.container = el)}\n >\n <div class=\"heading-container\">\n {((!this.enableSearch && this.currentViewport === Device.MOBILE) \|\|\n this.currentViewport !== Device.MOBILE) && (\n <div class={`${this.enableOffcanvas ? \"p-left\" : \"\"}`}>\n <slot name=\"top-subtitle\"></slot>\n </div>\n )}\n <div class=\"heading-title\">\n {this.renderMenuButton()}\n {!hasTopSubtitle && !this._stuck && this.renderProductLogos()}\n <slot name=\"title\"></slot>\n {this.enableSearch && this.currentViewport !== Device.MOBILE && this.renderSeachbar()}\n </div>\n {this.enableSearch && this.currentViewport === Device.MOBILE && this.renderSeachbar()}\n </div>\n\n {this.canShowMenu && (\n <div\n class=\"menu-container\"\n onKeyUp={(e) => {\n if (this.enableOffcanvas) {\n return;\n }\n\n if (this.currentIndex === -1) {\n this.focusToFirstItemMenu();\n } else {\n this.handleFocusItem(e);\n }\n }}\n role=\"hidden\"\n tabIndex={0}\n >\n <slot\n name=\"menu\"\n onSlotchange={this.collectMenuElements}\n ></slot>\n </div>\n )}\n </div>\n\n {this.renderOffcanvas()}\n\n {this._stuck && this.renderStuck()}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/z-aria-alert.js CHANGED Viewed

@@ -8,7 +8,7 @@ const ZAriaAlert$1 = /*@__PURE__*/ proxyCustomElement(class ZAriaAlert extends H
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '3dc09efdfb273cbb3700c75f6e83112d6d158fb0', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '109c1e5fa0fa0bd7fa990c7fdb23c0f65dd6811e' })));
+        return (h(Host, { key: '851bdac7b9b7c2dd4a5042a78cfacfe234051928', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'e3217c0633b68f55bd62c26fd1afb6d00dfe2708' })));
     }
 }, [4, "z-aria-alert", {
         "mode": [1]

package/dist/components/z-avatar.js CHANGED Viewed

@@ -31,10 +31,10 @@ const ZAvatar$1 = /*@__PURE__*/ proxyCustomElement(class ZAvatar extends HTMLEle
         }
     }
     render() {
-        return (h(Host, { key: '63564a1499f36b406dcece1fd47bb0aa8e06ed6d', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '4be97c710d33cc6dd35c1f0a7141b7f13c6e161f', 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: '9813952059608df9a5cdf74db7038aec2751dfa8' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'd918f83b5212cb7618e30a0dc040f0c312341386', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: 'af2d27fb007244f5830151e24e68cc757761d84e' }, this.text.substring(0, 2)), this.image && (h("img", { key: 'c507bc501c79eeb009e979242b5224a1fab85470', src: this.image, onError: () => (this.image = "") }))));
     }
     static get style() { return ZAvatarStyle0; }
 }, [1, "z-avatar", {

package/dist/components/z-book-card.js CHANGED Viewed

@@ -123,7 +123,7 @@ const ZBookCard$1 = /*@__PURE__*/ proxyCustomElement(class ZBookCard extends HTM
         return (h("div", { class: "action-container" }, h("slot", { name: "footer-cta" })));
     }
     render() {
-        return (h("article", { key: '93b847b7f5067c69880ea8ba283a207c8b691a2a', class: {
+        return (h("article", { key: '00cfaf1ddd32ce35c1e4db212332470941d7774e', class: {
                 [this.variant]: true,
                 borderless: !!this.borderless,
             } }, this.renderCard()));