@zanichelli/zanichelli-it-frontend-kit 1.3.1 → 1.4.0-RC2
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.
- package/dist/types/components/menubar/menubar.d.ts +5 -0
- package/dist/types/components/menubar/mobile-menubar/mobile-menubar.d.ts +5 -0
- package/dist/types/components/menubar/search-form/search-form.d.ts +28 -5
- package/dist/types/components/menubar/search-form/suggestions.d.ts +11 -0
- package/dist/types/components.d.ts +60 -4
- package/dist/types/utils/subjects.api.d.ts +6 -0
- package/dist/types/utils/types.d.ts +7 -0
- package/dist/types/utils/utils.d.ts +8 -0
- package/dist/zanichelli-it-frontend-kit/index-DPw_TAEB.js +4170 -0
- package/dist/zanichelli-it-frontend-kit/index-DPw_TAEB.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/index.esm.js +10 -0
- package/dist/zanichelli-it-frontend-kit/index.esm.js.map +1 -1
- package/dist/zanichelli-it-frontend-kit/menu-BsP3cOc_.js +46 -0
- package/dist/zanichelli-it-frontend-kit/menu-BsP3cOc_.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/subjects.api-BRhngFD0.js +54 -0
- package/dist/zanichelli-it-frontend-kit/subjects.api-BRhngFD0.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/zanichelli-it-frontend-kit.css +993 -1
- package/dist/zanichelli-it-frontend-kit/zanichelli-it-frontend-kit.esm.js +49 -1
- package/dist/zanichelli-it-frontend-kit/zanichelli-it-frontend-kit.esm.js.map +1 -1
- package/dist/zanichelli-it-frontend-kit/zanit-back-to-top.entry.esm.js.map +1 -0
- package/dist/{components/zanit-back-to-top.js → zanichelli-it-frontend-kit/zanit-back-to-top.entry.js} +10 -34
- package/dist/zanichelli-it-frontend-kit/zanit-back-to-top.entry.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/zanit-menubar.entry.esm.js.map +1 -0
- package/dist/{components/zanit-menubar.js → zanichelli-it-frontend-kit/zanit-menubar.entry.js} +19 -58
- package/dist/zanichelli-it-frontend-kit/zanit-menubar.entry.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/zanit-mobile-menubar.entry.esm.js.map +1 -0
- package/dist/{components/p-BJzEFXY7.js → zanichelli-it-frontend-kit/zanit-mobile-menubar.entry.js} +18 -87
- package/dist/zanichelli-it-frontend-kit/zanit-mobile-menubar.entry.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/zanit-search-form.entry.esm.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/zanit-search-form.entry.js +307 -0
- package/dist/zanichelli-it-frontend-kit/zanit-search-form.entry.js.map +1 -0
- package/package.json +1 -1
- package/www/build/index-DPw_TAEB.js +4170 -0
- package/www/build/index-DPw_TAEB.js.map +1 -0
- package/www/build/index.esm.js +10 -0
- package/www/build/index.esm.js.map +1 -1
- package/www/build/menu-BsP3cOc_.js +46 -0
- package/www/build/menu-BsP3cOc_.js.map +1 -0
- package/www/build/subjects.api-BRhngFD0.js +54 -0
- package/www/build/subjects.api-BRhngFD0.js.map +1 -0
- package/www/build/zanichelli-it-frontend-kit.css +993 -1
- package/www/build/zanichelli-it-frontend-kit.esm.js +49 -1
- package/www/build/zanichelli-it-frontend-kit.esm.js.map +1 -1
- package/www/build/zanit-back-to-top.entry.esm.js.map +1 -0
- package/www/build/zanit-back-to-top.entry.js +64 -0
- package/www/build/zanit-back-to-top.entry.js.map +1 -0
- package/www/build/zanit-menubar.entry.esm.js.map +1 -0
- package/{dist/collection/components/menubar/menubar.js → www/build/zanit-menubar.entry.js} +31 -159
- package/www/build/zanit-menubar.entry.js.map +1 -0
- package/www/build/zanit-mobile-menubar.entry.esm.js.map +1 -0
- package/www/build/zanit-mobile-menubar.entry.js +171 -0
- package/www/build/zanit-mobile-menubar.entry.js.map +1 -0
- package/www/build/zanit-search-form.entry.esm.js.map +1 -0
- package/www/build/zanit-search-form.entry.js +307 -0
- package/www/build/zanit-search-form.entry.js.map +1 -0
- package/www/index.html +11 -2
- package/dist/cjs/index-BLzQAHAI.js +0 -1578
- package/dist/cjs/index-BLzQAHAI.js.map +0 -1
- package/dist/cjs/index.cjs.js +0 -5
- package/dist/cjs/index.cjs.js.map +0 -1
- package/dist/cjs/loader.cjs.js +0 -15
- package/dist/cjs/loader.cjs.js.map +0 -1
- package/dist/cjs/zanichelli-it-frontend-kit.cjs.js +0 -27
- package/dist/cjs/zanichelli-it-frontend-kit.cjs.js.map +0 -1
- package/dist/cjs/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map +0 -1
- package/dist/cjs/zanit-back-to-top_4.cjs.entry.js +0 -771
- package/dist/cjs/zanit-back-to-top_4.cjs.entry.js.map +0 -1
- package/dist/collection/collection-manifest.json +0 -15
- package/dist/collection/components/back-to-top/back-to-top.css +0 -16
- package/dist/collection/components/back-to-top/back-to-top.js +0 -130
- package/dist/collection/components/back-to-top/back-to-top.js.map +0 -1
- package/dist/collection/components/menubar/menu/menu.css +0 -95
- package/dist/collection/components/menubar/menu/menu.js +0 -38
- package/dist/collection/components/menubar/menu/menu.js.map +0 -1
- package/dist/collection/components/menubar/menubar.css +0 -168
- package/dist/collection/components/menubar/menubar.js.map +0 -1
- package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.css +0 -121
- package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js +0 -291
- package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js.map +0 -1
- package/dist/collection/components/menubar/search-form/search-form.css +0 -155
- package/dist/collection/components/menubar/search-form/search-form.js +0 -176
- package/dist/collection/components/menubar/search-form/search-form.js.map +0 -1
- package/dist/collection/index.js +0 -11
- package/dist/collection/index.js.map +0 -1
- package/dist/collection/utils/index.js +0 -2
- package/dist/collection/utils/index.js.map +0 -1
- package/dist/collection/utils/utils.js +0 -17
- package/dist/collection/utils/utils.js.map +0 -1
- package/dist/components/index.js +0 -1335
- package/dist/components/index.js.map +0 -1
- package/dist/components/p-BJzEFXY7.js.map +0 -1
- package/dist/components/p-Cfa-BVne.js +0 -133
- package/dist/components/p-Cfa-BVne.js.map +0 -1
- package/dist/components/zanit-back-to-top.js.map +0 -1
- package/dist/components/zanit-menubar.js.map +0 -1
- package/dist/components/zanit-mobile-menubar.js +0 -9
- package/dist/components/zanit-mobile-menubar.js.map +0 -1
- package/dist/components/zanit-search-form.js +0 -9
- package/dist/components/zanit-search-form.js.map +0 -1
- package/dist/esm/index-DSdvvVFj.js +0 -1549
- package/dist/esm/index-DSdvvVFj.js.map +0 -1
- package/dist/esm/index.js +0 -4
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/loader.js +0 -13
- package/dist/esm/loader.js.map +0 -1
- package/dist/esm/zanichelli-it-frontend-kit.js +0 -23
- package/dist/esm/zanichelli-it-frontend-kit.js.map +0 -1
- package/dist/esm/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.js.map +0 -1
- package/dist/esm/zanit-back-to-top_4.entry.js +0 -766
- package/dist/esm/zanit-back-to-top_4.entry.js.map +0 -1
- package/dist/index.cjs.js +0 -1
- package/dist/index.js +0 -1
- package/dist/zanichelli-it-frontend-kit/p-DSdvvVFj.js +0 -3
- package/dist/zanichelli-it-frontend-kit/p-DSdvvVFj.js.map +0 -1
- package/dist/zanichelli-it-frontend-kit/p-fe01ee7e.entry.js +0 -2
- package/dist/zanichelli-it-frontend-kit/p-fe01ee7e.entry.js.map +0 -1
- package/dist/zanichelli-it-frontend-kit/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +0 -1
- package/www/build/p-43c395dc.css +0 -1
- package/www/build/p-DSdvvVFj.js +0 -3
- package/www/build/p-DSdvvVFj.js.map +0 -1
- package/www/build/p-b4df0dec.js +0 -2
- package/www/build/p-fe01ee7e.entry.js +0 -2
- package/www/build/p-fe01ee7e.entry.js.map +0 -1
- package/www/build/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +0 -1
package/dist/{components/p-BJzEFXY7.js → zanichelli-it-frontend-kit/zanit-mobile-menubar.entry.js}
RENAMED
|
@@ -1,57 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { r as registerInstance, a as getElement, h } from './index-DPw_TAEB.js';
|
|
2
|
+
import { M as Menu } from './menu-BsP3cOc_.js';
|
|
3
|
+
import { S as SearchEnv, m as moveFocus, c as containsTarget } from './subjects.api-BRhngFD0.js';
|
|
3
4
|
|
|
4
|
-
const
|
|
5
|
-
const DEFAULT_GROUP = {
|
|
6
|
-
id: DEFAULT_GROUP_KEY,
|
|
7
|
-
label: DEFAULT_GROUP_KEY,
|
|
8
|
-
};
|
|
9
|
-
/** Get the items grouped by their group. */
|
|
10
|
-
const getGroupedItems = (items) => {
|
|
11
|
-
const groups = items.reduce((grouped, item) => {
|
|
12
|
-
const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));
|
|
13
|
-
if (!itemGroup) {
|
|
14
|
-
grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });
|
|
15
|
-
}
|
|
16
|
-
else {
|
|
17
|
-
itemGroup.items.push(item);
|
|
18
|
-
}
|
|
19
|
-
return grouped;
|
|
20
|
-
}, []);
|
|
21
|
-
// Sort to keep default group at the end
|
|
22
|
-
return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));
|
|
23
|
-
};
|
|
24
|
-
/**
|
|
25
|
-
* Floating menu component. It shows a list of items that can be grouped.
|
|
26
|
-
*/
|
|
27
|
-
const Menu = ({ controlledBy, items, currentPath = [], onItemKeyDown }) => {
|
|
28
|
-
if (!items?.length) {
|
|
29
|
-
return null;
|
|
30
|
-
}
|
|
31
|
-
const groups = getGroupedItems(items);
|
|
32
|
-
const isActive = (item) => currentPath.includes(controlledBy) && currentPath.includes(item.id);
|
|
33
|
-
return (h("div", { class: "menu-wrapper", role: "none" },
|
|
34
|
-
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) } },
|
|
35
|
-
group.id !== DEFAULT_GROUP_KEY ? (h("div", { class: "group-name", id: group.id }, group.label)) : groups.length > 1 ? (
|
|
36
|
-
// empty div to keep the same height as the other groups
|
|
37
|
-
h("div", { class: "group-name" })) : null,
|
|
38
|
-
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: {
|
|
39
|
-
'menu-item': true,
|
|
40
|
-
'active': isActive(item),
|
|
41
|
-
}, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": isActive(item) ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event), target: item.target }, item.label))))))))))));
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
const mobileMenubarCss = ":host{position:relative;z-index:2;display:block;width:100%;max-width:100%;background-color:#fff;color:var(--gray900);fill:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}nav{display:flex;width:100%;align-items:center;padding-left:var(--grid-margin);gap:8px}nav::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}z-logo{margin:8px 0}.mobile-menu{position:absolute;top:100%;left:0;display:flex;overflow:auto;width:100%;max-height:calc(100vh - 48px - var(--zanit-menubar-top-offset, 0px));flex-direction:column;padding:16px var(--grid-margin) 32px;background-color:#fff;box-shadow:var(--shadow-2);gap:8px}.mobile-menu li{width:100%}.mobile-menu .items-container{display:flex;min-height:256px;flex-direction:column;gap:8px}.mobile-menu .items-container z-ghost-loading{width:40%;height:1.2rem}.mobile-menu .items-container .menubar-item{display:block;width:100%;padding:8px 0;font-size:1rem;text-align:left}.mobile-menu .items-container li:not(:last-child) .menubar-item{border-bottom:1px solid #000}[role='menuitem'].parent{display:flex;width:fit-content;align-items:center;padding:0;border:none;font-size:0.875rem;gap:8px}zanit-search-form{margin-left:auto}";
|
|
5
|
+
const mobileMenubarCss = ":host{position:relative;z-index:2;display:block;width:100%;max-width:100%;height:3rem;background-color:#fff;color:var(--gray900);fill:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}nav{display:flex;width:100%;align-items:center;padding-left:var(--grid-margin);gap:8px}nav::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}z-logo{margin:8px 0}.mobile-menu{position:absolute;top:100%;left:0;display:flex;overflow:auto;width:100%;max-height:calc(100vh - 48px - var(--zanit-menubar-top-offset, 0px));flex-direction:column;padding:16px var(--grid-margin) 32px;background-color:#fff;box-shadow:var(--shadow-2);gap:8px}.mobile-menu li{width:100%}.mobile-menu .items-container{display:flex;min-height:256px;flex-direction:column;gap:8px}.mobile-menu .items-container z-ghost-loading{width:40%;height:1.2rem}.mobile-menu .items-container .menubar-item{display:block;width:100%;padding:8px 0;font-size:1rem;text-align:left}.mobile-menu .items-container li:not(:last-child) .menubar-item{border-bottom:1px solid #000}[role='menuitem'].parent{display:flex;width:fit-content;align-items:center;padding:0;border:none;font-size:0.875rem;gap:8px}zanit-search-form{margin-left:auto}";
|
|
45
6
|
|
|
46
7
|
const menuCss = ".menu-wrapper{width:100%;background-color:#fff}.menu{position:relative;display:flex;width:100%;flex-direction:column;gap:32px 0}.menu .group{display:flex;flex-direction:column}.menu .group .group-name{border-bottom:1px solid currentcolor;margin-bottom:4px;color:var(--red500);font-size:0.875rem;font-weight:var(--font-md)}.menu .group .menu-list{display:flex;flex-direction:column;gap:8px}.menu .group .menu-list .menu-item{display:block;border-bottom:2px solid transparent;font-size:0.875rem;font-weight:var(--font-md)}.menu .menu-list .menu-item.active,.menu .menu-list .menu-item:hover{border-bottom-color:var(--red500)}.menu .group.highlight .menu-list .menu-item{font-size:1rem}@media (width >= 768px){.menu-wrapper{position:absolute;top:100%;left:0;display:flex;justify-content:center;box-shadow:var(--shadow-1)}.menu{display:grid;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);padding:16px var(--grid-margin);gap:0 24px;grid-auto-columns:minmax(0, max-content);grid-auto-flow:column;grid-template-rows:minmax(0, max-content) max-content}.menu .group{display:grid;grid-row:1 / -1;grid-template-columns:1fr;grid-template-rows:subgrid}@supports not (grid-template-rows: subgrid){.menu .group{grid-template-rows:repeat(auto-fit, minmax(0, max-content))}}.menu .group .group-name{border:none;margin-bottom:16px}.menu .group .menu-list .menu-item{font-size:1rem}.menu .group.highlight .menu-list .menu-item{font-size:1.5rem}}";
|
|
47
8
|
|
|
48
|
-
const ZanitMobileMenubar =
|
|
49
|
-
constructor() {
|
|
50
|
-
|
|
51
|
-
this.__registerHost();
|
|
52
|
-
this.__attachShadow();
|
|
9
|
+
const ZanitMobileMenubar = class {
|
|
10
|
+
constructor(hostRef) {
|
|
11
|
+
registerInstance(this, hostRef);
|
|
53
12
|
}
|
|
54
|
-
get host() { return this; }
|
|
13
|
+
get host() { return getElement(this); }
|
|
55
14
|
/** IDs path of the current item. */
|
|
56
15
|
currentPath = [];
|
|
57
16
|
/** Menubar items. */
|
|
@@ -60,6 +19,10 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
|
|
|
60
19
|
searchQuery = undefined;
|
|
61
20
|
/** Whether the menubar is loading the data. */
|
|
62
21
|
loading = false;
|
|
22
|
+
/** Environment for search suggestions */
|
|
23
|
+
searchEnv = SearchEnv.PROD;
|
|
24
|
+
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
25
|
+
searchArea;
|
|
63
26
|
/** Last active item ID. */
|
|
64
27
|
lastCurrent = undefined;
|
|
65
28
|
parentItem = undefined;
|
|
@@ -189,7 +152,7 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
|
|
|
189
152
|
this.open = false;
|
|
190
153
|
}
|
|
191
154
|
render() {
|
|
192
|
-
return (h("nav", { key: '
|
|
155
|
+
return (h("nav", { key: '76079ce1e66f1b568f6e7eac1f67b91af0f2f48a', "aria-label": "Zanichelli.it" }, h("button", { key: '630b16be60aba3d7027fbe4b9e19e440cb454267', 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: '4c86d84d421ab93fb1c815c5a667dd55ce8254ac', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), h("z-logo", { key: '03c7b8613698098cf3a1ff4b1b8d649cb7d5b92a', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), h("zanit-search-form", { key: '5a1385991eebcf17ac8c275c8c69f6662f75e3b7', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined), searchArea: this.searchArea, searchEnv: this.searchEnv }), this.open && (h("ul", { key: 'bc627e55f902beaac658f02d90ed78836fde193b', class: "mobile-menu", role: "menubar" }, !this.loading && this.currentPath && this.currentPath.length > 0 && (h("li", { key: '4708f9ee160d62a6cbf6333e11c1b9d02ae3d34c', role: "none" }, h("a", { key: '9fd59125f8cb87f6c86108eea7ba79a04bc4d68c', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event), target: this.parentItem?.target }, h("z-icon", { key: '615bc59a1f058a745bdadd90c6f51f9abc757df1', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), h("span", { key: '66a80691639e97b2d7d7d61cc45f8b47dcdabafe' }, this.parentItem?.label || 'Home')))), this.loading ? (h("div", { 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 > 0 && (h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (h("li", { role: "none" }, h("a", { class: {
|
|
193
156
|
'menu-item': this.menuType === 'menu',
|
|
194
157
|
'menubar-item': this.menuType === 'menubar',
|
|
195
158
|
}, 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 }, h("span", { "data-text": item.label }, item.label))))))))))));
|
|
@@ -199,42 +162,10 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
|
|
|
199
162
|
"items": ["onItemsChange"],
|
|
200
163
|
"currentPath": ["onItemsChange"]
|
|
201
164
|
}; }
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
"currentPath": [16, "current-path"],
|
|
205
|
-
"items": [16],
|
|
206
|
-
"searchQuery": [1025, "search-query"],
|
|
207
|
-
"loading": [4],
|
|
208
|
-
"lastCurrent": [32],
|
|
209
|
-
"parentItem": [32],
|
|
210
|
-
"menuItems": [32],
|
|
211
|
-
"menuType": [32],
|
|
212
|
-
"open": [32]
|
|
213
|
-
}, [[5, "click", "handleOutsideClick"], [1, "keydown", "handleKeydown"], [5, "focusin", "handleFocusout"]], {
|
|
214
|
-
"items": ["onItemsChange"],
|
|
215
|
-
"currentPath": ["onItemsChange"]
|
|
216
|
-
}]);
|
|
217
|
-
function defineCustomElement() {
|
|
218
|
-
if (typeof customElements === "undefined") {
|
|
219
|
-
return;
|
|
220
|
-
}
|
|
221
|
-
const components = ["zanit-mobile-menubar", "zanit-search-form"];
|
|
222
|
-
components.forEach(tagName => { switch (tagName) {
|
|
223
|
-
case "zanit-mobile-menubar":
|
|
224
|
-
if (!customElements.get(tagName)) {
|
|
225
|
-
customElements.define(tagName, ZanitMobileMenubar);
|
|
226
|
-
}
|
|
227
|
-
break;
|
|
228
|
-
case "zanit-search-form":
|
|
229
|
-
if (!customElements.get(tagName)) {
|
|
230
|
-
defineCustomElement$1();
|
|
231
|
-
}
|
|
232
|
-
break;
|
|
233
|
-
} });
|
|
234
|
-
}
|
|
235
|
-
defineCustomElement();
|
|
165
|
+
};
|
|
166
|
+
ZanitMobileMenubar.style = mobileMenubarCss + menuCss;
|
|
236
167
|
|
|
237
|
-
export {
|
|
238
|
-
//# sourceMappingURL=
|
|
168
|
+
export { ZanitMobileMenubar as zanit_mobile_menubar };
|
|
169
|
+
//# sourceMappingURL=zanit-mobile-menubar.entry.esm.js.map
|
|
239
170
|
|
|
240
|
-
//# sourceMappingURL=
|
|
171
|
+
//# sourceMappingURL=zanit-mobile-menubar.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 height: 3rem;\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-left: var(--grid-margin);\n gap: 8px;\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\nz-logo {\n margin: 8px 0;\n}\n\n.mobile-menu {\n position: absolute;\n top: 100%;\n left: 0;\n display: flex;\n overflow: auto;\n width: 100%;\n max-height: calc(100vh - 48px - var(--zanit-menubar-top-offset, 0px));\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\nzanit-search-form {\n margin-left: auto;\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-md);\n}\n\n.menu .group .menu-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.menu .group .menu-list .menu-item {\n display: block;\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","import { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { MenubarItem, MenuItem } from '../../../utils';\nimport { Menu } from '../menu/menu';\nimport { containsTarget, moveFocus } from '../../../utils';\nimport { SearchEnv } from '../../../utils/subjects.api';\n\n/** Mobile menubar component. */\n@Component({\n tag: 'zanit-mobile-menubar',\n styleUrls: ['mobile-menubar.css', '../menu/menu.css'],\n shadow: {\n delegatesFocus: true,\n },\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 /** Environment for search suggestions */\n @Prop() searchEnv: SearchEnv = SearchEnv.PROD;\n\n /** Search area (e.g. \"SCUOLA\", \"UNIVERSITÀ\", \"DIZIONARI\"). */\n @Prop() searchArea?: string | undefined;\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 // If no current item is defined, we show all items\n if (this.lastCurrent === undefined) {\n this.parentItem = undefined;\n this.menuType = 'menubar';\n this.menuItems = items;\n return;\n }\n\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 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({ preventScroll: true });\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 <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\n <z-logo\n imageAlt=\"Logo Zanichelli\"\n link=\"/\"\n height={32}\n width={126}\n ></z-logo>\n\n <zanit-search-form\n searchQuery={this.searchQuery}\n onResetSearch={() => (this.searchQuery = undefined)}\n searchArea={this.searchArea}\n searchEnv={this.searchEnv}\n />\n\n {this.open && (\n <ul\n class=\"mobile-menu\"\n role=\"menubar\"\n >\n {!this.loading && this.currentPath && this.currentPath.length > 0 && (\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 target={this.parentItem?.target}\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 ) : 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 > 0 && (\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 target={item.target}\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}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"zanit-search-form.entry.esm.js","sources":["src/components/menubar/search-form/suggestions.ts","src/components/menubar/search-form/search-form.css?tag=zanit-search-form&encapsulation=shadow","src/components/menubar/search-form/search-form.tsx"],"sourcesContent":["enum AREA_LABELS {\n SCUOLA = 'Scuola',\n UNIVERSITÀ = 'Università',\n GIURIDICO = 'Giuridico',\n DIZIONARI = 'Dizionari',\n SAGGISTICA = 'Saggistica',\n}\n\nconst AREA_ORDER = Object.keys(AREA_LABELS);\n\nexport type SearchSuggestion = {\n id: string;\n label: string;\n aria_label: string;\n url: string;\n user_query: string;\n query?: string;\n area?: string;\n subject?: string;\n};\n\nexport function buildSuggestions(\n query: string,\n subjectsByArea: Record<string, string[]>,\n selectedArea?: string\n): SearchSuggestion[] {\n const matchingSubjectAreas = findSubjectAreas(query, subjectsByArea);\n const hasSubject = matchingSubjectAreas.length > 0;\n const subject = hasSubject ? query.toUpperCase() : undefined;\n\n const suggestions: SearchSuggestion[] = [];\n\n if (selectedArea) suggestions.push(buildWordSuggestion(query, selectedArea));\n\n suggestions.push(buildWordSuggestion(query));\n\n if (hasSubject) {\n if (selectedArea) {\n const orderedSubjectAreas = [\n ...matchingSubjectAreas.filter((area) => area === selectedArea),\n ...matchingSubjectAreas\n .filter((area) => area !== selectedArea)\n .sort((a, b) => getAreaOrder(a) - getAreaOrder(b)),\n ];\n orderedSubjectAreas.forEach((area) => suggestions.push(buildSubjectSuggestion(query, area, subject)));\n } else {\n matchingSubjectAreas\n .sort((a, b) => getAreaOrder(a) - getAreaOrder(b))\n .forEach((subjectArea) => suggestions.push(buildSubjectSuggestion(query, subjectArea, subject)));\n }\n }\n\n return suggestions;\n}\n\nconst buildWordSuggestion = (user_query: string, area?: string): SearchSuggestion => {\n return {\n id: buildId(`word-${user_query}-${area}`),\n label: buildLabel(user_query, area),\n aria_label: buildAriaLabel(user_query, area, false),\n url: buildUrl({ q: user_query, ...(area ? { area } : {}), user_query }),\n ...buildDetail(user_query, user_query, area),\n };\n};\n\nconst buildSubjectSuggestion = (user_query: string, area: string, subject: string): SearchSuggestion => {\n return {\n id: buildId(`subj-${user_query}-${area}-${subject}`),\n label: buildLabel(user_query, area),\n aria_label: buildAriaLabel(user_query, area, true),\n url: buildUrl({ area, materia: subject, user_query }),\n ...buildDetail(user_query, undefined, area, subject),\n };\n};\n\nconst buildId = (string: string) =>\n string\n .split('')\n .map((c) => c.charCodeAt(0).toString(16))\n .join('');\n\nconst buildUrl = (params: Record<string, string>): string => {\n return `ricerca?${new URLSearchParams(params).toString()}`;\n};\n\nconst buildDetail = (user_query: string, query?: string, area?: string, subject?: string) => ({\n user_query,\n ...(query ? { query } : {}),\n ...(area ? { area } : {}),\n ...(subject ? { subject } : {}),\n});\n\nconst buildLabel = (user_query: string, area?: string) => {\n return `<mark>${user_query}</mark> in <strong>${area ? `${AREA_LABELS[area] ?? area}` : `tutto il sito`}</strong>`;\n};\n\nconst buildAriaLabel = (user_query: string, area?: string, isSubject: boolean = false) => {\n return `Cerca la ${isSubject ? `materia` : `parola`} ${user_query} ${area ? `nel catalogo ${AREA_LABELS[area] ?? area}` : `in tutto il sito`}`;\n};\n\nfunction findSubjectAreas(query: string, subjectsByArea: Record<string, string[]>): string[] {\n const cleanedQuery = cleanSearch(query);\n return Object.entries(subjectsByArea)\n .filter(([, subjects]) => subjects.some((subject) => subject.toLowerCase() === cleanedQuery))\n .map(([area]) => area);\n}\n\n/** Clear search string: lowercase, remove multiple spaces */\nconst cleanSearch = (s: string) => s.toLowerCase().replace(/\\s+/g, ' ');\n\nconst getAreaOrder = (area: string) => {\n const index = AREA_ORDER.indexOf(area);\n return index >= 0 ? index : 100;\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.searchbar {\n --searchbar-button-x-padding: 14px;\n --searchbar-button-icon-width: 1.75rem;\n\n /* button horizontal padding + icon size + left border */\n --closed-searchbar-width: calc((var(--searchbar-button-x-padding) * 2) + var(--searchbar-button-icon-width) + 1px);\n\n position: absolute;\n z-index: 5;\n top: 0;\n right: 0;\n display: flex;\n width: var(--closed-searchbar-width);\n height: 3rem;\n justify-content: flex-end;\n transition: width 0.4s ease-in-out;\n}\n\n.searchbar.searchbar-open {\n width: 100%;\n}\n\n.searchbar .input-wrapper {\n display: flex;\n overflow: hidden;\n width: 100%;\n align-items: center;\n padding: 8px;\n padding-left: var(--grid-margin);\n background-color: #fff;\n gap: 8px;\n transition-duration: 0.4s;\n transition-property: padding-right, padding-left, width;\n transition-timing-function: ease-in-out;\n}\n\n.searchbar:not(.searchbar-open) .input-wrapper {\n overflow: hidden;\n width: 0;\n padding: 0;\n}\n\n.searchbar button[type='reset'] {\n --z-icon-width: 1rem;\n --z-icon-height: 1rem;\n\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.searchbar input {\n z-index: 1;\n width: 100%;\n height: 100%;\n padding: 0;\n border: none;\n background-color: #fff;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n}\n\n.searchbar.searchbar-open input:first-child {\n padding-left: 4px;\n margin-left: -4px; /* per evitare che la focus shadow vada fuori dallo schermo */\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 justify-content: center;\n padding: 10px var(--searchbar-button-x-padding);\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 .searchbar-button:focus-visible {\n z-index: 1;\n}\n\n.searchbar-button z-icon {\n --z-icon-width: var(--searchbar-button-icon-width);\n --z-icon-height: var(--searchbar-button-icon-width);\n}\n\n.suggestions-wrapper {\n position: absolute;\n z-index: 4;\n top: 3rem;\n left: 50%;\n width: 100vw;\n border-top: 1px solid var(--gray200);\n margin-left: -50vw;\n background: #fff;\n box-shadow: var(--shadow-1);\n}\n\n.suggestions-wrapper.hidden {\n display: none;\n}\n\n.suggestions {\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: stretch;\n padding: var(--space-unit);\n margin: 0 auto;\n}\n\n.suggestion-head {\n padding: calc(var(--space-unit) * 0.75) var(--space-unit);\n color: var(--gray700);\n font-size: 0.875rem;\n font-weight: var(--font-md);\n line-height: 1.125rem;\n}\n\n.suggestion {\n display: flex;\n padding: calc(var(--space-unit) * 0.75) var(--space-unit);\n color: var(--gray900);\n cursor: pointer;\n font-size: 1rem;\n gap: var(--space-unit);\n line-height: 1.5rem;\n}\n\n.suggestion:hover,\n.suggestion[aria-selected='true'] {\n background: var(--gray100);\n}\n\n.suggestion strong {\n font-weight: var(--font-bd);\n}\n\n.suggestion mark {\n background-color: var(--red50);\n}\n\n.suggestion z-icon {\n --z-icon-height: 1.125rem;\n\n margin-top: 0.125rem;\n}\n\n.suggestions z-divider {\n margin: var(--space-unit) 0;\n}\n\n@media (width < 1152px) {\n .searchbar .searchbar-button > .searchbar-button-label {\n display: none;\n }\n}\n\n@media (width >= 768px) {\n .searchbar {\n --searchbar-button-x-padding: 16px;\n --searchbar-button-icon-width: 2rem;\n }\n\n .searchbar .input-wrapper {\n gap: 14px;\n }\n\n .searchbar button[type='reset'] {\n --z-icon-width: 1.5rem;\n --z-icon-height: 1.5rem;\n }\n\n .searchbar input,\n .searchbar .searchbar-button {\n font-size: 1.5rem;\n }\n\n .searchbar .searchbar-button {\n padding: 8px var(--searchbar-button-x-padding);\n }\n\n .suggestions {\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n }\n}\n\n@media (width >= 1152px) {\n .searchbar {\n --closed-searchbar-width: 190px;\n }\n}\n\n@media (width >= 1366px) {\n .searchbar .searchbar-button {\n border-right: 1px solid #000;\n }\n\n .suggestions {\n max-width: 1366px;\n padding: var(--space-unit) calc(var(--space-unit) * 3);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { containsTarget, isArrowDownKey, isArrowUpKey, isEscKey, isTabKey, SearchEvent } from '../../../utils';\nimport { getSubjectsByArea, SearchEnv } from '../../../utils/subjects.api';\nimport { buildSuggestions, SearchSuggestion } from './suggestions';\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 private subjectsByArea: Record<string, string[]> = {};\n private timer: NodeJS.Timeout;\n\n @Element() host: HTMLZanitSearchFormElement;\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 /** Search suggestions to show in the autocomplete dropdown. */\n @State() suggestions: SearchSuggestion[] = [];\n\n /** Active suggestion - used for keyboard navigation */\n @State() activeSuggestion: string = '';\n\n /** Show suggestions list */\n @State() showSuggestions: boolean = false;\n\n /** Initial search query */\n @Prop({ mutable: true })\n searchQuery: string | undefined = undefined;\n\n /** Environment for search suggestions */\n @Prop() searchEnv: SearchEnv = SearchEnv.PROD;\n\n /** Search area (e.g. \"SCUOLA\", \"UNIVERSITÀ\", \"DIZIONARI\"). */\n @Prop() searchArea?: string | undefined;\n\n @Watch('searchQuery')\n onSearchQueryChange() {\n this._searchQuery = this.searchQuery;\n if (this.searchQuery) {\n this.openSearchbar();\n }\n this.resetSuggestions();\n }\n\n @Watch('searchArea')\n onSearchAreaChange() {\n this.resetSuggestions();\n }\n\n @Watch('showSearchbar')\n onShowSearchbarChange() {\n if (!this.showSearchbar) {\n this.showSuggestions = false;\n }\n }\n\n @Watch('showSuggestions')\n onShowSuggestionsChange() {\n this.activeSuggestion = '';\n }\n\n /** Emitted on search form submission. */\n @Event({ cancelable: true }) search: EventEmitter<SearchEvent>;\n\n @Event() resetSearch: EventEmitter<void>;\n\n async connectedCallback() {\n this.subjectsByArea = await getSubjectsByArea(this.searchEnv);\n this.showSearchbar = !!this.searchQuery;\n this._searchQuery = this.searchQuery;\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.host && !containsTarget(this.host, event)) {\n this.showSearchbar = false;\n }\n }\n\n /** Close the searchbar/suggestions when pressing Escape. */\n @Listen('keydown', { passive: true })\n handleEsc(event: KeyboardEvent) {\n if (!isEscKey(event)) {\n return;\n }\n\n if (this.showSuggestions) {\n this.showSuggestions = false;\n } else {\n this.showSearchbar = false;\n }\n }\n\n /** Close the searchbar/suggestions when pressing Tab. */\n @Listen('keyup', { target: 'document', passive: true })\n handleTab(event: KeyboardEvent) {\n if (!isTabKey(event)) {\n return;\n }\n\n this.showSuggestions = false;\n\n if (!containsTarget(this.host, event)) {\n this.showSearchbar = false;\n }\n }\n\n private openSearchbar() {\n this.showSearchbar = true;\n setTimeout(() => {\n const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n searchbarInput.focus({ preventScroll: true });\n }, 500);\n }\n\n private resetSearchQuery() {\n this.searchQuery = undefined;\n this.resetSearch.emit();\n }\n\n private resetSuggestions() {\n this.suggestions = [];\n this.showSuggestions = false;\n }\n\n private handleInputChange(event: InputEvent) {\n this._searchQuery = (event.target as HTMLInputElement).value;\n if (!this._searchQuery) {\n this.searchQuery = undefined;\n }\n\n this.updateSuggestions();\n }\n\n private updateSuggestions() {\n clearTimeout(this.timer);\n\n const query = (this._searchQuery || '').trim();\n\n if (query.length < 3) {\n this.resetSuggestions();\n return;\n }\n\n this.timer = setTimeout(() => {\n this.resetSuggestions();\n this.suggestions = buildSuggestions(query, this.subjectsByArea, this.searchArea?.toUpperCase());\n this.showSuggestions = true;\n }, 300);\n }\n\n private onSearchSubmit(event: Event) {\n event.preventDefault();\n if (!this._searchQuery) {\n return;\n }\n\n if (this.activeSuggestion) {\n const suggestion = this.suggestions.find((s) => s.id === this.activeSuggestion);\n if (suggestion) {\n this.submitSuggestionSearch(suggestion);\n this.showSuggestions = false;\n return;\n }\n }\n\n this.showSearchbar = false;\n\n const searchEv = this.search.emit({ query: this._searchQuery, area: this.searchArea });\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 private submitSuggestionSearch(suggestion: SearchSuggestion) {\n const ev = this.search.emit({\n user_query: suggestion.user_query,\n query: suggestion.query,\n area: suggestion.area,\n subject: suggestion.subject,\n });\n if (!ev.defaultPrevented) {\n window.location.href = suggestion.url;\n }\n }\n\n private handleSuggestionsNav(event: KeyboardEvent) {\n if (!isArrowDownKey(event) && !isArrowUpKey(event)) {\n return;\n }\n\n if (!this.suggestions.length) {\n return;\n }\n\n const options = this.suggestions.map((o) => o.id);\n\n if (!options.length) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n\n if (!this.showSuggestions) {\n this.showSuggestions = true;\n }\n\n let nextId = null;\n const firstId = options[0];\n const lastId = options[options.length - 1];\n const currOption = options.indexOf(this.activeSuggestion);\n if (currOption < 0) {\n nextId = isArrowDownKey(event) ? firstId : lastId;\n } else {\n if (isArrowDownKey(event)) {\n nextId = options[currOption + 1] || lastId;\n } else {\n nextId = options[currOption - 1] || firstId;\n }\n }\n this.activeSuggestion = nextId;\n }\n\n private renderSuggestions() {\n const renderHeading = (label: string, key: string) => (\n <span\n key={key}\n class=\"suggestion-head\"\n aria-hidden=\"true\"\n >\n {label}\n </span>\n );\n\n return (\n <div\n class={{ 'suggestions-wrapper': true, 'hidden': !this.showSuggestions || !this.suggestions.length }}\n onPointerOver={(e) => e.preventDefault()}\n >\n <div\n id=\"search-suggestions\"\n class=\"suggestions\"\n role=\"listbox\"\n aria-label=\"Seleziona tra i suggerimenti\"\n >\n {this.suggestions.map((suggestion, k) => {\n const items = [];\n\n if (k === 0) {\n items.push(renderHeading('Cerca la parola', 'word-head'));\n } else if (suggestion.subject && !this.suggestions[k - 1].subject) {\n items.push(<z-divider aria-hidden=\"true\" />);\n items.push(renderHeading('Cerca la materia', 'subj-head'));\n }\n\n items.push(\n <span\n key={k}\n id={suggestion.id}\n class=\"suggestion\"\n role=\"option\"\n aria-label={suggestion.aria_label}\n aria-selected={this.activeSuggestion === suggestion.id ? 'true' : undefined}\n onClick={() => this.submitSuggestionSearch(suggestion)}\n >\n <z-icon name=\"left-magnifying-glass\" />\n <span\n aria-hidden=\"true\"\n innerHTML={suggestion.label}\n />\n </span>\n );\n\n return items;\n })}\n </div>\n </div>\n );\n }\n\n render() {\n return (\n <Host>\n <form\n class={{ 'searchbar': true, 'searchbar-open': this.showSearchbar }}\n ref={(el) => (this.formElement = el)}\n role=\"search\"\n aria-label=\"Cerca nel sito\"\n method=\"get\"\n action=\"/ricerca\"\n onSubmit={(event) => this.onSearchSubmit(event)}\n onReset={() => this.resetSearchQuery()}\n >\n {!!this.searchArea && (\n <input\n type=\"hidden\"\n name=\"area\"\n value={this.searchArea}\n />\n )}\n\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 disabled={!this.showSearchbar}\n aria-hidden={!this.showSearchbar ? 'true' : undefined}\n tabIndex={!this.showSearchbar ? -1 : 0}\n >\n <z-icon name=\"multiply-circled\" />\n </button>\n )}\n <input\n id=\"searchbar-input\"\n name=\"q\"\n type=\"search\"\n disabled={!this.showSearchbar}\n placeholder=\"Cerca per parola chiave o ISBN\"\n value={this.searchQuery}\n required\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={this.showSuggestions ? 'true' : 'false'}\n aria-controls=\"search-suggestions\"\n aria-activedescendant={this.activeSuggestion}\n aria-label=\"Cerca per parola chiave o ISBN\"\n aria-hidden={!this.showSearchbar ? 'true' : undefined}\n tabIndex={!this.showSearchbar ? -1 : 0}\n onInput={(event) => this.handleInputChange(event)}\n onKeyDown={(e) => {\n // INFO: prevent ESC from clearing input\n if (isEscKey(e)) {\n e.preventDefault();\n }\n\n this.handleSuggestionsNav(e);\n }}\n />\n </div>\n\n <button\n class=\"searchbar-button\"\n aria-label={this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca'}\n aria-controls=\"searchbar-input\"\n type={this.showSearchbar ? 'submit' : 'button'}\n onClick={() => this.openSearchbar()}\n >\n {this.showSearchbar ? null : <span class=\"searchbar-button-label\">Cerca</span>}\n <z-icon name=\"search\"></z-icon>\n </button>\n </form>\n\n {this.renderSuggestions()}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
import { r as registerInstance, e as createEvent, a as getElement, h, d as Host } from './index-DPw_TAEB.js';
|
|
2
|
+
import { S as SearchEnv, g as getSubjectsByArea, c as containsTarget, i as isEscKey, a as isTabKey, b as isArrowDownKey, d as isArrowUpKey } from './subjects.api-BRhngFD0.js';
|
|
3
|
+
|
|
4
|
+
var AREA_LABELS;
|
|
5
|
+
(function (AREA_LABELS) {
|
|
6
|
+
AREA_LABELS["SCUOLA"] = "Scuola";
|
|
7
|
+
AREA_LABELS["UNIVERSIT\u00C0"] = "Universit\u00E0";
|
|
8
|
+
AREA_LABELS["GIURIDICO"] = "Giuridico";
|
|
9
|
+
AREA_LABELS["DIZIONARI"] = "Dizionari";
|
|
10
|
+
AREA_LABELS["SAGGISTICA"] = "Saggistica";
|
|
11
|
+
})(AREA_LABELS || (AREA_LABELS = {}));
|
|
12
|
+
const AREA_ORDER = Object.keys(AREA_LABELS);
|
|
13
|
+
function buildSuggestions(query, subjectsByArea, selectedArea) {
|
|
14
|
+
const matchingSubjectAreas = findSubjectAreas(query, subjectsByArea);
|
|
15
|
+
const hasSubject = matchingSubjectAreas.length > 0;
|
|
16
|
+
const subject = hasSubject ? query.toUpperCase() : undefined;
|
|
17
|
+
const suggestions = [];
|
|
18
|
+
if (selectedArea)
|
|
19
|
+
suggestions.push(buildWordSuggestion(query, selectedArea));
|
|
20
|
+
suggestions.push(buildWordSuggestion(query));
|
|
21
|
+
if (hasSubject) {
|
|
22
|
+
if (selectedArea) {
|
|
23
|
+
const orderedSubjectAreas = [
|
|
24
|
+
...matchingSubjectAreas.filter((area) => area === selectedArea),
|
|
25
|
+
...matchingSubjectAreas
|
|
26
|
+
.filter((area) => area !== selectedArea)
|
|
27
|
+
.sort((a, b) => getAreaOrder(a) - getAreaOrder(b)),
|
|
28
|
+
];
|
|
29
|
+
orderedSubjectAreas.forEach((area) => suggestions.push(buildSubjectSuggestion(query, area, subject)));
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
matchingSubjectAreas
|
|
33
|
+
.sort((a, b) => getAreaOrder(a) - getAreaOrder(b))
|
|
34
|
+
.forEach((subjectArea) => suggestions.push(buildSubjectSuggestion(query, subjectArea, subject)));
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
return suggestions;
|
|
38
|
+
}
|
|
39
|
+
const buildWordSuggestion = (user_query, area) => {
|
|
40
|
+
return {
|
|
41
|
+
id: buildId(`word-${user_query}-${area}`),
|
|
42
|
+
label: buildLabel(user_query, area),
|
|
43
|
+
aria_label: buildAriaLabel(user_query, area, false),
|
|
44
|
+
url: buildUrl({ q: user_query, ...(area ? { area } : {}), user_query }),
|
|
45
|
+
...buildDetail(user_query, user_query, area),
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
const buildSubjectSuggestion = (user_query, area, subject) => {
|
|
49
|
+
return {
|
|
50
|
+
id: buildId(`subj-${user_query}-${area}-${subject}`),
|
|
51
|
+
label: buildLabel(user_query, area),
|
|
52
|
+
aria_label: buildAriaLabel(user_query, area, true),
|
|
53
|
+
url: buildUrl({ area, materia: subject, user_query }),
|
|
54
|
+
...buildDetail(user_query, undefined, area, subject),
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
const buildId = (string) => string
|
|
58
|
+
.split('')
|
|
59
|
+
.map((c) => c.charCodeAt(0).toString(16))
|
|
60
|
+
.join('');
|
|
61
|
+
const buildUrl = (params) => {
|
|
62
|
+
return `ricerca?${new URLSearchParams(params).toString()}`;
|
|
63
|
+
};
|
|
64
|
+
const buildDetail = (user_query, query, area, subject) => ({
|
|
65
|
+
user_query,
|
|
66
|
+
...(query ? { query } : {}),
|
|
67
|
+
...(area ? { area } : {}),
|
|
68
|
+
...(subject ? { subject } : {}),
|
|
69
|
+
});
|
|
70
|
+
const buildLabel = (user_query, area) => {
|
|
71
|
+
return `<mark>${user_query}</mark> in <strong>${area ? `${AREA_LABELS[area] ?? area}` : `tutto il sito`}</strong>`;
|
|
72
|
+
};
|
|
73
|
+
const buildAriaLabel = (user_query, area, isSubject = false) => {
|
|
74
|
+
return `Cerca la ${isSubject ? `materia` : `parola`} ${user_query} ${area ? `nel catalogo ${AREA_LABELS[area] ?? area}` : `in tutto il sito`}`;
|
|
75
|
+
};
|
|
76
|
+
function findSubjectAreas(query, subjectsByArea) {
|
|
77
|
+
const cleanedQuery = cleanSearch(query);
|
|
78
|
+
return Object.entries(subjectsByArea)
|
|
79
|
+
.filter(([, subjects]) => subjects.some((subject) => subject.toLowerCase() === cleanedQuery))
|
|
80
|
+
.map(([area]) => area);
|
|
81
|
+
}
|
|
82
|
+
/** Clear search string: lowercase, remove multiple spaces */
|
|
83
|
+
const cleanSearch = (s) => s.toLowerCase().replace(/\s+/g, ' ');
|
|
84
|
+
const getAreaOrder = (area) => {
|
|
85
|
+
const index = AREA_ORDER.indexOf(area);
|
|
86
|
+
return index >= 0 ? index : 100;
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const searchFormCss = ":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}.searchbar{--searchbar-button-x-padding:14px;--searchbar-button-icon-width:1.75rem;--closed-searchbar-width:calc((var(--searchbar-button-x-padding) * 2) + var(--searchbar-button-icon-width) + 1px);position:absolute;z-index:5;top:0;right:0;display:flex;width:var(--closed-searchbar-width);height:3rem;justify-content:flex-end;transition:width 0.4s ease-in-out}.searchbar.searchbar-open{width:100%}.searchbar .input-wrapper{display:flex;overflow:hidden;width:100%;align-items:center;padding:8px;padding-left:var(--grid-margin);background-color:#fff;gap:8px;transition-duration:0.4s;transition-property:padding-right, padding-left, width;transition-timing-function:ease-in-out}.searchbar:not(.searchbar-open) .input-wrapper{overflow:hidden;width:0;padding:0}.searchbar button[type='reset']{--z-icon-width:1rem;--z-icon-height:1rem;display:flex;align-items:center;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding:0;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar.searchbar-open input:first-child{padding-left:4px;margin-left:-4px;}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{display:flex;align-items:center;justify-content:center;padding:10px var(--searchbar-button-x-padding);border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar .searchbar-button:focus-visible{z-index:1}.searchbar-button z-icon{--z-icon-width:var(--searchbar-button-icon-width);--z-icon-height:var(--searchbar-button-icon-width)}.suggestions-wrapper{position:absolute;z-index:4;top:3rem;left:50%;width:100vw;border-top:1px solid var(--gray200);margin-left:-50vw;background:#fff;box-shadow:var(--shadow-1)}.suggestions-wrapper.hidden{display:none}.suggestions{display:flex;width:100%;flex-direction:column;align-items:stretch;padding:var(--space-unit);margin:0 auto}.suggestion-head{padding:calc(var(--space-unit) * 0.75) var(--space-unit);color:var(--gray700);font-size:0.875rem;font-weight:var(--font-md);line-height:1.125rem}.suggestion{display:flex;padding:calc(var(--space-unit) * 0.75) var(--space-unit);color:var(--gray900);cursor:pointer;font-size:1rem;gap:var(--space-unit);line-height:1.5rem}.suggestion:hover,.suggestion[aria-selected='true']{background:var(--gray100)}.suggestion strong{font-weight:var(--font-bd)}.suggestion mark{background-color:var(--red50)}.suggestion z-icon{--z-icon-height:1.125rem;margin-top:0.125rem}.suggestions z-divider{margin:var(--space-unit) 0}@media (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}@media (width >= 768px){.searchbar{--searchbar-button-x-padding:16px;--searchbar-button-icon-width:2rem}.searchbar .input-wrapper{gap:14px}.searchbar button[type='reset']{--z-icon-width:1.5rem;--z-icon-height:1.5rem}.searchbar input,.searchbar .searchbar-button{font-size:1.5rem}.searchbar .searchbar-button{padding:8px var(--searchbar-button-x-padding)}.suggestions{padding:var(--space-unit) calc(var(--space-unit) * 2)}}@media (width >= 1152px){.searchbar{--closed-searchbar-width:190px}}@media (width >= 1366px){.searchbar .searchbar-button{border-right:1px solid #000}.suggestions{max-width:1366px;padding:var(--space-unit) calc(var(--space-unit) * 3)}}";
|
|
90
|
+
|
|
91
|
+
const ZanitSearchForm = class {
|
|
92
|
+
constructor(hostRef) {
|
|
93
|
+
registerInstance(this, hostRef);
|
|
94
|
+
this.search = createEvent(this, "search", 7);
|
|
95
|
+
this.resetSearch = createEvent(this, "resetSearch", 7);
|
|
96
|
+
}
|
|
97
|
+
formElement;
|
|
98
|
+
subjectsByArea = {};
|
|
99
|
+
timer;
|
|
100
|
+
get host() { return getElement(this); }
|
|
101
|
+
/** Indicates whether the searchbar is visible and usable. */
|
|
102
|
+
showSearchbar = false;
|
|
103
|
+
/** Search query to apply. */
|
|
104
|
+
_searchQuery = undefined;
|
|
105
|
+
/** Search suggestions to show in the autocomplete dropdown. */
|
|
106
|
+
suggestions = [];
|
|
107
|
+
/** Active suggestion - used for keyboard navigation */
|
|
108
|
+
activeSuggestion = '';
|
|
109
|
+
/** Show suggestions list */
|
|
110
|
+
showSuggestions = false;
|
|
111
|
+
/** Initial search query */
|
|
112
|
+
searchQuery = undefined;
|
|
113
|
+
/** Environment for search suggestions */
|
|
114
|
+
searchEnv = SearchEnv.PROD;
|
|
115
|
+
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
116
|
+
searchArea;
|
|
117
|
+
onSearchQueryChange() {
|
|
118
|
+
this._searchQuery = this.searchQuery;
|
|
119
|
+
if (this.searchQuery) {
|
|
120
|
+
this.openSearchbar();
|
|
121
|
+
}
|
|
122
|
+
this.resetSuggestions();
|
|
123
|
+
}
|
|
124
|
+
onSearchAreaChange() {
|
|
125
|
+
this.resetSuggestions();
|
|
126
|
+
}
|
|
127
|
+
onShowSearchbarChange() {
|
|
128
|
+
if (!this.showSearchbar) {
|
|
129
|
+
this.showSuggestions = false;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
onShowSuggestionsChange() {
|
|
133
|
+
this.activeSuggestion = '';
|
|
134
|
+
}
|
|
135
|
+
/** Emitted on search form submission. */
|
|
136
|
+
search;
|
|
137
|
+
resetSearch;
|
|
138
|
+
async connectedCallback() {
|
|
139
|
+
this.subjectsByArea = await getSubjectsByArea(this.searchEnv);
|
|
140
|
+
this.showSearchbar = !!this.searchQuery;
|
|
141
|
+
this._searchQuery = this.searchQuery;
|
|
142
|
+
}
|
|
143
|
+
/** Close open searchbar when clicking outside. */
|
|
144
|
+
handleOutsideClick(event) {
|
|
145
|
+
if (this.showSearchbar && this.host && !containsTarget(this.host, event)) {
|
|
146
|
+
this.showSearchbar = false;
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
/** Close the searchbar/suggestions when pressing Escape. */
|
|
150
|
+
handleEsc(event) {
|
|
151
|
+
if (!isEscKey(event)) {
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
if (this.showSuggestions) {
|
|
155
|
+
this.showSuggestions = false;
|
|
156
|
+
}
|
|
157
|
+
else {
|
|
158
|
+
this.showSearchbar = false;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
/** Close the searchbar/suggestions when pressing Tab. */
|
|
162
|
+
handleTab(event) {
|
|
163
|
+
if (!isTabKey(event)) {
|
|
164
|
+
return;
|
|
165
|
+
}
|
|
166
|
+
this.showSuggestions = false;
|
|
167
|
+
if (!containsTarget(this.host, event)) {
|
|
168
|
+
this.showSearchbar = false;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
openSearchbar() {
|
|
172
|
+
this.showSearchbar = true;
|
|
173
|
+
setTimeout(() => {
|
|
174
|
+
const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input');
|
|
175
|
+
searchbarInput.focus({ preventScroll: true });
|
|
176
|
+
}, 500);
|
|
177
|
+
}
|
|
178
|
+
resetSearchQuery() {
|
|
179
|
+
this.searchQuery = undefined;
|
|
180
|
+
this.resetSearch.emit();
|
|
181
|
+
}
|
|
182
|
+
resetSuggestions() {
|
|
183
|
+
this.suggestions = [];
|
|
184
|
+
this.showSuggestions = false;
|
|
185
|
+
}
|
|
186
|
+
handleInputChange(event) {
|
|
187
|
+
this._searchQuery = event.target.value;
|
|
188
|
+
if (!this._searchQuery) {
|
|
189
|
+
this.searchQuery = undefined;
|
|
190
|
+
}
|
|
191
|
+
this.updateSuggestions();
|
|
192
|
+
}
|
|
193
|
+
updateSuggestions() {
|
|
194
|
+
clearTimeout(this.timer);
|
|
195
|
+
const query = (this._searchQuery || '').trim();
|
|
196
|
+
if (query.length < 3) {
|
|
197
|
+
this.resetSuggestions();
|
|
198
|
+
return;
|
|
199
|
+
}
|
|
200
|
+
this.timer = setTimeout(() => {
|
|
201
|
+
this.resetSuggestions();
|
|
202
|
+
this.suggestions = buildSuggestions(query, this.subjectsByArea, this.searchArea?.toUpperCase());
|
|
203
|
+
this.showSuggestions = true;
|
|
204
|
+
}, 300);
|
|
205
|
+
}
|
|
206
|
+
onSearchSubmit(event) {
|
|
207
|
+
event.preventDefault();
|
|
208
|
+
if (!this._searchQuery) {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
if (this.activeSuggestion) {
|
|
212
|
+
const suggestion = this.suggestions.find((s) => s.id === this.activeSuggestion);
|
|
213
|
+
if (suggestion) {
|
|
214
|
+
this.submitSuggestionSearch(suggestion);
|
|
215
|
+
this.showSuggestions = false;
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
this.showSearchbar = false;
|
|
220
|
+
const searchEv = this.search.emit({ query: this._searchQuery, area: this.searchArea });
|
|
221
|
+
// do not submit the form if the event default behavior was prevented
|
|
222
|
+
if (searchEv.defaultPrevented) {
|
|
223
|
+
return;
|
|
224
|
+
}
|
|
225
|
+
this.formElement.submit();
|
|
226
|
+
}
|
|
227
|
+
submitSuggestionSearch(suggestion) {
|
|
228
|
+
const ev = this.search.emit({
|
|
229
|
+
user_query: suggestion.user_query,
|
|
230
|
+
query: suggestion.query,
|
|
231
|
+
area: suggestion.area,
|
|
232
|
+
subject: suggestion.subject,
|
|
233
|
+
});
|
|
234
|
+
if (!ev.defaultPrevented) {
|
|
235
|
+
window.location.href = suggestion.url;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
handleSuggestionsNav(event) {
|
|
239
|
+
if (!isArrowDownKey(event) && !isArrowUpKey(event)) {
|
|
240
|
+
return;
|
|
241
|
+
}
|
|
242
|
+
if (!this.suggestions.length) {
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
const options = this.suggestions.map((o) => o.id);
|
|
246
|
+
if (!options.length) {
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
event.preventDefault();
|
|
250
|
+
event.stopPropagation();
|
|
251
|
+
if (!this.showSuggestions) {
|
|
252
|
+
this.showSuggestions = true;
|
|
253
|
+
}
|
|
254
|
+
let nextId = null;
|
|
255
|
+
const firstId = options[0];
|
|
256
|
+
const lastId = options[options.length - 1];
|
|
257
|
+
const currOption = options.indexOf(this.activeSuggestion);
|
|
258
|
+
if (currOption < 0) {
|
|
259
|
+
nextId = isArrowDownKey(event) ? firstId : lastId;
|
|
260
|
+
}
|
|
261
|
+
else {
|
|
262
|
+
if (isArrowDownKey(event)) {
|
|
263
|
+
nextId = options[currOption + 1] || lastId;
|
|
264
|
+
}
|
|
265
|
+
else {
|
|
266
|
+
nextId = options[currOption - 1] || firstId;
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
this.activeSuggestion = nextId;
|
|
270
|
+
}
|
|
271
|
+
renderSuggestions() {
|
|
272
|
+
const renderHeading = (label, key) => (h("span", { key: key, class: "suggestion-head", "aria-hidden": "true" }, label));
|
|
273
|
+
return (h("div", { class: { 'suggestions-wrapper': true, 'hidden': !this.showSuggestions || !this.suggestions.length }, onPointerOver: (e) => e.preventDefault() }, h("div", { id: "search-suggestions", class: "suggestions", role: "listbox", "aria-label": "Seleziona tra i suggerimenti" }, this.suggestions.map((suggestion, k) => {
|
|
274
|
+
const items = [];
|
|
275
|
+
if (k === 0) {
|
|
276
|
+
items.push(renderHeading('Cerca la parola', 'word-head'));
|
|
277
|
+
}
|
|
278
|
+
else if (suggestion.subject && !this.suggestions[k - 1].subject) {
|
|
279
|
+
items.push(h("z-divider", { "aria-hidden": "true" }));
|
|
280
|
+
items.push(renderHeading('Cerca la materia', 'subj-head'));
|
|
281
|
+
}
|
|
282
|
+
items.push(h("span", { key: k, id: suggestion.id, class: "suggestion", role: "option", "aria-label": suggestion.aria_label, "aria-selected": this.activeSuggestion === suggestion.id ? 'true' : undefined, onClick: () => this.submitSuggestionSearch(suggestion) }, h("z-icon", { name: "left-magnifying-glass" }), h("span", { "aria-hidden": "true", innerHTML: suggestion.label })));
|
|
283
|
+
return items;
|
|
284
|
+
}))));
|
|
285
|
+
}
|
|
286
|
+
render() {
|
|
287
|
+
return (h(Host, { key: '9535c68b8cd3e76a55785cb993bed5026f84a589' }, h("form", { key: '26271b8f9034b3ea64bbea6ff413e75d0e857612', class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca nel sito", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, !!this.searchArea && (h("input", { key: '90e9dc4252a02a00db5160d374bd4ea42c4dce17', type: "hidden", name: "area", value: this.searchArea })), h("div", { key: '6189f91f8cbf9086c1dcddac5a1b649065d4319c', class: "input-wrapper", role: "none" }, this.searchQuery && (h("button", { key: '6292dc5e90576b49993ed15d908c675b501568d9', type: "reset", "aria-label": "Svuota campo di ricerca", disabled: !this.showSearchbar, "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 }, h("z-icon", { key: '67f07f13b459afad718d2687f5feea4271d6ec6a', name: "multiply-circled" }))), h("input", { key: 'ee4f88993f3bf1ba768eaf1b6ff63cd346bd552e', id: "searchbar-input", name: "q", type: "search", disabled: !this.showSearchbar, placeholder: "Cerca per parola chiave o ISBN", value: this.searchQuery, required: true, autocomplete: "off", role: "combobox", "aria-autocomplete": "list", "aria-expanded": this.showSuggestions ? 'true' : 'false', "aria-controls": "search-suggestions", "aria-activedescendant": this.activeSuggestion, "aria-label": "Cerca per parola chiave o ISBN", "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0, onInput: (event) => this.handleInputChange(event), onKeyDown: (e) => {
|
|
288
|
+
// INFO: prevent ESC from clearing input
|
|
289
|
+
if (isEscKey(e)) {
|
|
290
|
+
e.preventDefault();
|
|
291
|
+
}
|
|
292
|
+
this.handleSuggestionsNav(e);
|
|
293
|
+
} })), h("button", { key: '4e0feaeaff7bcecaf6a29409a6accac895810fdf', class: "searchbar-button", "aria-label": this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca', "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { key: '49eec7e6f04c34df57fcf99f405d1c3ada1fcdfb', name: "search" }))), this.renderSuggestions()));
|
|
294
|
+
}
|
|
295
|
+
static get watchers() { return {
|
|
296
|
+
"searchQuery": ["onSearchQueryChange"],
|
|
297
|
+
"searchArea": ["onSearchAreaChange"],
|
|
298
|
+
"showSearchbar": ["onShowSearchbarChange"],
|
|
299
|
+
"showSuggestions": ["onShowSuggestionsChange"]
|
|
300
|
+
}; }
|
|
301
|
+
};
|
|
302
|
+
ZanitSearchForm.style = searchFormCss;
|
|
303
|
+
|
|
304
|
+
export { ZanitSearchForm as zanit_search_form };
|
|
305
|
+
//# sourceMappingURL=zanit-search-form.entry.esm.js.map
|
|
306
|
+
|
|
307
|
+
//# sourceMappingURL=zanit-search-form.entry.js.map
|