@zanichelli/albe-web-components 16.3.0 → 16.3.1

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

@@ -1,6 +1,7 @@
 import { Fragment, Host, h } from "@stencil/core";
-import { ButtonVariant, ControlSize, Device, KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans";
-import { getDevice } from "../../utils/utils";
+import { ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans";
+import { Breakpoints } from "../../constants/breakpoints";
+import { containsElement } from "../../utils/utils";
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
 /**
  * @slot title - Slot for the main title
@@ -9,93 +10,12 @@ const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined
  * @slot product-logo - To insert the product logo, it should be used with an img tag.
  * @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%`.
  * @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).
- * @cssprop --app-header-drawer-trigger-size - The size of the drawer icon. Defaults to `--space-unit * 4`.
  * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
+ * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.
  * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
  * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
 export class ZAppHeader {
-    constructor() {
-        this.currentIndex = -1;
-        this.observer = SUPPORT_INTERSECTION_OBSERVER &&
-            new IntersectionObserver(([entry]) => {
-                this._stuck = !entry.isIntersecting;
-            }, {
-                threshold: 0.5,
-            });
-        this.stuck = false;
-        this.enableOffcanvas = false;
-        this.enableSearch = false;
-        this.searchPlaceholder = "Cerca";
-        this.searchString = "";
-        this.searchPageUrl = undefined;
-        this.enableZLogo = true;
-        this._stuck = false;
-        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() {
-        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;
-        }
-        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 {
-            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) {
@@ -109,37 +29,22 @@ export class ZAppHeader {
         }
         this.menuElements.forEach((element) => {
             element.open = false;
-            element.floating = !this.drawerOpen;
             element.verticalContext = this.drawerOpen;
-            element.setAttribute("role", "menuitem");
-            element.setAttribute("tabindex", "-1");
         });
     }
-    onStuckMode() {
+    onStuckChange() {
+        var _a, _b;
         if (this.stuck) {
-            this.enableStuckObserver();
+            (_a = this.stuckIntersecObserver) === null || _a === void 0 ? void 0 : _a.observe(this.container);
         }
         else {
-            this.disableStuckMode();
-        }
-    }
-    enableStuckObserver() {
-        if (this.observer) {
-            this.observer.observe(this.container);
-        }
-    }
-    disableStuckMode() {
-        this._stuck = false;
-        if (this.observer) {
-            this.observer.unobserve(this.container);
+            this._stuck = false;
+            (_b = this.stuckIntersecObserver) === null || _b === void 0 ? void 0 : _b.unobserve(this.container);
         }
     }
     get title() {
-        const titleElement = this.hostElement.querySelector('[slot="title"]');
-        if (titleElement === null) {
-            return "";
-        }
-        return titleElement.textContent.trim();
+        var _a;
+        return (_a = this.hostElement.querySelector('[slot="title"]')) === null || _a === void 0 ? void 0 : _a.textContent.trim();
     }
     get scrollParent() {
         const parent = this.hostElement.offsetParent;
@@ -149,133 +54,164 @@ export class ZAppHeader {
         return parent;
     }
     get canShowMenu() {
-        return (!this.enableOffcanvas &&
-            this.menuElements.length > 0 &&
-            this.currentViewport !== Device.MOBILE &&
-            !this.drawerOpen);
+        return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;
+    }
+    get focusableMenu() {
+        return this.menuElements.find((el) => el.htmlTabindex === 0);
     }
     openDrawer() {
         this.drawerOpen = true;
+        this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));
+        setTimeout(() => this.closeMenuButton.focus(), 100);
     }
     closeDrawer() {
         this.drawerOpen = false;
-        this.burgerButton.focus();
-        this.currentIndex = -1;
+        setTimeout(() => this.burgerButton.focus(), 100);
     }
     collectMenuElements() {
-        const menuElements = (this.menuElements = this.hostElement.querySelectorAll('[slot="menu"]'));
-        this.menuLength = menuElements.length;
+        this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot="menu"]'));
+        this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));
+        this.menuLength = this.menuElements.length;
+        if (!this.enableOffcanvas) {
+            this.menuWidth =
+                this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +
+                    (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;
+        }
         this.setMenuFloatingMode();
     }
-    isSlotPresent(slotName) {
-        const slot = this.hostElement.querySelector(`[slot="${slotName}"]`);
-        return !!slot;
+    /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */
+    setupMenuResizeObserver() {
+        if (this.enableOffcanvas) {
+            return;
+        }
+        this.menuResizeObserver = new ResizeObserver((entries) => {
+            if (this.isMobile) {
+                this.enableOffcanvas = true;
+                return;
+            }
+            const containerWidth = entries[0].contentBoxSize[0].inlineSize;
+            if (this.menuWidth === 0) {
+                return;
+            }
+            if (this.menuWidth > containerWidth && !this.enableOffcanvas) {
+                this.enableOffcanvas = true;
+            }
+            else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {
+                this.enableOffcanvas = false;
+            }
+        });
+        this.menuResizeObserver.observe(this.container);
+    }
+    hasSlot(slotName) {
+        return this.hostElement.querySelector(`[slot="${slotName}"]`) !== null;
+    }
+    moveFocus(current, receiver) {
+        current.htmlTabindex = -1;
+        receiver.setFocus();
+    }
+    /** Close each menu except the one receiving focus/click */
+    manageMenus(ev) {
+        this.menuElements.forEach((menu) => {
+            if (!menu.open || !menu.floating || menu.verticalContext || containsElement(menu, ev.target)) {
+                return;
+            }
+            menu.open = false;
+        });
+    }
+    handleMenubarKeydown(ev) {
+        var _a, _b;
+        if (!this.menuElements.some((elem) => elem.contains(ev.target))) {
+            return;
+        }
+        const current = this.focusableMenu;
+        const currentIndex = this.menuElements.indexOf(current);
+        let receiver;
+        if ((ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||
+            (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)) {
+            receiver = (_a = this.menuElements[currentIndex + 1]) !== null && _a !== void 0 ? _a : this.menuElements[0];
+        }
+        else if ((ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||
+            (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)) {
+            receiver = (_b = this.menuElements[currentIndex - 1]) !== null && _b !== void 0 ? _b : this.menuElements[this.menuLength - 1];
+        }
+        if (!receiver) {
+            return;
+        }
+        if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {
+            if (receiver.open) {
+                current.htmlTabindex = -1;
+                receiver.focusLastItem();
+                return;
+            }
+        }
+        this.moveFocus(current, receiver);
     }
     renderSeachbar() {
-        const renderSearch = this.currentViewport === Device.MOBILE || this.currentViewport === Device.TABLET ? true : false;
-        if (this.currentViewport === Device.MOBILE && !this.searchPageUrl && this._stuck) {
+        if (this.isMobile && !this.searchPageUrl && this._stuck) {
             return;
         }
-        if (this.searchPageUrl && (this.currentViewport === Device.MOBILE || this.currentViewport === Device.TABLET)) {
+        if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
             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();
-                }
-            } }));
+        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
     }
     renderProductLogos() {
-        return (h(Fragment, null, this.enableZLogo && (h("img", { class: "z-logo", alt: "Logo Zanichelli" })), this.currentViewport !== Device.MOBILE && h("slot", { name: "product-logo" })));
+        return (h(Fragment, null, this.enableZLogo && (h("span", { class: "z-logo" }, h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (h("span", { class: "product-logo" }, 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" }))));
+            (this.enableOffcanvas || this._stuck || this.isMobile) && (h("button", { ref: (el) => (this.burgerButton = el), "aria-label": "Apri menu", "aria-haspopup": "menu", "aria-expanded": `${this.drawerOpen}`, "aria-controls": "offcanvas-menu", class: "drawer-trigger", onClick: this.openDrawer }, 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 })))));
+        return (h("z-offcanvas", { id: "offcanvas-menu", 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())));
+        return (h("div", { class: "heading-stuck" }, h("div", { class: "heading-stuck-content" }, this.renderMenuButton(), h("div", { class: "heading-title" }, this.renderProductLogos(), h("div", { class: "stucked-title" }, h("slot", { name: "stucked-title" }, this.title))), this.enableSearch && this.renderSeachbar())));
     }
-    getWidthMenu() {
-        if (this.menuElements.length === 0) {
-            return;
-        }
-        return Array.from(this.menuElements).reduce((acc, item) => item.getBoundingClientRect().width + acc, 100);
-    }
-    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;
-        }
-        if (document.activeElement.tagName === "Z-MENU-SECTION" || document.activeElement.tagName === "Z-MENU") {
-            return;
-        }
-        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();
-        }
+    constructor() {
+        this.menuElements = [];
+        this.stuckIntersecObserver = SUPPORT_INTERSECTION_OBSERVER
+            ? new IntersectionObserver(([entry]) => {
+                this._stuck = !entry.isIntersecting;
+            }, { threshold: 0.5 })
+            : undefined;
+        this.stuck = false;
+        this.enableOffcanvas = false;
+        this.enableSearch = false;
+        this.searchPlaceholder = "Cerca";
+        this.searchString = "";
+        this.searchPageUrl = undefined;
+        this.enableZLogo = true;
+        this._stuck = false;
+        this.menuLength = undefined;
+        this.drawerOpen = false;
+        this.isMobile = true;
+        this.isTablet = false;
+        this.openDrawer = this.openDrawer.bind(this);
+        this.closeDrawer = this.closeDrawer.bind(this);
+        this.collectMenuElements = this.collectMenuElements.bind(this);
     }
     componentWillLoad() {
         this.collectMenuElements();
-        this.evaluateViewport();
+        // mobile and tablet media queries listeners
+        const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);
+        this.isMobile = mobileMediaQuery.matches;
+        mobileMediaQuery.addEventListener("change", (e) => (this.isMobile = e.matches));
+        const tabletMediaQuery = window.matchMedia(`(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`);
+        this.isTablet = tabletMediaQuery.matches;
+        tabletMediaQuery.addEventListener("change", (e) => (this.isTablet = e.matches));
     }
     componentDidLoad() {
-        this.onStuckMode();
-        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);
+        this.onStuckChange();
+        this.setupMenuResizeObserver();
     }
     disconnectedCallback() {
         var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_a = this.menuResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        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()));
+        const hasTopSubtitle = this.hasSlot("top-subtitle");
+        return (h(Host, { key: '7e11b4451932dc22ef2b1379bafceacadc4ce45a', "menu-length": this.menuLength }, h("div", { key: 'd5885b5ebfaf18aa55c83eabaee0d76f335c3f95', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'f98e05c6f10213c8d04e1b9217bea3119a678af5', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '8331716775beda5ef8f90472d20d0a13e8842e87', class: "top-subtitle" }, h("slot", { key: '55080f2143085802d7e9f5e77330120409dbf650', name: "top-subtitle" }))), h("div", { key: 'bda64ee9d54163101cb53b9cdab40764ab6501b8', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '45d66d5b36ed1bde12a27f8b79e7b11dc5f1c8f3', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '45e17efbf3ad93ad9cd0b55f5515022e1fe26d3f', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '0c8d73e0c9dc85c341dc1ca999ada16eb9188ada', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'b907682a3866680a84557192a163fa179a01374a', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }
@@ -321,7 +257,7 @@ export class ZAppHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "the menu bar is not displayed and a burger icon appears to open the offcanvas menu"
+                    "text": "When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container."
                 },
                 "attribute": "enable-offcanvas",
                 "reflect": true,
@@ -421,9 +357,10 @@ export class ZAppHeader {
     static get states() {
         return {
             "_stuck": {},
-            "currentViewport": {},
             "menuLength": {},
-            "drawerOpen": {}
+            "drawerOpen": {},
+            "isMobile": {},
+            "isTablet": {}
         };
     }
     static get events() {
@@ -454,22 +391,28 @@ export class ZAppHeader {
                 "methodName": "setMenuFloatingMode"
             }, {
                 "propName": "stuck",
-                "methodName": "onStuckMode"
+                "methodName": "onStuckChange"
             }];
     }
     static get listeners() {
         return [{
-                "name": "resize",
-                "method": "evaluateViewport",
-                "target": "window",
+                "name": "focusin",
+                "method": "manageMenus",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "click",
+                "method": "manageMenus",
+                "target": "document",
                 "capture": false,
                 "passive": true
             }, {
                 "name": "keydown",
-                "method": "handleKeyDown",
+                "method": "handleMenubarKeydown",
                 "target": undefined,
                 "capture": false,
-                "passive": false
+                "passive": true
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-app-header/index.tsx"],"names":[],"mappings":"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","sourcesContent":["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,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-app-header/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Fragment, Host, Listen, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, KeyboardCode, OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {Breakpoints} from \"../../constants/breakpoints\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== \"undefined\";\n\n/**\n * @slot title - Slot for the main title\n * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.\n * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.\n * @slot product-logo - To insert the product logo, it should be used with an img tag.\n * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.\n * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).\n * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.\n * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.\n * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.\n */\n@Component({\n  tag: \"z-app-header\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZAppHeader {\n  @Element() hostElement: HTMLZAppHeaderElement;\n\n  /**\n   * Stuck mode for the header.\n   * You can programmatically set it using an IntersectionObserver.\n   */\n  @Prop({reflect: true})\n  stuck = false;\n\n  /**\n   * When enabled, the menu bar is not displayed and a burger icon appears to open the offcanvas menu. Automatically enabled on mobile and when the menu items overflow the container.\n   */\n  @Prop({reflect: true, mutable: true})\n  enableOffcanvas = false;\n\n  /**\n   * Enable the search bar.\n   */\n  @Prop({reflect: true})\n  enableSearch = false;\n\n  /**\n   * Placeholder text for the search bar.\n   */\n  @Prop()\n  searchPlaceholder = \"Cerca\";\n\n  /**\n   * Search string for the search bar.\n   */\n  @Prop({mutable: true})\n  searchString = \"\";\n\n  /**\n   * Url to the search page.\n   * Set this prop and `enableSearch` to show a link-button on mobile and tablet viewports, instead of the normal searchbar.\n   * The link will also appear on the sticky header.\n   */\n  @Prop()\n  searchPageUrl: string;\n\n  /**\n   * Enable laZ logo.\n   */\n  @Prop({reflect: true})\n  enableZLogo = true;\n\n  /**\n   * Emitted when the `stuck` state of the header changes\n   */\n  @Event()\n  sticking: EventEmitter;\n\n  /**\n   * The stuck state of the bar.\n   */\n  @State()\n  private _stuck = false;\n\n  /**\n   * Current count of menu items.\n   */\n  @State()\n  private menuLength: number;\n\n  /**\n   * The opening state of the drawer.\n   */\n  @State()\n  private drawerOpen = false;\n\n  @State()\n  private isMobile = true;\n\n  @State()\n  private isTablet = false;\n\n  private container?: HTMLDivElement;\n\n  private menuElements: HTMLZMenuElement[] = [];\n\n  private menuWidth: number;\n\n  private closeMenuButton: HTMLButtonElement;\n\n  private burgerButton: HTMLButtonElement;\n\n  private menuResizeObserver: ResizeObserver;\n\n  private stuckIntersecObserver?: IntersectionObserver = SUPPORT_INTERSECTION_OBSERVER\n    ? new IntersectionObserver(\n        ([entry]) => {\n          this._stuck = !entry.isIntersecting;\n        },\n        {threshold: 0.5}\n      )\n    : undefined;\n\n  @Watch(\"_stuck\")\n  onStuck(): void {\n    const scrollParent = this.scrollParent;\n    if (!scrollParent) {\n      return;\n    }\n\n    this.sticking.emit(this._stuck);\n  }\n\n  @Watch(\"drawerOpen\")\n  setMenuFloatingMode(): void {\n    if (this.menuElements.length === 0) {\n      return;\n    }\n\n    this.menuElements.forEach((element) => {\n      element.open = false;\n      element.verticalContext = this.drawerOpen;\n    });\n  }\n\n  @Watch(\"stuck\")\n  onStuckChange(): void {\n    if (this.stuck) {\n      this.stuckIntersecObserver?.observe(this.container);\n    } else {\n      this._stuck = false;\n      this.stuckIntersecObserver?.unobserve(this.container);\n    }\n  }\n\n  private get title(): string {\n    return this.hostElement.querySelector('[slot=\"title\"]')?.textContent.trim();\n  }\n\n  private get scrollParent(): Window | Element {\n    const parent = this.hostElement.offsetParent;\n    if (parent === document.body || parent === document.documentElement) {\n      return window;\n    }\n\n    return parent;\n  }\n\n  private get canShowMenu(): boolean {\n    return !this.enableOffcanvas && this.menuElements.length > 0 && !this.isMobile && !this.drawerOpen;\n  }\n\n  private get focusableMenu(): HTMLZMenuElement {\n    return this.menuElements.find((el) => el.htmlTabindex === 0);\n  }\n\n  private openDrawer(): void {\n    this.drawerOpen = true;\n    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n    setTimeout(() => this.closeMenuButton.focus(), 100);\n  }\n\n  private closeDrawer(): void {\n    this.drawerOpen = false;\n    setTimeout(() => this.burgerButton.focus(), 100);\n  }\n\n  private collectMenuElements(): void {\n    this.menuElements = Array.from(this.hostElement.querySelectorAll('[slot=\"menu\"]'));\n    this.menuElements.forEach((element, index) => (element.htmlTabindex = index === 0 ? 0 : -1));\n    this.menuLength = this.menuElements.length;\n    if (!this.enableOffcanvas) {\n      this.menuWidth =\n        this.menuElements.reduce((acc, el) => acc + el.getBoundingClientRect().width, 0) +\n        (this.menuLength - 1) * 32 /* 32px is the gap between each menu item */;\n    }\n    this.setMenuFloatingMode();\n  }\n\n  /** Automatically use offcanvas mode when the menubar doesn't fit in the header. */\n  private setupMenuResizeObserver(): void {\n    if (this.enableOffcanvas) {\n      return;\n    }\n\n    this.menuResizeObserver = new ResizeObserver((entries) => {\n      if (this.isMobile) {\n        this.enableOffcanvas = true;\n\n        return;\n      }\n\n      const containerWidth = entries[0].contentBoxSize[0].inlineSize;\n      if (this.menuWidth === 0) {\n        return;\n      }\n\n      if (this.menuWidth > containerWidth && !this.enableOffcanvas) {\n        this.enableOffcanvas = true;\n      } else if (this.menuWidth <= containerWidth && this.enableOffcanvas) {\n        this.enableOffcanvas = false;\n      }\n    });\n    this.menuResizeObserver.observe(this.container);\n  }\n\n  private hasSlot(slotName: string): boolean {\n    return this.hostElement.querySelector(`[slot=\"${slotName}\"]`) !== null;\n  }\n\n  private moveFocus(current: HTMLZMenuElement, receiver: HTMLZMenuElement): void {\n    current.htmlTabindex = -1;\n    receiver.setFocus();\n  }\n\n  /** Close each menu except the one receiving focus/click */\n  @Listen(\"focusin\", {target: \"document\", passive: true})\n  @Listen(\"click\", {target: \"document\", passive: true})\n  manageMenus(ev: FocusEvent | PointerEvent): void {\n    this.menuElements.forEach((menu) => {\n      if (!menu.open || !menu.floating || menu.verticalContext || containsElement(menu, ev.target as Element)) {\n        return;\n      }\n      menu.open = false;\n    });\n  }\n\n  @Listen(\"keydown\", {passive: true})\n  handleMenubarKeydown(ev: KeyboardEvent): void {\n    if (!this.menuElements.some((elem) => elem.contains(ev.target as HTMLElement))) {\n      return;\n    }\n\n    const current = this.focusableMenu;\n    const currentIndex = this.menuElements.indexOf(current);\n    let receiver: HTMLZMenuElement;\n    if (\n      (ev.key === KeyboardCode.ARROW_RIGHT && !current.verticalContext) ||\n      (ev.key === KeyboardCode.ARROW_DOWN && current.verticalContext)\n    ) {\n      receiver = this.menuElements[currentIndex + 1] ?? this.menuElements[0];\n    } else if (\n      (ev.key === KeyboardCode.ARROW_LEFT && !current.verticalContext) ||\n      (ev.key === KeyboardCode.ARROW_UP && current.verticalContext)\n    ) {\n      receiver = this.menuElements[currentIndex - 1] ?? this.menuElements[this.menuLength - 1];\n    }\n    if (!receiver) {\n      return;\n    }\n\n    if (ev.key === KeyboardCode.ARROW_UP && current.verticalContext) {\n      if (receiver.open) {\n        current.htmlTabindex = -1;\n        receiver.focusLastItem();\n\n        return;\n      }\n    }\n\n    this.moveFocus(current, receiver);\n  }\n\n  private renderSeachbar(): HTMLZButtonElement | HTMLZSearchbarElement | undefined {\n    if (this.isMobile && !this.searchPageUrl && this._stuck) {\n      return;\n    }\n\n    if (this.searchPageUrl && (this.isMobile || this.isTablet)) {\n      return (\n        <z-button\n          class=\"search-page-button\"\n          variant={ButtonVariant.SECONDARY}\n          href={this.searchPageUrl}\n          icon=\"search\"\n          size={ControlSize.X_SMALL}\n        />\n      );\n    }\n\n    return (\n      <z-searchbar\n        value={this.searchString}\n        placeholder={this.searchPlaceholder}\n        showSearchButton={true}\n        searchButtonIconOnly={this.isMobile || this.isTablet}\n        size={ControlSize.X_SMALL}\n        variant={ButtonVariant.SECONDARY}\n        preventSubmit={this.searchString.length < 3}\n        onSearchTyping={(e) => (this.searchString = e.detail)}\n      />\n    );\n  }\n\n  private renderProductLogos(): HTMLElement | null {\n    return (\n      <Fragment>\n        {this.enableZLogo && (\n          <span class=\"z-logo\">\n            <img alt=\"Logo Zanichelli\" />\n          </span>\n        )}\n        {this.hostElement.querySelector(\"[slot='product-logo']\") && (\n          <span class=\"product-logo\">\n            <slot name=\"product-logo\" />\n          </span>\n        )}\n      </Fragment>\n    );\n  }\n\n  private renderMenuButton(): HTMLButtonElement {\n    return (\n      this.menuLength > 0 &&\n      (this.enableOffcanvas || this._stuck || this.isMobile) && (\n        <button\n          ref={(el) => (this.burgerButton = el as HTMLButtonElement)}\n          aria-label=\"Apri menu\"\n          aria-haspopup=\"menu\"\n          aria-expanded={`${this.drawerOpen}`}\n          aria-controls=\"offcanvas-menu\"\n          class=\"drawer-trigger\"\n          onClick={this.openDrawer}\n        >\n          <z-icon name=\"burger-menu\" />\n        </button>\n      )\n    );\n  }\n\n  private renderOffcanvas(): HTMLZOffcanvasElement {\n    return (\n      <z-offcanvas\n        id=\"offcanvas-menu\"\n        variant={OffCanvasVariant.OVERLAY}\n        transitiondirection={TransitionDirection.RIGHT}\n        open={this.drawerOpen}\n        onCanvasOpenStatusChanged={(ev) => (this.drawerOpen = ev.detail)}\n      >\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\" />\n          </button>\n\n          <div\n            class=\"drawer-content\"\n            aria-hidden={`${!this.drawerOpen}`}\n          >\n            <slot\n              name=\"menu\"\n              onSlotchange={this.collectMenuElements}\n            />\n          </div>\n        </div>\n      </z-offcanvas>\n    );\n  }\n\n  private renderStuck(): HTMLElement {\n    return (\n      <div class=\"heading-stuck\">\n        <div class=\"heading-stuck-content\">\n          {this.renderMenuButton()}\n          <div class=\"heading-title\">\n            {this.renderProductLogos()}\n            <div class=\"stucked-title\">\n              <slot name=\"stucked-title\">{this.title}</slot>\n            </div>\n          </div>\n          {this.enableSearch && this.renderSeachbar()}\n        </div>\n      </div>\n    );\n  }\n\n  constructor() {\n    this.openDrawer = this.openDrawer.bind(this);\n    this.closeDrawer = this.closeDrawer.bind(this);\n    this.collectMenuElements = this.collectMenuElements.bind(this);\n  }\n\n  componentWillLoad(): void {\n    this.collectMenuElements();\n\n    // mobile and tablet media queries listeners\n    const mobileMediaQuery = window.matchMedia(`(max-width: ${Breakpoints.MOBILE}px)`);\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.addEventListener(\"change\", (e) => (this.isMobile = e.matches));\n    const tabletMediaQuery = window.matchMedia(\n      `(min-width: ${Breakpoints.MOBILE + 1}px) and (max-width: ${Breakpoints.TABLET}px)`\n    );\n    this.isTablet = tabletMediaQuery.matches;\n    tabletMediaQuery.addEventListener(\"change\", (e) => (this.isTablet = e.matches));\n  }\n\n  componentDidLoad(): void {\n    this.onStuckChange();\n    this.setupMenuResizeObserver();\n  }\n\n  disconnectedCallback(): void {\n    this.menuResizeObserver?.disconnect();\n  }\n\n  render(): HTMLZAppHeaderElement {\n    const hasTopSubtitle = this.hasSlot(\"top-subtitle\");\n\n    return (\n      <Host menu-length={this.menuLength}>\n        <div\n          class={{\"heading-panel\": true, \"has-menubar\": this.menuLength > 0 && !this.enableOffcanvas}}\n          ref={(el) => (this.container = el)}\n        >\n          <div class=\"heading-container\">\n            {((!this.enableSearch && this.isMobile) || !this.isMobile) && (\n              <div class=\"top-subtitle\">\n                <slot name=\"top-subtitle\" />\n              </div>\n            )}\n            <div class=\"heading-title\">\n              {this.renderMenuButton()}\n              {!hasTopSubtitle && !this._stuck && this.renderProductLogos()}\n              <slot name=\"title\" />\n              {this.enableSearch && !this.isMobile && this.renderSeachbar()}\n            </div>\n            {this.enableSearch && this.isMobile && this.renderSeachbar()}\n          </div>\n\n          <nav\n            class=\"menu-container\"\n            aria-label={this.title || undefined}\n          >\n            {this.canShowMenu && (\n              <div\n                role=\"menubar\"\n                aria-label={this.title || undefined}\n              >\n                <slot\n                  name=\"menu\"\n                  onSlotchange={this.collectMenuElements}\n                />\n              </div>\n            )}\n          </nav>\n        </div>\n        {this.renderOffcanvas()}\n        {this._stuck && this.renderStuck()}\n      </Host>\n    );\n  }\n}\n"]}