@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.0

package/dist/collection/components/menubar/menubar.js

@@ -0,0 +1,508 @@
+import { Fragment, h } from "@stencil/core";
+import { Menu } from "./menu/menu";
+import { containsTarget, moveFocus } from "../../utils/utils";
+/**
+ * Main menubar component. Each item can have a menu with subitems
+ * When a main menubar item is the current active one, a sub-menubar is shown and each subitem can have a menu with subitems.
+ * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.
+ */
+export class ZanitMenubar {
+    formElement;
+    host;
+    /** Menubar items extracted from `data`. */
+    items = [];
+    /** ID of the currently open menu. */
+    openMenu = undefined;
+    /** ID of the item to show the subitems navbar for. */
+    openNavbar = undefined;
+    /** Indicates whether the searchbar is visible and usable. */
+    showSearchbar = false;
+    /** Search query to apply. */
+    _searchQuery = undefined;
+    isMobile = false;
+    /** The data to build the menu (as an array of `MenuItem` or a JSON array) or the url to fetch to retrieve it. */
+    data;
+    /** ID of the current active item. */
+    current = undefined;
+    /** Initial search query. */
+    searchQuery = undefined;
+    /** Setup the list of items. */
+    async parseData(data) {
+        if (!data) {
+            return;
+        }
+        if (data instanceof URL) {
+            this.items = await this.fetchData(data);
+        }
+        else if (data instanceof Promise) {
+            this.items = await data;
+        }
+        else if (typeof data === 'string') {
+            try {
+                this.items = JSON.parse(data);
+                if (!Array.isArray(this.items) || !this.items.every((item) => item)) {
+                    throw new Error('Expected an array of MenuItem objects.');
+                }
+            }
+            catch {
+                let url;
+                try {
+                    url = new URL(data);
+                }
+                catch (error) {
+                    throw new Error('Invalid string provided for `data` property: not a valid url or JSON.');
+                }
+                this.items = await this.fetchData(url);
+            }
+        }
+        else if (Array.isArray(data) && data.every((item) => item)) {
+            this.items = data;
+        }
+        else {
+            throw new Error('Invalid `data` property value. Expected an url, a JSON or an array/promise of MenuItem objects.');
+        }
+    }
+    onItemsChange() {
+        this.initTabindex();
+    }
+    /** Focus searchbar input when it becomes visible. */
+    onShowSearchbar() {
+        if (!this.showSearchbar) {
+            return;
+        }
+        setTimeout(() => {
+            const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input');
+            if (this.showSearchbar) {
+                searchbarInput.focus();
+            }
+        }, 10);
+    }
+    /** Emitted on search form submission. */
+    search;
+    async connectedCallback() {
+        await this.parseData(this.data);
+        this.initTabindex();
+        const mobileMediaQuery = window.matchMedia('(width < 768px)');
+        this.isMobile = mobileMediaQuery.matches;
+        mobileMediaQuery.onchange = (mql) => {
+            this.isMobile = mql.matches;
+            this.initTabindex();
+            this.openMenu = undefined;
+            this.showSearchbar = false;
+        };
+    }
+    /** Close open searchbar or any open menu when clicking outside. */
+    handleOutsideClick(event) {
+        if (this.showSearchbar && !containsTarget(this.formElement, event)) {
+            this.showSearchbar = false;
+        }
+        if (containsTarget(this.host, event)) {
+            return;
+        }
+        this.openMenu = undefined;
+    }
+    /** Close any open menu when pressing Escape or Tab. */
+    handleKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+            case 'Tab':
+                this.openMenu = undefined;
+                break;
+        }
+    }
+    /** Close the menu when it loses focus. */
+    handleFocusout(event) {
+        const relatedTarget = event.relatedTarget;
+        if (this.host.shadowRoot.querySelector('.menu')?.contains(relatedTarget)) {
+            return;
+        }
+        this.openMenu = undefined;
+    }
+    /** Fetch data from passed URL. */
+    async fetchData(url) {
+        try {
+            const data = await (await fetch(url)).json();
+            if (!Array.isArray(data) || !data.every((item) => item)) {
+                throw new Error('Invalid data structure. Expected an array of MenuItem objects.');
+            }
+            return data;
+        }
+        catch (error) {
+            console.error('Error fetching menubar data:', error);
+            throw new Error('Failed to fetch menubar data from the provided URL.', { cause: error });
+        }
+    }
+    /** Initialize tabindex on menuitems of menubars, setting -1 to all but the first one. */
+    initTabindex() {
+        setTimeout(() => {
+            this.host.shadowRoot.querySelectorAll('[role="menubar"]')?.forEach((menubar) => {
+                menubar
+                    .querySelectorAll('[role="menuitem"]')
+                    ?.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));
+            });
+        }, 100);
+    }
+    /** Indicates whether the element has to be highlighted by checking whether it is set as current or one of its descendants is. */
+    isActive(item) {
+        if (item.id === this.current) {
+            return true;
+        }
+        if (item.menuItems?.length) {
+            return item.menuItems.some((menuItem) => menuItem.id === this.current);
+        }
+        if (item.navbarItems?.length) {
+            const isActive = item.navbarItems.some((navbarItem) => this.isActive(navbarItem));
+            if (isActive) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /** Opens the menu associated with the menubar `item`, if any. */
+    showMenu(item) {
+        if (!item.menuItems?.length) {
+            return;
+        }
+        this.openMenu = item.id;
+    }
+    /** Get all elements with `menuitem` role inside parent's `menubar`. * */
+    getParentMenubarElements(itemEl) {
+        return Array.from(itemEl?.closest('[role="menubar"]')?.querySelectorAll(':scope > li a[role="menuitem"]') ?? []);
+    }
+    /** Move the focus to the previous menubar item, or the last one. Then open its menu if any other menu was open. */
+    focusPreviousItem(itemEl) {
+        const menubarElements = this.getParentMenubarElements(itemEl);
+        itemEl.tabIndex = -1;
+        const currentIndex = menubarElements.indexOf(itemEl);
+        const prevItem = menubarElements[(currentIndex - 1 + menubarElements.length) % menubarElements.length]; // get previous item or last one
+        prevItem.tabIndex = 0;
+        prevItem.focus();
+        // open the item's menu if any other menu was open
+        if (prevItem.ariaHasPopup === 'true' && this.openMenu) {
+            this.openMenu = prevItem.id;
+        }
+    }
+    /** Move the focus to the next menubar item, or the first one. Then open its menu if any other menu was open. */
+    focusNextItem(itemEl) {
+        const menubarElements = this.getParentMenubarElements(itemEl);
+        itemEl.tabIndex = -1;
+        const currentIndex = menubarElements.indexOf(itemEl);
+        const nextItem = menubarElements[(currentIndex + 1) % menubarElements.length]; // get next item or first one
+        nextItem.tabIndex = 0;
+        nextItem.focus();
+        // open the item's menu if any other menu was open
+        if (nextItem.ariaHasPopup === 'true' && this.openMenu) {
+            this.openMenu = nextItem.id;
+        }
+    }
+    /** Handles keyboard navigation on menubar items. */
+    handleItemKeydown(event, item) {
+        const target = event.target;
+        switch (event.key) {
+            case 'Home': {
+                event.preventDefault();
+                event.stopPropagation();
+                const firstItem = this.getParentMenubarElements(target)[0];
+                moveFocus(target, firstItem);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                event.stopPropagation();
+                const lastItem = this.getParentMenubarElements(target).pop();
+                moveFocus(target, lastItem);
+                break;
+            }
+            case 'ArrowUp': {
+                if (!item.menuItems?.length) {
+                    break;
+                }
+                event.preventDefault();
+                event.stopPropagation();
+                this.openMenu = item.id;
+                // focus last item of the menu
+                setTimeout(() => {
+                    const menuItems = Array.from(this.host.shadowRoot.querySelectorAll(`[aria-labelledby=${item.id}] [role="menuitem"]`));
+                    moveFocus(target, menuItems[menuItems.length - 1]);
+                }, 100);
+                break;
+            }
+            case 'ArrowRight': {
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusNextItem(target);
+                break;
+            }
+            case 'ArrowDown': {
+                if (!item.menuItems?.length) {
+                    break;
+                }
+                this.openMenu = item.id;
+                setTimeout(() => {
+                    // focus first item of the menu
+                    const firsMenuItem = this.host.shadowRoot.querySelector(`[aria-labelledby=${item.id}] [role="menuitem"]`);
+                    firsMenuItem.tabIndex = 0;
+                    firsMenuItem.focus();
+                }, 100);
+                break;
+            }
+            case 'ArrowLeft': {
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusPreviousItem(target);
+                break;
+            }
+        }
+    }
+    /** Get the previous element with `role=group`. */
+    getPreviousGroup(groupContainer) {
+        const groups = Array.from(groupContainer?.closest('[role="menu"]')?.querySelectorAll('[role="group"]') ?? []);
+        const currentIndex = groups.indexOf(groupContainer);
+        return groups[currentIndex - 1];
+    }
+    /** Get the next element with `role=group`. */
+    getNextGroup(groupContainer) {
+        const groups = Array.from(groupContainer?.closest('[role="menu"]')?.querySelectorAll('[role="group"]') ?? []);
+        const currentIndex = groups.indexOf(groupContainer);
+        return groups[currentIndex + 1];
+    }
+    /** Handles keyboard navigation events from `Menu` component. */
+    handleMenuKeydown(event) {
+        const menuItem = event.target;
+        const items = Array.from(menuItem.closest('[role="menu"]')?.querySelectorAll('[role="menuitem"]') ?? []);
+        const currentIndex = items.indexOf(menuItem);
+        switch (event.key) {
+            case 'ArrowUp': {
+                event.preventDefault();
+                event.stopPropagation();
+                const prevItem = items[currentIndex - 1] || items[items.length - 1];
+                moveFocus(menuItem, prevItem);
+                break;
+            }
+            // Move the focus to the first item of the next group if any, otherwise move it to the next menubar item
+            case 'ArrowRight': {
+                event.preventDefault();
+                event.stopPropagation();
+                const currentGroup = menuItem.closest('[role=group]');
+                const nextGroup = this.getNextGroup(currentGroup);
+                if (!nextGroup) {
+                    menuItem.tabIndex = -1;
+                    const parentMenubar = event.target.closest('[role="menubar"]');
+                    const focusedItem = parentMenubar?.querySelector('[role="menuitem"][aria-expanded="true"][tabindex="0"]');
+                    this.focusNextItem(focusedItem);
+                    break;
+                }
+                const nextGroupItems = (nextGroup.querySelectorAll('[role="menuitem"]') ?? []);
+                moveFocus(menuItem, nextGroupItems[0]);
+                break;
+            }
+            case 'ArrowDown': {
+                event.preventDefault();
+                event.stopPropagation();
+                const nextItem = items[currentIndex + 1] || items[0];
+                moveFocus(menuItem, nextItem);
+                break;
+            }
+            // Move the focus to the first item of the previous group if any, otherwise move it to the previous menubar item
+            case 'ArrowLeft':
+                event.preventDefault();
+                event.stopPropagation();
+                const currentGroup = menuItem.closest('[role=group]');
+                const prevGroup = this.getPreviousGroup(currentGroup);
+                if (!prevGroup) {
+                    menuItem.tabIndex = -1;
+                    const parentMenubar = event.target.closest('[role="menubar"]');
+                    const focusedItem = parentMenubar?.querySelector('[role="menuitem"][aria-expanded="true"][tabindex="0"]');
+                    this.focusPreviousItem(focusedItem);
+                    break;
+                }
+                const prevGroupItems = (prevGroup.querySelectorAll('[role="menuitem"]') ?? []);
+                moveFocus(menuItem, prevGroupItems[0]);
+                break;
+            case 'Home':
+                // Move to the first menu item
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocus(menuItem, items[0]);
+                break;
+            case 'End':
+                // Move to the last menu item
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocus(menuItem, items[items.length - 1]);
+                break;
+        }
+    }
+    handleInputChange(event) {
+        this._searchQuery = event.target.value;
+    }
+    onSearchSubmit(event) {
+        event.preventDefault();
+        if (!this._searchQuery) {
+            return;
+        }
+        this.search.emit({ query: this._searchQuery });
+        this.formElement.submit();
+    }
+    render() {
+        if (!this.items?.length) {
+            return;
+        }
+        if (this.isMobile) {
+            return (h("zanit-mobile-menubar", { items: this.items, current: this.current, searchQuery: this.searchQuery }));
+        }
+        return (h("nav", { "aria-label": "Zanichelli.it" }, h("ul", { class: "menubar", role: "menubar", "aria-label": "Zanichelli.it" }, this.items.map((item, index) => (h(Fragment, null, h("li", { role: "none" }, h("a", { class: { 'menubar-item': true, 'active': this.isActive(item) }, href: item.href, id: item.id, role: "menuitem", tabIndex: -1, "aria-expanded": this.openMenu === item.id ? 'true' : 'false', "aria-haspopup": item.menuItems?.length ? 'true' : 'false', "aria-current": this.current === item.id ? 'page' : 'false', onPointerOver: () => this.showMenu(item), onKeyDown: (event) => this.handleItemKeydown(event, item) }, h("span", { "data-text": item.label }, item.label), item.menuItems?.length > 0 && (h("z-icon", { name: this.openMenu === item.id ? 'chevron-up' : 'chevron-down' })))), this.openMenu === item.id && (h(Menu, { controlledBy: item.id, items: item.menuItems, current: this.current, onItemKeyDown: (event) => this.handleMenuKeydown(event) })), index < this.items.length - 1 && h("li", { role: "separator" })))), h("li", { class: "searchbar-container", role: "none" }, h("form", { class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), ref: (el) => (this.formElement = el) }, this.showSearchbar && (h("input", { id: "searchbar-input", name: "q", type: "search", placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), required: true })), h("button", { class: "searchbar-button", "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => (this.showSearchbar = true) }, this.showSearchbar ? null : h("span", null, "Cerca"), h("z-icon", { name: "search", width: "32", height: "32" }))))), this.items.map((item) => item.navbarItems?.length && (h("nav", { class: { 'sub-menubar': true, 'visible': this.isActive(item) } }, h("ul", { role: "menubar" }, item.navbarItems.map((subitem) => (h(Fragment, null, h("li", { role: "none" }, h("a", { class: { 'menubar-item': true, 'active': this.isActive(subitem) }, href: subitem.href, id: subitem.id, role: "menuitem", tabIndex: -1, "aria-haspopup": subitem.menuItems?.length ? 'true' : 'false', "aria-expanded": this.openMenu === subitem.id ? 'true' : 'false', "aria-current": this.current === item.id ? 'page' : 'false', onPointerOver: () => this.showMenu(subitem), onKeyDown: (event) => this.handleItemKeydown(event, subitem) }, h("span", null, subitem.label), subitem.menuItems?.length > 0 && (h("z-icon", { name: this.openMenu === subitem.id ? 'chevron-up' : 'chevron-down' })))), this.openMenu === subitem.id && (h(Menu, { controlledBy: subitem.id, items: subitem.menuItems, current: this.current, onItemKeyDown: (event) => this.handleMenuKeydown(event) })))))))))));
+    }
+    static get is() { return "zanit-menubar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["menubar.css", "menu/menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["menubar.css", "menu/menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "data": {
+                "type": "string",
+                "attribute": "data",
+                "mutable": false,
+                "complexType": {
+                    "original": "Promise<MenubarItem[]> | MenubarItem[] | URL | string",
+                    "resolved": "MenubarItem[] | Promise<MenubarItem[]> | URL | string",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "MenubarItem": {
+                            "location": "local",
+                            "path": "/home/vale/projects/zanichelli-it-frontend-kit/src/components/menubar/menubar.tsx",
+                            "id": "src/components/menubar/menubar.tsx::MenubarItem"
+                        },
+                        "URL": {
+                            "location": "global",
+                            "id": "global::URL"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The data to build the menu (as an array of `MenuItem` or a JSON array) or the url to fetch to retrieve it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "current": {
+                "type": "string",
+                "attribute": "current",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID of the current active item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "searchQuery": {
+                "type": "string",
+                "attribute": "search-query",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial search query."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "undefined"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "items": {},
+            "openMenu": {},
+            "openNavbar": {},
+            "showSearchbar": {},
+            "_searchQuery": {},
+            "isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "search",
+                "name": "search",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on search form submission."
+                },
+                "complexType": {
+                    "original": "{ query: string }",
+                    "resolved": "{ query: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "data",
+                "methodName": "parseData"
+            }, {
+                "propName": "items",
+                "methodName": "onItemsChange"
+            }, {
+                "propName": "showSearchbar",
+                "methodName": "onShowSearchbar"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerdown",
+                "method": "handleOutsideClick",
+                "target": "document",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "focusout",
+                "method": "handleFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=menubar.js.map

package/dist/collection/components/menubar/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","sourceRoot":"","sources":["../../../src/components/menubar/menubar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { Menu } from './menu/menu';\nimport { containsTarget, moveFocus } from '../../utils/utils';\n\nexport type MenuItem = {\n  label: string;\n  href?: string;\n  highlight?: boolean;\n  id?: string;\n  group?: { id: string; label: string };\n};\nexport type MenubarItem = Omit<MenuItem, 'group'> & {\n  navbarItems?: MenubarItem[];\n  menuItems?: MenuItem[];\n};\n\n/**\n * Main menubar component. Each item can have a menu with subitems\n * When a main menubar item is the current active one, a sub-menubar is shown and each subitem can have a menu with subitems.\n * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.\n */\n@Component({\n  tag: 'zanit-menubar',\n  styleUrls: ['menubar.css', 'menu/menu.css'],\n  shadow: true,\n})\nexport class ZanitMenubar {\n  private formElement: HTMLFormElement;\n\n  @Element() host: HTMLZanitMenubarElement;\n\n  /** Menubar items extracted from `data`. */\n  @State() items: MenubarItem[] = [];\n\n  /** ID of the currently open menu. */\n  @State() openMenu: string | undefined = undefined;\n\n  /** ID of the item to show the subitems navbar for. */\n  @State() openNavbar: string | undefined = undefined;\n\n  /** Indicates whether the searchbar is visible and usable. */\n  @State() showSearchbar: boolean = false;\n\n  /** Search query to apply. */\n  @State() _searchQuery: string | undefined = undefined;\n\n  @State() isMobile: boolean = false;\n\n  /** The data to build the menu (as an array of `MenuItem` or a JSON array) or the url to fetch to retrieve it. */\n  @Prop() data: Promise<MenubarItem[]> | MenubarItem[] | URL | string;\n\n  /** ID of the current active item. */\n  @Prop() current: string | undefined = undefined;\n\n  /** Initial search query. */\n  @Prop() searchQuery: string | undefined = undefined;\n\n  /** Setup the list of items. */\n  @Watch('data')\n  async parseData(data: typeof this.data) {\n    if (!data) {\n      return;\n    }\n\n    if (data instanceof URL) {\n      this.items = await this.fetchData(data);\n    } else if (data instanceof Promise) {\n      this.items = await data;\n    } else if (typeof data === 'string') {\n      try {\n        this.items = JSON.parse(data);\n        if (!Array.isArray(this.items) || !this.items.every((item) => item satisfies MenubarItem)) {\n          throw new Error('Expected an array of MenuItem objects.');\n        }\n      } catch {\n        let url: URL;\n        try {\n          url = new URL(data);\n        } catch (error) {\n          throw new Error('Invalid string provided for `data` property: not a valid url or JSON.');\n        }\n\n        this.items = await this.fetchData(url);\n      }\n    } else if (Array.isArray(data) && data.every((item) => item satisfies MenubarItem)) {\n      this.items = data;\n    } else {\n      throw new Error(\n        'Invalid `data` property value. Expected an url, a JSON or an array/promise of MenuItem objects.'\n      );\n    }\n  }\n\n  @Watch('items')\n  onItemsChange() {\n    this.initTabindex();\n  }\n\n  /** Focus searchbar input when it becomes visible. */\n  @Watch('showSearchbar')\n  onShowSearchbar() {\n    if (!this.showSearchbar) {\n      return;\n    }\n\n    setTimeout(() => {\n      const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n      if (this.showSearchbar) {\n        searchbarInput.focus();\n      }\n    }, 10);\n  }\n\n  /** Emitted on search form submission. */\n  @Event() search: EventEmitter<{ query: string }>;\n\n  async connectedCallback() {\n    await this.parseData(this.data);\n    this.initTabindex();\n    const mobileMediaQuery = window.matchMedia('(width < 768px)');\n    this.isMobile = mobileMediaQuery.matches;\n    mobileMediaQuery.onchange = (mql) => {\n      this.isMobile = mql.matches;\n      this.initTabindex();\n      this.openMenu = undefined;\n      this.showSearchbar = false;\n    };\n  }\n\n  /** Close open searchbar or any open menu when clicking outside. */\n  @Listen('pointerdown', { target: 'document', passive: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (this.showSearchbar && !containsTarget(this.formElement, event)) {\n      this.showSearchbar = false;\n    }\n\n    if (containsTarget(this.host, event)) {\n      return;\n    }\n\n    this.openMenu = undefined;\n  }\n\n  /** Close any open menu when pressing Escape or Tab. */\n  @Listen('keydown', { passive: true })\n  handleKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Escape':\n      case 'Tab':\n        this.openMenu = undefined;\n        break;\n    }\n  }\n\n  /** Close the menu when it loses focus. */\n  @Listen('focusout', { passive: true })\n  handleFocusout(event: FocusEvent) {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (this.host.shadowRoot.querySelector('.menu')?.contains(relatedTarget)) {\n      return;\n    }\n\n    this.openMenu = undefined;\n  }\n\n  /** Fetch data from passed URL. */\n  private async fetchData(url: URL) {\n    try {\n      const data = await (await fetch(url)).json();\n      if (!Array.isArray(data) || !data.every((item) => item satisfies MenubarItem)) {\n        throw new Error('Invalid data structure. Expected an array of MenuItem objects.');\n      }\n\n      return data as MenubarItem[];\n    } catch (error) {\n      console.error('Error fetching menubar data:', error);\n      throw new Error('Failed to fetch menubar data from the provided URL.', { cause: error });\n    }\n  }\n\n  /** Initialize tabindex on menuitems of menubars, setting -1 to all but the first one. */\n  private initTabindex() {\n    setTimeout(() => {\n      this.host.shadowRoot.querySelectorAll('[role=\"menubar\"]')?.forEach((menubar) => {\n        menubar\n          .querySelectorAll('[role=\"menuitem\"]')\n          ?.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));\n      });\n    }, 100);\n  }\n\n  /** Indicates whether the element has to be highlighted by checking whether it is set as current or one of its descendants is. */\n  private isActive(item: MenubarItem) {\n    if (item.id === this.current) {\n      return true;\n    }\n\n    if (item.menuItems?.length) {\n      return item.menuItems.some((menuItem) => menuItem.id === this.current);\n    }\n\n    if (item.navbarItems?.length) {\n      const isActive = item.navbarItems.some((navbarItem) => this.isActive(navbarItem));\n      if (isActive) {\n        return true;\n      }\n    }\n\n    return false;\n  }\n\n  /** Opens the menu associated with the menubar `item`, if any. */\n  private showMenu(item: MenubarItem) {\n    if (!item.menuItems?.length) {\n      return;\n    }\n\n    this.openMenu = item.id;\n  }\n\n  /** Get all elements with `menuitem` role inside parent's `menubar`. * */\n  private getParentMenubarElements(itemEl: HTMLElement) {\n    return Array.from(\n      itemEl?.closest('[role=\"menubar\"]')?.querySelectorAll(':scope > li a[role=\"menuitem\"]') ?? []\n    ) as HTMLElement[];\n  }\n\n  /** Move the focus to the previous menubar item, or the last one. Then open its menu if any other menu was open. */\n  private focusPreviousItem(itemEl: HTMLElement) {\n    const menubarElements = this.getParentMenubarElements(itemEl);\n    itemEl.tabIndex = -1;\n    const currentIndex = menubarElements.indexOf(itemEl);\n    const prevItem = menubarElements[(currentIndex - 1 + menubarElements.length) % menubarElements.length]; // get previous item or last one\n    prevItem.tabIndex = 0;\n    prevItem.focus();\n    // open the item's menu if any other menu was open\n    if (prevItem.ariaHasPopup === 'true' && this.openMenu) {\n      this.openMenu = prevItem.id;\n    }\n  }\n\n  /** Move the focus to the next menubar item, or the first one. Then open its menu if any other menu was open. */\n  private focusNextItem(itemEl: HTMLElement) {\n    const menubarElements = this.getParentMenubarElements(itemEl);\n    itemEl.tabIndex = -1;\n    const currentIndex = menubarElements.indexOf(itemEl);\n    const nextItem = menubarElements[(currentIndex + 1) % menubarElements.length]; // get next item or first one\n    nextItem.tabIndex = 0;\n    nextItem.focus();\n    // open the item's menu if any other menu was open\n    if (nextItem.ariaHasPopup === 'true' && this.openMenu) {\n      this.openMenu = nextItem.id;\n    }\n  }\n\n  /** Handles keyboard navigation on menubar items. */\n  private handleItemKeydown(event: KeyboardEvent, item: MenubarItem) {\n    const target = event.target as HTMLElement;\n    switch (event.key) {\n      case 'Home': {\n        event.preventDefault();\n        event.stopPropagation();\n        const firstItem = this.getParentMenubarElements(target)[0];\n        moveFocus(target, firstItem);\n        break;\n      }\n      case 'End': {\n        event.preventDefault();\n        event.stopPropagation();\n        const lastItem = this.getParentMenubarElements(target).pop();\n        moveFocus(target, lastItem);\n        break;\n      }\n      case 'ArrowUp': {\n        if (!item.menuItems?.length) {\n          break;\n        }\n        event.preventDefault();\n        event.stopPropagation();\n        this.openMenu = item.id;\n        // focus last item of the menu\n        setTimeout(() => {\n          const menuItems = Array.from(\n            this.host.shadowRoot.querySelectorAll(`[aria-labelledby=${item.id}] [role=\"menuitem\"]`)\n          ) as HTMLElement[];\n          moveFocus(target, menuItems[menuItems.length - 1]);\n        }, 100);\n        break;\n      }\n      case 'ArrowRight': {\n        event.preventDefault();\n        event.stopPropagation();\n        this.focusNextItem(target);\n        break;\n      }\n      case 'ArrowDown': {\n        if (!item.menuItems?.length) {\n          break;\n        }\n        this.openMenu = item.id;\n        setTimeout(() => {\n          // focus first item of the menu\n          const firsMenuItem = this.host.shadowRoot.querySelector(\n            `[aria-labelledby=${item.id}] [role=\"menuitem\"]`\n          ) as HTMLElement;\n          firsMenuItem.tabIndex = 0;\n          firsMenuItem.focus();\n        }, 100);\n        break;\n      }\n      case 'ArrowLeft': {\n        event.preventDefault();\n        event.stopPropagation();\n        this.focusPreviousItem(target);\n        break;\n      }\n    }\n  }\n\n  /** Get the previous element with `role=group`. */\n  private getPreviousGroup(groupContainer: HTMLElement) {\n    const groups = Array.from(\n      groupContainer?.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"group\"]') ?? []\n    ) as HTMLElement[];\n    const currentIndex = groups.indexOf(groupContainer);\n\n    return groups[currentIndex - 1];\n  }\n\n  /** Get the next element with `role=group`. */\n  private getNextGroup(groupContainer: HTMLElement) {\n    const groups = Array.from(\n      groupContainer?.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"group\"]') ?? []\n    ) as HTMLElement[];\n    const currentIndex = groups.indexOf(groupContainer);\n\n    return groups[currentIndex + 1];\n  }\n\n  /** Handles keyboard navigation events from `Menu` component. */\n  private handleMenuKeydown(event: KeyboardEvent) {\n    const menuItem = event.target as HTMLElement;\n    const items = Array.from(\n      menuItem.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"menuitem\"]') ?? []\n    ) as HTMLElement[];\n    const currentIndex = items.indexOf(menuItem);\n    switch (event.key) {\n      case 'ArrowUp': {\n        event.preventDefault();\n        event.stopPropagation();\n        const prevItem = items[currentIndex - 1] || items[items.length - 1];\n        moveFocus(menuItem, prevItem);\n        break;\n      }\n      // Move the focus to the first item of the next group if any, otherwise move it to the next menubar item\n      case 'ArrowRight': {\n        event.preventDefault();\n        event.stopPropagation();\n        const currentGroup = menuItem.closest('[role=group]') as HTMLElement;\n        const nextGroup = this.getNextGroup(currentGroup);\n        if (!nextGroup) {\n          menuItem.tabIndex = -1;\n          const parentMenubar = (event.target as HTMLElement).closest('[role=\"menubar\"]');\n          const focusedItem = parentMenubar?.querySelector<HTMLElement>(\n            '[role=\"menuitem\"][aria-expanded=\"true\"][tabindex=\"0\"]'\n          );\n          this.focusNextItem(focusedItem);\n          break;\n        }\n\n        const nextGroupItems = (nextGroup.querySelectorAll('[role=\"menuitem\"]') ?? []) as HTMLElement[];\n        moveFocus(menuItem, nextGroupItems[0]);\n        break;\n      }\n      case 'ArrowDown': {\n        event.preventDefault();\n        event.stopPropagation();\n        const nextItem = items[currentIndex + 1] || items[0];\n        moveFocus(menuItem, nextItem);\n        break;\n      }\n      // Move the focus to the first item of the previous group if any, otherwise move it to the previous menubar item\n      case 'ArrowLeft':\n        event.preventDefault();\n        event.stopPropagation();\n        const currentGroup = menuItem.closest('[role=group]') as HTMLElement;\n        const prevGroup = this.getPreviousGroup(currentGroup);\n        if (!prevGroup) {\n          menuItem.tabIndex = -1;\n          const parentMenubar = (event.target as HTMLElement).closest('[role=\"menubar\"]');\n          const focusedItem = parentMenubar?.querySelector<HTMLElement>(\n            '[role=\"menuitem\"][aria-expanded=\"true\"][tabindex=\"0\"]'\n          );\n          this.focusPreviousItem(focusedItem);\n          break;\n        }\n\n        const prevGroupItems = (prevGroup.querySelectorAll('[role=\"menuitem\"]') ?? []) as HTMLElement[];\n        moveFocus(menuItem, prevGroupItems[0]);\n        break;\n      case 'Home':\n        // Move to the first menu item\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(menuItem, items[0]);\n        break;\n      case 'End':\n        // Move to the last menu item\n        event.preventDefault();\n        event.stopPropagation();\n        moveFocus(menuItem, items[items.length - 1]);\n        break;\n    }\n  }\n\n  private handleInputChange(event: Event) {\n    this._searchQuery = (event.target as HTMLInputElement).value;\n  }\n\n  private onSearchSubmit(event: Event) {\n    event.preventDefault();\n    if (!this._searchQuery) {\n      return;\n    }\n\n    this.search.emit({ query: this._searchQuery });\n    this.formElement.submit();\n  }\n\n  render() {\n    if (!this.items?.length) {\n      return;\n    }\n\n    if (this.isMobile) {\n      return (\n        <zanit-mobile-menubar\n          items={this.items}\n          current={this.current}\n          searchQuery={this.searchQuery}\n        />\n      );\n    }\n\n    return (\n      <nav aria-label=\"Zanichelli.it\">\n        <ul\n          class=\"menubar\"\n          role=\"menubar\"\n          aria-label=\"Zanichelli.it\"\n        >\n          {this.items.map((item, index) => (\n            <Fragment>\n              <li role=\"none\">\n                <a\n                  class={{ 'menubar-item': true, 'active': this.isActive(item) }}\n                  href={item.href}\n                  id={item.id}\n                  role=\"menuitem\"\n                  tabIndex={-1}\n                  aria-expanded={this.openMenu === item.id ? 'true' : 'false'}\n                  aria-haspopup={item.menuItems?.length ? 'true' : 'false'}\n                  aria-current={this.current === item.id ? 'page' : 'false'}\n                  onPointerOver={() => this.showMenu(item)}\n                  onKeyDown={(event) => this.handleItemKeydown(event, item)}\n                >\n                  <span data-text={item.label}>{item.label}</span>\n                  {item.menuItems?.length > 0 && (\n                    <z-icon name={this.openMenu === item.id ? 'chevron-up' : 'chevron-down'} />\n                  )}\n                </a>\n              </li>\n              {this.openMenu === item.id && (\n                <Menu\n                  controlledBy={item.id}\n                  items={item.menuItems}\n                  current={this.current}\n                  onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n                />\n              )}\n              {index < this.items.length - 1 && <li role=\"separator\"></li>}\n            </Fragment>\n          ))}\n          <li\n            class=\"searchbar-container\"\n            role=\"none\"\n          >\n            <form\n              class={{ 'searchbar': true, 'searchbar-open': this.showSearchbar }}\n              role=\"search\"\n              aria-label=\"Cerca\"\n              method=\"get\"\n              action=\"/ricerca\"\n              onSubmit={(event) => this.onSearchSubmit(event)}\n              ref={(el) => (this.formElement = el)}\n            >\n              {this.showSearchbar && (\n                <input\n                  id=\"searchbar-input\"\n                  name=\"q\"\n                  type=\"search\"\n                  placeholder=\"Cerca per parola chiave o ISBN\"\n                  onInput={(event) => this.handleInputChange(event)}\n                  required\n                ></input>\n              )}\n              <button\n                class=\"searchbar-button\"\n                aria-controls=\"searchbar-input\"\n                type={this.showSearchbar ? 'submit' : 'button'}\n                onClick={() => (this.showSearchbar = true)}\n              >\n                {this.showSearchbar ? null : <span>Cerca</span>}\n                <z-icon\n                  name=\"search\"\n                  width=\"32\"\n                  height=\"32\"\n                ></z-icon>\n              </button>\n            </form>\n          </li>\n        </ul>\n\n        {this.items.map(\n          (item) =>\n            item.navbarItems?.length && (\n              <nav class={{ 'sub-menubar': true, 'visible': this.isActive(item) }}>\n                <ul role=\"menubar\">\n                  {item.navbarItems.map((subitem) => (\n                    <Fragment>\n                      <li role=\"none\">\n                        <a\n                          class={{ 'menubar-item': true, 'active': this.isActive(subitem) }}\n                          href={subitem.href}\n                          id={subitem.id}\n                          role=\"menuitem\"\n                          tabIndex={-1}\n                          aria-haspopup={subitem.menuItems?.length ? 'true' : 'false'}\n                          aria-expanded={this.openMenu === subitem.id ? 'true' : 'false'}\n                          aria-current={this.current === item.id ? 'page' : 'false'}\n                          onPointerOver={() => this.showMenu(subitem)}\n                          onKeyDown={(event) => this.handleItemKeydown(event, subitem)}\n                        >\n                          <span>{subitem.label}</span>\n                          {subitem.menuItems?.length > 0 && (\n                            <z-icon name={this.openMenu === subitem.id ? 'chevron-up' : 'chevron-down'} />\n                          )}\n                        </a>\n                      </li>\n                      {this.openMenu === subitem.id && (\n                        <Menu\n                          controlledBy={subitem.id}\n                          items={subitem.menuItems}\n                          current={this.current}\n                          onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n                        />\n                      )}\n                    </Fragment>\n                  ))}\n                </ul>\n              </nav>\n            )\n        )}\n      </nav>\n    );\n  }\n}\n"]}