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/collection/components/z-app-header/index.js CHANGED Viewed

@@ -1,67 +1,22 @@
-import { Host, h } from "@stencil/core";
-import { ButtonVariant, ControlSize, OffCanvasVariant, TransitionDirection } from "../../beans";
+import { Fragment, Host, h } from "@stencil/core";
+import { ButtonVariant, ControlSize, Device, KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans";
+import { getDevice } from "../../utils/utils";
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
 /**
  * @slot title - Slot for the main title
- * @slot subtitle - Slot for the bottom subtitle. It will not appear in stuck header.
  * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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`.
- * @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)`.
- * @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)`.
- * @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)`.
- * @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)`.
- * @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)`.
- * @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)`.
- * @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)`.
- * @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)`.
- * @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)`.
- * @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)`.
- * @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)`.
- * @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)`.
+ * @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-height - Defaults to `auto`.
  * @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-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
- * @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`.
- * @cssprop --app-header-title-font-size - Variable to customize the title's font size.
- * NOTE: Only use one of the exported `--app-header-typography-*-size` as a value.
- * Defaults to `--app-header-typography-3-size`.
- * @cssprop --app-header-title-lineheight - Variable to customize the title's line-height.
- * 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.
- * Defaults to `--app-header-typography-3-lineheight`.
- * @cssprop --app-header-title-letter-spacing - Variable to customize the title's letter-spacing.
- * 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.
- * Defaults to `--app-header-typography-3-tracking`.
  * @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;
@@ -69,31 +24,77 @@ export class ZAppHeader {
                 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;
+        }
+        if (document.activeElement.slot === "item") {
+            return;
         }
-        else if (window.innerWidth >= 768 && window.innerWidth < 1152) {
-            this.currentViewport = "tablet";
+        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;
@@ -106,13 +107,33 @@ export class ZAppHeader {
         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) {
@@ -128,70 +149,133 @@ export class ZAppHeader {
         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()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }
@@ -225,62 +309,9 @@ export class ZAppHeader {
                 "reflect": true,
                 "defaultValue": "false"
             },
-            "hero": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Set the hero image source for the header.\nYou can also use a [slot=\"hero\"] node for advanced customization."
-                },
-                "attribute": "hero",
-                "reflect": false
-            },
-            "overlay": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Should place an overlay over the hero image.\nUseful for legibility purpose."
-                },
-                "attribute": "overlay",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "flow": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"auto\" | \"stack\" | \"offcanvas\"",
-                    "resolved": "\"auto\" | \"offcanvas\" | \"stack\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "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"
-                },
-                "attribute": "flow",
-                "reflect": true,
-                "defaultValue": "\"auto\""
-            },
-            "drawerOpen": {
+            "enableOffcanvas": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -290,9 +321,9 @@ export class ZAppHeader {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The opening state of the drawer."
+                    "text": "the menu bar is not displayed and a burger icon appears to open the offcanvas menu"
                 },
-                "attribute": "drawer-open",
+                "attribute": "enable-offcanvas",
                 "reflect": true,
                 "defaultValue": "false"
             },
@@ -366,6 +397,24 @@ export class ZAppHeader {
                 },
                 "attribute": "search-page-url",
                 "reflect": false
+            },
+            "enableZLogo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable laZ logo."
+                },
+                "attribute": "enable-z-logo",
+                "reflect": true,
+                "defaultValue": "true"
             }
         };
     }
@@ -373,7 +422,8 @@ export class ZAppHeader {
         return {
             "_stuck": {},
             "currentViewport": {},
-            "menuLength": {}
+            "menuLength": {},
+            "drawerOpen": {}
         };
     }
     static get events() {
@@ -414,6 +464,12 @@ export class ZAppHeader {
                 "target": "window",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

	@@ -1 +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, 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"]}
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"]}