@zanichelli/zanichelli-it-frontend-kit 1.3.0-RC2 → 1.3.0-RC4
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/cjs/{index-CRwLFnL1.js → index-BLzQAHAI.js} +46 -4
- package/dist/cjs/index-BLzQAHAI.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/zanichelli-it-frontend-kit.cjs.js +2 -2
- package/dist/cjs/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map +1 -0
- package/dist/cjs/{zanit-menubar_3.cjs.entry.js → zanit-back-to-top_4.cjs.entry.js} +79 -266
- package/dist/cjs/zanit-back-to-top_4.cjs.entry.js.map +1 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/back-to-top/back-to-top.css +4 -0
- package/dist/collection/components/back-to-top/back-to-top.js +126 -0
- package/dist/collection/components/back-to-top/back-to-top.js.map +1 -0
- package/dist/collection/components/menubar/menubar.css +0 -1
- package/dist/collection/components/menubar/menubar.js +2 -52
- package/dist/collection/components/menubar/menubar.js.map +1 -1
- package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js +1 -51
- package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js.map +1 -1
- package/dist/collection/components/menubar/search-form/search-form.css +0 -51
- package/dist/collection/components/menubar/search-form/search-form.js +22 -207
- package/dist/collection/components/menubar/search-form/search-form.js.map +1 -1
- package/dist/collection/utils/utils.js +0 -8
- package/dist/collection/utils/utils.js.map +1 -1
- package/dist/components/index.js +42 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-Cs52y6qp.js → p-CZOLclk-.js} +4 -10
- package/dist/components/p-CZOLclk-.js.map +1 -0
- package/dist/components/p-FfnLbWCZ.js +133 -0
- package/dist/components/p-FfnLbWCZ.js.map +1 -0
- package/dist/components/zanit-back-to-top.d.ts +11 -0
- package/dist/components/zanit-back-to-top.js +84 -0
- package/dist/components/zanit-back-to-top.js.map +1 -0
- package/dist/components/zanit-menubar.js +5 -11
- package/dist/components/zanit-menubar.js.map +1 -1
- package/dist/components/zanit-mobile-menubar.js +1 -1
- package/dist/components/zanit-search-form.js +1 -1
- package/dist/esm/{index-B82IapZZ.js → index-DSdvvVFj.js} +46 -4
- package/dist/esm/index-DSdvvVFj.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/zanichelli-it-frontend-kit.js +3 -3
- package/dist/esm/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.js.map +1 -0
- package/dist/esm/{zanit-menubar_3.entry.js → zanit-back-to-top_4.entry.js} +79 -267
- package/dist/esm/zanit-back-to-top_4.entry.js.map +1 -0
- package/dist/types/components/back-to-top/back-to-top.d.ts +25 -0
- package/dist/types/components/menubar/menubar.d.ts +0 -5
- package/dist/types/components/menubar/mobile-menubar/mobile-menubar.d.ts +0 -5
- package/dist/types/components/menubar/search-form/search-form.d.ts +5 -28
- package/dist/types/components.d.ts +53 -60
- package/dist/types/utils/types.d.ts +0 -7
- package/dist/types/utils/utils.d.ts +0 -8
- package/dist/zanichelli-it-frontend-kit/p-DSdvvVFj.js +3 -0
- package/dist/zanichelli-it-frontend-kit/p-DSdvvVFj.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/p-bdb5df96.entry.js +2 -0
- package/dist/zanichelli-it-frontend-kit/p-bdb5df96.entry.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/zanichelli-it-frontend-kit.esm.js +1 -1
- package/dist/zanichelli-it-frontend-kit/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +1 -0
- package/package.json +1 -1
- package/www/build/p-884eb440.js +2 -0
- package/www/build/p-DSdvvVFj.js +3 -0
- package/www/build/p-DSdvvVFj.js.map +1 -0
- package/www/build/p-bdb5df96.entry.js +2 -0
- package/www/build/p-bdb5df96.entry.js.map +1 -0
- package/www/build/zanichelli-it-frontend-kit.esm.js +1 -1
- package/www/build/zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +1 -0
- package/www/index.html +2 -6
- package/dist/cjs/index-CRwLFnL1.js.map +0 -1
- package/dist/cjs/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map +0 -1
- package/dist/cjs/zanit-menubar_3.cjs.entry.js.map +0 -1
- package/dist/collection/components/menubar/search-form/suggestions.js +0 -84
- package/dist/collection/components/menubar/search-form/suggestions.js.map +0 -1
- package/dist/collection/utils/subjects.api.js +0 -25
- package/dist/collection/utils/subjects.api.js.map +0 -1
- package/dist/components/p-Bk8_DaVU.js +0 -375
- package/dist/components/p-Bk8_DaVU.js.map +0 -1
- package/dist/components/p-Cs52y6qp.js.map +0 -1
- package/dist/esm/index-B82IapZZ.js.map +0 -1
- package/dist/esm/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.js.map +0 -1
- package/dist/esm/zanit-menubar_3.entry.js.map +0 -1
- package/dist/types/components/menubar/search-form/suggestions.d.ts +0 -11
- package/dist/types/utils/subjects.api.d.ts +0 -6
- package/dist/zanichelli-it-frontend-kit/p-1dddc763.entry.js +0 -2
- package/dist/zanichelli-it-frontend-kit/p-1dddc763.entry.js.map +0 -1
- package/dist/zanichelli-it-frontend-kit/p-B82IapZZ.js +0 -3
- package/dist/zanichelli-it-frontend-kit/p-B82IapZZ.js.map +0 -1
- package/dist/zanichelli-it-frontend-kit/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +0 -1
- package/www/build/p-1dddc763.entry.js +0 -2
- package/www/build/p-1dddc763.entry.js.map +0 -1
- package/www/build/p-B82IapZZ.js +0 -3
- package/www/build/p-B82IapZZ.js.map +0 -1
- package/www/build/p-d121e671.js +0 -2
- package/www/build/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +0 -1
|
@@ -1,6 +1,60 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-BLzQAHAI.js');
|
|
4
|
+
|
|
5
|
+
const backToTopCss = ".sc-zanit-back-to-top-h .z-fab.sc-zanit-back-to-top{--color-primary01:var(--gray950);outline:1px solid var(--color-white)}";
|
|
6
|
+
|
|
7
|
+
const ZanitBackTop = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
}
|
|
11
|
+
resizeObserver;
|
|
12
|
+
get host() { return index.getElement(this); }
|
|
13
|
+
/** Indicates whether the back-to-top button is visible and usable. */
|
|
14
|
+
showFab = false;
|
|
15
|
+
/** Indicates the current height of the page. */
|
|
16
|
+
currentPageHeight;
|
|
17
|
+
/** Indicates if the viewport is mobile. */
|
|
18
|
+
isMobile = false;
|
|
19
|
+
/** Min page height from which the back-to-top button must appear. */
|
|
20
|
+
pageMinHeight = 1600;
|
|
21
|
+
/** Min scroll height from which the back-to-top button must appear. */
|
|
22
|
+
scrollMinHeight = 800;
|
|
23
|
+
handleScroll() {
|
|
24
|
+
this.updateFabVisibility();
|
|
25
|
+
}
|
|
26
|
+
handleResize = () => {
|
|
27
|
+
const newHeight = document.documentElement.scrollHeight;
|
|
28
|
+
if (newHeight !== this.currentPageHeight)
|
|
29
|
+
this.currentPageHeight = newHeight;
|
|
30
|
+
};
|
|
31
|
+
connectedCallback() {
|
|
32
|
+
this.currentPageHeight = document.body.scrollHeight;
|
|
33
|
+
this.resizeObserver = new ResizeObserver(this.handleResize);
|
|
34
|
+
this.resizeObserver.observe(document.documentElement);
|
|
35
|
+
this.updateFabVisibility();
|
|
36
|
+
const mobileMediaQuery = window.matchMedia('(width < 768px)');
|
|
37
|
+
this.isMobile = mobileMediaQuery.matches;
|
|
38
|
+
mobileMediaQuery.onchange = (mql) => {
|
|
39
|
+
this.isMobile = mql.matches;
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
disconnectedCallback() {
|
|
43
|
+
this.resizeObserver.disconnect();
|
|
44
|
+
}
|
|
45
|
+
updateFabVisibility() {
|
|
46
|
+
this.showFab = this.currentPageHeight > this.pageMinHeight && window.scrollY > this.scrollMinHeight;
|
|
47
|
+
}
|
|
48
|
+
scroll() {
|
|
49
|
+
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
50
|
+
}
|
|
51
|
+
render() {
|
|
52
|
+
if (!this.showFab)
|
|
53
|
+
return null;
|
|
54
|
+
return (index.h(index.Host, null, index.h("button", { class: 'z-fab' + (this.isMobile ? '' : ' z-fab-extended'), onClick: () => this.scroll() }, index.h("z-icon", { name: "back-top" }), index.h("span", null, "Torna su"))));
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
ZanitBackTop.style = backToTopCss;
|
|
4
58
|
|
|
5
59
|
/**
|
|
6
60
|
* Check if an element contains an event target by checking its composedPath.
|
|
@@ -18,14 +72,6 @@ const moveFocus = (current, next) => {
|
|
|
18
72
|
next.tabIndex = 0;
|
|
19
73
|
next.focus({ preventScroll: true });
|
|
20
74
|
};
|
|
21
|
-
/** Check if event key is ArrowUp */
|
|
22
|
-
const isArrowUpKey = (event) => event.key === 'ArrowUp';
|
|
23
|
-
/** Check if event key is ArrowDown */
|
|
24
|
-
const isArrowDownKey = (event) => event.key === 'ArrowDown';
|
|
25
|
-
/** Check if event key is Tab */
|
|
26
|
-
const isTabKey = (event) => event.key === 'Tab';
|
|
27
|
-
/** Check if event key is Escape */
|
|
28
|
-
const isEscKey = (event) => event.key === 'Escape';
|
|
29
75
|
|
|
30
76
|
const DEFAULT_GROUP_KEY = 'default';
|
|
31
77
|
const DEFAULT_GROUP = {
|
|
@@ -67,32 +113,7 @@ const Menu = ({ controlledBy, items, currentPath = [], onItemKeyDown }) => {
|
|
|
67
113
|
}, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": isActive(item) ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event), target: item.target }, item.label))))))))))));
|
|
68
114
|
};
|
|
69
115
|
|
|
70
|
-
var
|
|
71
|
-
(function (SearchEnv) {
|
|
72
|
-
SearchEnv["DEV"] = "dev";
|
|
73
|
-
SearchEnv["TEST"] = "test";
|
|
74
|
-
SearchEnv["PROD"] = "prod";
|
|
75
|
-
})(SearchEnv || (SearchEnv = {}));
|
|
76
|
-
const S3_SHOP_URL = {
|
|
77
|
-
dev: 'https://zanichelli-shop-dev.s3.eu-west-1.amazonaws.com',
|
|
78
|
-
test: 'https://zanichelli-shop-test.s3.eu-west-1.amazonaws.com',
|
|
79
|
-
prod: 'https://zanichelli-shop.s3.eu-west-1.amazonaws.com',
|
|
80
|
-
};
|
|
81
|
-
async function getSubjectsByArea(searchEnv) {
|
|
82
|
-
try {
|
|
83
|
-
const response = await fetch(`${S3_SHOP_URL[searchEnv]}/categories.json`);
|
|
84
|
-
if (!response.ok) {
|
|
85
|
-
throw new Error(`HTTP ${response.status}`);
|
|
86
|
-
}
|
|
87
|
-
return await response.json();
|
|
88
|
-
}
|
|
89
|
-
catch (err) {
|
|
90
|
-
console.error('Error fetching subjects:', err);
|
|
91
|
-
return {};
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
const menubarCss = ":host{position:relative;z-index:2;display:flex;width:100%;background-color:#fff;color:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}:host nav{width:100%}.shadow-wrapper{position:relative;z-index:1;display:flex;width:100%}.shadow-wrapper::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.width-limiter{position:relative;display:flex;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);margin:0 auto}.shadow-wrapper+.shadow-wrapper{z-index:0}.sub-menubar>ul{gap:28px}.width-limiter>ul,.sub-menubar>ul{position:relative;z-index:3;display:flex;width:100%;align-items:center;padding:0 var(--grid-margin);margin-right:auto;margin-left:auto;gap:20px}.shadow-wrapper>.width-limiter,.shadow-wrapper>ul{width:100%;max-width:var(--zanit-menubar-max-width, 1366px)}ul.menubar{padding-right:0}.menubar z-ghost-loading{display:block;width:120px;height:1.25rem}.menubar>li[role='separator']{width:1px;height:1.25rem;background-color:#000}.menubar-item{position:relative;display:flex;align-items:center;padding:14px 0;font-size:1rem;gap:8px;line-height:1.25rem}.menubar .menubar-item{text-transform:uppercase}.menubar-item [data-text]{display:flex;flex-direction:column}.menubar-item.active>[data-text],.menubar-item:hover>[data-text],.menubar-item:focus:focus-visible>[data-text]{font-weight:var(--font-bd)}.menubar-item>[data-text]::after{height:0;content:attr(data-text) / '';font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}.sub-menubar .menubar-item.active::after{position:absolute;z-index:-1;bottom:0;left:-4px;width:calc(100% + 8px);height:4px;background-color:var(--red500);content:''}zanit-search-form{margin-left:auto}";
|
|
116
|
+
const menubarCss = ":host{position:relative;z-index:2;display:flex;width:100%;background-color:#fff;color:var(--gray900);font-family:var(--font-family-sans)}:host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}ul{padding:0;margin:0;list-style:none}a{color:var(--gray900);cursor:pointer;text-decoration:none}button{all:unset;cursor:pointer}:host nav{width:100%}.shadow-wrapper{position:relative;z-index:1;display:flex;width:100%}.shadow-wrapper::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.width-limiter{position:relative;display:flex;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);margin:0 auto}.shadow-wrapper+.shadow-wrapper{z-index:0}.sub-menubar>ul{gap:28px}.width-limiter>ul,.sub-menubar>ul{position:relative;display:flex;width:100%;align-items:center;padding:0 var(--grid-margin);margin-right:auto;margin-left:auto;gap:20px}.shadow-wrapper>.width-limiter,.shadow-wrapper>ul{width:100%;max-width:var(--zanit-menubar-max-width, 1366px)}ul.menubar{padding-right:0}.menubar z-ghost-loading{display:block;width:120px;height:1.25rem}.menubar>li[role='separator']{width:1px;height:1.25rem;background-color:#000}.menubar-item{position:relative;display:flex;align-items:center;padding:14px 0;font-size:1rem;gap:8px;line-height:1.25rem}.menubar .menubar-item{text-transform:uppercase}.menubar-item [data-text]{display:flex;flex-direction:column}.menubar-item.active>[data-text],.menubar-item:hover>[data-text],.menubar-item:focus:focus-visible>[data-text]{font-weight:var(--font-bd)}.menubar-item>[data-text]::after{height:0;content:attr(data-text) / '';font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}.sub-menubar .menubar-item.active::after{position:absolute;z-index:-1;bottom:0;left:-4px;width:calc(100% + 8px);height:4px;background-color:var(--red500);content:''}zanit-search-form{margin-left:auto}";
|
|
96
117
|
|
|
97
118
|
const menuCss$1 = ".menu-wrapper{width:100%;background-color:#fff}.menu{position:relative;display:flex;width:100%;flex-direction:column;gap:32px 0}.menu .group{display:flex;flex-direction:column}.menu .group .group-name{border-bottom:1px solid currentcolor;margin-bottom:4px;color:var(--red500);font-size:0.875rem;font-weight:var(--font-md)}.menu .group .menu-list{display:flex;flex-direction:column;gap:8px}.menu .group .menu-list .menu-item{display:block;border-bottom:2px solid transparent;font-size:0.875rem;font-weight:var(--font-md)}.menu .menu-list .menu-item.active,.menu .menu-list .menu-item:hover{border-bottom-color:var(--red500)}.menu .group.highlight .menu-list .menu-item{font-size:1rem}@media (width >= 768px){.menu-wrapper{position:absolute;top:100%;left:0;display:flex;justify-content:center;box-shadow:var(--shadow-1)}.menu{display:grid;width:100%;max-width:var(--zanit-menubar-max-width, 1366px);padding:16px var(--grid-margin);gap:0 24px;grid-auto-columns:minmax(0, max-content);grid-auto-flow:column;grid-template-rows:minmax(0, max-content) max-content}.menu .group{display:grid;grid-row:1 / -1;grid-template-columns:1fr;grid-template-rows:subgrid}@supports not (grid-template-rows: subgrid){.menu .group{grid-template-rows:repeat(auto-fit, minmax(0, max-content))}}.menu .group .group-name{border:none;margin-bottom:16px}.menu .group .menu-list .menu-item{font-size:1rem}.menu .group.highlight .menu-list .menu-item{font-size:1.5rem}}";
|
|
98
119
|
|
|
@@ -117,10 +138,6 @@ const ZanitMenubar = class {
|
|
|
117
138
|
current = undefined;
|
|
118
139
|
/** Initial search query. */
|
|
119
140
|
searchQuery = undefined;
|
|
120
|
-
/** Environment for search suggestions */
|
|
121
|
-
searchEnv = SearchEnv.PROD;
|
|
122
|
-
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
123
|
-
searchArea;
|
|
124
141
|
timerId;
|
|
125
142
|
/** Setup the list of items. */
|
|
126
143
|
async parseData(data) {
|
|
@@ -472,13 +489,13 @@ const ZanitMenubar = class {
|
|
|
472
489
|
}
|
|
473
490
|
render() {
|
|
474
491
|
if (this.isMobile) {
|
|
475
|
-
return (index.h("zanit-mobile-menubar", { items: this.items, currentPath: this.currentPath, searchQuery: this.searchQuery, loading: this.loading
|
|
492
|
+
return (index.h("zanit-mobile-menubar", { items: this.items, currentPath: this.currentPath, searchQuery: this.searchQuery, loading: this.loading }));
|
|
476
493
|
}
|
|
477
494
|
return (index.h("nav", { "aria-label": "Zanichelli.it" }, index.h("div", { class: "shadow-wrapper" }, index.h("div", { class: "width-limiter" }, index.h("ul", { class: "menubar", role: "menubar", "aria-label": "Zanichelli.it" }, this.loading &&
|
|
478
495
|
[...new Array(4)].map((_, index$1) => (index.h(index.Fragment, null, index.h("li", { role: "none" }, index.h("div", { class: "menubar-item" }, index.h("z-ghost-loading", null))), index$1 < 3 && index.h("li", { role: "separator" })))), this.items?.map((item, index$1) => (index.h(index.Fragment, null, index.h("li", { role: "none" }, index.h("a", { class: {
|
|
479
496
|
'menubar-item': true,
|
|
480
497
|
'active': this.isActive(item),
|
|
481
|
-
}, href: item.href, id: item.id, role: "menuitem", tabIndex: -1, "aria-expanded": item.menuItems?.length ? (this.openMenu === item.id ? 'true' : 'false') : undefined, "aria-haspopup": item.menuItems?.length ? 'true' : 'false', "aria-current": this.current.includes(item.id) ? 'page' : 'false', onPointerOver: () => this.showMenu(item), onKeyDown: (event) => this.handleItemKeydown(event, item), target: item.target }, index.h("span", { "data-text": item.label }, item.label), item.menuItems?.length > 0 && (index.h("z-icon", { name: this.openMenu === item.id ? 'chevron-up' : 'chevron-down', width: "0.875rem", height: "0.875rem" })))), index$1 < this.items?.length - 1 && index.h("li", { role: "separator" }))))), index.h("zanit-search-form", { searchQuery: this.searchQuery,
|
|
498
|
+
}, href: item.href, id: item.id, role: "menuitem", tabIndex: -1, "aria-expanded": item.menuItems?.length ? (this.openMenu === item.id ? 'true' : 'false') : undefined, "aria-haspopup": item.menuItems?.length ? 'true' : 'false', "aria-current": this.current.includes(item.id) ? 'page' : 'false', onPointerOver: () => this.showMenu(item), onKeyDown: (event) => this.handleItemKeydown(event, item), target: item.target }, index.h("span", { "data-text": item.label }, item.label), item.menuItems?.length > 0 && (index.h("z-icon", { name: this.openMenu === item.id ? 'chevron-up' : 'chevron-down', width: "0.875rem", height: "0.875rem" })))), index$1 < this.items?.length - 1 && index.h("li", { role: "separator" }))))), index.h("zanit-search-form", { searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), this.items.map((item) => this.openMenu === item.id && (index.h(Menu, { controlledBy: item.id, items: item.menuItems, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleMenuKeydown(event) })))), this.items
|
|
482
499
|
?.filter((item) => this.isActive(item))
|
|
483
500
|
.map((item) => item.navbarItems?.length && (index.h("nav", { class: { 'sub-menubar': true, 'shadow-wrapper': true }, "aria-label": `Sezioni: ${item.label}` }, index.h("ul", { role: "menubar" }, item.navbarItems.map((subitem) => (index.h(index.Fragment, null, index.h("li", { role: "none" }, index.h("a", { class: {
|
|
484
501
|
'menubar-item': true,
|
|
@@ -511,10 +528,6 @@ const ZanitMobileMenubar = class {
|
|
|
511
528
|
searchQuery = undefined;
|
|
512
529
|
/** Whether the menubar is loading the data. */
|
|
513
530
|
loading = false;
|
|
514
|
-
/** Environment for search suggestions */
|
|
515
|
-
searchEnv = SearchEnv.PROD;
|
|
516
|
-
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
517
|
-
searchArea;
|
|
518
531
|
/** Last active item ID. */
|
|
519
532
|
lastCurrent = undefined;
|
|
520
533
|
parentItem = undefined;
|
|
@@ -644,7 +657,7 @@ const ZanitMobileMenubar = class {
|
|
|
644
657
|
this.open = false;
|
|
645
658
|
}
|
|
646
659
|
render() {
|
|
647
|
-
return (index.h("nav", { key: '
|
|
660
|
+
return (index.h("nav", { key: 'd2626f2d4b495a709d763767535149a289928780', "aria-label": "Zanichelli.it" }, index.h("button", { key: '9bef721633c0e50b0632a3570087dc5688111ac1', class: "burger-button", type: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "mobile-menu", "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: () => this.toggleMenu() }, index.h("z-icon", { key: '3a80e9e7a1a111b51ebec8cb788156b575b0dbdf', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), index.h("z-logo", { key: '8207e15841cae3814a341b5c0d196637e654425f', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), index.h("zanit-search-form", { key: '18677ed749261738894e83057ef37020f305ba3a', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) }), this.open && (index.h("ul", { key: 'f7106ae095e6c17bcf602e7b1104c6cd18639b30', class: "mobile-menu", role: "menubar" }, !this.loading && this.currentPath && this.currentPath.length > 0 && (index.h("li", { key: 'a2d02aa7496511366e19637676909ff64aaffc0b', role: "none" }, index.h("a", { key: '8e81f272f0c5568157bc67f7e3c62f476b9e9a76', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event), target: this.parentItem?.target }, index.h("z-icon", { key: 'b7dd58ad912541b2d9703a01e5c07aacfbb51f95', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), index.h("span", { key: '7755b2c9aa025e272ab2f65c3d6b3e45ca1feb4c' }, this.parentItem?.label || 'Home')))), this.loading ? (index.h("div", { class: "items-container", role: "none" }, [...new Array(4)].map(() => (index.h("li", { role: "none" }, index.h("div", { class: "menubar-item", role: "none" }, index.h("z-ghost-loading", null))))))) : this.menuType === 'menu' ? (index.h(Menu, { items: this.menuItems, controlledBy: this.parentItem?.id, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleItemKeydown(event) })) : (this.menuItems?.length > 0 && (index.h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (index.h("li", { role: "none" }, index.h("a", { class: {
|
|
648
661
|
'menu-item': this.menuType === 'menu',
|
|
649
662
|
'menubar-item': this.menuType === 'menubar',
|
|
650
663
|
}, href: item.href, id: item.id, role: "menuitem", "aria-current": this.lastCurrent === item.id ? 'page' : 'false', tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event), target: item.target }, index.h("span", { "data-text": item.label }, item.label))))))))))));
|
|
@@ -657,91 +670,7 @@ const ZanitMobileMenubar = class {
|
|
|
657
670
|
};
|
|
658
671
|
ZanitMobileMenubar.style = mobileMenubarCss + menuCss;
|
|
659
672
|
|
|
660
|
-
var
|
|
661
|
-
(function (AREA_LABELS) {
|
|
662
|
-
AREA_LABELS["SCUOLA"] = "Scuola";
|
|
663
|
-
AREA_LABELS["UNIVERSIT\u00C0"] = "Universit\u00E0";
|
|
664
|
-
AREA_LABELS["GIURIDICO"] = "Giuridico";
|
|
665
|
-
AREA_LABELS["DIZIONARI"] = "Dizionari";
|
|
666
|
-
AREA_LABELS["SAGGISTICA"] = "Saggistica";
|
|
667
|
-
})(AREA_LABELS || (AREA_LABELS = {}));
|
|
668
|
-
const AREA_ORDER = Object.keys(AREA_LABELS);
|
|
669
|
-
function buildSuggestions(query, subjectsByArea, selectedArea) {
|
|
670
|
-
const matchingSubjectAreas = findSubjectAreas(query, subjectsByArea);
|
|
671
|
-
const hasSubject = matchingSubjectAreas.length > 0;
|
|
672
|
-
const subject = hasSubject ? query.toUpperCase() : undefined;
|
|
673
|
-
const suggestions = [];
|
|
674
|
-
if (selectedArea)
|
|
675
|
-
suggestions.push(buildWordSuggestion(query, selectedArea));
|
|
676
|
-
suggestions.push(buildWordSuggestion(query));
|
|
677
|
-
if (hasSubject) {
|
|
678
|
-
if (selectedArea) {
|
|
679
|
-
const orderedSubjectAreas = [
|
|
680
|
-
...matchingSubjectAreas.filter((area) => area === selectedArea),
|
|
681
|
-
...matchingSubjectAreas
|
|
682
|
-
.filter((area) => area !== selectedArea)
|
|
683
|
-
.sort((a, b) => getAreaOrder(a) - getAreaOrder(b)),
|
|
684
|
-
];
|
|
685
|
-
orderedSubjectAreas.forEach((area) => suggestions.push(buildSubjectSuggestion(query, area, subject)));
|
|
686
|
-
}
|
|
687
|
-
else {
|
|
688
|
-
matchingSubjectAreas
|
|
689
|
-
.sort((a, b) => getAreaOrder(a) - getAreaOrder(b))
|
|
690
|
-
.forEach((subjectArea) => suggestions.push(buildSubjectSuggestion(query, subjectArea, subject)));
|
|
691
|
-
}
|
|
692
|
-
}
|
|
693
|
-
return suggestions;
|
|
694
|
-
}
|
|
695
|
-
const buildWordSuggestion = (user_query, area) => {
|
|
696
|
-
return {
|
|
697
|
-
id: buildId(`word-${user_query}-${area}`),
|
|
698
|
-
label: buildLabel(user_query, area, false, false),
|
|
699
|
-
html_label: buildLabel(user_query, area, false, true),
|
|
700
|
-
url: buildUrl({ q: user_query, ...(area ? { area } : {}), user_query }),
|
|
701
|
-
...buildDetail(user_query, user_query, area),
|
|
702
|
-
};
|
|
703
|
-
};
|
|
704
|
-
const buildSubjectSuggestion = (user_query, area, subject) => {
|
|
705
|
-
return {
|
|
706
|
-
id: buildId(`subj-${user_query}-${area}-${subject}`),
|
|
707
|
-
label: buildLabel(user_query, area, true, false),
|
|
708
|
-
html_label: buildLabel(user_query, area, true, true),
|
|
709
|
-
url: buildUrl({ area, materia: subject, user_query }),
|
|
710
|
-
...buildDetail(user_query, undefined, area, subject),
|
|
711
|
-
};
|
|
712
|
-
};
|
|
713
|
-
const buildId = (string) => string
|
|
714
|
-
.split('')
|
|
715
|
-
.map((c) => c.charCodeAt(0).toString(16))
|
|
716
|
-
.join('');
|
|
717
|
-
const buildUrl = (params) => {
|
|
718
|
-
return `ricerca?${new URLSearchParams(params).toString()}`;
|
|
719
|
-
};
|
|
720
|
-
const buildDetail = (user_query, query, area, subject) => ({
|
|
721
|
-
user_query,
|
|
722
|
-
...(query ? { query } : {}),
|
|
723
|
-
...(area ? { area } : {}),
|
|
724
|
-
...(subject ? { subject } : {}),
|
|
725
|
-
});
|
|
726
|
-
const buildLabel = (user_query, area, isSubject = false, isHtml = false) => {
|
|
727
|
-
const openStrong = isHtml ? `<strong>` : ``;
|
|
728
|
-
const closeStrong = isHtml ? `</strong>` : ``;
|
|
729
|
-
return `Cerca la ${isSubject ? `materia` : `parola`} ${openStrong}${user_query}${closeStrong} ${area ? `nel catalogo ${openStrong}${AREA_LABELS[area] ?? area}${closeStrong}` : `in tutto il sito`}`;
|
|
730
|
-
};
|
|
731
|
-
function findSubjectAreas(query, subjectsByArea) {
|
|
732
|
-
const cleanedQuery = cleanSearch(query);
|
|
733
|
-
return Object.entries(subjectsByArea)
|
|
734
|
-
.filter(([, subjects]) => subjects.some((subject) => subject.toLowerCase() === cleanedQuery))
|
|
735
|
-
.map(([area]) => area);
|
|
736
|
-
}
|
|
737
|
-
/** Clear search string: lowercase, remove multiple spaces */
|
|
738
|
-
const cleanSearch = (s) => s.toLowerCase().replace(/\s+/g, ' ');
|
|
739
|
-
const getAreaOrder = (area) => {
|
|
740
|
-
const index = AREA_ORDER.indexOf(area);
|
|
741
|
-
return index >= 0 ? index : 100;
|
|
742
|
-
};
|
|
743
|
-
|
|
744
|
-
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);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;width:100vw;margin-left:-50vw;left:50%;top:48px;background:#fff;box-shadow:var(--shadow-1);border-top:1px solid var(--gray200)}.suggestions-wrapper.hidden{display:none}.suggestions{display:flex;padding:var(--space-unit);flex-direction:column;align-items:stretch;width:100%;margin:0 auto}.suggestion{cursor:pointer;padding:calc(var(--space-unit) * 0.75) var(--space-unit);font-size:1rem;line-height:1.5rem}.suggestion strong{font-size:1.125rem}.suggestion:hover,.suggestion[aria-selected='true']{background:var(--gray100)}@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{padding:var(--space-unit) calc(var(--space-unit) * 3);max-width:1366px}}";
|
|
673
|
+
const searchFormCss = ":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}.searchbar{--searchbar-button-x-padding:14px;--searchbar-button-icon-width:1.75rem;--closed-searchbar-width:calc((var(--searchbar-button-x-padding) * 2) + var(--searchbar-button-icon-width) + 1px);position:absolute;top:0;right:0;display:flex;width:var(--closed-searchbar-width);justify-content:flex-end;transition:width 0.4s ease-in-out}.searchbar.searchbar-open{width:100%}.searchbar .input-wrapper{display:flex;overflow:hidden;width:100%;align-items:center;padding:8px;padding-left:var(--grid-margin);background-color:#fff;gap:8px;transition-duration:0.4s;transition-property:padding-right, padding-left, width;transition-timing-function:ease-in-out}.searchbar:not(.searchbar-open) .input-wrapper{overflow:hidden;width:0;padding:0}.searchbar button[type='reset']{--z-icon-width:1rem;--z-icon-height:1rem;display:flex;align-items:center;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding:0;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar.searchbar-open input:first-child{padding-left:4px;margin-left:-4px;}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{display:flex;align-items:center;justify-content:center;padding:10px var(--searchbar-button-x-padding);border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar .searchbar-button:focus-visible{z-index:1}.searchbar-button z-icon{--z-icon-width:var(--searchbar-button-icon-width);--z-icon-height:var(--searchbar-button-icon-width)}@media (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}@media (width >= 768px){.searchbar{--searchbar-button-x-padding:16px;--searchbar-button-icon-width:2rem}.searchbar .input-wrapper{gap:14px}.searchbar button[type='reset']{--z-icon-width:1.5rem;--z-icon-height:1.5rem}.searchbar input,.searchbar .searchbar-button{font-size:1.5rem}.searchbar .searchbar-button{padding:8px var(--searchbar-button-x-padding)}}@media (width >= 1152px){.searchbar{--closed-searchbar-width:190px}}@media (width >= 1366px){.searchbar .searchbar-button{border-right:1px solid #000}}";
|
|
745
674
|
|
|
746
675
|
const ZanitSearchForm = class {
|
|
747
676
|
constructor(hostRef) {
|
|
@@ -750,77 +679,44 @@ const ZanitSearchForm = class {
|
|
|
750
679
|
this.resetSearch = index.createEvent(this, "resetSearch");
|
|
751
680
|
}
|
|
752
681
|
formElement;
|
|
753
|
-
subjectsByArea = {};
|
|
754
|
-
timer;
|
|
755
682
|
get host() { return index.getElement(this); }
|
|
756
683
|
/** Indicates whether the searchbar is visible and usable. */
|
|
757
684
|
showSearchbar = false;
|
|
758
685
|
/** Search query to apply. */
|
|
759
686
|
_searchQuery = undefined;
|
|
760
|
-
/** Search suggestions to show in the autocomplete dropdown. */
|
|
761
|
-
suggestions = [];
|
|
762
|
-
/** Active suggestion - used for keyboard navigation */
|
|
763
|
-
activeSuggestion = '';
|
|
764
|
-
/** Show suggestions list */
|
|
765
|
-
showSuggestions = false;
|
|
766
687
|
/** Initial search query */
|
|
767
688
|
searchQuery = undefined;
|
|
768
|
-
/** Environment for search suggestions */
|
|
769
|
-
searchEnv = SearchEnv.PROD;
|
|
770
|
-
/** Search area (e.g. "SCUOLA", "UNIVERSITÀ", "DIZIONARI"). */
|
|
771
|
-
searchArea;
|
|
772
689
|
onSearchQueryChange() {
|
|
773
690
|
this._searchQuery = this.searchQuery;
|
|
774
691
|
if (this.searchQuery) {
|
|
775
692
|
this.openSearchbar();
|
|
776
693
|
}
|
|
777
|
-
this.resetSuggestions();
|
|
778
|
-
}
|
|
779
|
-
onSearchAreaChange() {
|
|
780
|
-
this.resetSuggestions();
|
|
781
|
-
}
|
|
782
|
-
onShowSearchbarChange() {
|
|
783
|
-
if (!this.showSearchbar) {
|
|
784
|
-
this.showSuggestions = false;
|
|
785
|
-
}
|
|
786
|
-
}
|
|
787
|
-
onShowSuggestionsChange() {
|
|
788
|
-
this.activeSuggestion = '';
|
|
789
694
|
}
|
|
790
695
|
/** Emitted on search form submission. */
|
|
791
696
|
search;
|
|
792
697
|
resetSearch;
|
|
793
698
|
async connectedCallback() {
|
|
794
|
-
this.subjectsByArea = await getSubjectsByArea(this.searchEnv);
|
|
795
699
|
this.showSearchbar = !!this.searchQuery;
|
|
796
700
|
this._searchQuery = this.searchQuery;
|
|
797
701
|
}
|
|
798
702
|
/** Close open searchbar when clicking outside. */
|
|
799
703
|
handleOutsideClick(event) {
|
|
800
|
-
if (this.showSearchbar && this.
|
|
704
|
+
if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {
|
|
801
705
|
this.showSearchbar = false;
|
|
802
706
|
}
|
|
803
707
|
}
|
|
804
|
-
/** Close the
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
/** Close the searchbar/suggestions when pressing Tab. */
|
|
817
|
-
handleTab(event) {
|
|
818
|
-
if (!isTabKey(event)) {
|
|
819
|
-
return;
|
|
820
|
-
}
|
|
821
|
-
this.showSuggestions = false;
|
|
822
|
-
if (!containsTarget(this.host, event)) {
|
|
823
|
-
this.showSearchbar = false;
|
|
708
|
+
/** Close the menu when pressing Escape or Tab. */
|
|
709
|
+
handleKeydown(event) {
|
|
710
|
+
switch (event.key) {
|
|
711
|
+
case 'Escape':
|
|
712
|
+
this.showSearchbar = false;
|
|
713
|
+
break;
|
|
714
|
+
case 'Tab':
|
|
715
|
+
if (containsTarget(this.host, event)) {
|
|
716
|
+
break;
|
|
717
|
+
}
|
|
718
|
+
this.showSearchbar = false;
|
|
719
|
+
break;
|
|
824
720
|
}
|
|
825
721
|
}
|
|
826
722
|
openSearchbar() {
|
|
@@ -834,121 +730,38 @@ const ZanitSearchForm = class {
|
|
|
834
730
|
this.searchQuery = undefined;
|
|
835
731
|
this.resetSearch.emit();
|
|
836
732
|
}
|
|
837
|
-
resetSuggestions() {
|
|
838
|
-
this.suggestions = [];
|
|
839
|
-
this.showSuggestions = false;
|
|
840
|
-
}
|
|
841
733
|
handleInputChange(event) {
|
|
842
734
|
this._searchQuery = event.target.value;
|
|
843
735
|
if (!this._searchQuery) {
|
|
844
736
|
this.searchQuery = undefined;
|
|
845
737
|
}
|
|
846
|
-
this.updateSuggestions();
|
|
847
|
-
}
|
|
848
|
-
updateSuggestions() {
|
|
849
|
-
clearTimeout(this.timer);
|
|
850
|
-
const query = (this._searchQuery || '').trim();
|
|
851
|
-
if (query.length < 3) {
|
|
852
|
-
this.resetSuggestions();
|
|
853
|
-
return;
|
|
854
|
-
}
|
|
855
|
-
this.timer = setTimeout(() => {
|
|
856
|
-
this.resetSuggestions();
|
|
857
|
-
this.suggestions = buildSuggestions(query, this.subjectsByArea, this.searchArea?.toUpperCase());
|
|
858
|
-
this.showSuggestions = true;
|
|
859
|
-
}, 300);
|
|
860
738
|
}
|
|
861
739
|
onSearchSubmit(event) {
|
|
862
740
|
event.preventDefault();
|
|
863
741
|
if (!this._searchQuery) {
|
|
864
742
|
return;
|
|
865
743
|
}
|
|
866
|
-
if (this.activeSuggestion) {
|
|
867
|
-
const suggestion = this.suggestions.find((s) => s.id === this.activeSuggestion);
|
|
868
|
-
if (suggestion) {
|
|
869
|
-
this.submitSuggestionSearch(suggestion);
|
|
870
|
-
this.showSuggestions = false;
|
|
871
|
-
return;
|
|
872
|
-
}
|
|
873
|
-
}
|
|
874
744
|
this.showSearchbar = false;
|
|
875
|
-
const searchEv = this.search.emit({ query: this._searchQuery
|
|
745
|
+
const searchEv = this.search.emit({ query: this._searchQuery });
|
|
876
746
|
// do not submit the form if the event default behavior was prevented
|
|
877
747
|
if (searchEv.defaultPrevented) {
|
|
878
748
|
return;
|
|
879
749
|
}
|
|
880
750
|
this.formElement.submit();
|
|
881
751
|
}
|
|
882
|
-
submitSuggestionSearch(suggestion) {
|
|
883
|
-
const ev = this.search.emit({
|
|
884
|
-
user_query: suggestion.user_query,
|
|
885
|
-
query: suggestion.query,
|
|
886
|
-
area: suggestion.area,
|
|
887
|
-
subject: suggestion.subject,
|
|
888
|
-
});
|
|
889
|
-
if (!ev.defaultPrevented) {
|
|
890
|
-
window.location.href = suggestion.url;
|
|
891
|
-
}
|
|
892
|
-
}
|
|
893
|
-
handleSuggestionsNav(event) {
|
|
894
|
-
if (!isArrowDownKey(event) && !isArrowUpKey(event)) {
|
|
895
|
-
return;
|
|
896
|
-
}
|
|
897
|
-
if (!this.suggestions.length) {
|
|
898
|
-
return;
|
|
899
|
-
}
|
|
900
|
-
const options = this.suggestions.map((o) => o.id);
|
|
901
|
-
if (!options.length) {
|
|
902
|
-
return;
|
|
903
|
-
}
|
|
904
|
-
event.preventDefault();
|
|
905
|
-
event.stopPropagation();
|
|
906
|
-
if (!this.showSuggestions) {
|
|
907
|
-
this.showSuggestions = true;
|
|
908
|
-
}
|
|
909
|
-
let nextId = null;
|
|
910
|
-
const firstId = options[0];
|
|
911
|
-
const lastId = options[options.length - 1];
|
|
912
|
-
const currOption = options.indexOf(this.activeSuggestion);
|
|
913
|
-
if (currOption < 0) {
|
|
914
|
-
nextId = isArrowDownKey(event) ? firstId : lastId;
|
|
915
|
-
}
|
|
916
|
-
else {
|
|
917
|
-
if (isArrowDownKey(event)) {
|
|
918
|
-
nextId = options[currOption + 1] || lastId;
|
|
919
|
-
}
|
|
920
|
-
else {
|
|
921
|
-
nextId = options[currOption - 1] || firstId;
|
|
922
|
-
}
|
|
923
|
-
}
|
|
924
|
-
this.activeSuggestion = nextId;
|
|
925
|
-
}
|
|
926
|
-
renderSuggestions() {
|
|
927
|
-
return (index.h("div", { class: { 'suggestions-wrapper': true, 'hidden': !this.showSuggestions || !this.suggestions.length }, onPointerOver: (e) => e.preventDefault() }, index.h("div", { id: "search-suggestions", class: "suggestions", role: "listbox", "aria-label": "Seleziona tra i suggerimenti" }, this.suggestions.map((suggestion, k) => {
|
|
928
|
-
return (index.h("span", { key: k, innerHTML: suggestion.html_label, id: suggestion.id, class: "suggestion", role: "option", "aria-label": suggestion.label, "aria-selected": this.activeSuggestion === suggestion.id ? 'true' : undefined, onClick: () => this.submitSuggestionSearch(suggestion) }));
|
|
929
|
-
}))));
|
|
930
|
-
}
|
|
931
752
|
render() {
|
|
932
|
-
return (index.h(
|
|
933
|
-
// INFO: prevent ESC from clearing input
|
|
934
|
-
if (isEscKey(e)) {
|
|
935
|
-
e.preventDefault();
|
|
936
|
-
}
|
|
937
|
-
this.handleSuggestionsNav(e);
|
|
938
|
-
} })), index.h("button", { key: '836604e75ca90d451cba93236509f20a3a22cf16', class: "searchbar-button", "aria-label": this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca', "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : index.h("span", { class: "searchbar-button-label" }, "Cerca"), index.h("z-icon", { key: '1616128d97c04a1e4768f163fcc20a21664daca4', name: "search" }))), this.renderSuggestions()));
|
|
753
|
+
return (index.h("form", { key: 'fe6f284342dbd746e36d5cb3c5707dcce305c161', class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca nel sito", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, index.h("div", { key: '593b2cccc1d01244e4d9dbf5a1cc90cf1e9075f2', class: "input-wrapper", role: "none" }, this.searchQuery && (index.h("button", { key: '2dbf7c03d16d83cc75e10f6931c2f55131794ca3', type: "reset", "aria-label": "Svuota campo di ricerca", disabled: !this.showSearchbar, "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 }, index.h("z-icon", { key: 'dd4efe874001e675b31317e914b8c0e95dad4a0b', name: "multiply-circled" }))), index.h("input", { key: '8030e45506f54d7478658829dcea62953b0b4659', id: "searchbar-input", name: "q", type: "search", disabled: !this.showSearchbar, placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), value: this.searchQuery, required: true, "aria-label": "Cerca per parola chiave o ISBN", "aria-hidden": !this.showSearchbar ? 'true' : undefined, tabIndex: !this.showSearchbar ? -1 : 0 })), index.h("button", { key: 'f9f28df512a832c6ee1327e5dbeb5bd4648e44b7', class: "searchbar-button", "aria-label": this.showSearchbar ? 'Esegui ricerca' : 'Apri il campo di ricerca', "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : index.h("span", { class: "searchbar-button-label" }, "Cerca"), index.h("z-icon", { key: '2b0f78db129b77e011be643da542f392d521dfc8', name: "search" }))));
|
|
939
754
|
}
|
|
940
755
|
static get watchers() { return {
|
|
941
|
-
"searchQuery": ["onSearchQueryChange"]
|
|
942
|
-
"searchArea": ["onSearchAreaChange"],
|
|
943
|
-
"showSearchbar": ["onShowSearchbarChange"],
|
|
944
|
-
"showSuggestions": ["onShowSuggestionsChange"]
|
|
756
|
+
"searchQuery": ["onSearchQueryChange"]
|
|
945
757
|
}; }
|
|
946
758
|
};
|
|
947
759
|
ZanitSearchForm.style = searchFormCss;
|
|
948
760
|
|
|
761
|
+
exports.zanit_back_to_top = ZanitBackTop;
|
|
949
762
|
exports.zanit_menubar = ZanitMenubar;
|
|
950
763
|
exports.zanit_mobile_menubar = ZanitMobileMenubar;
|
|
951
764
|
exports.zanit_search_form = ZanitSearchForm;
|
|
952
|
-
//# sourceMappingURL=zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map
|
|
765
|
+
//# sourceMappingURL=zanit-back-to-top.zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map
|
|
953
766
|
|
|
954
|
-
//# sourceMappingURL=zanit-
|
|
767
|
+
//# sourceMappingURL=zanit-back-to-top_4.cjs.entry.js.map
|