@zanichelli/zanichelli-it-frontend-kit 0.1.4 → 0.1.6

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C45Wd3rZ.js');
+var index = require('./index-xkrZykI_.js');
 
 /**
  * Check if an element contains an event target by checking its composedPath.
@@ -56,7 +56,7 @@ const Menu = ({ controlledBy, items, currentPath = [], onItemKeyDown }) => {
             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) }, item.label))))))))))));
+                }, 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}";
@@ -82,11 +82,6 @@ const ZanitMenubar = class {
     data;
     /** Path of the current item. */
     current = undefined;
-    /**
-     * Delay in milliseconds before closing the menu after a mouseout event.
-     * Useful to avoid immediate closing when the pointer briefly leaves the component.
-     */
-    mouseOutTimeout = 1000;
     /** Initial search query. */
     searchQuery = undefined;
     timerId;
@@ -165,13 +160,17 @@ const ZanitMenubar = class {
     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;
-        }, this.mouseOutTimeout);
+        }, 500);
     }
     /** Close the menu when it loses focus. */
     handleFocusout(event) {
@@ -229,6 +228,7 @@ const ZanitMenubar = class {
     }
     /** 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;
         }
@@ -240,6 +240,7 @@ const ZanitMenubar = class {
     }
     /** 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);
         itemEl.tabIndex = -1;
         const currentIndex = menubarElements.indexOf(itemEl);
@@ -253,6 +254,7 @@ const ZanitMenubar = class {
     }
     /** 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);
         itemEl.tabIndex = -1;
         const currentIndex = menubarElements.indexOf(itemEl);
@@ -411,12 +413,12 @@ const ZanitMenubar = class {
             [...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) }, 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
+            }, 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 } }, 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) }, 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) }))))))));
+            }, 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 watchers() { return {
         "data": ["parseData"],
@@ -458,6 +460,13 @@ const ZanitMobileMenubar = class {
      * 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;
@@ -474,7 +483,7 @@ const ZanitMobileMenubar = class {
                 return;
             }
             if (item.navbarItems?.length) {
-                return this.setupData(item.navbarItems, item);
+                this.setupData(item.navbarItems, item);
             }
         }
     }
@@ -565,10 +574,10 @@ const ZanitMobileMenubar = class {
         this.open = false;
     }
     render() {
-        return (index.h("nav", { key: '16ca47d079fec7b84021b86375f3362d438c0608', "aria-label": "Zanichelli.it" }, index.h("z-logo", { key: '4fc27adbdee1bec7b3ca855b1ee258e427b23be1', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), index.h("button", { key: '09483a707364493ba68d5109b016161198c076b4', 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: 'ed3e8da087dd1885e299453387edfadd43cb665f', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), this.open && (index.h("ul", { key: '6e9d5fcec1f1d136f179b76b38376e8f0db06391', class: "mobile-menu", role: "menubar" }, index.h("li", { key: '9b1fe940ee0783d59c5b43c4117611692dd7c45a', role: "none" }, index.h("zanit-search-form", { key: 'e882147e08e18fd2e1101ea84a46210b2c1e708c', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), !this.loading && this.currentPath && (index.h("li", { key: '003f0c5d2097ef0445fb2865026c879fa220b864', role: "none" }, index.h("a", { key: '00dca7aa15ee68512b9cbf75ebe841fd9e792f64', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, index.h("z-icon", { key: '4a60c30ed9729493d89c8fc2ca9d02c7133be350', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), index.h("span", { key: '35504959de57ec38ffeb36bfb1a540c7df17b306' }, this.parentItem?.label ?? 'Home')))), this.loading && (index.h("div", { key: '4d2eb4b1db92745ac27638f078d39424fee92aac', 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 && (index.h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (index.h("li", { role: "none" }, index.h("a", { class: {
+        return (index.h("nav", { key: '8670451f03909d3008f6e21d02ee5c7412d86bac', "aria-label": "Zanichelli.it" }, index.h("z-logo", { key: '8f8704851b84185e6c01bc6cd5e2a3b3cda53a61', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), index.h("button", { key: '02271df658a071f9ae0d91f8140b9e8e15064ccc', 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: 'fcbff94368d67da8a237190518452048276882a0', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), this.open && (index.h("ul", { key: '94fae1693d0ebd41d86cfe55450a40cbff88b7dd', class: "mobile-menu", role: "menubar" }, index.h("li", { key: '5e09e8484e6450646d4da570a0791da92e477fc7', role: "none" }, index.h("zanit-search-form", { key: '564813af11cc4b6c62db80ee2acdbeb54cec935f', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), !this.loading && this.currentPath && this.currentPath.length > 0 && (index.h("li", { key: '7b501d3a1c7dcf705bd1bfd8d03a29573c27f891', role: "none" }, index.h("a", { key: '949db4a79629f0d0ab44cc94d11f717abc87cb4d', 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: '2537588429f0185c67f87702d040fdc8ad7fbe06', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), index.h("span", { key: '732de0ec2a09d41ecacd62d7fa8e5c799e67e533' }, this.parentItem?.label || 'Home')))), this.loading && (index.h("div", { key: '56c066be63a1de19e4d76fcf22624378d0898602', 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 && (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) }, index.h("span", { "data-text": item.label }, item.label))))))))))));
+            }, 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 watchers() { return {
         "items": ["onItemsChange"],
@@ -577,7 +586,7 @@ const ZanitMobileMenubar = class {
 };
 ZanitMobileMenubar.style = mobileMenubarCss + menuCss;
 
-const searchFormCss = ":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}@media (width < 768px){.searchbar{display:flex;align-items:center;border:1px solid #000;border-radius:4px}.searchbar>*:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}.searchbar button[type='reset']{display:flex;padding:0 0 0 8px;cursor:pointer}.searchbar input{width:100%;height:100%;padding:4px 8px;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{padding:4px 8px;border-left:1px solid #000;background:var(--zanit-accent-color);border-bottom-right-radius:3px;border-top-right-radius:3px}.searchbar input:focus:focus-visible,.searchbar .searchbar-button:focus:focus-visible{z-index:1}}@media (width >= 768px){.searchbar{display:flex;font-size:1.5rem}.searchbar.searchbar-open{position:absolute;width:100%;height:100%;inset:0}.searchbar .input-wrapper{display:none;width:100%;align-items:center;padding:0 0 0 var(--grid-margin);background-color:#fff;gap:14px}.searchbar .input-wrapper:not(.hide){display:flex}.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 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:none;width:100%;align-items:center;padding:0 0 0 var(--grid-margin);background-color:#fff;gap:6px;}.searchbar .input-wrapper:not(.hide){display:flex}.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;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:inherit}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{display:flex;align-items:center;padding:8px 16px;border-right:1px solid #000;border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar input:focus:focus-visible,.searchbar .searchbar-button:focus:focus-visible{z-index:1}}@media (width >= 768px) and (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}";
 
 const ZanitSearchForm = class {
     constructor(hostRef) {
@@ -597,21 +606,9 @@ const ZanitSearchForm = class {
     onSearchQueryChange() {
         this._searchQuery = this.searchQuery;
         if (this.searchQuery) {
-            this.showSearchbar = true;
+            this.openSearchbar();
         }
     }
-    /** 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;
@@ -629,6 +626,13 @@ const ZanitSearchForm = class {
             this.showSearchbar = false;
         }
     }
+    openSearchbar() {
+        this.showSearchbar = true;
+        setTimeout(() => {
+            const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input');
+            searchbarInput.focus();
+        }, 100);
+    }
     resetSearchQuery() {
         this.searchQuery = undefined;
         this.resetSearch.emit();
@@ -656,11 +660,10 @@ const ZanitSearchForm = class {
         if (this.isMobile) {
             return (index.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 && (index.h("button", { type: "reset", "aria-label": "Svuota campo di ricerca" }, index.h("z-icon", { name: "multiply-circled", width: "1rem", height: "1rem" }))), index.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 }), index.h("button", { class: "searchbar-button", "aria-controls": "searchbar-input", "aria-label": "Cerca", type: "submit" }, index.h("z-icon", { name: "search", width: "1.25rem", height: "1.25rem" }))));
         }
-        return (index.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() }, index.h("div", { class: { 'hide': !this.showSearchbar, 'input-wrapper': true }, role: "none" }, this.searchQuery && (index.h("button", { type: "reset", "aria-label": "Svuota campo di ricerca" }, index.h("z-icon", { name: "multiply-circled", width: "1.5rem", height: "1.5rem" }))), index.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 })), index.h("button", { class: "searchbar-button", "aria-label": "Cerca", "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => (this.showSearchbar = true) }, this.showSearchbar ? null : index.h("span", { class: "searchbar-button-label" }, "Cerca"), index.h("z-icon", { name: "search", width: "2rem", height: "2rem" }))));
+        return (index.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() }, index.h("div", { class: { 'hide': !this.showSearchbar, 'input-wrapper': true }, role: "none" }, this.searchQuery && (index.h("button", { type: "reset", "aria-label": "Svuota campo di ricerca" }, index.h("z-icon", { name: "multiply-circled", width: "1.5rem", height: "1.5rem" }))), index.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 })), index.h("button", { class: "searchbar-button", "aria-label": "Cerca", "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", { name: "search", width: "2rem", height: "2rem" }))));
     }
     static get watchers() { return {
-        "searchQuery": ["onSearchQueryChange"],
-        "showSearchbar": ["onShowSearchbar"]
+        "searchQuery": ["onSearchQueryChange"]
     }; }
 };
 ZanitSearchForm.style = searchFormCss;