npm - @zanichelli/zanichelli-it-frontend-kit - Versions diffs - 0.0.1-rc.8 → 0.1.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1217) hide show

package/dist/components/{p-DtjymI-a.js → p-BBoCOJu1.js} RENAMED Viewed

@@ -1,24 +1,5 @@
-import { h, p as proxyCustomElement, H, d as createEvent } from './p-Cvo0JvVA.js';
-import { d as defineCustomElement$3 } from './p-CxQi4ChZ.js';
-import { d as defineCustomElement$2 } from './p-D0k-WF7B.js';
-import { d as defineCustomElement$1 } from './p-BS2see6_.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();
-};
+import { h, p as proxyCustomElement, H } from './index.js';
+import { d as defineCustomElement$1, m as moveFocus, c as containsTarget } from './p-DxgXtXGD.js';
 const DEFAULT_GROUP_KEY = 'default';
 const DEFAULT_GROUP = {
@@ -56,7 +37,7 @@ const Menu = ({ controlledBy, items, current, onItemKeyDown }) => {
             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 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}.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}.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 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}}";
@@ -65,9 +46,7 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.search = createEvent(this, "search", 7);
     }
-    formElement;
     get host() { return this; }
     /** ID of the current active item. */
     current = undefined;
@@ -82,8 +61,6 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
     /** Whether the items to render come from a menubar or a menu. */
     menuType = undefined;
     open;
-    /** Search query to apply. */
-    _searchQuery = undefined;
     onItemsChange() {
         this.setupData(this.items);
     }
@@ -166,23 +143,6 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
             }
         }
     }
-    handleInputChange(event) {
-        this._searchQuery = event.target.value;
-    }
-    onSearchSubmit(event) {
-        event.preventDefault();
-        if (!this._searchQuery) {
-            return;
-        }
-        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();
-    }
-    /** Emitted on search form submission. */
-    search;
     connectedCallback() {
         this.setupData(this.items);
     }
@@ -215,7 +175,7 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
         this.open = false;
     }
     render() {
-        return (h("nav", { key: '62c7a7aca2f4e65d4606b5671b6c5e2ab63eb45c', "aria-label": "Zanichelli.it" }, h("z-logo", { key: 'e19e5deff027a07436797fd7021298745156a331', link: "/", height: 32, width: 126 }), h("button", { key: 'afd9778c8952993e3d48e8bb5935abe69bb0da9c', 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: '348702a3da4e146a6781c270e8d4a05fb46c6c94', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), this.open && (h("ul", { key: '7451179db8cf09963126294d38f439d496ed7ae7', class: "mobile-menu", role: "menubar" }, h("li", { key: '37b27c0c07d380e9be91fb5ea874417962393153', role: "none" }, h("form", { key: '7fb2981145aa1b92dbf34687eb77488122286435', class: "searchbar", ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => (this.searchQuery = undefined) }, this.searchQuery && (h("button", { key: 'd9f0385bf503052075e7cdea11447dfc149b1d0a', type: "reset", "aria-label": "Svuota campo di ricerca" }, h("z-icon", { key: 'b78cfc080b7beea73007c4a085be4e1a58510d88', name: "multiply-circled", width: "1rem", height: "1rem" }))), h("input", { key: '472a9bded87ddefdd7e78190348c3bdde0b29d58', 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", { key: 'f2892787239cd6e877715076dd139c555037a6f4', class: "searchbar-button", "aria-controls": "searchbar-input", "aria-label": "Cerca", type: "submit" }, h("z-icon", { key: 'b91c7878e148ef0ce017eb89d38325697ac373f8', name: "search", width: "1.25rem", height: "1.25rem" })))), !this.loading && this.current && (h("li", { key: 'd7b7dfb1321f2fad332b29518d5755345361a70d', role: "none" }, h("a", { key: 'f14eaa66b2a6a4e0a395100326b581eac4fa48ce', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("z-icon", { key: 'be5cf87e13a9385f63c6d7544e2dc4a25603605d', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), h("span", { key: '54ec7144207b22b694596554f653855d6259bb5c' }, this.parentItem?.label ?? 'Home')))), this.loading && (h("div", { key: '7449f5e926dd85400392726af27d4ea15b2e3c75', 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: {
+        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))))))))))));
@@ -233,8 +193,7 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
         "parentItem": [32],
         "menuItems": [32],
         "menuType": [32],
-        "open": [32],
-        "_searchQuery": [32]
+        "open": [32]
     }, [[5, "click", "handleOutsideClick"], [1, "keydown", "handleKeydown"], [5, "focusin", "handleFocusout"]], {
         "items": ["onItemsChange"],
         "current": ["onItemsChange"]
@@ -243,24 +202,14 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zanit-mobile-menubar", "z-ghost-loading", "z-icon", "z-logo"];
+    const components = ["zanit-mobile-menubar", "zanit-search-form"];
     components.forEach(tagName => { switch (tagName) {
         case "zanit-mobile-menubar":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, ZanitMobileMenubar);
             }
             break;
-        case "z-ghost-loading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "z-logo":
+        case "zanit-search-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -269,7 +218,7 @@ function defineCustomElement() {
 }
 defineCustomElement();
-export { Menu as M, ZanitMobileMenubar as Z, containsTarget as c, defineCustomElement as d, moveFocus as m };
-//# sourceMappingURL=p-DtjymI-a.js.map
+export { Menu as M, ZanitMobileMenubar as Z, defineCustomElement as d };
+//# sourceMappingURL=p-BBoCOJu1.js.map
-//# sourceMappingURL=p-DtjymI-a.js.map
+//# sourceMappingURL=p-BBoCOJu1.js.map

package/dist/components/p-BBoCOJu1.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-BBoCOJu1.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/menubar/menu/menu.tsx","src/components/menubar/mobile-menubar/mobile-menubar.css?tag=zanit-mobile-menubar&encapsulation=shadow","src/components/menubar/menu/menu.css?tag=zanit-mobile-menubar&encapsulation=shadow","src/components/menubar/mobile-menubar/mobile-menubar.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { MenuItem } from '../../../utils/types';\n\n/**\n * Menu of items that can be grouped.\n * @member {string} controlledBy - The HTML id of the element that controls the menu.\n * @member {MenuItem[]} items - The items to show in the menu.\n * @member {string} current - The id of the current active item.\n * @member {function} onItemKeyDown - The function to call when a key is pressed from a menuitem.\n */\nexport interface MenuProps {\n controlledBy?: string;\n items?: MenuItem[];\n current?: string;\n onItemKeyDown?: (event: KeyboardEvent) => void;\n}\n\nconst DEFAULT_GROUP_KEY = 'default';\nconst DEFAULT_GROUP = {\n id: DEFAULT_GROUP_KEY,\n label: DEFAULT_GROUP_KEY,\n};\n\n/** Get the items grouped by their group. */\nconst getGroupedItems = (items: MenuItem[]) => {\n const groups = items.reduce<{ group: MenuProps['items'][number]['group']; items: MenuItem[] }[]>((grouped, item) => {\n const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));\n if (!itemGroup) {\n grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });\n } else {\n itemGroup.items.push(item);\n }\n\n return grouped;\n }, []);\n\n // Sort to keep default group at the end\n return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));\n};\n\n/**\n * Floating menu component. It shows a list of items that can be grouped.\n */\nexport const Menu: FunctionalComponent<MenuProps> = ({ controlledBy, items, current, onItemKeyDown }) => {\n if (!items?.length) {\n return null;\n }\n\n const groups = getGroupedItems(items);\n\n return (\n <div\n class=\"menu-wrapper\"\n role=\"none\"\n >\n <div\n class=\"menu\"\n aria-labelledby={controlledBy ?? undefined}\n role=\"menu\"\n >\n {groups.map(({ group, items }) => (\n <div\n class={{ group: true, highlight: items.some((item) => item.highlight) }}\n role=\"none\"\n >\n {group.id !== DEFAULT_GROUP_KEY ? (\n <div\n class=\"group-name\"\n id={group.id}\n >\n {group.label}\n </div>\n ) : groups.length > 1 ? (\n // empty div to keep the same height as the other groups\n <div class=\"group-name\" />\n ) : null}\n <ul\n class=\"menu-list\"\n role=\"group\"\n aria-labelledby={group.id !== DEFAULT_GROUP_KEY ? group.id : undefined}\n >\n {items.map((item) => (\n <li role=\"none\">\n {item.href && (\n <a\n class={{ 'menu-item': true, 'active': current === item.id }}\n href={item.href}\n role=\"menuitem\"\n tabIndex={-1}\n aria-current={current === item.id ? 'page' : 'false'}\n onKeyDown={(event) => onItemKeyDown(event)}\n >\n {item.label}\n </a>\n )}\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n );\n};\n",":host {\n position: relative;\n z-index: 2;\n display: block;\n width: 100%;\n max-width: 100%;\n background-color: #fff;\n color: var(--gray900);\n fill: var(--gray900);\n font-family: var(--font-family-sans);\n}\n\n:host,\n*,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\na {\n color: var(--gray900);\n cursor: pointer;\n text-decoration: none;\n}\n\nbutton {\n all: unset;\n cursor: pointer;\n}\n\nnav {\n display: flex;\n width: 100%;\n align-items: center;\n padding: 8px var(--grid-margin);\n}\n\nnav::after {\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n box-shadow: var(--shadow-1);\n content: '';\n pointer-events: none;\n}\n\n.burger-button {\n margin-left: auto;\n}\n\n.mobile-menu {\n position: absolute;\n top: 100%;\n left: 0;\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: 16px var(--grid-margin) 32px;\n background-color: #fff;\n box-shadow: var(--shadow-2);\n gap: 8px;\n}\n\n.mobile-menu li {\n width: 100%;\n}\n\n.mobile-menu .items-container {\n display: flex;\n min-height: 256px;\n flex-direction: column;\n gap: 8px;\n}\n\n.mobile-menu .items-container z-ghost-loading {\n width: 40%;\n height: 1.2rem;\n}\n\n.mobile-menu .items-container .menubar-item {\n display: block;\n width: 100%;\n padding: 8px 0;\n font-size: 1rem;\n text-align: left;\n}\n\n.mobile-menu .items-container li:not(:last-child) .menubar-item {\n border-bottom: 1px solid #000;\n}\n\n[role='menuitem'].parent {\n display: flex;\n width: fit-content;\n align-items: center;\n padding: 0;\n border: none;\n font-size: 0.875rem;\n gap: 8px;\n}\n",".menu-wrapper {\n width: 100%;\n background-color: #fff;\n}\n\n.menu {\n position: relative;\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: 32px 0;\n}\n\n.menu .group {\n display: flex;\n flex-direction: column;\n}\n\n.menu .group .group-name {\n border-bottom: 1px solid currentcolor;\n margin-bottom: 4px;\n color: var(--red500);\n font-size: 0.875rem;\n font-weight: var(--font-rg);\n}\n\n.menu .group .menu-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.menu .group .menu-list .menu-item {\n border-bottom: 2px solid transparent;\n font-size: 0.875rem;\n font-weight: var(--font-md);\n}\n\n.menu .menu-list .menu-item.active,\n.menu .menu-list .menu-item:hover {\n border-bottom-color: var(--red500);\n}\n\n.menu .group.highlight .menu-list .menu-item {\n font-size: 1rem;\n}\n\n@media (width >= 768px) {\n .menu-wrapper {\n position: absolute;\n top: 100%;\n left: 0;\n display: flex;\n justify-content: center;\n box-shadow: var(--shadow-1);\n }\n\n .menu {\n display: grid;\n width: 100%;\n max-width: var(--zanit-menubar-max-width, 1366px);\n padding: 16px var(--grid-margin);\n gap: 0 24px;\n grid-auto-columns: minmax(0, max-content);\n grid-auto-flow: column;\n grid-template-rows: minmax(0, max-content) max-content;\n }\n\n .menu .group {\n display: grid;\n grid-row: 1 / -1;\n grid-template-columns: 1fr;\n grid-template-rows: subgrid;\n }\n\n @supports not (grid-template-rows: subgrid) {\n .menu .group {\n grid-template-rows: repeat(auto-fit, minmax(0, max-content));\n }\n }\n\n .menu .group .group-name {\n border: none;\n margin-bottom: 16px;\n }\n\n .menu .group .menu-list .menu-item {\n font-size: 1rem;\n }\n\n .menu .group.highlight .menu-list .menu-item {\n font-size: 1.5rem;\n }\n\n .menu .group.highlight .menu-list {\n gap: 24px;\n }\n}\n","import { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { MenubarItem, MenuItem } from '../../../utils/types';\nimport { containsTarget, moveFocus } from '../../../utils/utils';\nimport { Menu } from '../menu/menu';\n\n/** Mobile menubar component. */\n@Component({\n tag: 'zanit-mobile-menubar',\n styleUrls: ['mobile-menubar.css', '../menu/menu.css'],\n shadow: true,\n})\nexport class ZanitMobileMenubar {\n @Element() host: HTMLZanitMobileMenubarElement;\n\n /** ID of the current active item. */\n @Prop() current: string | undefined = undefined;\n\n /** Menubar items. */\n @Prop() items: MenubarItem[] = [];\n\n /** Initial search query. */\n @Prop({ mutable: true }) searchQuery: string | undefined = undefined;\n\n /** Whether the menubar is loading the data. */\n @Prop() loading: boolean = false;\n\n @State() parentItem: MenubarItem | undefined = undefined;\n @State() menuItems: MenubarItem[] | MenuItem[] | undefined = undefined;\n /** Whether the items to render come from a menubar or a menu. */\n @State() menuType: 'menubar' | 'menu' | undefined = undefined;\n @State() open: boolean;\n\n @Watch('items')\n @Watch('current')\n onItemsChange() {\n this.setupData(this.items);\n }\n\n /**\n * Find the current item and take its parent, `menuItems` or the `navbarItems`.\n * @returns True if an item matches the `current` prop, false otherwise.\n */\n private setupData(items: MenubarItem[], parent?: MenubarItem): boolean {\n for (const item of items) {\n if (item.id === this.current) {\n const type = item.menuItems?.length ? 'menu' : 'menubar';\n this.parentItem = parent;\n this.menuType = type;\n this.menuItems = item.menuItems || item.navbarItems;\n return true;\n }\n\n if (item.menuItems?.some(({ id }) => id === this.current)) {\n this.parentItem = parent;\n this.menuType = 'menu';\n this.menuItems = item.menuItems;\n return true;\n }\n\n if (item.navbarItems?.length) {\n return this.setupData(item.navbarItems, item);\n }\n }\n\n return false;\n }\n\n private get menuItemsElement() {\n return Array.from(this.host.shadowRoot.querySelectorAll('[role=\"menuitem\"]')) as HTMLElement[];\n }\n\n /** Initialize tabindex on menuitems, setting -1 to all but the first one. */\n private initTabindex() {\n this.menuItemsElement.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));\n }\n\n private toggleMenu() {\n if (this.open) {\n this.open = false;\n } else {\n this.open = true;\n setTimeout(() => {\n this.initTabindex();\n this.menuItemsElement[0]?.focus();\n }, 200);\n }\n }\n\n /** Handles keyboard navigation on mobile menu. */\n private handleItemKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n event.stopPropagation();\n const items = this.menuItemsElement;\n const currentIndex = items.indexOf(event.target as HTMLElement);\n const prevItem = items[(currentIndex - 1 + items.length) % items.length];\n moveFocus(items[currentIndex], prevItem);\n break;\n }\n case 'ArrowDown': {\n event.preventDefault();\n event.stopPropagation();\n const items = this.menuItemsElement;\n const currentIndex = items.indexOf(event.target as HTMLElement);\n const nextItem = items[(currentIndex + 1) % items.length];\n moveFocus(items[currentIndex], nextItem);\n break;\n }\n case 'Home': {\n event.preventDefault();\n event.stopPropagation();\n moveFocus(event.target as HTMLElement, this.menuItemsElement[0]);\n break;\n }\n case 'End': {\n event.preventDefault();\n event.stopPropagation();\n moveFocus(event.target as HTMLElement, this.menuItemsElement.pop());\n break;\n }\n }\n }\n\n connectedCallback() {\n this.setupData(this.items);\n }\n\n /** Close the menu when clicking outside. */\n @Listen('click', { target: 'document', passive: true })\n handleOutsideClick(event: MouseEvent) {\n if (containsTarget(this.host, event)) {\n return;\n }\n\n this.open = false;\n }\n\n /** Close the menu when pressing Escape or Tab. */\n @Listen('keydown', { passive: true })\n handleKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'Escape':\n this.open = false;\n break;\n case 'Tab':\n if (containsTarget(this.host, event)) {\n break;\n }\n\n this.open = false;\n break;\n }\n }\n\n /** Close the menu when the focus goes out. */\n @Listen('focusin', { target: 'document', passive: true })\n handleFocusout(event: FocusEvent) {\n if (containsTarget(this.host, event)) {\n return;\n }\n\n this.open = false;\n }\n\n render() {\n return (\n <nav aria-label=\"Zanichelli.it\">\n <z-logo\n link=\"/\"\n height={32}\n width={126}\n ></z-logo>\n <button\n class=\"burger-button\"\n type=\"button\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls=\"mobile-menu\"\n aria-label={this.open ? 'Chiudi menù' : 'Apri menù'}\n onClick={() => this.toggleMenu()}\n >\n <z-icon\n name={this.open ? 'multiply' : 'burger-menu'}\n width=\"1.5rem\"\n height=\"1.5rem\"\n ></z-icon>\n </button>\n {this.open && (\n <ul\n class=\"mobile-menu\"\n role=\"menubar\"\n >\n <li role=\"none\">\n <zanit-search-form\n searchQuery={this.searchQuery}\n onResetSearch={() => (this.searchQuery = undefined)}\n />\n </li>\n\n {!this.loading && this.current && (\n <li role=\"none\">\n <a\n class=\"parent\"\n href={this.parentItem?.href ?? '/'}\n id={this.parentItem?.id ?? undefined}\n role=\"menuitem\"\n tabIndex={-1}\n onKeyDown={(event) => this.handleItemKeydown(event)}\n >\n <z-icon\n name=\"arrow-left\"\n width=\"0.5rem\"\n height=\"0.5rem\"\n ></z-icon>\n <span>\n {/* Show the 'Home' label if the current item is a root child. */}\n {this.parentItem?.label ?? 'Home'}\n </span>\n </a>\n </li>\n )}\n\n {this.loading && (\n <div\n class=\"items-container\"\n role=\"none\"\n >\n {[...new Array(4)].map(() => (\n <li role=\"none\">\n <div\n class=\"menubar-item\"\n role=\"none\"\n >\n <z-ghost-loading></z-ghost-loading>\n </div>\n </li>\n ))}\n </div>\n )}\n\n {this.menuType === 'menu' ? (\n <Menu\n items={this.menuItems}\n current={this.current}\n onItemKeyDown={(event) => this.handleItemKeydown(event)}\n />\n ) : (\n this.menuItems?.length && (\n <div\n class=\"items-container\"\n role=\"none\"\n >\n {this.menuItems.map((item) => (\n <li role=\"none\">\n <a\n class={{\n 'menu-item': this.menuType === 'menu',\n 'menubar-item': this.menuType === 'menubar',\n }}\n href={item.href}\n id={item.id}\n role=\"menuitem\"\n aria-current={this.current === item.id ? 'page' : 'false'}\n tabIndex={-1}\n onKeyDown={(event) => this.handleItemKeydown(event)}\n >\n <span data-text={item.label}>{item.label}</span>\n </a>\n </li>\n ))}\n </div>\n )\n )}\n </ul>\n )}\n </nav>\n );\n }\n}\n"],"version":3}

package/dist/components/p-DxgXtXGD.js ADDED Viewed

@@ -0,0 +1,135 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.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 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 = /*@__PURE__*/ proxyCustomElement(class ZanitSearchForm extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.search = createEvent(this, "search");
+        this.resetSearch = createEvent(this, "resetSearch");
+    }
+    formElement;
+    get host() { return 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"]
+    }; }
+    static get style() { return searchFormCss; }
+}, [1, "zanit-search-form", {
+        "searchQuery": [1025, "search-query"],
+        "isMobile": [32],
+        "showSearchbar": [32],
+        "_searchQuery": [32]
+    }, [[5, "click", "handleOutsideClick"]], {
+        "searchQuery": ["onSearchQueryChange"],
+        "showSearchbar": ["onShowSearchbar"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["zanit-search-form"];
+    components.forEach(tagName => { switch (tagName) {
+        case "zanit-search-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZanitSearchForm);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { ZanitSearchForm as Z, containsTarget as c, defineCustomElement as d, moveFocus as m };
+//# sourceMappingURL=p-DxgXtXGD.js.map
+//# sourceMappingURL=p-DxgXtXGD.js.map

package/dist/components/p-DxgXtXGD.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-DxgXtXGD.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/utils.ts","src/components/menubar/search-form/search-form.css?tag=zanit-search-form&encapsulation=shadow","src/components/menubar/search-form/search-form.tsx"],"sourcesContent":["/**\n * Check if an element contains an event target by checking its composedPath.\n * Useful when an event target may come from a component's shadow DOM.\n */\nexport const containsTarget = (ancestor: HTMLElement, event: Event) => {\n return event\n .composedPath()\n .filter((el) => el !== document && el !== window.window)\n .some((el) => ancestor.contains(el as HTMLElement));\n};\n\n/** Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. */\nexport const moveFocus = (current: HTMLElement, next: HTMLElement) => {\n current.tabIndex = -1;\n next.tabIndex = 0;\n next.focus();\n};\n",":host,\n*,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nbutton {\n all: unset;\n cursor: pointer;\n}\n\n@media (width < 768px) {\n .searchbar {\n display: flex;\n align-items: center;\n border: 1px solid #000;\n border-radius: 4px;\n }\n\n .searchbar > *:first-child {\n /* To have a seamless appearance of the border radius of an internal child element nested within a parent element with rounded borders, we need to subtract the parent's border thickness from the child's border radius. Inner Radius = Outer Radius - Border Thickness */\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n }\n\n .searchbar button[type='reset'] {\n display: flex;\n padding: 0 0 0 8px;\n cursor: pointer;\n }\n\n .searchbar input {\n width: 100%;\n height: 100%;\n padding: 4px 8px;\n border: none;\n background-color: #fff;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n }\n\n .searchbar input[type='search']::-webkit-search-cancel-button,\n .searchbar input[type='search']::-webkit-search-decoration {\n appearance: none;\n }\n\n .searchbar input::placeholder {\n color: var(--gray500);\n }\n\n .searchbar .searchbar-button {\n padding: 4px 8px;\n border-left: 1px solid #000;\n background: var(--zanit-accent-color);\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n }\n\n .searchbar input:focus:focus-visible,\n .searchbar .searchbar-button:focus:focus-visible {\n z-index: 1;\n }\n}\n\n@media (width >= 768px) {\n .searchbar {\n display: flex;\n font-size: 1.5rem;\n }\n\n .searchbar.searchbar-open {\n position: absolute;\n width: 100%;\n height: 100%;\n inset: 0;\n }\n\n .searchbar .input-wrapper {\n display: flex;\n width: 100%;\n align-items: center;\n padding: 0 0 0 var(--grid-margin);\n background-color: #fff;\n gap: 14px;\n }\n\n .searchbar button[type='reset'] {\n display: flex;\n align-items: center;\n border-radius: 4px;\n cursor: pointer;\n }\n\n .searchbar input {\n z-index: 1;\n width: 100%;\n height: 100%;\n padding: 8px 14px 8px 0;\n border: none;\n background-color: #fff;\n font-family: var(--font-family-sans);\n font-size: inherit;\n }\n\n .searchbar input[type='search']::-webkit-search-cancel-button,\n .searchbar input[type='search']::-webkit-search-decoration {\n appearance: none;\n }\n\n .searchbar input::placeholder {\n color: var(--gray500);\n }\n\n .searchbar .searchbar-button {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n border-right: 1px solid #000;\n border-left: 1px solid #000;\n background: var(--zanit-accent-color);\n font-family: inherit;\n font-size: inherit;\n gap: 64px;\n line-height: 1;\n }\n\n .searchbar input:focus:focus-visible,\n .searchbar .searchbar-button:focus:focus-visible {\n z-index: 1;\n }\n}\n\n@media (width >= 768px) and (width < 1152px) {\n .searchbar .searchbar-button > .searchbar-button-label {\n display: none;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { containsTarget } from '../../../utils/utils';\n\n@Component({\n tag: 'zanit-search-form',\n styleUrl: 'search-form.css',\n shadow: true,\n})\nexport class ZanitSearchForm {\n private formElement: HTMLFormElement;\n\n @Element() host: HTMLZanitSearchFormElement;\n\n @State()\n isMobile: boolean = false;\n\n /** Indicates whether the searchbar is visible and usable. */\n @State()\n showSearchbar: boolean = false;\n\n /** Search query to apply. */\n @State()\n _searchQuery: string | undefined = undefined;\n\n /** Initial search query */\n @Prop({ mutable: true })\n searchQuery: string | undefined = undefined;\n\n @Watch('searchQuery')\n onSearchQueryChange() {\n this._searchQuery = this.searchQuery;\n if (this.searchQuery) {\n this.showSearchbar = true;\n }\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 && !this.searchQuery) {\n searchbarInput.focus();\n }\n }, 100);\n }\n\n /** Emitted on search form submission. */\n @Event({ cancelable: true }) search: EventEmitter<{ query: string }>;\n\n @Event() resetSearch: EventEmitter<void>;\n\n async connectedCallback() {\n this.showSearchbar = !!this.searchQuery;\n const mobileMediaQuery = window.matchMedia('(width < 768px)');\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.onchange = (mql) => {\n this.isMobile = mql.matches;\n };\n }\n\n /** Close open searchbar when clicking outside. */\n @Listen('click', { target: 'document', passive: true })\n handleOutsideClick(event: MouseEvent) {\n if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {\n this.showSearchbar = false;\n }\n }\n\n private resetSearchQuery() {\n this.searchQuery = undefined;\n this.resetSearch.emit();\n }\n\n private handleInputChange(event: Event) {\n this._searchQuery = (event.target as HTMLInputElement).value;\n if (!this._searchQuery) {\n this.searchQuery = undefined;\n }\n }\n\n private onSearchSubmit(event: Event) {\n event.preventDefault();\n if (!this._searchQuery) {\n return;\n }\n\n this.showSearchbar = false;\n const searchEv = this.search.emit({ query: this._searchQuery });\n // do not submit the form if the event default behavior was prevented\n if (searchEv.defaultPrevented) {\n return;\n }\n\n this.formElement.submit();\n }\n\n render() {\n if (this.isMobile) {\n return (\n <form\n class=\"searchbar\"\n ref={(el) => (this.formElement = el)}\n role=\"search\"\n aria-label=\"Cerca\"\n method=\"get\"\n action=\"/ricerca\"\n onSubmit={(event) => this.onSearchSubmit(event)}\n onReset={() => this.resetSearchQuery()}\n >\n {this.searchQuery && (\n <button\n type=\"reset\"\n aria-label=\"Svuota campo di ricerca\"\n >\n <z-icon\n name=\"multiply-circled\"\n width=\"1rem\"\n height=\"1rem\"\n />\n </button>\n )}\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 value={this.searchQuery}\n required\n ></input>\n <button\n class=\"searchbar-button\"\n aria-controls=\"searchbar-input\"\n aria-label=\"Cerca\"\n type=\"submit\"\n >\n <z-icon\n name=\"search\"\n width=\"1.25rem\"\n height=\"1.25rem\"\n ></z-icon>\n </button>\n </form>\n );\n }\n\n return (\n <form\n class={{ 'searchbar': true, 'searchbar-open': this.showSearchbar }}\n ref={(el) => (this.formElement = el)}\n role=\"search\"\n aria-label=\"Cerca\"\n method=\"get\"\n action=\"/ricerca\"\n onSubmit={(event) => this.onSearchSubmit(event)}\n onReset={() => this.resetSearchQuery()}\n >\n {this.showSearchbar && (\n <div\n class=\"input-wrapper\"\n role=\"none\"\n >\n {this.searchQuery && (\n <button\n type=\"reset\"\n aria-label=\"Svuota campo di ricerca\"\n >\n <z-icon\n name=\"multiply-circled\"\n width=\"1.5rem\"\n height=\"1.5rem\"\n />\n </button>\n )}\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 value={this.searchQuery}\n required\n ></input>\n </div>\n )}\n <button\n class=\"searchbar-button\"\n aria-label=\"Cerca\"\n aria-controls=\"searchbar-input\"\n type={this.showSearchbar ? 'submit' : 'button'}\n onClick={() => (this.showSearchbar = true)}\n >\n {this.showSearchbar ? null : <span class=\"searchbar-button-label\">Cerca</span>}\n <z-icon\n name=\"search\"\n width=\"2rem\"\n height=\"2rem\"\n ></z-icon>\n </button>\n </form>\n );\n }\n}\n"],"version":3}

package/dist/components/zanit-menubar.js CHANGED Viewed

@@ -1,10 +1,8 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment } from './p-Cvo0JvVA.js';
-import { d as defineCustomElement$2, c as containsTarget, m as moveFocus, M as Menu } from './p-DtjymI-a.js';
-import { d as defineCustomElement$5 } from './p-CxQi4ChZ.js';
-import { d as defineCustomElement$4 } from './p-D0k-WF7B.js';
-import { d as defineCustomElement$3 } from './p-BS2see6_.js';
+import { p as proxyCustomElement, H, h, F as Fragment } from './index.js';
+import { d as defineCustomElement$2, c as containsTarget, m as moveFocus } from './p-DxgXtXGD.js';
+import { d as defineCustomElement$3, M as Menu } from './p-BBoCOJu1.js';
-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}.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 var(--grid-margin);background-color:#fff;gap:14px}.searchbar button[type='reset']{display:flex;height:100%;align-items:center;border-radius:4px;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding: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 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 = ".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}}";
@@ -13,9 +11,7 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.search = createEvent(this, "search", 7);
     }
-    formElement;
     get host() { return this; }
     /** Menubar items extracted from `data`. */
     items = [];
@@ -23,10 +19,6 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
     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;
     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. */
@@ -60,7 +52,7 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
                 try {
                     url = new URL(data);
                 }
-                catch (error) {
+                catch {
                     throw new Error('Invalid string provided for `data` property: not a valid url or JSON.');
                 }
                 this.items = await this.fetchData(url);
@@ -76,38 +68,19 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
     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 && !this.searchQuery) {
-                searchbarInput.focus();
-            }
-        }, 100);
-    }
-    /** Emitted on search form submission. */
-    search;
     async connectedCallback() {
-        this.showSearchbar = !!this.searchQuery;
         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;
         };
         await this.parseData(this.data);
         this.initTabindex();
     }
-    /** Close open searchbar or any open menu when clicking outside. */
+    /** Close any open menu when clicking outside. */
     handleOutsideClick(event) {
-        if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {
-            this.showSearchbar = false;
-        }
         if (!this.openMenu || containsTarget(this.host, event)) {
             return;
         }
@@ -319,7 +292,7 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
                 break;
             }
             // Move the focus to the first item of the previous group if any, otherwise move it to the previous menubar item
-            case 'ArrowLeft':
+            case 'ArrowLeft': {
                 event.preventDefault();
                 event.stopPropagation();
                 const currentGroup = itemElement.closest('[role=group]');
@@ -334,6 +307,7 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
                 const prevGroupItems = (prevGroup.querySelectorAll('[role="menuitem"]') ?? []);
                 moveFocus(itemElement, prevGroupItems[0]);
                 break;
+            }
             case 'Home':
                 // Move to the first menu item
                 event.preventDefault();
@@ -348,32 +322,16 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
                 break;
         }
     }
-    handleInputChange(event) {
-        this._searchQuery = event.target.value;
-    }
-    onSearchSubmit(event) {
-        event.preventDefault();
-        if (!this._searchQuery) {
-            return;
-        }
-        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("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", { class: "menubar-item", role: "none" }, h("z-ghost-loading", null)), index < this.items?.length - 1 && 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("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.searchQuery = undefined) }, 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" }))))), 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) }))))))));
+            [...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"],
-        "showSearchbar": ["onShowSearchbar"]
+        "items": ["onItemsChange"]
     }; }
     static get style() { return menubarCss + menuCss; }
 }, [1, "zanit-menubar", {
@@ -383,42 +341,29 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
         "items": [32],
         "openMenu": [32],
         "openNavbar": [32],
-        "showSearchbar": [32],
-        "_searchQuery": [32],
         "isMobile": [32],
         "loading": [32]
     }, [[5, "click", "handleOutsideClick"], [1, "keydown", "handleKeydown"], [1, "focusout", "handleFocusout"]], {
         "data": ["parseData"],
-        "items": ["onItemsChange"],
-        "showSearchbar": ["onShowSearchbar"]
+        "items": ["onItemsChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["zanit-menubar", "z-ghost-loading", "z-icon", "z-logo", "zanit-mobile-menubar"];
+    const components = ["zanit-menubar", "zanit-mobile-menubar", "zanit-search-form"];
     components.forEach(tagName => { switch (tagName) {
         case "zanit-menubar":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, ZanitMenubar$1);
             }
             break;
-        case "z-ghost-loading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "z-logo":
+        case "zanit-mobile-menubar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "zanit-mobile-menubar":
+        case "zanit-search-form":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }