@zanichelli/zanichelli-it-frontend-kit 1.3.1 → 1.4.0-RC2

package/dist/cjs/zanit-back-to-top_4.cjs.entry.js

@@ -1,771 +0,0 @@
-'use strict';
-
-var index = require('./index-BLzQAHAI.js');
-
-const backToTopCss = ".sc-zanit-back-to-top-h{opacity:1;transition:all 0.2s linear;visibility:visible}.hidden.sc-zanit-back-to-top-h{opacity:0;visibility:hidden}.sc-zanit-back-to-top-h .z-fab.sc-zanit-back-to-top{--color-primary01:var(--gray950);outline:1px solid var(--color-white)}";
-
-const ZanitBackTop = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    resizeObserver;
-    mutationObserver;
-    get host() { return index.getElement(this); }
-    /** Indicates whether the back-to-top button is visible and usable. */
-    showFab = false;
-    /** Indicates the current height of the page. */
-    currentPageHeight;
-    /** Indicates if the viewport is mobile. */
-    isMobile = false;
-    /** Min page height from which the back-to-top button must appear. */
-    pageMinHeight = 1600;
-    /** Min scroll height from which the back-to-top button must appear. */
-    scrollMinHeight = 800;
-    handleScroll() {
-        this.updateFabVisibility();
-    }
-    handleResize = () => {
-        const newHeight = document.body.scrollHeight;
-        if (newHeight !== this.currentPageHeight) {
-            this.currentPageHeight = newHeight;
-            this.updateFabVisibility();
-        }
-    };
-    connectedCallback() {
-        this.currentPageHeight = document.body.scrollHeight;
-        this.resizeObserver = new ResizeObserver(this.handleResize);
-        this.resizeObserver.observe(document.body);
-        this.mutationObserver = new MutationObserver(this.handleResize);
-        this.mutationObserver.observe(document.body, { childList: true, subtree: true });
-        this.updateFabVisibility();
-        const mobileMediaQuery = window.matchMedia('(width < 768px)');
-        this.isMobile = mobileMediaQuery.matches;
-        mobileMediaQuery.onchange = (mql) => {
-            this.isMobile = mql.matches;
-        };
-    }
-    disconnectedCallback() {
-        this.resizeObserver.disconnect();
-        this.mutationObserver.disconnect();
-    }
-    updateFabVisibility() {
-        this.showFab = this.currentPageHeight > this.pageMinHeight && window.scrollY > this.scrollMinHeight;
-    }
-    scroll() {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-    render() {
-        return (index.h(index.Host, { key: '3abd8ab70075d8042285d8ed6fab0729c4b5ec42', class: { hidden: !this.showFab }, "aria-hidden": this.showFab ? 'false' : 'true' }, index.h("button", { key: '11b149d5f1d75720d4bdd329e9897da782092ed1', class: { 'z-fab': true, 'z-fab-extended': !this.isMobile }, onClick: () => this.scroll() }, index.h("z-icon", { key: 'fbdff1419da6d20ab594ffd11c58d7bf25fb7aa6', name: "back-top" }), index.h("span", { key: '0292f761b5459c372f003ed514abbd3403570c75' }, "Torna su"))));
-    }
-};
-ZanitBackTop.style = backToTopCss;
-
-/**
- * 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({ preventScroll: true });
-};
-
-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, currentPath = [], onItemKeyDown }) => {
-    if (!items?.length) {
-        return null;
-    }
-    const groups = getGroupedItems(items);
-    const isActive = (item) => currentPath.includes(controlledBy) && currentPath.includes(item.id);
-    return (index.h("div", { class: "menu-wrapper", role: "none" },
-        index.h("div", { class: "menu", "aria-labelledby": controlledBy ?? undefined, role: "menu" }, groups.map(({ group, items }) => (index.h("div", { class: { group: true, highlight: items.some((item) => item.highlight) } },
-            group.id !== DEFAULT_GROUP_KEY ? (index.h("div", { class: "group-name", id: group.id }, group.label)) : groups.length > 1 ? (
-            // empty div to keep the same height as the other groups
-            index.h("div", { class: "group-name" })) : null,
-            index.h("ul", { class: "menu-list", role: "group", "aria-labelledby": group.id !== DEFAULT_GROUP_KEY ? group.id : undefined }, items.map((item) => (index.h("li", { role: "none" }, item.href && (index.h("a", { class: {
-                    'menu-item': true,
-                    'active': isActive(item),
-                }, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": isActive(item) ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event), target: item.target }, 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;display:flex;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}.width-limiter{position:relative;display:flex;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);margin:0 auto}.shadow-wrapper+.shadow-wrapper{z-index:0}.sub-menubar>ul{gap:28px}.width-limiter>ul,.sub-menubar>ul{position:relative;display:flex;width:100%;align-items:center;padding:0 var(--grid-margin);margin-right:auto;margin-left:auto;gap:20px}.shadow-wrapper>.width-limiter,.shadow-wrapper>ul{width:100%;max-width:var(--zanit-menubar-max-width, 1366px)}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 .menubar-item.active::after{position:absolute;z-index:-1;bottom:0;left:-4px;width:calc(100% + 8px);height:4px;background-color:var(--red500);content:''}zanit-search-form{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-md)}.menu .group .menu-list{display:flex;flex-direction:column;gap:8px}.menu .group .menu-list .menu-item{display:block;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}}";
-
-const ZanitMenubar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get host() { return index.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;
-    /** IDs of the current prop */
-    currentPath = [];
-    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;
-    /** Path of the current item. */
-    current = undefined;
-    /** Initial search query. */
-    searchQuery = undefined;
-    timerId;
-    /** 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();
-    }
-    onCurrentChange() {
-        this.currentPath = this.current?.split('/').filter(Boolean) || [];
-    }
-    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.onCurrentChange();
-        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.
-     * Uses document-level listener to ensure Escape works from any focus location within the menu.
-     */
-    handleKeydown(event) {
-        switch (event.key) {
-            case 'Escape': {
-                if (this.openMenu) {
-                    event.preventDefault();
-                    // Return focus to the menu trigger after closing
-                    const menuTriggerId = this.openMenu;
-                    this.openMenu = undefined;
-                    // Use setTimeout(0) to defer focus until after Stencil's render cycle completes
-                    setTimeout(() => {
-                        const menuTrigger = this.host.shadowRoot.getElementById(menuTriggerId);
-                        if (menuTrigger) {
-                            menuTrigger.focus();
-                        }
-                    }, 0);
-                }
-                break;
-            }
-            case 'Tab':
-                this.openMenu = undefined;
-                break;
-        }
-    }
-    handleMouseover() {
-        clearTimeout(this.timerId);
-    }
-    /**
-     * Automatically close any open menu on mouseout after with a little delay.
-     * The delay is useful to avoid immediate closing when the pointer briefly leaves the component.
-     */
-    handleMouseout(event) {
-        this.timerId = window.setTimeout(() => {
-            if (!this.openMenu || containsTarget(this.host, event)) {
-                return;
-            }
-            this.openMenu = undefined;
-        }, 500);
-    }
-    /** 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 (this.currentPath.length === 0) {
-            return false;
-        }
-        if (this.currentPath.includes(item.id)) {
-            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) {
-        this.openMenu = undefined; // close any open menu first
-        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) {
-        this.openMenu = undefined; // close any open menu first
-        const menubarElements = this.getParentMenubarElements(itemEl);
-        const currentIndex = menubarElements.indexOf(itemEl);
-        const prevItem = menubarElements[(currentIndex - 1 + menubarElements.length) % menubarElements.length]; // get previous item or last one
-        moveFocus(itemEl, prevItem);
-        // 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) {
-        this.openMenu = undefined; // close any open menu first
-        const menubarElements = this.getParentMenubarElements(itemEl);
-        const currentIndex = menubarElements.indexOf(itemEl);
-        const nextItem = menubarElements[(currentIndex + 1) % menubarElements.length]; // get next item or first one
-        moveFocus(itemEl, nextItem);
-        // 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.openItemMenu(item);
-                break;
-            }
-            case 'ArrowLeft': {
-                event.preventDefault();
-                event.stopPropagation();
-                this.focusPreviousItem(target);
-                break;
-            }
-            case ' ': {
-                event.preventDefault();
-                event.stopPropagation();
-                if (this.openMenu === item.id) {
-                    this.openMenu = undefined;
-                    break;
-                }
-                else if (item.menuItems?.length) {
-                    this.openItemMenu(item);
-                    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];
-    }
-    openItemMenu(item) {
-        this.openMenu = item.id;
-        setTimeout(() => {
-            // focus first item of the menu
-            const firstMenuItem = this.host.shadowRoot.querySelector(`[aria-labelledby=${item.id}] [role="menuitem"]`);
-            firstMenuItem.tabIndex = 0;
-            firstMenuItem.focus({ preventScroll: true });
-        }, 100);
-    }
-    /** 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 (index.h("zanit-mobile-menubar", { items: this.items, currentPath: this.currentPath, searchQuery: this.searchQuery, loading: this.loading }));
-        }
-        return (index.h("nav", { "aria-label": "Zanichelli.it" }, index.h("div", { class: "shadow-wrapper" }, index.h("div", { class: "width-limiter" }, index.h("ul", { class: "menubar", role: "menubar", "aria-label": "Zanichelli.it" }, this.loading &&
-            [...new Array(4)].map((_, index$1) => (index.h(index.Fragment, null, index.h("li", { role: "none" }, index.h("div", { class: "menubar-item" }, index.h("z-ghost-loading", null))), index$1 < 3 && index.h("li", { role: "separator" })))), this.items?.map((item, index$1) => (index.h(index.Fragment, null, index.h("li", { role: "none" }, index.h("a", { class: {
-                'menubar-item': true,
-                'active': this.isActive(item),
-            }, href: item.href, id: item.id, role: "menuitem", tabIndex: -1, "aria-expanded": item.menuItems?.length ? (this.openMenu === item.id ? 'true' : 'false') : undefined, "aria-haspopup": item.menuItems?.length ? 'true' : 'false', "aria-current": this.current.includes(item.id) ? 'page' : 'false', onPointerOver: () => this.showMenu(item), onKeyDown: (event) => this.handleItemKeydown(event, item), target: item.target }, index.h("span", { "data-text": item.label }, item.label), item.menuItems?.length > 0 && (index.h("z-icon", { name: this.openMenu === item.id ? 'chevron-up' : 'chevron-down', width: "0.875rem", height: "0.875rem" })))), index$1 < this.items?.length - 1 && index.h("li", { role: "separator" }))))), index.h("zanit-search-form", { searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), this.items.map((item) => this.openMenu === item.id && (index.h(Menu, { controlledBy: item.id, items: item.menuItems, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleMenuKeydown(event) })))), this.items
-            ?.filter((item) => this.isActive(item))
-            .map((item) => item.navbarItems?.length && (index.h("nav", { class: { 'sub-menubar': true, 'shadow-wrapper': true }, "aria-label": `Sezioni: ${item.label}` }, index.h("ul", { role: "menubar" }, item.navbarItems.map((subitem) => (index.h(index.Fragment, null, index.h("li", { role: "none" }, index.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": subitem.menuItems?.length ? (this.openMenu === subitem.id ? 'true' : 'false') : undefined, "aria-current": this.current.includes(subitem.id) ? 'page' : 'false', onPointerOver: () => this.showMenu(subitem), onKeyDown: (event) => this.handleItemKeydown(event, subitem), target: item.target }, index.h("span", null, subitem.label), subitem.menuItems?.length > 0 && (index.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 && (index.h(Menu, { controlledBy: subitem.id, items: subitem.menuItems, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleMenuKeydown(event) }))))))));
-    }
-    static get delegatesFocus() { return true; }
-    static get watchers() { return {
-        "data": ["parseData"],
-        "items": ["onItemsChange"],
-        "current": ["onCurrentChange"]
-    }; }
-};
-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-left:var(--grid-margin);gap:8px}nav::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}z-logo{margin:8px 0}.mobile-menu{position:absolute;top:100%;left:0;display:flex;overflow:auto;width:100%;max-height:calc(100vh - 48px - var(--zanit-menubar-top-offset, 0px));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}zanit-search-form{margin-left:auto}";
-
-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-md)}.menu .group .menu-list{display:flex;flex-direction:column;gap:8px}.menu .group .menu-list .menu-item{display:block;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}}";
-
-const ZanitMobileMenubar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get host() { return index.getElement(this); }
-    /** IDs path of the current item. */
-    currentPath = [];
-    /** Menubar items. */
-    items = [];
-    /** Initial search query. */
-    searchQuery = undefined;
-    /** Whether the menubar is loading the data. */
-    loading = false;
-    /** Last active item ID. */
-    lastCurrent = undefined;
-    parentItem = undefined;
-    menuItems = undefined;
-    /** Whether the items to render come from a menubar or a menu. */
-    menuType = undefined;
-    open;
-    onItemsChange() {
-        this.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;
-        this.setupData(this.items);
-    }
-    /**
-     * Find the current item and take its parent, `menuItems` or the `navbarItems`.
-     */
-    setupData(items, parent) {
-        // If no current item is defined, we show all items
-        if (this.lastCurrent === undefined) {
-            this.parentItem = undefined;
-            this.menuType = 'menubar';
-            this.menuItems = items;
-            return;
-        }
-        for (const item of items) {
-            if (item.id === this.lastCurrent) {
-                this.parentItem = parent;
-                this.menuType = item.menuItems?.length ? 'menu' : 'menubar';
-                this.menuItems = item.menuItems || item.navbarItems;
-                return;
-            }
-            if (this.currentPath.length > 1 &&
-                item.id === this.currentPath[this.currentPath.length - 2] &&
-                item.menuItems?.some(({ id }) => id === this.lastCurrent)) {
-                this.parentItem = item;
-                this.menuType = item.menuItems?.length ? 'menu' : 'menubar';
-                this.menuItems = item.menuItems || item.navbarItems;
-                return;
-            }
-            if (item.navbarItems?.length) {
-                this.setupData(item.navbarItems, item);
-            }
-        }
-    }
-    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({ preventScroll: true });
-            }, 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.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;
-        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 (index.h("nav", { key: '3c60ac4ac98ee3defb91d07ed2b877031f0a35df', "aria-label": "Zanichelli.it" }, index.h("button", { key: 'bebe58a827addf39e62deb9c3ef44296f14da700', 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() }, index.h("z-icon", { key: '0b3e97a6bcb3f54c1b0669f9fe012ac3ff5b5632', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), index.h("z-logo", { key: 'a7216fc628ab13b243ace77a89d5dc16bde1f6da', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), index.h("zanit-search-form", { key: 'bdfd612ecc8cf6fb7d4d1941474a8b6cc0b8ff2d', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) }), this.open && (index.h("ul", { key: 'bf3f32326a98ff6a47a3734ac98f8afda74f0d12', class: "mobile-menu", role: "menubar" }, !this.loading && this.currentPath && this.currentPath.length > 0 && (index.h("li", { key: 'a157937b4358cba0a1bc990576051f4a703cedd4', role: "none" }, index.h("a", { key: '9f36e81c276da144abf96e9e1dd7cf2a84bdc4b7', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event), target: this.parentItem?.target }, index.h("z-icon", { key: 'ba4c4e1c0b1132cbcd4be7a4088bf1fb6618f062', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), index.h("span", { key: 'cc30b285857d7cb7908e35dadf424e0940342949' }, this.parentItem?.label || 'Home')))), this.loading ? (index.h("div", { class: "items-container", role: "none" }, [...new Array(4)].map(() => (index.h("li", { role: "none" }, index.h("div", { class: "menubar-item", role: "none" }, index.h("z-ghost-loading", null))))))) : this.menuType === 'menu' ? (index.h(Menu, { items: this.menuItems, controlledBy: this.parentItem?.id, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleItemKeydown(event) })) : (this.menuItems?.length > 0 && (index.h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (index.h("li", { role: "none" }, index.h("a", { class: {
-                'menu-item': this.menuType === 'menu',
-                'menubar-item': this.menuType === 'menubar',
-            }, href: item.href, id: item.id, role: "menuitem", "aria-current": this.lastCurrent === item.id ? 'page' : 'false', tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event), target: item.target }, index.h("span", { "data-text": item.label }, item.label))))))))))));
-    }
-    static get delegatesFocus() { return true; }
-    static get watchers() { return {
-        "items": ["onItemsChange"],
-        "currentPath": ["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}.searchbar{--searchbar-button-x-padding:14px;--searchbar-button-icon-width:1.75rem;--closed-searchbar-width:calc((var(--searchbar-button-x-padding) * 2) + var(--searchbar-button-icon-width) + 1px);position:absolute;top:0;right:0;display:flex;width:var(--closed-searchbar-width);justify-content:flex-end;transition:width 0.4s ease-in-out}.searchbar.searchbar-open{width:100%}.searchbar .input-wrapper{display:flex;overflow:hidden;width:100%;align-items:center;padding:8px;padding-left:var(--grid-margin);background-color:#fff;gap:8px;transition-duration:0.4s;transition-property:padding-right, padding-left, width;transition-timing-function:ease-in-out}.searchbar:not(.searchbar-open) .input-wrapper{overflow:hidden;width:0;padding:0}.searchbar button[type='reset']{--z-icon-width:1rem;--z-icon-height:1rem;display:flex;align-items:center;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding:0;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar.searchbar-open input:first-child{padding-left:4px;margin-left:-4px;}.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;justify-content:center;padding:10px var(--searchbar-button-x-padding);border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar .searchbar-button:focus-visible{z-index:1}.searchbar-button z-icon{--z-icon-width:var(--searchbar-button-icon-width);--z-icon-height:var(--searchbar-button-icon-width)}@media (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}@media (width >= 768px){.searchbar{--searchbar-button-x-padding:16px;--searchbar-button-icon-width:2rem}.searchbar .input-wrapper{gap:14px}.searchbar button[type='reset']{--z-icon-width:1.5rem;--z-icon-height:1.5rem}.searchbar input,.searchbar .searchbar-button{font-size:1.5rem}.searchbar .searchbar-button{padding:8px var(--searchbar-button-x-padding)}}@media (width >= 1152px){.searchbar{--closed-searchbar-width:190px}}@media (width >= 1366px){.searchbar .searchbar-button{border-right:1px solid #000}}";
-
-const ZanitSearchForm = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.search = index.createEvent(this, "search");
-        this.resetSearch = index.createEvent(this, "resetSearch");
-    }
-    formElement;
-    get host() { return index.getElement(this); }
-    /** 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.openSearchbar();
-        }
-    }
-    /** Emitted on search form submission. */
-    search;
-    resetSearch;
-    async connectedCallback() {
-        this.showSearchbar = !!this.searchQuery;
-        this._searchQuery = this.searchQuery;
-    }
-    /** Close open searchbar when clicking outside. */
-    handleOutsideClick(event) {
-        if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {
-            this.showSearchbar = false;
-        }
-    }
-    /** Close the menu when pressing Escape or Tab. */
-    handleKeydown(event) {
-        switch (event.key) {
-            case 'Escape':
-                this.showSearchbar = false;
-                break;
-            case 'Tab':
-                if (containsTarget(this.host, event)) {
-                    break;
-                }
-                this.showSearchbar = false;
-                break;
-        }
-    }
-    openSearchbar() {
-        this.showSearchbar = true;
-        setTimeout(() => {
-            const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input');
-            searchbarInput.focus({ preventScroll: true });
-        }, 500);
-    }
-    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() {
-        return (index.h("form", { key: 'e1d177efbec2aea39cd30cfc8f02fe4e9f5e82d9', class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca nel sito", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, index.h("div", { key: '49aeaa97516d5782e1fcf866a5526ff19f8b0c14', class: "input-wrapper", role: "none" }, this.searchQuery && (index.h("button", { key: '61ec6636b5efd875bcf879b28894ffd1cf8ac802', type: "reset", "aria-label": "Svuota campo di ricerca", disabled: !this.showSearchbar, "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 }, index.h("z-icon", { key: 'a896ac0e6ae2762e9d5dbb0351634505b519a684', name: "multiply-circled" }))), index.h("input", { key: '3ab6655ef669a6c30b5bbe547884c680284d7f14', id: "searchbar-input", name: "q", type: "search", disabled: !this.showSearchbar, placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), value: this.searchQuery, required: true, "aria-label": "Cerca per parola chiave o ISBN", "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 })), index.h("button", { key: '3df725da35664493fe70a15ea39184ab00b37e32', class: "searchbar-button", "aria-label": this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca', "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : index.h("span", { class: "searchbar-button-label" }, "Cerca"), index.h("z-icon", { key: '8f6cfd25fbacbc04b7bc060470667eb9b2a45179', name: "search" }))));
-    }
-    static get watchers() { return {
-        "searchQuery": ["onSearchQueryChange"]
-    }; }
-};
-ZanitSearchForm.style = searchFormCss;
-
-exports.zanit_back_to_top = ZanitBackTop;
-exports.zanit_menubar = ZanitMenubar;
-exports.zanit_mobile_menubar = ZanitMobileMenubar;
-exports.zanit_search_form = ZanitSearchForm;
-//# sourceMappingURL=zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map
-
-//# sourceMappingURL=zanit-back-to-top_4.cjs.entry.js.map