@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.8 → 0.1.1

package/dist/esm/zanit-menubar_3.entry.js

@@ -0,0 +1,627 @@
+import { h, r as registerInstance, a as getElement, F as Fragment, c as createEvent } from './index-BWVQ0LD4.js';
+
+/**
+ * Check if an element contains an event target by checking its composedPath.
+ * Useful when an event target may come from a component's shadow DOM.
+ */
+const containsTarget = (ancestor, event) => {
+    return event
+        .composedPath()
+        .filter((el) => el !== document && el !== window.window)
+        .some((el) => ancestor.contains(el));
+};
+/** Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. */
+const moveFocus = (current, next) => {
+    current.tabIndex = -1;
+    next.tabIndex = 0;
+    next.focus();
+};
+
+const DEFAULT_GROUP_KEY = 'default';
+const DEFAULT_GROUP = {
+    id: DEFAULT_GROUP_KEY,
+    label: DEFAULT_GROUP_KEY,
+};
+/** Get the items grouped by their group. */
+const getGroupedItems = (items) => {
+    const groups = items.reduce((grouped, item) => {
+        const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));
+        if (!itemGroup) {
+            grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });
+        }
+        else {
+            itemGroup.items.push(item);
+        }
+        return grouped;
+    }, []);
+    // Sort to keep default group at the end
+    return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));
+};
+/**
+ * Floating menu component. It shows a list of items that can be grouped.
+ */
+const Menu = ({ controlledBy, items, current, onItemKeyDown }) => {
+    if (!items?.length) {
+        return null;
+    }
+    const groups = getGroupedItems(items);
+    return (h("div", { class: "menu-wrapper", role: "none" },
+        h("div", { class: "menu", "aria-labelledby": controlledBy ?? undefined, role: "menu" }, groups.map(({ group, items }) => (h("div", { class: { group: true, highlight: items.some((item) => item.highlight) }, role: "none" },
+            group.id !== DEFAULT_GROUP_KEY ? (h("div", { class: "group-name", id: group.id }, group.label)) : groups.length > 1 ? (
+            // empty div to keep the same height as the other groups
+            h("div", { class: "group-name" })) : null,
+            h("ul", { class: "menu-list", role: "group", "aria-labelledby": group.id !== DEFAULT_GROUP_KEY ? group.id : undefined }, items.map((item) => (h("li", { role: "none" }, item.href && (h("a", { class: { 'menu-item': true, 'active': current === item.id }, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": current === item.id ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event) }, item.label))))))))))));
+};
+
+const menubarCss = ":host{position:relative;z-index:2;display:flex;width:100%;background-color:#fff;color:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}:host nav{width:100%}.shadow-wrapper{position:relative;z-index:1;width:100%}.shadow-wrapper::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.shadow-wrapper+.shadow-wrapper{z-index:0}.shadow-wrapper>ul{position:relative;display:flex;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);align-items:center;padding:0 var(--grid-margin);margin-right:auto;margin-left:auto;gap:20px}ul.menubar{padding-right:0}.menubar z-ghost-loading{display:block;width:120px;height:1.25rem}.menubar>li[role='separator']{width:1px;height:1.25rem;background-color:#000}.menubar-item{position:relative;display:flex;align-items:center;padding:14px 0;font-size:1rem;gap:8px;line-height:1.25rem}.menubar .menubar-item{text-transform:uppercase}.menubar-item [data-text]{display:flex;flex-direction:column}.menubar-item.active>[data-text],.menubar-item:hover>[data-text],.menubar-item:focus:focus-visible>[data-text]{font-weight:var(--font-bd)}.menubar-item>[data-text]::after{height:0;content:attr(data-text) / '';font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}.sub-menubar:not(.visible){display:none}.sub-menubar>ul{gap:28px}.sub-menubar .menubar-item.active::after{position:absolute;z-index:-1;bottom:0;left:-4px;width:calc(100% + 8px);height:4px;background-color:var(--red500);content:''}.searchbar-container{margin-left:auto}";
+
+const menuCss$1 = ".menu-wrapper{width:100%;background-color:#fff}.menu{position:relative;display:flex;width:100%;flex-direction:column;gap:32px 0}.menu .group{display:flex;flex-direction:column}.menu .group .group-name{border-bottom:1px solid currentcolor;margin-bottom:4px;color:var(--red500);font-size:0.875rem;font-weight:var(--font-rg)}.menu .group .menu-list{display:flex;flex-direction:column;gap:4px}.menu .group .menu-list .menu-item{border-bottom:2px solid transparent;font-size:0.875rem;font-weight:var(--font-md)}.menu .menu-list .menu-item.active,.menu .menu-list .menu-item:hover{border-bottom-color:var(--red500)}.menu .group.highlight .menu-list .menu-item{font-size:1rem}@media (width >= 768px){.menu-wrapper{position:absolute;top:100%;left:0;display:flex;justify-content:center;box-shadow:var(--shadow-1)}.menu{display:grid;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);padding:16px var(--grid-margin);gap:0 24px;grid-auto-columns:minmax(0, max-content);grid-auto-flow:column;grid-template-rows:minmax(0, max-content) max-content}.menu .group{display:grid;grid-row:1 / -1;grid-template-columns:1fr;grid-template-rows:subgrid}@supports not (grid-template-rows: subgrid){.menu .group{grid-template-rows:repeat(auto-fit, minmax(0, max-content))}}.menu .group .group-name{border:none;margin-bottom:16px}.menu .group .menu-list .menu-item{font-size:1rem}.menu .group.highlight .menu-list .menu-item{font-size:1.5rem}.menu .group.highlight .menu-list{gap:24px}}";
+
+const ZanitMenubar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get host() { return getElement(this); }
+    /** 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;
+    isMobile = false;
+    loading = false;
+    /** The data to build the menu (as an array of `MenubarItem` 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.loading = true;
+            this.items = await data;
+            this.loading = false;
+        }
+        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 MenubarItem objects.');
+                }
+            }
+            catch {
+                let url;
+                try {
+                    url = new URL(data);
+                }
+                catch {
+                    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 MenubarItem objects.');
+        }
+    }
+    onItemsChange() {
+        this.initTabindex();
+    }
+    async connectedCallback() {
+        const mobileMediaQuery = window.matchMedia('(width < 768px)');
+        this.isMobile = mobileMediaQuery.matches;
+        mobileMediaQuery.onchange = (mql) => {
+            this.isMobile = mql.matches;
+            this.initTabindex();
+            this.openMenu = undefined;
+        };
+        await this.parseData(this.data);
+        this.initTabindex();
+    }
+    /** Close any open menu when clicking outside. */
+    handleOutsideClick(event) {
+        if (!this.openMenu || 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.openMenu || this.host.shadowRoot.querySelector('.menu')?.contains(relatedTarget)) {
+            return;
+        }
+        this.openMenu = undefined;
+    }
+    /** Fetch data from passed URL. */
+    async fetchData(url) {
+        try {
+            this.loading = true;
+            const data = await (await fetch(url)).json();
+            this.loading = false;
+            if (!Array.isArray(data) || !data.every((item) => item)) {
+                throw new Error('Invalid data structure. Expected an array of MenuItem objects.');
+            }
+            return data;
+        }
+        catch (error) {
+            this.loading = false;
+            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 itemElement = event.target;
+        const items = Array.from(itemElement.closest('[role="menu"]')?.querySelectorAll('[role="menuitem"]') ?? []);
+        const currentIndex = items.indexOf(itemElement);
+        switch (event.key) {
+            case 'ArrowUp': {
+                event.preventDefault();
+                event.stopPropagation();
+                const prevItem = items[currentIndex - 1] || items[items.length - 1];
+                moveFocus(itemElement, 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 = itemElement.closest('[role=group]');
+                const nextGroup = this.getNextGroup(currentGroup);
+                if (!nextGroup) {
+                    itemElement.tabIndex = -1;
+                    const menuTriggerId = itemElement.closest('[role="menu"][aria-labelledby]').getAttribute('aria-labelledby');
+                    const focusedItem = this.host.shadowRoot.getElementById(menuTriggerId);
+                    this.focusNextItem(focusedItem);
+                    break;
+                }
+                const nextGroupItems = (nextGroup.querySelectorAll('[role="menuitem"]') ?? []);
+                moveFocus(itemElement, nextGroupItems[0]);
+                break;
+            }
+            case 'ArrowDown': {
+                event.preventDefault();
+                event.stopPropagation();
+                const nextItem = items[currentIndex + 1] || items[0];
+                moveFocus(itemElement, 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 = itemElement.closest('[role=group]');
+                const prevGroup = this.getPreviousGroup(currentGroup);
+                if (!prevGroup) {
+                    itemElement.tabIndex = -1;
+                    const menuTriggerId = itemElement.closest('[role="menu"][aria-labelledby]').getAttribute('aria-labelledby');
+                    const focusedItem = this.host.shadowRoot.getElementById(menuTriggerId);
+                    this.focusPreviousItem(focusedItem);
+                    break;
+                }
+                const prevGroupItems = (prevGroup.querySelectorAll('[role="menuitem"]') ?? []);
+                moveFocus(itemElement, prevGroupItems[0]);
+                break;
+            }
+            case 'Home':
+                // Move to the first menu item
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocus(itemElement, items[0]);
+                break;
+            case 'End':
+                // Move to the last menu item
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocus(itemElement, items[items.length - 1]);
+                break;
+        }
+    }
+    render() {
+        if (this.isMobile) {
+            return (h("zanit-mobile-menubar", { items: this.items, current: this.current, searchQuery: this.searchQuery, loading: this.loading }));
+        }
+        return (h("nav", { "aria-label": "Zanichelli.it" }, h("div", { class: "shadow-wrapper", role: "none" }, h("ul", { class: "menubar", role: "menubar", "aria-label": "Zanichelli.it" }, this.loading &&
+            [...new Array(4)].map((_, index) => (h(Fragment, null, h("li", { role: "none" }, h("div", { class: "menubar-item" }, h("z-ghost-loading", null))), index < 3 && h("li", { role: "separator" })))), 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', width: "0.875rem", height: "0.875rem" })))), index < this.items?.length - 1 && h("li", { role: "separator" })))), h("li", { class: "searchbar-container", role: "none" }, h("zanit-search-form", { searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) }))), this.items.map((item) => this.openMenu === item.id && (h(Menu, { controlledBy: item.id, items: item.menuItems, current: this.current, onItemKeyDown: (event) => this.handleMenuKeydown(event) })))), this.items?.map((item) => item.navbarItems?.length && (h("nav", { class: { 'sub-menubar': true, 'shadow-wrapper': 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', width: "0.75rem", height: "0.75rem" })))))))), item.navbarItems.map((subitem) => this.openMenu === subitem.id && (h(Menu, { controlledBy: subitem.id, items: subitem.menuItems, current: this.current, onItemKeyDown: (event) => this.handleMenuKeydown(event) }))))))));
+    }
+    static get watchers() { return {
+        "data": ["parseData"],
+        "items": ["onItemsChange"]
+    }; }
+};
+ZanitMenubar.style = menubarCss + menuCss$1;
+
+const mobileMenubarCss = ":host{position:relative;z-index:2;display:block;width:100%;max-width:100%;background-color:#fff;color:var(--gray900);fill:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}nav{display:flex;width:100%;align-items:center;padding:8px var(--grid-margin)}nav::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.burger-button{margin-left:auto}.mobile-menu{position:absolute;top:100%;left:0;display:flex;width:100%;flex-direction:column;padding:16px var(--grid-margin) 32px;background-color:#fff;box-shadow:var(--shadow-2);gap:8px}.mobile-menu li{width:100%}.mobile-menu .items-container{display:flex;min-height:256px;flex-direction:column;gap:8px}.mobile-menu .items-container z-ghost-loading{width:40%;height:1.2rem}.mobile-menu .items-container .menubar-item{display:block;width:100%;padding:8px 0;font-size:1rem;text-align:left}.mobile-menu .items-container li:not(:last-child) .menubar-item{border-bottom:1px solid #000}[role='menuitem'].parent{display:flex;width:fit-content;align-items:center;padding:0;border:none;font-size:0.875rem;gap:8px}";
+
+const menuCss = ".menu-wrapper{width:100%;background-color:#fff}.menu{position:relative;display:flex;width:100%;flex-direction:column;gap:32px 0}.menu .group{display:flex;flex-direction:column}.menu .group .group-name{border-bottom:1px solid currentcolor;margin-bottom:4px;color:var(--red500);font-size:0.875rem;font-weight:var(--font-rg)}.menu .group .menu-list{display:flex;flex-direction:column;gap:4px}.menu .group .menu-list .menu-item{border-bottom:2px solid transparent;font-size:0.875rem;font-weight:var(--font-md)}.menu .menu-list .menu-item.active,.menu .menu-list .menu-item:hover{border-bottom-color:var(--red500)}.menu .group.highlight .menu-list .menu-item{font-size:1rem}@media (width >= 768px){.menu-wrapper{position:absolute;top:100%;left:0;display:flex;justify-content:center;box-shadow:var(--shadow-1)}.menu{display:grid;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);padding:16px var(--grid-margin);gap:0 24px;grid-auto-columns:minmax(0, max-content);grid-auto-flow:column;grid-template-rows:minmax(0, max-content) max-content}.menu .group{display:grid;grid-row:1 / -1;grid-template-columns:1fr;grid-template-rows:subgrid}@supports not (grid-template-rows: subgrid){.menu .group{grid-template-rows:repeat(auto-fit, minmax(0, max-content))}}.menu .group .group-name{border:none;margin-bottom:16px}.menu .group .menu-list .menu-item{font-size:1rem}.menu .group.highlight .menu-list .menu-item{font-size:1.5rem}.menu .group.highlight .menu-list{gap:24px}}";
+
+const ZanitMobileMenubar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get host() { return getElement(this); }
+    /** ID of the current active item. */
+    current = undefined;
+    /** Menubar items. */
+    items = [];
+    /** Initial search query. */
+    searchQuery = undefined;
+    /** Whether the menubar is loading the data. */
+    loading = false;
+    parentItem = undefined;
+    menuItems = undefined;
+    /** Whether the items to render come from a menubar or a menu. */
+    menuType = undefined;
+    open;
+    onItemsChange() {
+        this.setupData(this.items);
+    }
+    /**
+     * Find the current item and take its parent, `menuItems` or the `navbarItems`.
+     * @returns True if an item matches the `current` prop, false otherwise.
+     */
+    setupData(items, parent) {
+        for (const item of items) {
+            if (item.id === this.current) {
+                const type = item.menuItems?.length ? 'menu' : 'menubar';
+                this.parentItem = parent;
+                this.menuType = type;
+                this.menuItems = item.menuItems || item.navbarItems;
+                return true;
+            }
+            if (item.menuItems?.some(({ id }) => id === this.current)) {
+                this.parentItem = parent;
+                this.menuType = 'menu';
+                this.menuItems = item.menuItems;
+                return true;
+            }
+            if (item.navbarItems?.length) {
+                return this.setupData(item.navbarItems, item);
+            }
+        }
+        return false;
+    }
+    get menuItemsElement() {
+        return Array.from(this.host.shadowRoot.querySelectorAll('[role="menuitem"]'));
+    }
+    /** Initialize tabindex on menuitems, setting -1 to all but the first one. */
+    initTabindex() {
+        this.menuItemsElement.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));
+    }
+    toggleMenu() {
+        if (this.open) {
+            this.open = false;
+        }
+        else {
+            this.open = true;
+            setTimeout(() => {
+                this.initTabindex();
+                this.menuItemsElement[0]?.focus();
+            }, 200);
+        }
+    }
+    /** Handles keyboard navigation on mobile menu. */
+    handleItemKeydown(event) {
+        switch (event.key) {
+            case 'ArrowUp': {
+                event.preventDefault();
+                event.stopPropagation();
+                const items = this.menuItemsElement;
+                const currentIndex = items.indexOf(event.target);
+                const prevItem = items[(currentIndex - 1 + items.length) % items.length];
+                moveFocus(items[currentIndex], prevItem);
+                break;
+            }
+            case 'ArrowDown': {
+                event.preventDefault();
+                event.stopPropagation();
+                const items = this.menuItemsElement;
+                const currentIndex = items.indexOf(event.target);
+                const nextItem = items[(currentIndex + 1) % items.length];
+                moveFocus(items[currentIndex], nextItem);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocus(event.target, this.menuItemsElement[0]);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                event.stopPropagation();
+                moveFocus(event.target, this.menuItemsElement.pop());
+                break;
+            }
+        }
+    }
+    connectedCallback() {
+        this.setupData(this.items);
+    }
+    /** Close the menu when clicking outside. */
+    handleOutsideClick(event) {
+        if (containsTarget(this.host, event)) {
+            return;
+        }
+        this.open = false;
+    }
+    /** Close the menu when pressing Escape or Tab. */
+    handleKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.open = false;
+                break;
+            case 'Tab':
+                if (containsTarget(this.host, event)) {
+                    break;
+                }
+                this.open = false;
+                break;
+        }
+    }
+    /** Close the menu when the focus goes out. */
+    handleFocusout(event) {
+        if (containsTarget(this.host, event)) {
+            return;
+        }
+        this.open = false;
+    }
+    render() {
+        return (h("nav", { key: 'df6d04c4bb8343ec62fe69df3f01f6f47b4367cf', "aria-label": "Zanichelli.it" }, h("z-logo", { key: 'e837d49cfe0076e98cc137d8b124a15145c7efe8', link: "/", height: 32, width: 126 }), h("button", { key: 'e3a1bf4100114d201e0bf10c2c0b59f93cce6f94', class: "burger-button", type: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "mobile-menu", "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: () => this.toggleMenu() }, h("z-icon", { key: '3eb050cd5e264df005a0f62cad45c16a190a2e9a', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), this.open && (h("ul", { key: 'ba97f02094674ccfff3b984dde341a63991590b8', class: "mobile-menu", role: "menubar" }, h("li", { key: '55dc248f23ea242f9cc8d3682c6aaa44484c8cfa', role: "none" }, h("zanit-search-form", { key: '065da5fec5e9eb34958c7d0824d2a8430ab4c01b', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), !this.loading && this.current && (h("li", { key: '4246e8673055fb86743d4b182456936d1de5fd84', role: "none" }, h("a", { key: '8681ac3870380b16f475ea201f57f970679f6e92', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("z-icon", { key: '87bed51b9ad80269fedc81f64c7412df1191e55e', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), h("span", { key: 'e7f19c9b707c1e3f14a4a583b86093213807ba2a' }, this.parentItem?.label ?? 'Home')))), this.loading && (h("div", { key: '2e1e53699630bde2fc6a87ec2b2fcad3cbdfb87a', class: "items-container", role: "none" }, [...new Array(4)].map(() => (h("li", { role: "none" }, h("div", { class: "menubar-item", role: "none" }, h("z-ghost-loading", null))))))), this.menuType === 'menu' ? (h(Menu, { items: this.menuItems, current: this.current, onItemKeyDown: (event) => this.handleItemKeydown(event) })) : (this.menuItems?.length && (h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (h("li", { role: "none" }, h("a", { class: {
+                'menu-item': this.menuType === 'menu',
+                'menubar-item': this.menuType === 'menubar',
+            }, href: item.href, id: item.id, role: "menuitem", "aria-current": this.current === item.id ? 'page' : 'false', tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("span", { "data-text": item.label }, item.label))))))))))));
+    }
+    static get watchers() { return {
+        "items": ["onItemsChange"],
+        "current": ["onItemsChange"]
+    }; }
+};
+ZanitMobileMenubar.style = mobileMenubarCss + menuCss;
+
+const searchFormCss = ":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}@media (width < 768px){.searchbar{display:flex;align-items:center;border:1px solid #000;border-radius:4px}.searchbar>*:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}.searchbar button[type='reset']{display:flex;padding:0 0 0 8px;cursor:pointer}.searchbar input{width:100%;height:100%;padding:4px 8px;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{padding:4px 8px;border-left:1px solid #000;background:var(--zanit-accent-color);border-bottom-right-radius:3px;border-top-right-radius:3px}.searchbar input:focus:focus-visible,.searchbar .searchbar-button:focus:focus-visible{z-index:1}}@media (width >= 768px){.searchbar{display:flex;font-size:1.5rem}.searchbar.searchbar-open{position:absolute;width:100%;height:100%;inset:0}.searchbar .input-wrapper{display:flex;width:100%;align-items:center;padding:0 0 0 var(--grid-margin);background-color:#fff;gap:14px}.searchbar button[type='reset']{display:flex;align-items:center;border-radius:4px;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding:8px 14px 8px 0;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:inherit}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{display:flex;align-items:center;padding:8px 16px;border-right:1px solid #000;border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar input:focus:focus-visible,.searchbar .searchbar-button:focus:focus-visible{z-index:1}}@media (width >= 768px) and (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}";
+
+const ZanitSearchForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.search = createEvent(this, "search");
+        this.resetSearch = createEvent(this, "resetSearch");
+    }
+    formElement;
+    get host() { return getElement(this); }
+    isMobile = false;
+    /** Indicates whether the searchbar is visible and usable. */
+    showSearchbar = false;
+    /** Search query to apply. */
+    _searchQuery = undefined;
+    /** Initial search query */
+    searchQuery = undefined;
+    onSearchQueryChange() {
+        this._searchQuery = this.searchQuery;
+        if (this.searchQuery) {
+            this.showSearchbar = true;
+        }
+    }
+    /** Focus searchbar input when it becomes visible. */
+    onShowSearchbar() {
+        if (!this.showSearchbar) {
+            return;
+        }
+        setTimeout(() => {
+            const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input');
+            if (this.showSearchbar && !this.searchQuery) {
+                searchbarInput.focus();
+            }
+        }, 100);
+    }
+    /** Emitted on search form submission. */
+    search;
+    resetSearch;
+    async connectedCallback() {
+        this.showSearchbar = !!this.searchQuery;
+        const mobileMediaQuery = window.matchMedia('(width < 768px)');
+        this.isMobile = mobileMediaQuery.matches;
+        mobileMediaQuery.onchange = (mql) => {
+            this.isMobile = mql.matches;
+        };
+    }
+    /** Close open searchbar when clicking outside. */
+    handleOutsideClick(event) {
+        if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {
+            this.showSearchbar = false;
+        }
+    }
+    resetSearchQuery() {
+        this.searchQuery = undefined;
+        this.resetSearch.emit();
+    }
+    handleInputChange(event) {
+        this._searchQuery = event.target.value;
+        if (!this._searchQuery) {
+            this.searchQuery = undefined;
+        }
+    }
+    onSearchSubmit(event) {
+        event.preventDefault();
+        if (!this._searchQuery) {
+            return;
+        }
+        this.showSearchbar = false;
+        const searchEv = this.search.emit({ query: this._searchQuery });
+        // do not submit the form if the event default behavior was prevented
+        if (searchEv.defaultPrevented) {
+            return;
+        }
+        this.formElement.submit();
+    }
+    render() {
+        if (this.isMobile) {
+            return (h("form", { class: "searchbar", ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, this.searchQuery && (h("button", { type: "reset", "aria-label": "Svuota campo di ricerca" }, h("z-icon", { name: "multiply-circled", width: "1rem", height: "1rem" }))), h("input", { id: "searchbar-input", name: "q", type: "search", placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), value: this.searchQuery, required: true }), h("button", { class: "searchbar-button", "aria-controls": "searchbar-input", "aria-label": "Cerca", type: "submit" }, h("z-icon", { name: "search", width: "1.25rem", height: "1.25rem" }))));
+        }
+        return (h("form", { class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, this.showSearchbar && (h("div", { class: "input-wrapper", role: "none" }, this.searchQuery && (h("button", { type: "reset", "aria-label": "Svuota campo di ricerca" }, h("z-icon", { name: "multiply-circled", width: "1.5rem", height: "1.5rem" }))), h("input", { id: "searchbar-input", name: "q", type: "search", placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), value: this.searchQuery, required: true }))), h("button", { class: "searchbar-button", "aria-label": "Cerca", "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => (this.showSearchbar = true) }, this.showSearchbar ? null : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { name: "search", width: "2rem", height: "2rem" }))));
+    }
+    static get watchers() { return {
+        "searchQuery": ["onSearchQueryChange"],
+        "showSearchbar": ["onShowSearchbar"]
+    }; }
+};
+ZanitSearchForm.style = searchFormCss;
+
+export { ZanitMenubar as zanit_menubar, ZanitMobileMenubar as zanit_mobile_menubar, ZanitSearchForm as zanit_search_form };
+//# sourceMappingURL=zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.js.map
+
+//# sourceMappingURL=zanit-menubar_3.entry.js.map