npm - @zanichelli/zanichelli-it-frontend-kit - Versions diffs - 0.1.2 → 0.1.3 - Mend

@zanichelli/zanichelli-it-frontend-kit 0.1.2 → 0.1.3

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 (107) hide show

package/dist/{components/p-CWNmI_TK.js → zanichelli-it-frontend-kit/zanit-mobile-menubar.entry.js} RENAMED Viewed

@@ -1,93 +1,58 @@
-import { h, p as proxyCustomElement, H } from './index.js';
-import { d as defineCustomElement$1, m as moveFocus, c as containsTarget } from './p-Cphl7FvH.js';
-const DEFAULT_GROUP_KEY = 'default';
-const DEFAULT_GROUP = {
-    id: DEFAULT_GROUP_KEY,
-    label: DEFAULT_GROUP_KEY,
-};
-/** Get the items grouped by their group. */
-const getGroupedItems = (items) => {
-    const groups = items.reduce((grouped, item) => {
-        const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));
-        if (!itemGroup) {
-            grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });
-        }
-        else {
-            itemGroup.items.push(item);
-        }
-        return grouped;
-    }, []);
-    // Sort to keep default group at the end
-    return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));
-};
-/**
- * Floating menu component. It shows a list of items that can be grouped.
- */
-const Menu = ({ controlledBy, items, current, onItemKeyDown }) => {
-    if (!items?.length) {
-        return null;
-    }
-    const groups = getGroupedItems(items);
-    return (h("div", { class: "menu-wrapper", role: "none" },
-        h("div", { class: "menu", "aria-labelledby": controlledBy ?? undefined, role: "menu" }, groups.map(({ group, items }) => (h("div", { class: { group: true, highlight: items.some((item) => item.highlight) } },
-            group.id !== DEFAULT_GROUP_KEY ? (h("div", { class: "group-name", id: group.id }, group.label)) : groups.length > 1 ? (
-            // empty div to keep the same height as the other groups
-            h("div", { class: "group-name" })) : null,
-            h("ul", { class: "menu-list", role: "group", "aria-labelledby": group.id !== DEFAULT_GROUP_KEY ? group.id : undefined }, items.map((item) => (h("li", { role: "none" }, item.href && (h("a", { class: { 'menu-item': true, 'active': current === item.id }, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": current === item.id ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event) }, item.label))))))))))));
-};
+import { r as registerInstance, a as getElement, h } from './index-BQ_orCyU.js';
+import { m as moveFocus, c as containsTarget } from './utils-CaxAWyZI.js';
+import { M as Menu } from './menu-Cd2leC2L.js';
 const mobileMenubarCss = ":host{position:relative;z-index:2;display:block;width:100%;max-width:100%;background-color:#fff;color:var(--gray900);fill:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}nav{display:flex;width:100%;align-items:center;padding:8px var(--grid-margin)}nav::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.burger-button{margin-left:auto}.mobile-menu{position:absolute;top:100%;left:0;display:flex;width:100%;flex-direction:column;padding:16px var(--grid-margin) 32px;background-color:#fff;box-shadow:var(--shadow-2);gap:8px}.mobile-menu li{width:100%}.mobile-menu .items-container{display:flex;min-height:256px;flex-direction:column;gap:8px}.mobile-menu .items-container z-ghost-loading{width:40%;height:1.2rem}.mobile-menu .items-container .menubar-item{display:block;width:100%;padding:8px 0;font-size:1rem;text-align:left}.mobile-menu .items-container li:not(:last-child) .menubar-item{border-bottom:1px solid #000}[role='menuitem'].parent{display:flex;width:fit-content;align-items:center;padding:0;border:none;font-size:0.875rem;gap:8px}";
 const menuCss = ".menu-wrapper{width:100%;background-color:#fff}.menu{position:relative;display:flex;width:100%;flex-direction:column;gap:32px 0}.menu .group{display:flex;flex-direction:column}.menu .group .group-name{border-bottom:1px solid currentcolor;margin-bottom:4px;color:var(--red500);font-size:0.875rem;font-weight:var(--font-rg)}.menu .group .menu-list{display:flex;flex-direction:column;gap:4px}.menu .group .menu-list .menu-item{border-bottom:2px solid transparent;font-size:0.875rem;font-weight:var(--font-md)}.menu .menu-list .menu-item.active,.menu .menu-list .menu-item:hover{border-bottom-color:var(--red500)}.menu .group.highlight .menu-list .menu-item{font-size:1rem}@media (width >= 768px){.menu-wrapper{position:absolute;top:100%;left:0;display:flex;justify-content:center;box-shadow:var(--shadow-1)}.menu{display:grid;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);padding:16px var(--grid-margin);gap:0 24px;grid-auto-columns:minmax(0, max-content);grid-auto-flow:column;grid-template-rows:minmax(0, max-content) max-content}.menu .group{display:grid;grid-row:1 / -1;grid-template-columns:1fr;grid-template-rows:subgrid}@supports not (grid-template-rows: subgrid){.menu .group{grid-template-rows:repeat(auto-fit, minmax(0, max-content))}}.menu .group .group-name{border:none;margin-bottom:16px}.menu .group .menu-list .menu-item{font-size:1rem}.menu .group.highlight .menu-list .menu-item{font-size:1.5rem}.menu .group.highlight .menu-list{gap:24px}}";
-const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMenubar extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
+const ZanitMobileMenubar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
     }
-    get host() { return this; }
-    /** ID of the current active item. */
-    current = undefined;
+    get host() { return getElement(this); }
+    /** IDs path of the current item. */
+    currentPath = [];
     /** Menubar items. */
     items = [];
     /** Initial search query. */
     searchQuery = undefined;
     /** Whether the menubar is loading the data. */
     loading = false;
+    /** Last active item ID. */
+    lastCurrent = undefined;
     parentItem = undefined;
     menuItems = undefined;
     /** Whether the items to render come from a menubar or a menu. */
     menuType = undefined;
     open;
     onItemsChange() {
+        this.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;
         this.setupData(this.items);
     }
     /**
      * Find the current item and take its parent, `menuItems` or the `navbarItems`.
-     * @returns True if an item matches the `current` prop, false otherwise.
      */
     setupData(items, parent) {
         for (const item of items) {
-            if (item.id === this.current) {
-                const type = item.menuItems?.length ? 'menu' : 'menubar';
+            if (item.id === this.lastCurrent) {
                 this.parentItem = parent;
-                this.menuType = type;
+                this.menuType = item.menuItems?.length ? 'menu' : 'menubar';
                 this.menuItems = item.menuItems || item.navbarItems;
-                return true;
+                return;
             }
-            if (item.menuItems?.some(({ id }) => id === this.current)) {
-                this.parentItem = parent;
-                this.menuType = 'menu';
-                this.menuItems = item.menuItems;
-                return true;
+            if (this.currentPath.length > 1 &&
+                item.id === this.currentPath[this.currentPath.length - 2] &&
+                item.menuItems?.some(({ id }) => id === this.lastCurrent)) {
+                this.parentItem = item;
+                this.menuType = item.menuItems?.length ? 'menu' : 'menubar';
+                this.menuItems = item.menuItems || item.navbarItems;
+                return;
             }
             if (item.navbarItems?.length) {
                 return this.setupData(item.navbarItems, item);
             }
         }
-        return false;
     }
     get menuItemsElement() {
         return Array.from(this.host.shadowRoot.querySelectorAll('[role="menuitem"]'));
@@ -144,6 +109,7 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
         }
     }
     connectedCallback() {
+        this.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;
         this.setupData(this.items);
     }
     /** Close the menu when clicking outside. */
@@ -175,50 +141,19 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
         this.open = false;
     }
     render() {
-        return (h("nav", { key: 'df6d04c4bb8343ec62fe69df3f01f6f47b4367cf', "aria-label": "Zanichelli.it" }, h("z-logo", { key: '3403d6548e16d131c4ce81c624e761e523b65562', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), h("button", { key: '198db21866d9a2b86e9094ae0d6d84c48953f3a6', 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: '549b5327194978ee9b23fb8a2839d73d06bfd6f8', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), this.open && (h("ul", { key: '27933ec0651b98039598a5e1d26d144ea7c3c73a', class: "mobile-menu", role: "menubar" }, h("li", { key: '09f8dbe1534e0f97df17e34a6f9b075f8dce10dd', role: "none" }, h("zanit-search-form", { key: '64e5fa4b8d9217646da95204583da333ec0f8f6d', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), !this.loading && this.current && (h("li", { key: 'b5dcca1a67de785caa2f5247c850437abb20e5e2', role: "none" }, h("a", { key: '14d386b83ef96ae92070e9e738fdf70e6e0e6ef2', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("z-icon", { key: '7851e7a47f5723029d9ce0bf85e4010025509caf', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), h("span", { key: 'ab158b0c1350eedbb4c4270b2d9d111ae732af95' }, this.parentItem?.label ?? 'Home')))), this.loading && (h("div", { key: '9d4a6b292cbf067a3f5b743daff5a26bfcfaf403', 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: 'bf185590ea2375755f92a28a6557de5a05026d33', "aria-label": "Zanichelli.it" }, h("z-logo", { key: 'ca1abb2c92c31be9a8abab3784183c8f03d0fc0b', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), h("button", { key: '3759ed058e58cc8e6f1d8a59ff2a5e1ec4672ea4', 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: '4c023d8f00677a4ee7564fe408e05f15cc85baeb', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), this.open && (h("ul", { key: '76602228fa05516b5aac5fefe18bdc4cd9054138', class: "mobile-menu", role: "menubar" }, h("li", { key: 'f00e44108af3257db4a44af1d013960da0b93a62', role: "none" }, h("zanit-search-form", { key: '40c76e47e86425f1427f76fecc1498fdda214f2a', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), !this.loading && this.currentPath && (h("li", { key: 'e82a0c32dbd9f099adaf440a97b5d9b203de72cd', role: "none" }, h("a", { key: 'bbb70b821828d90945e8c183e4267db2718ef0ba', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("z-icon", { key: '285e6f7e16095ae53e0a8ad3ec0ddda66f23664d', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), h("span", { key: 'dc19116ea5886c29b3c4f446c0cd72f2baf6dd9a' }, this.parentItem?.label ?? 'Home')))), this.loading && (h("div", { key: '2b2345523bb219d44dab1d1cc60407e28329e0bd', 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, controlledBy: this.parentItem?.id, currentPath: this.currentPath, 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))))))))))));
+            }, href: item.href, id: item.id, role: "menuitem", "aria-current": this.lastCurrent === item.id ? 'page' : 'false', tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("span", { "data-text": item.label }, item.label))))))))))));
     }
     static get watchers() { return {
         "items": ["onItemsChange"],
-        "current": ["onItemsChange"]
+        "currentPath": ["onItemsChange"]
     }; }
-    static get style() { return mobileMenubarCss + menuCss; }
-}, [1, "zanit-mobile-menubar", {
-        "current": [1],
-        "items": [16],
-        "searchQuery": [1025, "search-query"],
-        "loading": [4],
-        "parentItem": [32],
-        "menuItems": [32],
-        "menuType": [32],
-        "open": [32]
-    }, [[5, "click", "handleOutsideClick"], [1, "keydown", "handleKeydown"], [5, "focusin", "handleFocusout"]], {
-        "items": ["onItemsChange"],
-        "current": ["onItemsChange"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    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 "zanit-search-form":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-defineCustomElement();
+};
+ZanitMobileMenubar.style = mobileMenubarCss + menuCss;
-export { Menu as M, ZanitMobileMenubar as Z, defineCustomElement as d };
-//# sourceMappingURL=p-CWNmI_TK.js.map
+export { ZanitMobileMenubar as zanit_mobile_menubar };
+//# sourceMappingURL=zanit-mobile-menubar.entry.esm.js.map
-//# sourceMappingURL=p-CWNmI_TK.js.map
+//# sourceMappingURL=zanit-mobile-menubar.entry.js.map

package/dist/zanichelli-it-frontend-kit/zanit-mobile-menubar.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"zanit-mobile-menubar.entry.esm.js","mappings":"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","names":[],"sources":["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":[":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 /** IDs path of the current item. */\n @Prop() currentPath: string[] = [];\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 /** Last active item ID. */\n @State() lastCurrent: string | undefined = undefined;\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('currentPath')\n onItemsChange() {\n this.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;\n this.setupData(this.items);\n }\n\n /**\n * Find the current item and take its parent, `menuItems` or the `navbarItems`.\n */\n private setupData(items: MenubarItem[], parent?: MenubarItem) {\n for (const item of items) {\n if (item.id === this.lastCurrent) {\n this.parentItem = parent;\n this.menuType = item.menuItems?.length ? 'menu' : 'menubar';\n this.menuItems = item.menuItems || item.navbarItems;\n return;\n }\n\n if (\n this.currentPath.length > 1 &&\n item.id === this.currentPath[this.currentPath.length - 2] &&\n item.menuItems?.some(({ id }) => id === this.lastCurrent)\n ) {\n this.parentItem = item;\n this.menuType = item.menuItems?.length ? 'menu' : 'menubar';\n this.menuItems = item.menuItems || item.navbarItems;\n return;\n }\n\n if (item.navbarItems?.length) {\n return this.setupData(item.navbarItems, item);\n }\n }\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.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;\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 imageAlt=\"Logo Zanichelli\"\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.currentPath && (\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 controlledBy={this.parentItem?.id}\n currentPath={this.currentPath}\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.lastCurrent === 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/zanichelli-it-frontend-kit/zanit-search-form.entry.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"zanit-search-form.entry.esm.js","sources":["src/components/menubar/search-form/search-form.css?tag=zanit-search-form&encapsulation=shadow","src/components/menubar/search-form/search-form.tsx"],"sourcesContent":[":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: none;\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 .input-wrapper:not(.hide) {\n display: flex;\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 <div\n class={{ 'hide': !this.showSearchbar, 'input-wrapper': true }}\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"],"names":[],"mappings":"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"}

package/dist/{components/p-Cphl7FvH.js → zanichelli-it-frontend-kit/zanit-search-form.entry.js} RENAMED Viewed

@@ -1,34 +1,16 @@
-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();
-};
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-BQ_orCyU.js';
+import { c as containsTarget } from './utils-CaxAWyZI.js';
 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 ZanitSearchForm = /*@__PURE__*/ proxyCustomElement(class ZanitSearchForm extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.search = createEvent(this, "search");
-        this.resetSearch = createEvent(this, "resetSearch");
+const ZanitSearchForm = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.search = createEvent(this, "search", 7);
+        this.resetSearch = createEvent(this, "resetSearch", 7);
     }
     formElement;
-    get host() { return this; }
+    get host() { return getElement(this); }
     isMobile = false;
     /** Indicates whether the searchbar is visible and usable. */
     showSearchbar = false;
@@ -104,32 +86,10 @@ const ZanitSearchForm = /*@__PURE__*/ proxyCustomElement(class ZanitSearchForm e
         "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();
+};
+ZanitSearchForm.style = searchFormCss;
-export { ZanitSearchForm as Z, containsTarget as c, defineCustomElement as d, moveFocus as m };
-//# sourceMappingURL=p-Cphl7FvH.js.map
+export { ZanitSearchForm as zanit_search_form };
+//# sourceMappingURL=zanit-search-form.entry.esm.js.map
-//# sourceMappingURL=p-Cphl7FvH.js.map
+//# sourceMappingURL=zanit-search-form.entry.js.map

package/dist/zanichelli-it-frontend-kit/zanit-search-form.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"zanit-search-form.entry.esm.js","mappings":"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","names":[],"sources":["src/components/menubar/search-form/search-form.css?tag=zanit-search-form&encapsulation=shadow","src/components/menubar/search-form/search-form.tsx"],"sourcesContent":[":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: none;\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 .input-wrapper:not(.hide) {\n display: flex;\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 <div\n class={{ 'hide': !this.showSearchbar, 'input-wrapper': true }}\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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@zanichelli/zanichelli-it-frontend-kit",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Zanichelli.it frontend kit",
   "license": "MIT",
   "repository": {