@zanichelli/zanichelli-it-frontend-kit 0.1.4 → 0.1.6
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-C45Wd3rZ.js → index-xkrZykI_.js} +2 -5
- package/dist/cjs/index-xkrZykI_.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-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map +1 -1
- package/dist/cjs/zanit-menubar_3.cjs.entry.js +33 -30
- package/dist/cjs/zanit-menubar_3.cjs.entry.js.map +1 -1
- package/dist/collection/components/menubar/menu/menu.js +1 -1
- package/dist/collection/components/menubar/menu/menu.js.map +1 -1
- package/dist/collection/components/menubar/menubar.js +10 -28
- package/dist/collection/components/menubar/menubar.js.map +1 -1
- package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js +10 -3
- package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js.map +1 -1
- package/dist/collection/components/menubar/search-form/search-form.css +2 -2
- package/dist/collection/components/menubar/search-form/search-form.js +9 -17
- package/dist/collection/components/menubar/search-form/search-form.js.map +1 -1
- package/dist/collection/utils/types.js.map +1 -1
- package/dist/components/index.js +0 -3
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-Cphl7FvH.js → p-CiHl-h3q.js} +14 -21
- package/dist/components/p-CiHl-h3q.js.map +1 -0
- package/dist/components/{p-BhOHf3Mq.js → p-DGmSfTXD.js} +14 -7
- package/dist/components/p-DGmSfTXD.js.map +1 -0
- package/dist/components/zanit-menubar.js +12 -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-BGwuI2U_.js → index-BWVQ0LD4.js} +2 -5
- package/dist/esm/index-BWVQ0LD4.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-menubar.zanit-mobile-menubar.zanit-search-form.entry.js.map +1 -1
- package/dist/esm/zanit-menubar_3.entry.js +33 -30
- package/dist/esm/zanit-menubar_3.entry.js.map +1 -1
- package/dist/types/components/menubar/menubar.d.ts +4 -5
- package/dist/types/components/menubar/search-form/search-form.d.ts +1 -2
- package/dist/types/components.d.ts +0 -10
- package/dist/types/utils/types.d.ts +1 -0
- package/{www/build/p-BGwuI2U_.js → dist/zanichelli-it-frontend-kit/p-BWVQ0LD4.js} +2 -2
- package/dist/zanichelli-it-frontend-kit/p-BWVQ0LD4.js.map +1 -0
- package/dist/zanichelli-it-frontend-kit/p-eece6410.entry.js +2 -0
- package/dist/zanichelli-it-frontend-kit/p-eece6410.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-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +1 -1
- package/package.json +1 -1
- package/{dist/zanichelli-it-frontend-kit/p-BGwuI2U_.js → www/build/p-BWVQ0LD4.js} +2 -2
- package/www/build/p-BWVQ0LD4.js.map +1 -0
- package/www/build/p-eece6410.entry.js +2 -0
- package/www/build/p-eece6410.entry.js.map +1 -0
- package/www/build/p-fedb810b.js +2 -0
- package/www/build/zanichelli-it-frontend-kit.esm.js +1 -1
- package/www/build/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +1 -1
- package/www/index.html +1 -1
- package/dist/cjs/index-C45Wd3rZ.js.map +0 -1
- package/dist/components/p-BhOHf3Mq.js.map +0 -1
- package/dist/components/p-Cphl7FvH.js.map +0 -1
- package/dist/esm/index-BGwuI2U_.js.map +0 -1
- package/dist/zanichelli-it-frontend-kit/p-60e8a466.entry.js +0 -2
- package/dist/zanichelli-it-frontend-kit/p-60e8a466.entry.js.map +0 -1
- package/dist/zanichelli-it-frontend-kit/p-BGwuI2U_.js.map +0 -1
- package/www/build/p-13e1f7ad.js +0 -2
- package/www/build/p-60e8a466.entry.js +0 -2
- package/www/build/p-60e8a466.entry.js.map +0 -1
- package/www/build/p-BGwuI2U_.js.map +0 -1
|
@@ -17,7 +17,7 @@ const moveFocus = (current, next) => {
|
|
|
17
17
|
next.focus();
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
const searchFormCss = ":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}@media (width < 768px){.searchbar{display:flex;align-items:center;border:1px solid #000;border-radius:4px}.searchbar>*:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}.searchbar button[type='reset']{display:flex;padding:0 0 0 8px;cursor:pointer}.searchbar input{width:100%;height:100%;padding:4px 8px;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{padding:4px 8px;border-left:1px solid #000;background:var(--zanit-accent-color);border-bottom-right-radius:3px;border-top-right-radius:3px}.searchbar input:focus:focus-visible,.searchbar .searchbar-button:focus:focus-visible{z-index:1}}@media (width >= 768px){.searchbar{display:flex;font-size:1.5rem}.searchbar.searchbar-open{position:absolute;width:100%;height:100%;inset:0}.searchbar .input-wrapper{display:none;width:100%;align-items:center;padding:0 0 0 var(--grid-margin);background-color:#fff;gap:
|
|
20
|
+
const searchFormCss = ":host,*,::before,::after{box-sizing:border-box}*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}button{all:unset;cursor:pointer}@media (width < 768px){.searchbar{display:flex;align-items:center;border:1px solid #000;border-radius:4px}.searchbar>*:first-child{border-bottom-left-radius:3px;border-top-left-radius:3px}.searchbar button[type='reset']{display:flex;padding:0 0 0 8px;cursor:pointer}.searchbar input{width:100%;height:100%;padding:4px 8px;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:1rem}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{padding:4px 8px;border-left:1px solid #000;background:var(--zanit-accent-color);border-bottom-right-radius:3px;border-top-right-radius:3px}.searchbar input:focus:focus-visible,.searchbar .searchbar-button:focus:focus-visible{z-index:1}}@media (width >= 768px){.searchbar{display:flex;font-size:1.5rem}.searchbar.searchbar-open{position:absolute;width:100%;height:100%;inset:0}.searchbar .input-wrapper{display:none;width:100%;align-items:center;padding:0 0 0 var(--grid-margin);background-color:#fff;gap:6px;}.searchbar .input-wrapper:not(.hide){display:flex}.searchbar button[type='reset']{display:flex;align-items:center;border-radius:4px;cursor:pointer}.searchbar input{z-index:1;width:100%;height:100%;padding:8px;border:none;background-color:#fff;font-family:var(--font-family-sans);font-size:inherit}.searchbar input[type='search']::-webkit-search-cancel-button,.searchbar input[type='search']::-webkit-search-decoration{appearance:none}.searchbar input::placeholder{color:var(--gray500)}.searchbar .searchbar-button{display:flex;align-items:center;padding:8px 16px;border-right:1px solid #000;border-left:1px solid #000;background:var(--zanit-accent-color);font-family:inherit;font-size:inherit;gap:64px;line-height:1}.searchbar input:focus:focus-visible,.searchbar .searchbar-button:focus:focus-visible{z-index:1}}@media (width >= 768px) and (width < 1152px){.searchbar .searchbar-button>.searchbar-button-label{display:none}}";
|
|
21
21
|
|
|
22
22
|
const ZanitSearchForm = /*@__PURE__*/ proxyCustomElement(class ZanitSearchForm extends H {
|
|
23
23
|
constructor() {
|
|
@@ -39,21 +39,9 @@ const ZanitSearchForm = /*@__PURE__*/ proxyCustomElement(class ZanitSearchForm e
|
|
|
39
39
|
onSearchQueryChange() {
|
|
40
40
|
this._searchQuery = this.searchQuery;
|
|
41
41
|
if (this.searchQuery) {
|
|
42
|
-
this.
|
|
42
|
+
this.openSearchbar();
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
|
-
/** Focus searchbar input when it becomes visible. */
|
|
46
|
-
onShowSearchbar() {
|
|
47
|
-
if (!this.showSearchbar) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
setTimeout(() => {
|
|
51
|
-
const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input');
|
|
52
|
-
if (this.showSearchbar && !this.searchQuery) {
|
|
53
|
-
searchbarInput.focus();
|
|
54
|
-
}
|
|
55
|
-
}, 100);
|
|
56
|
-
}
|
|
57
45
|
/** Emitted on search form submission. */
|
|
58
46
|
search;
|
|
59
47
|
resetSearch;
|
|
@@ -71,6 +59,13 @@ const ZanitSearchForm = /*@__PURE__*/ proxyCustomElement(class ZanitSearchForm e
|
|
|
71
59
|
this.showSearchbar = false;
|
|
72
60
|
}
|
|
73
61
|
}
|
|
62
|
+
openSearchbar() {
|
|
63
|
+
this.showSearchbar = true;
|
|
64
|
+
setTimeout(() => {
|
|
65
|
+
const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input');
|
|
66
|
+
searchbarInput.focus();
|
|
67
|
+
}, 100);
|
|
68
|
+
}
|
|
74
69
|
resetSearchQuery() {
|
|
75
70
|
this.searchQuery = undefined;
|
|
76
71
|
this.resetSearch.emit();
|
|
@@ -98,11 +93,10 @@ const ZanitSearchForm = /*@__PURE__*/ proxyCustomElement(class ZanitSearchForm e
|
|
|
98
93
|
if (this.isMobile) {
|
|
99
94
|
return (h("form", { class: "searchbar", ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, this.searchQuery && (h("button", { type: "reset", "aria-label": "Svuota campo di ricerca" }, h("z-icon", { name: "multiply-circled", width: "1rem", height: "1rem" }))), h("input", { id: "searchbar-input", name: "q", type: "search", placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), value: this.searchQuery, required: true }), h("button", { class: "searchbar-button", "aria-controls": "searchbar-input", "aria-label": "Cerca", type: "submit" }, h("z-icon", { name: "search", width: "1.25rem", height: "1.25rem" }))));
|
|
100
95
|
}
|
|
101
|
-
return (h("form", { class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, h("div", { class: { 'hide': !this.showSearchbar, 'input-wrapper': true }, role: "none" }, this.searchQuery && (h("button", { type: "reset", "aria-label": "Svuota campo di ricerca" }, h("z-icon", { name: "multiply-circled", width: "1.5rem", height: "1.5rem" }))), h("input", { id: "searchbar-input", name: "q", type: "search", placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), value: this.searchQuery, required: true })), h("button", { class: "searchbar-button", "aria-label": "Cerca", "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () =>
|
|
96
|
+
return (h("form", { class: { 'searchbar': true, 'searchbar-open': this.showSearchbar }, ref: (el) => (this.formElement = el), role: "search", "aria-label": "Cerca", method: "get", action: "/ricerca", onSubmit: (event) => this.onSearchSubmit(event), onReset: () => this.resetSearchQuery() }, h("div", { class: { 'hide': !this.showSearchbar, 'input-wrapper': true }, role: "none" }, this.searchQuery && (h("button", { type: "reset", "aria-label": "Svuota campo di ricerca" }, h("z-icon", { name: "multiply-circled", width: "1.5rem", height: "1.5rem" }))), h("input", { id: "searchbar-input", name: "q", type: "search", placeholder: "Cerca per parola chiave o ISBN", onInput: (event) => this.handleInputChange(event), value: this.searchQuery, required: true })), h("button", { class: "searchbar-button", "aria-label": "Cerca", "aria-controls": "searchbar-input", type: this.showSearchbar ? 'submit' : 'button', onClick: () => this.openSearchbar() }, this.showSearchbar ? null : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { name: "search", width: "2rem", height: "2rem" }))));
|
|
102
97
|
}
|
|
103
98
|
static get watchers() { return {
|
|
104
|
-
"searchQuery": ["onSearchQueryChange"]
|
|
105
|
-
"showSearchbar": ["onShowSearchbar"]
|
|
99
|
+
"searchQuery": ["onSearchQueryChange"]
|
|
106
100
|
}; }
|
|
107
101
|
static get style() { return searchFormCss; }
|
|
108
102
|
}, [1, "zanit-search-form", {
|
|
@@ -111,8 +105,7 @@ const ZanitSearchForm = /*@__PURE__*/ proxyCustomElement(class ZanitSearchForm e
|
|
|
111
105
|
"showSearchbar": [32],
|
|
112
106
|
"_searchQuery": [32]
|
|
113
107
|
}, [[5, "click", "handleOutsideClick"]], {
|
|
114
|
-
"searchQuery": ["onSearchQueryChange"]
|
|
115
|
-
"showSearchbar": ["onShowSearchbar"]
|
|
108
|
+
"searchQuery": ["onSearchQueryChange"]
|
|
116
109
|
}]);
|
|
117
110
|
function defineCustomElement() {
|
|
118
111
|
if (typeof customElements === "undefined") {
|
|
@@ -130,6 +123,6 @@ function defineCustomElement() {
|
|
|
130
123
|
defineCustomElement();
|
|
131
124
|
|
|
132
125
|
export { ZanitSearchForm as Z, containsTarget as c, defineCustomElement as d, moveFocus as m };
|
|
133
|
-
//# sourceMappingURL=p-
|
|
126
|
+
//# sourceMappingURL=p-CiHl-h3q.js.map
|
|
134
127
|
|
|
135
|
-
//# sourceMappingURL=p-
|
|
128
|
+
//# sourceMappingURL=p-CiHl-h3q.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-CiHl-h3q.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/utils.ts","src/components/menubar/search-form/search-form.css?tag=zanit-search-form&encapsulation=shadow","src/components/menubar/search-form/search-form.tsx"],"sourcesContent":["/**\n * Check if an element contains an event target by checking its composedPath.\n * Useful when an event target may come from a component's shadow DOM.\n */\nexport const containsTarget = (ancestor: HTMLElement, event: Event) => {\n return event\n .composedPath()\n .filter((el) => el !== document && el !== window.window)\n .some((el) => ancestor.contains(el as HTMLElement));\n};\n\n/** Move the focus to `next` element, set tabindex to 0 for `next` and -1 to `current`. */\nexport const moveFocus = (current: HTMLElement, next: HTMLElement) => {\n current.tabIndex = -1;\n next.tabIndex = 0;\n next.focus();\n};\n",":host,\n*,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nbutton {\n all: unset;\n cursor: pointer;\n}\n\n@media (width < 768px) {\n .searchbar {\n display: flex;\n align-items: center;\n border: 1px solid #000;\n border-radius: 4px;\n }\n\n .searchbar > *:first-child {\n /* To have a seamless appearance of the border radius of an internal child element nested within a parent element with rounded borders, we need to subtract the parent's border thickness from the child's border radius. Inner Radius = Outer Radius - Border Thickness */\n border-bottom-left-radius: 3px;\n border-top-left-radius: 3px;\n }\n\n .searchbar button[type='reset'] {\n display: flex;\n padding: 0 0 0 8px;\n cursor: pointer;\n }\n\n .searchbar input {\n width: 100%;\n height: 100%;\n padding: 4px 8px;\n border: none;\n background-color: #fff;\n font-family: var(--font-family-sans);\n font-size: 1rem;\n }\n\n .searchbar input[type='search']::-webkit-search-cancel-button,\n .searchbar input[type='search']::-webkit-search-decoration {\n appearance: none;\n }\n\n .searchbar input::placeholder {\n color: var(--gray500);\n }\n\n .searchbar .searchbar-button {\n padding: 4px 8px;\n border-left: 1px solid #000;\n background: var(--zanit-accent-color);\n border-bottom-right-radius: 3px;\n border-top-right-radius: 3px;\n }\n\n .searchbar input:focus:focus-visible,\n .searchbar .searchbar-button:focus:focus-visible {\n z-index: 1;\n }\n}\n\n@media (width >= 768px) {\n .searchbar {\n display: flex;\n font-size: 1.5rem;\n }\n\n .searchbar.searchbar-open {\n position: absolute;\n width: 100%;\n height: 100%;\n inset: 0;\n }\n\n .searchbar .input-wrapper {\n display: none;\n width: 100%;\n align-items: center;\n padding: 0 0 0 var(--grid-margin);\n background-color: #fff;\n gap: 6px; /* diventa 14px sommato al padding a sinistra della input */\n }\n\n .searchbar .input-wrapper:not(.hide) {\n display: flex;\n }\n\n .searchbar button[type='reset'] {\n display: flex;\n align-items: center;\n border-radius: 4px;\n cursor: pointer;\n }\n\n .searchbar input {\n z-index: 1;\n width: 100%;\n height: 100%;\n padding: 8px;\n border: none;\n background-color: #fff;\n font-family: var(--font-family-sans);\n font-size: inherit;\n }\n\n .searchbar input[type='search']::-webkit-search-cancel-button,\n .searchbar input[type='search']::-webkit-search-decoration {\n appearance: none;\n }\n\n .searchbar input::placeholder {\n color: var(--gray500);\n }\n\n .searchbar .searchbar-button {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n border-right: 1px solid #000;\n border-left: 1px solid #000;\n background: var(--zanit-accent-color);\n font-family: inherit;\n font-size: inherit;\n gap: 64px;\n line-height: 1;\n }\n\n .searchbar input:focus:focus-visible,\n .searchbar .searchbar-button:focus:focus-visible {\n z-index: 1;\n }\n}\n\n@media (width >= 768px) and (width < 1152px) {\n .searchbar .searchbar-button > .searchbar-button-label {\n display: none;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { containsTarget } from '../../../utils/utils';\n\n@Component({\n tag: 'zanit-search-form',\n styleUrl: 'search-form.css',\n shadow: true,\n})\nexport class ZanitSearchForm {\n private formElement: HTMLFormElement;\n\n @Element() host: HTMLZanitSearchFormElement;\n\n @State()\n isMobile: boolean = false;\n\n /** Indicates whether the searchbar is visible and usable. */\n @State()\n showSearchbar: boolean = false;\n\n /** Search query to apply. */\n @State()\n _searchQuery: string | undefined = undefined;\n\n /** Initial search query */\n @Prop({ mutable: true })\n searchQuery: string | undefined = undefined;\n\n @Watch('searchQuery')\n onSearchQueryChange() {\n this._searchQuery = this.searchQuery;\n if (this.searchQuery) {\n this.openSearchbar();\n }\n }\n\n /** Emitted on search form submission. */\n @Event({ cancelable: true }) search: EventEmitter<{ query: string }>;\n\n @Event() resetSearch: EventEmitter<void>;\n\n async connectedCallback() {\n this.showSearchbar = !!this.searchQuery;\n const mobileMediaQuery = window.matchMedia('(width < 768px)');\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.onchange = (mql) => {\n this.isMobile = mql.matches;\n };\n }\n\n /** Close open searchbar when clicking outside. */\n @Listen('click', { target: 'document', passive: true })\n handleOutsideClick(event: MouseEvent) {\n if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {\n this.showSearchbar = false;\n }\n }\n\n private openSearchbar() {\n this.showSearchbar = true;\n setTimeout(() => {\n const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n searchbarInput.focus();\n }, 100);\n }\n\n private resetSearchQuery() {\n this.searchQuery = undefined;\n this.resetSearch.emit();\n }\n\n private handleInputChange(event: Event) {\n this._searchQuery = (event.target as HTMLInputElement).value;\n if (!this._searchQuery) {\n this.searchQuery = undefined;\n }\n }\n\n private onSearchSubmit(event: Event) {\n event.preventDefault();\n if (!this._searchQuery) {\n return;\n }\n\n this.showSearchbar = false;\n const searchEv = this.search.emit({ query: this._searchQuery });\n // do not submit the form if the event default behavior was prevented\n if (searchEv.defaultPrevented) {\n return;\n }\n\n this.formElement.submit();\n }\n\n render() {\n if (this.isMobile) {\n return (\n <form\n class=\"searchbar\"\n ref={(el) => (this.formElement = el)}\n role=\"search\"\n aria-label=\"Cerca\"\n method=\"get\"\n action=\"/ricerca\"\n onSubmit={(event) => this.onSearchSubmit(event)}\n onReset={() => this.resetSearchQuery()}\n >\n {this.searchQuery && (\n <button\n type=\"reset\"\n aria-label=\"Svuota campo di ricerca\"\n >\n <z-icon\n name=\"multiply-circled\"\n width=\"1rem\"\n height=\"1rem\"\n />\n </button>\n )}\n <input\n id=\"searchbar-input\"\n name=\"q\"\n type=\"search\"\n placeholder=\"Cerca per parola chiave o ISBN\"\n onInput={(event) => this.handleInputChange(event)}\n value={this.searchQuery}\n required\n ></input>\n <button\n class=\"searchbar-button\"\n aria-controls=\"searchbar-input\"\n aria-label=\"Cerca\"\n type=\"submit\"\n >\n <z-icon\n name=\"search\"\n width=\"1.25rem\"\n height=\"1.25rem\"\n ></z-icon>\n </button>\n </form>\n );\n }\n\n return (\n <form\n class={{ 'searchbar': true, 'searchbar-open': this.showSearchbar }}\n ref={(el) => (this.formElement = el)}\n role=\"search\"\n aria-label=\"Cerca\"\n method=\"get\"\n action=\"/ricerca\"\n onSubmit={(event) => this.onSearchSubmit(event)}\n onReset={() => this.resetSearchQuery()}\n >\n <div\n class={{ 'hide': !this.showSearchbar, 'input-wrapper': true }}\n role=\"none\"\n >\n {this.searchQuery && (\n <button\n type=\"reset\"\n aria-label=\"Svuota campo di ricerca\"\n >\n <z-icon\n name=\"multiply-circled\"\n width=\"1.5rem\"\n height=\"1.5rem\"\n />\n </button>\n )}\n <input\n id=\"searchbar-input\"\n name=\"q\"\n type=\"search\"\n placeholder=\"Cerca per parola chiave o ISBN\"\n onInput={(event) => this.handleInputChange(event)}\n value={this.searchQuery}\n required\n ></input>\n </div>\n\n <button\n class=\"searchbar-button\"\n aria-label=\"Cerca\"\n aria-controls=\"searchbar-input\"\n type={this.showSearchbar ? 'submit' : 'button'}\n onClick={() => this.openSearchbar()}\n >\n {this.showSearchbar ? null : <span class=\"searchbar-button-label\">Cerca</span>}\n <z-icon\n name=\"search\"\n width=\"2rem\"\n height=\"2rem\"\n ></z-icon>\n </button>\n </form>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { h, p as proxyCustomElement, H } from './index.js';
|
|
2
|
-
import { d as defineCustomElement$1, m as moveFocus, c as containsTarget } from './p-
|
|
2
|
+
import { d as defineCustomElement$1, m as moveFocus, c as containsTarget } from './p-CiHl-h3q.js';
|
|
3
3
|
|
|
4
4
|
const DEFAULT_GROUP_KEY = 'default';
|
|
5
5
|
const DEFAULT_GROUP = {
|
|
@@ -38,7 +38,7 @@ const Menu = ({ controlledBy, items, currentPath = [], onItemKeyDown }) => {
|
|
|
38
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
39
|
'menu-item': true,
|
|
40
40
|
'active': isActive(item),
|
|
41
|
-
}, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": isActive(item) ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event) }, item.label))))))))))));
|
|
41
|
+
}, href: item.href, role: "menuitem", tabIndex: -1, "aria-current": isActive(item) ? 'page' : 'false', onKeyDown: (event) => onItemKeyDown(event), target: item.target }, item.label))))))))))));
|
|
42
42
|
};
|
|
43
43
|
|
|
44
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:8px var(--grid-margin)}nav::after{position:absolute;top:0;right:0;width:100%;height:100%;background:transparent;box-shadow:var(--shadow-1);content:'';pointer-events:none}.burger-button{margin-left:auto}.mobile-menu{position:absolute;top:100%;left:0;display:flex;width:100%;flex-direction:column;padding:16px var(--grid-margin) 32px;background-color:#fff;box-shadow:var(--shadow-2);gap:8px}.mobile-menu li{width:100%}.mobile-menu .items-container{display:flex;min-height:256px;flex-direction:column;gap:8px}.mobile-menu .items-container z-ghost-loading{width:40%;height:1.2rem}.mobile-menu .items-container .menubar-item{display:block;width:100%;padding:8px 0;font-size:1rem;text-align:left}.mobile-menu .items-container li:not(:last-child) .menubar-item{border-bottom:1px solid #000}[role='menuitem'].parent{display:flex;width:fit-content;align-items:center;padding:0;border:none;font-size:0.875rem;gap:8px}";
|
|
@@ -75,6 +75,13 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
|
|
|
75
75
|
* Find the current item and take its parent, `menuItems` or the `navbarItems`.
|
|
76
76
|
*/
|
|
77
77
|
setupData(items, parent) {
|
|
78
|
+
// If no current item is defined, we show all items
|
|
79
|
+
if (this.lastCurrent === undefined) {
|
|
80
|
+
this.parentItem = undefined;
|
|
81
|
+
this.menuType = 'menubar';
|
|
82
|
+
this.menuItems = items;
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
78
85
|
for (const item of items) {
|
|
79
86
|
if (item.id === this.lastCurrent) {
|
|
80
87
|
this.parentItem = parent;
|
|
@@ -91,7 +98,7 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
|
|
|
91
98
|
return;
|
|
92
99
|
}
|
|
93
100
|
if (item.navbarItems?.length) {
|
|
94
|
-
|
|
101
|
+
this.setupData(item.navbarItems, item);
|
|
95
102
|
}
|
|
96
103
|
}
|
|
97
104
|
}
|
|
@@ -182,10 +189,10 @@ const ZanitMobileMenubar = /*@__PURE__*/ proxyCustomElement(class ZanitMobileMen
|
|
|
182
189
|
this.open = false;
|
|
183
190
|
}
|
|
184
191
|
render() {
|
|
185
|
-
return (h("nav", { key: '
|
|
192
|
+
return (h("nav", { key: '8670451f03909d3008f6e21d02ee5c7412d86bac', "aria-label": "Zanichelli.it" }, h("z-logo", { key: '8f8704851b84185e6c01bc6cd5e2a3b3cda53a61', imageAlt: "Logo Zanichelli", link: "/", height: 32, width: 126 }), h("button", { key: '02271df658a071f9ae0d91f8140b9e8e15064ccc', class: "burger-button", type: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "mobile-menu", "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: () => this.toggleMenu() }, h("z-icon", { key: 'fcbff94368d67da8a237190518452048276882a0', name: this.open ? 'multiply' : 'burger-menu', width: "1.5rem", height: "1.5rem" })), this.open && (h("ul", { key: '94fae1693d0ebd41d86cfe55450a40cbff88b7dd', class: "mobile-menu", role: "menubar" }, h("li", { key: '5e09e8484e6450646d4da570a0791da92e477fc7', role: "none" }, h("zanit-search-form", { key: '564813af11cc4b6c62db80ee2acdbeb54cec935f', searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), !this.loading && this.currentPath && this.currentPath.length > 0 && (h("li", { key: '7b501d3a1c7dcf705bd1bfd8d03a29573c27f891', role: "none" }, h("a", { key: '949db4a79629f0d0ab44cc94d11f717abc87cb4d', class: "parent", href: this.parentItem?.href ?? '/', id: this.parentItem?.id ?? undefined, role: "menuitem", tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event), target: this.parentItem?.target }, h("z-icon", { key: '2537588429f0185c67f87702d040fdc8ad7fbe06', name: "arrow-left", width: "0.5rem", height: "0.5rem" }), h("span", { key: '732de0ec2a09d41ecacd62d7fa8e5c799e67e533' }, this.parentItem?.label || 'Home')))), this.loading && (h("div", { key: '56c066be63a1de19e4d76fcf22624378d0898602', class: "items-container", role: "none" }, [...new Array(4)].map(() => (h("li", { role: "none" }, h("div", { class: "menubar-item", role: "none" }, h("z-ghost-loading", null))))))), this.menuType === 'menu' ? (h(Menu, { items: this.menuItems, controlledBy: this.parentItem?.id, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleItemKeydown(event) })) : (this.menuItems?.length && (h("div", { class: "items-container", role: "none" }, this.menuItems.map((item) => (h("li", { role: "none" }, h("a", { class: {
|
|
186
193
|
'menu-item': this.menuType === 'menu',
|
|
187
194
|
'menubar-item': this.menuType === 'menubar',
|
|
188
|
-
}, href: item.href, id: item.id, role: "menuitem", "aria-current": this.lastCurrent === item.id ? 'page' : 'false', tabIndex: -1, onKeyDown: (event) => this.handleItemKeydown(event) }, h("span", { "data-text": item.label }, item.label))))))))))));
|
|
195
|
+
}, 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))))))))))));
|
|
189
196
|
}
|
|
190
197
|
static get watchers() { return {
|
|
191
198
|
"items": ["onItemsChange"],
|
|
@@ -227,6 +234,6 @@ function defineCustomElement() {
|
|
|
227
234
|
defineCustomElement();
|
|
228
235
|
|
|
229
236
|
export { Menu as M, ZanitMobileMenubar as Z, defineCustomElement as d };
|
|
230
|
-
//# sourceMappingURL=p-
|
|
237
|
+
//# sourceMappingURL=p-DGmSfTXD.js.map
|
|
231
238
|
|
|
232
|
-
//# sourceMappingURL=p-
|
|
239
|
+
//# sourceMappingURL=p-DGmSfTXD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-DGmSfTXD.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/menubar/menu/menu.tsx","src/components/menubar/mobile-menubar/mobile-menubar.css?tag=zanit-mobile-menubar&encapsulation=shadow","src/components/menubar/menu/menu.css?tag=zanit-mobile-menubar&encapsulation=shadow","src/components/menubar/mobile-menubar/mobile-menubar.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { MenuItem } from '../../../utils/types';\n\n/**\n * Menu of items that can be grouped.\n * @member {string} controlledBy - The HTML id of the element that controls the menu.\n * @member {MenuItem[]} items - The items to show in the menu.\n * @member {string[]} currentPath - Path of current item.\n * @member {function} onItemKeyDown - The function to call when a key is pressed from a menuitem.\n */\nexport interface MenuProps {\n controlledBy?: string;\n items?: MenuItem[];\n currentPath?: string[];\n onItemKeyDown?: (event: KeyboardEvent) => void;\n}\n\nconst DEFAULT_GROUP_KEY = 'default';\nconst DEFAULT_GROUP = {\n id: DEFAULT_GROUP_KEY,\n label: DEFAULT_GROUP_KEY,\n};\n\n/** Get the items grouped by their group. */\nconst getGroupedItems = (items: MenuItem[]) => {\n const groups = items.reduce<{ group: MenuProps['items'][number]['group']; items: MenuItem[] }[]>((grouped, item) => {\n const itemGroup = grouped.find(({ group }) => group.id === (item.group?.id || DEFAULT_GROUP.id));\n if (!itemGroup) {\n grouped.push({ group: item.group ?? DEFAULT_GROUP, items: [item] });\n } else {\n itemGroup.items.push(item);\n }\n\n return grouped;\n }, []);\n\n // Sort to keep default group at the end\n return groups.sort((a, b) => (a.group.id === DEFAULT_GROUP_KEY ? 1 : b.group.id === DEFAULT_GROUP_KEY ? -1 : 0));\n};\n\n/**\n * Floating menu component. It shows a list of items that can be grouped.\n */\nexport const Menu: FunctionalComponent<MenuProps> = ({ controlledBy, items, currentPath = [], onItemKeyDown }) => {\n if (!items?.length) {\n return null;\n }\n\n const groups = getGroupedItems(items);\n\n const isActive = (item: MenuItem) => currentPath.includes(controlledBy) && currentPath.includes(item.id);\n\n return (\n <div\n class=\"menu-wrapper\"\n role=\"none\"\n >\n <div\n class=\"menu\"\n aria-labelledby={controlledBy ?? undefined}\n role=\"menu\"\n >\n {groups.map(({ group, items }) => (\n <div class={{ group: true, highlight: items.some((item) => item.highlight) }}>\n {group.id !== DEFAULT_GROUP_KEY ? (\n <div\n class=\"group-name\"\n id={group.id}\n >\n {group.label}\n </div>\n ) : groups.length > 1 ? (\n // empty div to keep the same height as the other groups\n <div class=\"group-name\" />\n ) : null}\n <ul\n class=\"menu-list\"\n role=\"group\"\n aria-labelledby={group.id !== DEFAULT_GROUP_KEY ? group.id : undefined}\n >\n {items.map((item) => (\n <li role=\"none\">\n {item.href && (\n <a\n class={{\n 'menu-item': true,\n 'active': isActive(item),\n }}\n href={item.href}\n role=\"menuitem\"\n tabIndex={-1}\n aria-current={isActive(item) ? 'page' : 'false'}\n onKeyDown={(event) => onItemKeyDown(event)}\n target={item.target}\n >\n {item.label}\n </a>\n )}\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n );\n};\n",":host {\n position: relative;\n z-index: 2;\n display: block;\n width: 100%;\n max-width: 100%;\n background-color: #fff;\n color: var(--gray900);\n fill: var(--gray900);\n font-family: var(--font-family-sans);\n}\n\n:host,\n*,\n::before,\n::after {\n box-sizing: border-box;\n}\n\n*:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\nul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\na {\n color: var(--gray900);\n cursor: pointer;\n text-decoration: none;\n}\n\nbutton {\n all: unset;\n cursor: pointer;\n}\n\nnav {\n display: flex;\n width: 100%;\n align-items: center;\n padding: 8px var(--grid-margin);\n}\n\nnav::after {\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n box-shadow: var(--shadow-1);\n content: '';\n pointer-events: none;\n}\n\n.burger-button {\n margin-left: auto;\n}\n\n.mobile-menu {\n position: absolute;\n top: 100%;\n left: 0;\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: 16px var(--grid-margin) 32px;\n background-color: #fff;\n box-shadow: var(--shadow-2);\n gap: 8px;\n}\n\n.mobile-menu li {\n width: 100%;\n}\n\n.mobile-menu .items-container {\n display: flex;\n min-height: 256px;\n flex-direction: column;\n gap: 8px;\n}\n\n.mobile-menu .items-container z-ghost-loading {\n width: 40%;\n height: 1.2rem;\n}\n\n.mobile-menu .items-container .menubar-item {\n display: block;\n width: 100%;\n padding: 8px 0;\n font-size: 1rem;\n text-align: left;\n}\n\n.mobile-menu .items-container li:not(:last-child) .menubar-item {\n border-bottom: 1px solid #000;\n}\n\n[role='menuitem'].parent {\n display: flex;\n width: fit-content;\n align-items: center;\n padding: 0;\n border: none;\n font-size: 0.875rem;\n gap: 8px;\n}\n",".menu-wrapper {\n width: 100%;\n background-color: #fff;\n}\n\n.menu {\n position: relative;\n display: flex;\n width: 100%;\n flex-direction: column;\n gap: 32px 0;\n}\n\n.menu .group {\n display: flex;\n flex-direction: column;\n}\n\n.menu .group .group-name {\n border-bottom: 1px solid currentcolor;\n margin-bottom: 4px;\n color: var(--red500);\n font-size: 0.875rem;\n font-weight: var(--font-rg);\n}\n\n.menu .group .menu-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.menu .group .menu-list .menu-item {\n border-bottom: 2px solid transparent;\n font-size: 0.875rem;\n font-weight: var(--font-md);\n}\n\n.menu .menu-list .menu-item.active,\n.menu .menu-list .menu-item:hover {\n border-bottom-color: var(--red500);\n}\n\n.menu .group.highlight .menu-list .menu-item {\n font-size: 1rem;\n}\n\n@media (width >= 768px) {\n .menu-wrapper {\n position: absolute;\n top: 100%;\n left: 0;\n display: flex;\n justify-content: center;\n box-shadow: var(--shadow-1);\n }\n\n .menu {\n display: grid;\n width: 100%;\n max-width: var(--zanit-menubar-max-width, 1366px);\n padding: 16px var(--grid-margin);\n gap: 0 24px;\n grid-auto-columns: minmax(0, max-content);\n grid-auto-flow: column;\n grid-template-rows: minmax(0, max-content) max-content;\n }\n\n .menu .group {\n display: grid;\n grid-row: 1 / -1;\n grid-template-columns: 1fr;\n grid-template-rows: subgrid;\n }\n\n @supports not (grid-template-rows: subgrid) {\n .menu .group {\n grid-template-rows: repeat(auto-fit, minmax(0, max-content));\n }\n }\n\n .menu .group .group-name {\n border: none;\n margin-bottom: 16px;\n }\n\n .menu .group .menu-list .menu-item {\n font-size: 1rem;\n }\n\n .menu .group.highlight .menu-list .menu-item {\n font-size: 1.5rem;\n }\n\n .menu .group.highlight .menu-list {\n gap: 24px;\n }\n}\n","import { Component, Element, h, Listen, Prop, State, Watch } from '@stencil/core';\nimport { MenubarItem, MenuItem } from '../../../utils/types';\nimport { containsTarget, moveFocus } from '../../../utils/utils';\nimport { Menu } from '../menu/menu';\n\n/** Mobile menubar component. */\n@Component({\n tag: 'zanit-mobile-menubar',\n styleUrls: ['mobile-menubar.css', '../menu/menu.css'],\n shadow: true,\n})\nexport class ZanitMobileMenubar {\n @Element() host: HTMLZanitMobileMenubarElement;\n\n /** IDs path of the current item. */\n @Prop() currentPath: string[] = [];\n\n /** Menubar items. */\n @Prop() items: MenubarItem[] = [];\n\n /** Initial search query. */\n @Prop({ mutable: true }) searchQuery: string | undefined = undefined;\n\n /** Whether the menubar is loading the data. */\n @Prop() loading: boolean = false;\n\n /** Last active item ID. */\n @State() lastCurrent: string | undefined = undefined;\n @State() parentItem: MenubarItem | undefined = undefined;\n @State() menuItems: MenubarItem[] | MenuItem[] | undefined = undefined;\n /** Whether the items to render come from a menubar or a menu. */\n @State() menuType: 'menubar' | 'menu' | undefined = undefined;\n @State() open: boolean;\n\n @Watch('items')\n @Watch('currentPath')\n onItemsChange() {\n this.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;\n this.setupData(this.items);\n }\n\n /**\n * Find the current item and take its parent, `menuItems` or the `navbarItems`.\n */\n private setupData(items: MenubarItem[], parent?: MenubarItem) {\n // 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();\n }, 200);\n }\n }\n\n /** Handles keyboard navigation on mobile menu. */\n private handleItemKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n event.stopPropagation();\n const items = this.menuItemsElement;\n const currentIndex = items.indexOf(event.target as HTMLElement);\n const prevItem = items[(currentIndex - 1 + items.length) % items.length];\n moveFocus(items[currentIndex], prevItem);\n break;\n }\n case 'ArrowDown': {\n event.preventDefault();\n event.stopPropagation();\n const items = this.menuItemsElement;\n const currentIndex = items.indexOf(event.target as HTMLElement);\n const nextItem = items[(currentIndex + 1) % items.length];\n moveFocus(items[currentIndex], nextItem);\n break;\n }\n case 'Home': {\n event.preventDefault();\n event.stopPropagation();\n moveFocus(event.target as HTMLElement, this.menuItemsElement[0]);\n break;\n }\n case 'End': {\n event.preventDefault();\n event.stopPropagation();\n moveFocus(event.target as HTMLElement, this.menuItemsElement.pop());\n break;\n }\n }\n }\n\n connectedCallback() {\n this.lastCurrent = this.currentPath?.length ? this.currentPath[this.currentPath.length - 1] : undefined;\n this.setupData(this.items);\n }\n\n /** Close the menu when clicking outside. */\n @Listen('click', { target: 'document', passive: true })\n handleOutsideClick(event: MouseEvent) {\n if (containsTarget(this.host, event)) {\n return;\n }\n\n this.open = false;\n }\n\n /** Close the menu when pressing Escape or Tab. */\n @Listen('keydown', { passive: true })\n handleKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'Escape':\n this.open = false;\n break;\n case 'Tab':\n if (containsTarget(this.host, event)) {\n break;\n }\n\n this.open = false;\n break;\n }\n }\n\n /** Close the menu when the focus goes out. */\n @Listen('focusin', { target: 'document', passive: true })\n handleFocusout(event: FocusEvent) {\n if (containsTarget(this.host, event)) {\n return;\n }\n\n this.open = false;\n }\n\n render() {\n return (\n <nav aria-label=\"Zanichelli.it\">\n <z-logo\n imageAlt=\"Logo Zanichelli\"\n link=\"/\"\n height={32}\n width={126}\n ></z-logo>\n <button\n class=\"burger-button\"\n type=\"button\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls=\"mobile-menu\"\n aria-label={this.open ? 'Chiudi menù' : 'Apri menù'}\n onClick={() => this.toggleMenu()}\n >\n <z-icon\n name={this.open ? 'multiply' : 'burger-menu'}\n width=\"1.5rem\"\n height=\"1.5rem\"\n ></z-icon>\n </button>\n {this.open && (\n <ul\n class=\"mobile-menu\"\n role=\"menubar\"\n >\n <li role=\"none\">\n <zanit-search-form\n searchQuery={this.searchQuery}\n onResetSearch={() => (this.searchQuery = undefined)}\n />\n </li>\n\n {!this.loading && this.currentPath && 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 )}\n\n {this.menuType === 'menu' ? (\n <Menu\n items={this.menuItems}\n controlledBy={this.parentItem?.id}\n currentPath={this.currentPath}\n onItemKeyDown={(event) => this.handleItemKeydown(event)}\n />\n ) : (\n this.menuItems?.length && (\n <div\n class=\"items-container\"\n role=\"none\"\n >\n {this.menuItems.map((item) => (\n <li role=\"none\">\n <a\n class={{\n 'menu-item': this.menuType === 'menu',\n 'menubar-item': this.menuType === 'menubar',\n }}\n href={item.href}\n id={item.id}\n role=\"menuitem\"\n aria-current={this.lastCurrent === item.id ? 'page' : 'false'}\n tabIndex={-1}\n onKeyDown={(event) => this.handleItemKeydown(event)}\n 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}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h, F as Fragment } from './index.js';
|
|
2
|
-
import { d as defineCustomElement$2, c as containsTarget, m as moveFocus } from './p-
|
|
3
|
-
import { d as defineCustomElement$3, M as Menu } from './p-
|
|
2
|
+
import { d as defineCustomElement$2, c as containsTarget, m as moveFocus } from './p-CiHl-h3q.js';
|
|
3
|
+
import { d as defineCustomElement$3, M as Menu } from './p-DGmSfTXD.js';
|
|
4
4
|
|
|
5
5
|
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}";
|
|
6
6
|
|
|
@@ -27,11 +27,6 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
|
|
|
27
27
|
data;
|
|
28
28
|
/** Path of the current item. */
|
|
29
29
|
current = undefined;
|
|
30
|
-
/**
|
|
31
|
-
* Delay in milliseconds before closing the menu after a mouseout event.
|
|
32
|
-
* Useful to avoid immediate closing when the pointer briefly leaves the component.
|
|
33
|
-
*/
|
|
34
|
-
mouseOutTimeout = 1000;
|
|
35
30
|
/** Initial search query. */
|
|
36
31
|
searchQuery = undefined;
|
|
37
32
|
timerId;
|
|
@@ -110,13 +105,17 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
|
|
|
110
105
|
handleMouseover() {
|
|
111
106
|
clearTimeout(this.timerId);
|
|
112
107
|
}
|
|
108
|
+
/**
|
|
109
|
+
* Automatically close any open menu on mouseout after with a little delay.
|
|
110
|
+
* The delay is useful to avoid immediate closing when the pointer briefly leaves the component.
|
|
111
|
+
*/
|
|
113
112
|
handleMouseout(event) {
|
|
114
113
|
this.timerId = window.setTimeout(() => {
|
|
115
114
|
if (!this.openMenu || containsTarget(this.host, event)) {
|
|
116
115
|
return;
|
|
117
116
|
}
|
|
118
117
|
this.openMenu = undefined;
|
|
119
|
-
},
|
|
118
|
+
}, 500);
|
|
120
119
|
}
|
|
121
120
|
/** Close the menu when it loses focus. */
|
|
122
121
|
handleFocusout(event) {
|
|
@@ -174,6 +173,7 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
|
|
|
174
173
|
}
|
|
175
174
|
/** Opens the menu associated with the menubar `item`, if any. */
|
|
176
175
|
showMenu(item) {
|
|
176
|
+
this.openMenu = undefined; // close any open menu first
|
|
177
177
|
if (!item.menuItems?.length) {
|
|
178
178
|
return;
|
|
179
179
|
}
|
|
@@ -185,6 +185,7 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
|
|
|
185
185
|
}
|
|
186
186
|
/** Move the focus to the previous menubar item, or the last one. Then open its menu if any other menu was open. */
|
|
187
187
|
focusPreviousItem(itemEl) {
|
|
188
|
+
this.openMenu = undefined; // close any open menu first
|
|
188
189
|
const menubarElements = this.getParentMenubarElements(itemEl);
|
|
189
190
|
itemEl.tabIndex = -1;
|
|
190
191
|
const currentIndex = menubarElements.indexOf(itemEl);
|
|
@@ -198,6 +199,7 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
|
|
|
198
199
|
}
|
|
199
200
|
/** Move the focus to the next menubar item, or the first one. Then open its menu if any other menu was open. */
|
|
200
201
|
focusNextItem(itemEl) {
|
|
202
|
+
this.openMenu = undefined; // close any open menu first
|
|
201
203
|
const menubarElements = this.getParentMenubarElements(itemEl);
|
|
202
204
|
itemEl.tabIndex = -1;
|
|
203
205
|
const currentIndex = menubarElements.indexOf(itemEl);
|
|
@@ -356,12 +358,12 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
|
|
|
356
358
|
[...new Array(4)].map((_, index) => (h(Fragment, null, h("li", { role: "none" }, h("div", { class: "menubar-item" }, h("z-ghost-loading", null))), index < 3 && h("li", { role: "separator" })))), this.items?.map((item, index) => (h(Fragment, null, h("li", { role: "none" }, h("a", { class: {
|
|
357
359
|
'menubar-item': true,
|
|
358
360
|
'active': this.isActive(item),
|
|
359
|
-
}, 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) }, h("span", { "data-text": item.label }, item.label), item.menuItems?.length > 0 && (h("z-icon", { name: this.openMenu === item.id ? 'chevron-up' : 'chevron-down', width: "0.875rem", height: "0.875rem" })))), index < this.items?.length - 1 && h("li", { role: "separator" }))))), h("zanit-search-form", { searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), this.items.map((item) => this.openMenu === item.id && (h(Menu, { controlledBy: item.id, items: item.menuItems, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleMenuKeydown(event) })))), this.items
|
|
361
|
+
}, 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 }, h("span", { "data-text": item.label }, item.label), item.menuItems?.length > 0 && (h("z-icon", { name: this.openMenu === item.id ? 'chevron-up' : 'chevron-down', width: "0.875rem", height: "0.875rem" })))), index < this.items?.length - 1 && h("li", { role: "separator" }))))), h("zanit-search-form", { searchQuery: this.searchQuery, onResetSearch: () => (this.searchQuery = undefined) })), this.items.map((item) => this.openMenu === item.id && (h(Menu, { controlledBy: item.id, items: item.menuItems, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleMenuKeydown(event) })))), this.items
|
|
360
362
|
?.filter((item) => this.isActive(item))
|
|
361
363
|
.map((item) => item.navbarItems?.length && (h("nav", { class: { 'sub-menubar': true, 'shadow-wrapper': true } }, h("ul", { role: "menubar" }, item.navbarItems.map((subitem) => (h(Fragment, null, h("li", { role: "none" }, h("a", { class: {
|
|
362
364
|
'menubar-item': true,
|
|
363
365
|
'active': this.isActive(subitem),
|
|
364
|
-
}, href: subitem.href, id: subitem.id, role: "menuitem", tabIndex: -1, "aria-haspopup": subitem.menuItems?.length ? 'true' : 'false', "aria-expanded": subitem.menuItems?.length ? (this.openMenu === subitem.id ? 'true' : 'false') : undefined, "aria-current": this.current.includes(subitem.id) ? 'page' : 'false', onPointerOver: () => this.showMenu(subitem), onKeyDown: (event) => this.handleItemKeydown(event, subitem) }, h("span", null, subitem.label), subitem.menuItems?.length > 0 && (h("z-icon", { name: this.openMenu === subitem.id ? 'chevron-up' : 'chevron-down', width: "0.75rem", height: "0.75rem" })))))))), item.navbarItems.map((subitem) => this.openMenu === subitem.id && (h(Menu, { controlledBy: subitem.id, items: subitem.menuItems, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleMenuKeydown(event) }))))))));
|
|
366
|
+
}, href: subitem.href, id: subitem.id, role: "menuitem", tabIndex: -1, "aria-haspopup": subitem.menuItems?.length ? 'true' : 'false', "aria-expanded": subitem.menuItems?.length ? (this.openMenu === subitem.id ? 'true' : 'false') : undefined, "aria-current": this.current.includes(subitem.id) ? 'page' : 'false', onPointerOver: () => this.showMenu(subitem), onKeyDown: (event) => this.handleItemKeydown(event, subitem), target: item.target }, h("span", null, subitem.label), subitem.menuItems?.length > 0 && (h("z-icon", { name: this.openMenu === subitem.id ? 'chevron-up' : 'chevron-down', width: "0.75rem", height: "0.75rem" })))))))), item.navbarItems.map((subitem) => this.openMenu === subitem.id && (h(Menu, { controlledBy: subitem.id, items: subitem.menuItems, currentPath: this.currentPath, onItemKeyDown: (event) => this.handleMenuKeydown(event) }))))))));
|
|
365
367
|
}
|
|
366
368
|
static get watchers() { return {
|
|
367
369
|
"data": ["parseData"],
|
|
@@ -372,7 +374,6 @@ const ZanitMenubar$1 = /*@__PURE__*/ proxyCustomElement(class ZanitMenubar exten
|
|
|
372
374
|
}, [1, "zanit-menubar", {
|
|
373
375
|
"data": [1],
|
|
374
376
|
"current": [1],
|
|
375
|
-
"mouseOutTimeout": [2, "mouse-out-timeout"],
|
|
376
377
|
"searchQuery": [1025, "search-query"],
|
|
377
378
|
"items": [32],
|
|
378
379
|
"openMenu": [32],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"zanit-menubar.js","mappings":"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","names":["ZanitMenubar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/menubar/menubar.css?tag=zanit-menubar&encapsulation=shadow","src/components/menubar/menu/menu.css?tag=zanit-menubar&encapsulation=shadow","src/components/menubar/menubar.tsx"],"sourcesContent":[":host {\n --zanit-menubar-max-width: ;\n\n position: relative;\n z-index: 2;\n display: flex;\n width: 100%;\n background-color: #fff;\n color: 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\n:host nav {\n width: 100%;\n}\n\n.shadow-wrapper {\n position: relative;\n z-index: 1;\n display: flex;\n width: 100%;\n}\n\n.shadow-wrapper::after {\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n box-shadow: var(--shadow-1);\n content: '';\n pointer-events: none;\n}\n\n.width-limiter {\n position: relative;\n display: flex;\n width: 100%;\n max-width: var(--zanit-menubar-max-width, 1366px);\n margin: 0 auto;\n}\n\n.shadow-wrapper + .shadow-wrapper {\n z-index: 0;\n}\n\n.sub-menubar > ul {\n gap: 28px;\n}\n\n.width-limiter > ul,\n.sub-menubar > ul {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 0 var(--grid-margin);\n margin-right: auto;\n margin-left: auto;\n gap: 20px;\n}\n\n.shadow-wrapper > .width-limiter,\n.shadow-wrapper > ul {\n width: 100%;\n max-width: var(--zanit-menubar-max-width, 1366px);\n}\n\nul.menubar {\n padding-right: 0;\n}\n\n.menubar z-ghost-loading {\n display: block;\n width: 120px;\n height: 1.25rem;\n}\n\n/* separator bar */\n.menubar > li[role='separator'] {\n width: 1px;\n height: 1.25rem;\n background-color: #000;\n}\n\n.menubar-item {\n position: relative;\n display: flex;\n align-items: center;\n padding: 14px 0;\n font-size: 1rem;\n gap: 8px;\n line-height: 1.25rem;\n}\n\n.menubar .menubar-item {\n text-transform: uppercase;\n}\n\n.menubar-item [data-text] {\n display: flex;\n flex-direction: column;\n}\n\n.menubar-item.active > [data-text],\n.menubar-item:hover > [data-text],\n.menubar-item:focus:focus-visible > [data-text] {\n font-weight: var(--font-bd);\n}\n\n/* To avoid size changes in the element, when it is hovered and becomes bold,\nwe put the same text already bold with height 0, so as to always occupy the maximum necessary width. */\n.menubar-item > [data-text]::after {\n height: 0;\n content: attr(data-text) / '';\n font-weight: var(--font-bd);\n letter-spacing: normal;\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n/* active item bottom border */\n.sub-menubar .menubar-item.active::after {\n position: absolute;\n z-index: -1;\n bottom: 0;\n left: -4px;\n width: calc(100% + 8px); /* the border is 4px per side larger than its container */\n height: 4px;\n background-color: var(--red500);\n content: '';\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-rg);\n}\n\n.menu .group .menu-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.menu .group .menu-list .menu-item {\n border-bottom: 2px solid transparent;\n font-size: 0.875rem;\n font-weight: var(--font-md);\n}\n\n.menu .menu-list .menu-item.active,\n.menu .menu-list .menu-item:hover {\n border-bottom-color: var(--red500);\n}\n\n.menu .group.highlight .menu-list .menu-item {\n font-size: 1rem;\n}\n\n@media (width >= 768px) {\n .menu-wrapper {\n position: absolute;\n top: 100%;\n left: 0;\n display: flex;\n justify-content: center;\n box-shadow: var(--shadow-1);\n }\n\n .menu {\n display: grid;\n width: 100%;\n max-width: var(--zanit-menubar-max-width, 1366px);\n padding: 16px var(--grid-margin);\n gap: 0 24px;\n grid-auto-columns: minmax(0, max-content);\n grid-auto-flow: column;\n grid-template-rows: minmax(0, max-content) max-content;\n }\n\n .menu .group {\n display: grid;\n grid-row: 1 / -1;\n grid-template-columns: 1fr;\n grid-template-rows: subgrid;\n }\n\n @supports not (grid-template-rows: subgrid) {\n .menu .group {\n grid-template-rows: repeat(auto-fit, minmax(0, max-content));\n }\n }\n\n .menu .group .group-name {\n border: none;\n margin-bottom: 16px;\n }\n\n .menu .group .menu-list .menu-item {\n font-size: 1rem;\n }\n\n .menu .group.highlight .menu-list .menu-item {\n font-size: 1.5rem;\n }\n\n .menu .group.highlight .menu-list {\n gap: 24px;\n }\n}\n","import { Component, Element, Fragment, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { MenubarItem } from '../../utils/types';\nimport { containsTarget, moveFocus } from '../../utils/utils';\nimport { Menu } from './menu/menu';\n\n/**\n * Main menubar component. Each item can have a menu with subitems\n * When a main menubar item is the current active one, a sub-menubar is shown and each subitem can have a menu with subitems.\n * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.\n */\n@Component({\n tag: 'zanit-menubar',\n styleUrls: ['menubar.css', 'menu/menu.css'],\n shadow: true,\n})\nexport class ZanitMenubar {\n @Element() host: HTMLZanitMenubarElement;\n\n /** Menubar items extracted from `data`. */\n @State()\n items: MenubarItem[] = [];\n\n /** ID of the currently open menu. */\n @State()\n openMenu: string | undefined = undefined;\n\n /** ID of the item to show the subitems navbar for. */\n @State()\n openNavbar: string | undefined = undefined;\n\n /** IDs of the current prop */\n @State()\n currentPath: string[] = [];\n\n @State()\n isMobile: boolean = false;\n\n @State()\n loading: boolean = false;\n\n /** The data to build the menu (as an array of `MenubarItem` or a JSON array) or the url to fetch to retrieve it. */\n @Prop()\n data: Promise<MenubarItem[]> | MenubarItem[] | URL | string;\n\n /** Path of the current item. */\n @Prop()\n current: string | undefined = undefined;\n\n /**\n * Delay in milliseconds before closing the menu after a mouseout event.\n * Useful to avoid immediate closing when the pointer briefly leaves the component.\n */\n @Prop()\n mouseOutTimeout: number | undefined = 1000;\n\n /** Initial search query. */\n @Prop({ mutable: true })\n searchQuery: string | undefined = undefined;\n\n private timerId: number;\n\n /** Setup the list of items. */\n @Watch('data')\n async parseData(data: typeof this.data) {\n if (!data) {\n return;\n }\n\n if (data instanceof URL) {\n this.items = await this.fetchData(data);\n } else if (data instanceof Promise) {\n this.loading = true;\n this.items = await data;\n this.loading = false;\n } else if (typeof data === 'string') {\n try {\n this.items = JSON.parse(data);\n if (!Array.isArray(this.items) || !this.items?.every((item) => item satisfies MenubarItem)) {\n throw new Error('Expected an array of MenubarItem objects.');\n }\n } catch {\n let url: URL;\n try {\n url = new URL(data);\n } catch {\n throw new Error('Invalid string provided for `data` property: not a valid url or JSON.');\n }\n\n this.items = await this.fetchData(url);\n }\n } else if (Array.isArray(data) && data.every((item) => item satisfies MenubarItem)) {\n this.items = data;\n } else {\n throw new Error(\n 'Invalid `data` property value. Expected an url, a JSON or an array/promise of MenubarItem objects.'\n );\n }\n }\n\n @Watch('items')\n onItemsChange() {\n this.initTabindex();\n }\n\n @Watch('current')\n onCurrentChange() {\n this.currentPath = this.current?.split('/').filter(Boolean) || [];\n }\n\n async connectedCallback() {\n const mobileMediaQuery = window.matchMedia('(width < 768px)');\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.onchange = (mql) => {\n this.isMobile = mql.matches;\n this.initTabindex();\n this.openMenu = undefined;\n };\n await this.parseData(this.data);\n this.onCurrentChange();\n this.initTabindex();\n }\n\n /** Close any open menu when clicking outside. */\n @Listen('click', { target: 'document', passive: true })\n handleOutsideClick(event: MouseEvent) {\n if (!this.openMenu || containsTarget(this.host, event)) {\n return;\n }\n\n this.openMenu = undefined;\n }\n\n /** Close any open menu when pressing Escape or Tab. */\n @Listen('keydown', { passive: true })\n handleKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'Escape':\n case 'Tab':\n this.openMenu = undefined;\n break;\n }\n }\n\n @Listen('mouseover', { passive: true })\n handleMouseover() {\n clearTimeout(this.timerId);\n }\n\n @Listen('mouseout', { passive: true })\n handleMouseout(event: MouseEvent) {\n this.timerId = window.setTimeout(() => {\n if (!this.openMenu || containsTarget(this.host, event)) {\n return;\n }\n\n this.openMenu = undefined;\n }, this.mouseOutTimeout);\n }\n\n /** Close the menu when it loses focus. */\n @Listen('focusout', { passive: true })\n handleFocusout(event: FocusEvent) {\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (!this.openMenu || this.host.shadowRoot.querySelector('.menu')?.contains(relatedTarget)) {\n return;\n }\n\n this.openMenu = undefined;\n }\n\n /** Fetch data from passed URL. */\n private async fetchData(url: URL) {\n try {\n this.loading = true;\n const data = await (await fetch(url)).json();\n this.loading = false;\n if (!Array.isArray(data) || !data.every((item) => item satisfies MenubarItem)) {\n throw new Error('Invalid data structure. Expected an array of MenuItem objects.');\n }\n\n return data as MenubarItem[];\n } catch (error) {\n this.loading = false;\n console.error('Error fetching menubar data:', error);\n throw new Error('Failed to fetch menubar data from the provided URL.', { cause: error });\n }\n }\n\n /** Initialize tabindex on menuitems of menubars, setting -1 to all but the first one. */\n private initTabindex() {\n setTimeout(() => {\n this.host.shadowRoot.querySelectorAll('[role=\"menubar\"]')?.forEach((menubar) => {\n menubar\n .querySelectorAll('[role=\"menuitem\"]')\n ?.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));\n });\n }, 100);\n }\n\n /** Indicates whether the element has to be highlighted by checking whether it is set as current or one of its descendants is. */\n private isActive(item: MenubarItem) {\n if (this.currentPath.length === 0) {\n return false;\n }\n\n if (this.currentPath.includes(item.id)) {\n return true;\n }\n\n if (item.menuItems?.length) {\n return item.menuItems.some((menuItem) => menuItem.id === this.current);\n }\n\n if (item.navbarItems?.length) {\n const isActive = item.navbarItems.some((navbarItem) => this.isActive(navbarItem));\n if (isActive) {\n return true;\n }\n }\n\n return false;\n }\n\n /** Opens the menu associated with the menubar `item`, if any. */\n private showMenu(item: MenubarItem) {\n if (!item.menuItems?.length) {\n return;\n }\n\n this.openMenu = item.id;\n }\n\n /** Get all elements with `menuitem` role inside parent's `menubar`. * */\n private getParentMenubarElements(itemEl: HTMLElement) {\n return Array.from(\n itemEl?.closest('[role=\"menubar\"]')?.querySelectorAll(':scope > li a[role=\"menuitem\"]') ?? []\n ) as HTMLElement[];\n }\n\n /** Move the focus to the previous menubar item, or the last one. Then open its menu if any other menu was open. */\n private focusPreviousItem(itemEl: HTMLElement) {\n const menubarElements = this.getParentMenubarElements(itemEl);\n itemEl.tabIndex = -1;\n const currentIndex = menubarElements.indexOf(itemEl);\n const prevItem = menubarElements[(currentIndex - 1 + menubarElements.length) % menubarElements.length]; // get previous item or last one\n prevItem.tabIndex = 0;\n prevItem.focus();\n // open the item's menu if any other menu was open\n if (prevItem.ariaHasPopup === 'true' && this.openMenu) {\n this.openMenu = prevItem.id;\n }\n }\n\n /** Move the focus to the next menubar item, or the first one. Then open its menu if any other menu was open. */\n private focusNextItem(itemEl: HTMLElement) {\n const menubarElements = this.getParentMenubarElements(itemEl);\n itemEl.tabIndex = -1;\n const currentIndex = menubarElements.indexOf(itemEl);\n const nextItem = menubarElements[(currentIndex + 1) % menubarElements.length]; // get next item or first one\n nextItem.tabIndex = 0;\n nextItem.focus();\n // open the item's menu if any other menu was open\n if (nextItem.ariaHasPopup === 'true' && this.openMenu) {\n this.openMenu = nextItem.id;\n }\n }\n\n /** Handles keyboard navigation on menubar items. */\n private handleItemKeydown(event: KeyboardEvent, item: MenubarItem) {\n const target = event.target as HTMLElement;\n switch (event.key) {\n case 'Home': {\n event.preventDefault();\n event.stopPropagation();\n const firstItem = this.getParentMenubarElements(target)[0];\n moveFocus(target, firstItem);\n break;\n }\n case 'End': {\n event.preventDefault();\n event.stopPropagation();\n const lastItem = this.getParentMenubarElements(target).pop();\n moveFocus(target, lastItem);\n break;\n }\n case 'ArrowUp': {\n if (!item.menuItems?.length) {\n break;\n }\n event.preventDefault();\n event.stopPropagation();\n this.openMenu = item.id;\n // focus last item of the menu\n setTimeout(() => {\n const menuItems = Array.from(\n this.host.shadowRoot.querySelectorAll(`[aria-labelledby=${item.id}] [role=\"menuitem\"]`)\n ) as HTMLElement[];\n moveFocus(target, menuItems[menuItems.length - 1]);\n }, 100);\n break;\n }\n case 'ArrowRight': {\n event.preventDefault();\n event.stopPropagation();\n this.focusNextItem(target);\n break;\n }\n case 'ArrowDown': {\n if (!item.menuItems?.length) {\n break;\n }\n this.openMenu = item.id;\n setTimeout(() => {\n // focus first item of the menu\n const firsMenuItem = this.host.shadowRoot.querySelector(\n `[aria-labelledby=${item.id}] [role=\"menuitem\"]`\n ) as HTMLElement;\n firsMenuItem.tabIndex = 0;\n firsMenuItem.focus();\n }, 100);\n break;\n }\n case 'ArrowLeft': {\n event.preventDefault();\n event.stopPropagation();\n this.focusPreviousItem(target);\n break;\n }\n }\n }\n\n /** Get the previous element with `role=group`. */\n private getPreviousGroup(groupContainer: HTMLElement) {\n const groups = Array.from(\n groupContainer?.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"group\"]') ?? []\n ) as HTMLElement[];\n const currentIndex = groups.indexOf(groupContainer);\n\n return groups[currentIndex - 1];\n }\n\n /** Get the next element with `role=group`. */\n private getNextGroup(groupContainer: HTMLElement) {\n const groups = Array.from(\n groupContainer?.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"group\"]') ?? []\n ) as HTMLElement[];\n const currentIndex = groups.indexOf(groupContainer);\n\n return groups[currentIndex + 1];\n }\n\n /** Handles keyboard navigation events from `Menu` component. */\n private handleMenuKeydown(event: KeyboardEvent) {\n const itemElement = event.target as HTMLElement;\n const items = Array.from(\n itemElement.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"menuitem\"]') ?? []\n ) as HTMLElement[];\n const currentIndex = items.indexOf(itemElement);\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n event.stopPropagation();\n const prevItem = items[currentIndex - 1] || items[items.length - 1];\n moveFocus(itemElement, prevItem);\n break;\n }\n // Move the focus to the first item of the next group if any, otherwise move it to the next menubar item\n case 'ArrowRight': {\n event.preventDefault();\n event.stopPropagation();\n const currentGroup = itemElement.closest('[role=group]') as HTMLElement;\n const nextGroup = this.getNextGroup(currentGroup);\n if (!nextGroup) {\n itemElement.tabIndex = -1;\n const menuTriggerId = itemElement.closest('[role=\"menu\"][aria-labelledby]').getAttribute('aria-labelledby');\n const focusedItem = this.host.shadowRoot.getElementById(menuTriggerId);\n this.focusNextItem(focusedItem);\n break;\n }\n\n const nextGroupItems = (nextGroup.querySelectorAll('[role=\"menuitem\"]') ?? []) as HTMLElement[];\n moveFocus(itemElement, nextGroupItems[0]);\n break;\n }\n case 'ArrowDown': {\n event.preventDefault();\n event.stopPropagation();\n const nextItem = items[currentIndex + 1] || items[0];\n moveFocus(itemElement, nextItem);\n break;\n }\n // Move the focus to the first item of the previous group if any, otherwise move it to the previous menubar item\n case 'ArrowLeft': {\n event.preventDefault();\n event.stopPropagation();\n const currentGroup = itemElement.closest('[role=group]') as HTMLElement;\n const prevGroup = this.getPreviousGroup(currentGroup);\n if (!prevGroup) {\n itemElement.tabIndex = -1;\n const menuTriggerId = itemElement.closest('[role=\"menu\"][aria-labelledby]').getAttribute('aria-labelledby');\n const focusedItem = this.host.shadowRoot.getElementById(menuTriggerId);\n this.focusPreviousItem(focusedItem);\n break;\n }\n\n const prevGroupItems = (prevGroup.querySelectorAll('[role=\"menuitem\"]') ?? []) as HTMLElement[];\n moveFocus(itemElement, prevGroupItems[0]);\n break;\n }\n case 'Home':\n // Move to the first menu item\n event.preventDefault();\n event.stopPropagation();\n moveFocus(itemElement, items[0]);\n break;\n case 'End':\n // Move to the last menu item\n event.preventDefault();\n event.stopPropagation();\n moveFocus(itemElement, items[items.length - 1]);\n break;\n }\n }\n\n render() {\n if (this.isMobile) {\n return (\n <zanit-mobile-menubar\n items={this.items}\n currentPath={this.currentPath}\n searchQuery={this.searchQuery}\n loading={this.loading}\n />\n );\n }\n\n return (\n <nav aria-label=\"Zanichelli.it\">\n <div class=\"shadow-wrapper\">\n <div class=\"width-limiter\">\n <ul\n class=\"menubar\"\n role=\"menubar\"\n aria-label=\"Zanichelli.it\"\n >\n {this.loading &&\n [...new Array(4)].map((_, index) => (\n <Fragment>\n <li role=\"none\">\n <div class=\"menubar-item\">\n <z-ghost-loading></z-ghost-loading>\n </div>\n </li>\n {index < 3 && <li role=\"separator\"></li>}\n </Fragment>\n ))}\n {this.items?.map((item, index) => (\n <Fragment>\n <li role=\"none\">\n <a\n class={{\n 'menubar-item': true,\n 'active': this.isActive(item),\n }}\n href={item.href}\n id={item.id}\n role=\"menuitem\"\n tabIndex={-1}\n aria-expanded={\n item.menuItems?.length ? (this.openMenu === item.id ? 'true' : 'false') : undefined\n }\n aria-haspopup={item.menuItems?.length ? 'true' : 'false'}\n aria-current={this.current.includes(item.id) ? 'page' : 'false'}\n onPointerOver={() => this.showMenu(item)}\n onKeyDown={(event) => this.handleItemKeydown(event, item)}\n >\n <span data-text={item.label}>{item.label}</span>\n {item.menuItems?.length > 0 && (\n <z-icon\n name={this.openMenu === item.id ? 'chevron-up' : 'chevron-down'}\n width=\"0.875rem\"\n height=\"0.875rem\"\n />\n )}\n </a>\n </li>\n {index < this.items?.length - 1 && <li role=\"separator\"></li>}\n </Fragment>\n ))}\n </ul>\n <zanit-search-form\n searchQuery={this.searchQuery}\n onResetSearch={() => (this.searchQuery = undefined)}\n />\n </div>\n\n {this.items.map(\n (item) =>\n this.openMenu === item.id && (\n <Menu\n controlledBy={item.id}\n items={item.menuItems}\n currentPath={this.currentPath}\n onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n />\n )\n )}\n </div>\n\n {this.items\n ?.filter((item) => this.isActive(item))\n .map(\n (item) =>\n item.navbarItems?.length && (\n <nav class={{ 'sub-menubar': true, 'shadow-wrapper': true }}>\n <ul role=\"menubar\">\n {item.navbarItems.map((subitem) => (\n <Fragment>\n <li role=\"none\">\n <a\n class={{\n 'menubar-item': true,\n 'active': this.isActive(subitem),\n }}\n href={subitem.href}\n id={subitem.id}\n role=\"menuitem\"\n tabIndex={-1}\n aria-haspopup={subitem.menuItems?.length ? 'true' : 'false'}\n aria-expanded={\n subitem.menuItems?.length ? (this.openMenu === subitem.id ? 'true' : 'false') : undefined\n }\n aria-current={this.current.includes(subitem.id) ? 'page' : 'false'}\n onPointerOver={() => this.showMenu(subitem)}\n onKeyDown={(event) => this.handleItemKeydown(event, subitem)}\n >\n <span>{subitem.label}</span>\n {subitem.menuItems?.length > 0 && (\n <z-icon\n name={this.openMenu === subitem.id ? 'chevron-up' : 'chevron-down'}\n width=\"0.75rem\"\n height=\"0.75rem\"\n />\n )}\n </a>\n </li>\n </Fragment>\n ))}\n </ul>\n {item.navbarItems.map(\n (subitem) =>\n this.openMenu === subitem.id && (\n <Menu\n controlledBy={subitem.id}\n items={subitem.menuItems}\n currentPath={this.currentPath}\n onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n />\n )\n )}\n </nav>\n )\n )}\n </nav>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"zanit-menubar.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,g+DAAg+D;;ACAn/D,MAAM,OAAO,GAAG,87CAA87C;;MCej8CA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;IAKvB,KAAK,GAAkB,EAAE;;IAIzB,QAAQ,GAAuB,SAAS;;IAIxC,UAAU,GAAuB,SAAS;;IAI1C,WAAW,GAAa,EAAE;IAG1B,QAAQ,GAAY,KAAK;IAGzB,OAAO,GAAY,KAAK;;AAIxB,IAAA,IAAI;;IAIJ,OAAO,GAAuB,SAAS;;IAIvC,WAAW,GAAuB,SAAS;AAEnC,IAAA,OAAO;;IAIf,MAAM,SAAS,CAAC,IAAsB,EAAA;QACpC,IAAI,CAAC,IAAI,EAAE;YACT;;AAGF,QAAA,IAAI,IAAI,YAAY,GAAG,EAAE;YACvB,IAAI,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;;AAClC,aAAA,IAAI,IAAI,YAAY,OAAO,EAAE;AAClC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,IAAI;AACvB,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AACf,aAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AACnC,YAAA,IAAI;gBACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;gBAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,IAAI,KAAK,IAA0B,CAAC,EAAE;AAC1F,oBAAA,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC;;;AAE9D,YAAA,MAAM;AACN,gBAAA,IAAI,GAAQ;AACZ,gBAAA,IAAI;AACF,oBAAA,GAAG,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC;;AACnB,gBAAA,MAAM;AACN,oBAAA,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC;;gBAG1F,IAAI,CAAC,KAAK,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;;;AAEnC,aAAA,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,IAA0B,CAAC,EAAE;AAClF,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI;;aACZ;AACL,YAAA,MAAM,IAAI,KAAK,CACb,oGAAoG,CACrG;;;IAKL,aAAa,GAAA;QACX,IAAI,CAAC,YAAY,EAAE;;IAIrB,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE;;AAGnE,IAAA,MAAM,iBAAiB,GAAA;QACrB,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC;AAC7D,QAAA,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,OAAO;AACxC,QAAA,gBAAgB,CAAC,QAAQ,GAAG,CAAC,GAAG,KAAI;AAClC,YAAA,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,OAAO;YAC3B,IAAI,CAAC,YAAY,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;AAC3B,SAAC;QACD,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;QAC/B,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,YAAY,EAAE;;;AAKrB,IAAA,kBAAkB,CAAC,KAAiB,EAAA;AAClC,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;YACtD;;AAGF,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;;;AAK3B,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,QAAQ;AACb,YAAA,KAAK,KAAK;AACR,gBAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;gBACzB;;;IAKN,eAAe,GAAA;AACb,QAAA,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC;;AAG5B;;;AAGG;AAEH,IAAA,cAAc,CAAC,KAAiB,EAAA;QAC9B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,MAAK;AACpC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;gBACtD;;AAGF,YAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;SAC1B,EAAE,GAAG,CAAC;;;AAKT,IAAA,cAAc,CAAC,KAAiB,EAAA;AAC9B,QAAA,MAAM,aAAa,GAAG,KAAK,CAAC,aAA4B;QACxD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE;YAC1F;;AAGF,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS;;;IAInB,MAAM,SAAS,CAAC,GAAQ,EAAA;AAC9B,QAAA,IAAI;AACF,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;AACnB,YAAA,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,KAAK,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE;AAC5C,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;YACpB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,IAA0B,CAAC,EAAE;AAC7E,gBAAA,MAAM,IAAI,KAAK,CAAC,gEAAgE,CAAC;;AAGnF,YAAA,OAAO,IAAqB;;QAC5B,OAAO,KAAK,EAAE;AACd,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,YAAA,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,KAAK,CAAC;YACpD,MAAM,IAAI,KAAK,CAAC,qDAAqD,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;;;;IAKpF,YAAY,GAAA;QAClB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,KAAI;gBAC7E;qBACG,gBAAgB,CAAC,mBAAmB;AACrC,sBAAE,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,CAAC;AACvF,aAAC,CAAC;SACH,EAAE,GAAG,CAAC;;;AAID,IAAA,QAAQ,CAAC,IAAiB,EAAA;QAChC,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;AACjC,YAAA,OAAO,KAAK;;QAGd,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACtC,YAAA,OAAO,IAAI;;AAGb,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE;AAC1B,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,CAAC;;AAGxE,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE;YAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;YACjF,IAAI,QAAQ,EAAE;AACZ,gBAAA,OAAO,IAAI;;;AAIf,QAAA,OAAO,KAAK;;;AAIN,IAAA,QAAQ,CAAC,IAAiB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE;YAC3B;;AAGF,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE;;;AAIjB,IAAA,wBAAwB,CAAC,MAAmB,EAAA;AAClD,QAAA,OAAO,KAAK,CAAC,IAAI,CACf,MAAM,EAAE,OAAO,CAAC,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,gCAAgC,CAAC,IAAI,EAAE,CAC7E;;;AAIZ,IAAA,iBAAiB,CAAC,MAAmB,EAAA;AAC3C,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC;AAC7D,QAAA,MAAM,CAAC,QAAQ,GAAG,EAAE;QACpB,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC;QACpD,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC,YAAY,GAAG,CAAC,GAAG,eAAe,CAAC,MAAM,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC;AACvG,QAAA,QAAQ,CAAC,QAAQ,GAAG,CAAC;QACrB,QAAQ,CAAC,KAAK,EAAE;;QAEhB,IAAI,QAAQ,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;AACrD,YAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,EAAE;;;;AAKvB,IAAA,aAAa,CAAC,MAAmB,EAAA;AACvC,QAAA,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC;QAC1B,MAAM,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC;AAC7D,QAAA,MAAM,CAAC,QAAQ,GAAG,EAAE;QACpB,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC;AACpD,QAAA,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC,YAAY,GAAG,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC;AAC9E,QAAA,QAAQ,CAAC,QAAQ,GAAG,CAAC;QACrB,QAAQ,CAAC,KAAK,EAAE;;QAEhB,IAAI,QAAQ,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE;AACrD,YAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,EAAE;;;;IAKvB,iBAAiB,CAAC,KAAoB,EAAE,IAAiB,EAAA;AAC/D,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,QAAA,QAAQ,KAAK,CAAC,GAAG;YACf,KAAK,MAAM,EAAE;gBACX,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB,MAAM,SAAS,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAC1D,gBAAA,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC;gBAC5B;;YAEF,KAAK,KAAK,EAAE;gBACV,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,wBAAwB,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE;AAC5D,gBAAA,SAAS,CAAC,MAAM,EAAE,QAAQ,CAAC;gBAC3B;;YAEF,KAAK,SAAS,EAAE;AACd,gBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE;oBAC3B;;gBAEF,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE;;gBAEvB,UAAU,CAAC,MAAK;oBACd,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAoB,iBAAA,EAAA,IAAI,CAAC,EAAE,CAAA,mBAAA,CAAqB,CAAC,CACvE;AAClB,oBAAA,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;iBACnD,EAAE,GAAG,CAAC;gBACP;;YAEF,KAAK,YAAY,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;gBAC1B;;YAEF,KAAK,WAAW,EAAE;AAChB,gBAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE;oBAC3B;;AAEF,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE;gBACvB,UAAU,CAAC,MAAK;;AAEd,oBAAA,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CACrD,oBAAoB,IAAI,CAAC,EAAE,CAAA,mBAAA,CAAqB,CAClC;AAChB,oBAAA,YAAY,CAAC,QAAQ,GAAG,CAAC;oBACzB,YAAY,CAAC,KAAK,EAAE;iBACrB,EAAE,GAAG,CAAC;gBACP;;YAEF,KAAK,WAAW,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC;gBAC9B;;;;;AAME,IAAA,gBAAgB,CAAC,cAA2B,EAAA;QAClD,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CACvB,cAAc,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAClE;QAClB,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC;AAEnD,QAAA,OAAO,MAAM,CAAC,YAAY,GAAG,CAAC,CAAC;;;AAIzB,IAAA,YAAY,CAAC,cAA2B,EAAA;QAC9C,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CACvB,cAAc,EAAE,OAAO,CAAC,eAAe,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAClE;QAClB,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC;AAEnD,QAAA,OAAO,MAAM,CAAC,YAAY,GAAG,CAAC,CAAC;;;AAIzB,IAAA,iBAAiB,CAAC,KAAoB,EAAA;AAC5C,QAAA,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAC/C,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,WAAW,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,gBAAgB,CAAC,mBAAmB,CAAC,IAAI,EAAE,CACjE;QAClB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC;AAC/C,QAAA,QAAQ,KAAK,CAAC,GAAG;YACf,KAAK,SAAS,EAAE;gBACd,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AACnE,gBAAA,SAAS,CAAC,WAAW,EAAE,QAAQ,CAAC;gBAChC;;;YAGF,KAAK,YAAY,EAAE;gBACjB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,cAAc,CAAgB;gBACvE,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC;gBACjD,IAAI,CAAC,SAAS,EAAE;AACd,oBAAA,WAAW,CAAC,QAAQ,GAAG,EAAE;AACzB,oBAAA,MAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC;AAC3G,oBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,aAAa,CAAC;AACtE,oBAAA,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;oBAC/B;;AAGF,gBAAA,MAAM,cAAc,IAAI,SAAS,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAkB;gBAC/F,SAAS,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;gBACzC;;YAEF,KAAK,WAAW,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC;AACpD,gBAAA,SAAS,CAAC,WAAW,EAAE,QAAQ,CAAC;gBAChC;;;YAGF,KAAK,WAAW,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,cAAc,CAAgB;gBACvE,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC;gBACrD,IAAI,CAAC,SAAS,EAAE;AACd,oBAAA,WAAW,CAAC,QAAQ,GAAG,EAAE;AACzB,oBAAA,MAAM,aAAa,GAAG,WAAW,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC;AAC3G,oBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,aAAa,CAAC;AACtE,oBAAA,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC;oBACnC;;AAGF,gBAAA,MAAM,cAAc,IAAI,SAAS,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAkB;gBAC/F,SAAS,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;gBACzC;;AAEF,YAAA,KAAK,MAAM;;gBAET,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;gBACvB,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;gBAChC;AACF,YAAA,KAAK,KAAK;;gBAER,KAAK,CAAC,cAAc,EAAE;gBACtB,KAAK,CAAC,eAAe,EAAE;AACvB,gBAAA,SAAS,CAAC,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBAC/C;;;IAIN,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,QACE,CACE,CAAA,sBAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,CAAA;;QAIN,QACE,yBAAgB,eAAe,EAAA,EAC7B,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CACE,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,gBACH,eAAe,EAAA,EAEzB,IAAI,CAAC,OAAO;YACX,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,MAC7B,EAAC,QAAQ,EAAA,IAAA,EACP,CAAI,CAAA,IAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACb,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,iBAAA,EAAA,IAAA,CAAmC,CAC/B,CACH,EACJ,KAAK,GAAG,CAAC,IAAI,CAAI,CAAA,IAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAA,CAAM,CAC/B,CACZ,CAAC,EACH,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC3B,EAAC,QAAQ,EAAA,IAAA,EACP,CAAI,CAAA,IAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACb,CAAA,CAAA,GAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AAC9B,aAAA,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,EAAE,EAEV,eAAA,EAAA,IAAI,CAAC,SAAS,EAAE,MAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,EAAE,GAAG,MAAM,GAAG,OAAO,IAAI,SAAS,EAEtE,eAAA,EAAA,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,cAAA,EAC1C,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,OAAO,EAC/D,aAAa,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAEnB,CAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EAAiB,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,KAAK,CAAQ,EAC/C,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,KACzB,CACE,CAAA,QAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,EAAE,GAAG,YAAY,GAAG,cAAc,EAC/D,KAAK,EAAC,UAAU,EAChB,MAAM,EAAC,UAAU,EACjB,CAAA,CACH,CACC,CACD,EACJ,KAAK,GAAG,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,IAAI,CAAA,CAAA,IAAA,EAAA,EAAI,IAAI,EAAC,WAAW,GAAM,CACpD,CACZ,CAAC,CACC,EACL,CAAA,CAAA,mBAAA,EAAA,EACE,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC,GACnD,CACE,EAEL,IAAI,CAAC,KAAK,CAAC,GAAG,CACb,CAAC,IAAI,KACH,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,EAAE,KACvB,CAAA,CAAC,IAAI,EAAA,EACH,YAAY,EAAE,IAAI,CAAC,EAAE,EACrB,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAA,CACvD,CACH,CACJ,CACG,EAEL,IAAI,CAAC;AACJ,cAAE,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACrC,aAAA,GAAG,CACF,CAAC,IAAI,KACH,IAAI,CAAC,WAAW,EAAE,MAAM,KACtB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAA,EACzD,CAAA,CAAA,IAAA,EAAA,EAAI,IAAI,EAAC,SAAS,EACf,EAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,MAC5B,EAAC,QAAQ,EAAA,IAAA,EACP,CAAI,CAAA,IAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACb,CAAA,CAAA,GAAA,EAAA,EACE,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;aACjC,EACD,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,EAAE,EAAE,OAAO,CAAC,EAAE,EACd,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,EAAE,EACG,eAAA,EAAA,OAAO,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAEzD,OAAO,CAAC,SAAS,EAAE,MAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,EAAE,GAAG,MAAM,GAAG,OAAO,IAAI,SAAS,EAAA,cAAA,EAE7E,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,OAAO,EAClE,aAAa,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAC3C,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,OAAO,CAAC,EAC5D,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAEnB,CAAO,CAAA,MAAA,EAAA,IAAA,EAAA,OAAO,CAAC,KAAK,CAAQ,EAC3B,OAAO,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,KAC5B,CAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,EAAE,GAAG,YAAY,GAAG,cAAc,EAClE,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,SAAS,GAChB,CACH,CACC,CACD,CACI,CACZ,CAAC,CACC,EACJ,IAAI,CAAC,WAAW,CAAC,GAAG,CACnB,CAAC,OAAO,KACN,IAAI,CAAC,QAAQ,KAAK,OAAO,CAAC,EAAE,KAC1B,CAAA,CAAC,IAAI,EAAA,EACH,YAAY,EAAE,OAAO,CAAC,EAAE,EACxB,KAAK,EAAE,OAAO,CAAC,SAAS,EACxB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,aAAa,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAA,CACvD,CACH,CACJ,CACG,CACP,CACJ,CACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZanitMenubar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/menubar/menubar.css?tag=zanit-menubar&encapsulation=shadow","src/components/menubar/menu/menu.css?tag=zanit-menubar&encapsulation=shadow","src/components/menubar/menubar.tsx"],"sourcesContent":[":host {\n --zanit-menubar-max-width: ;\n\n position: relative;\n z-index: 2;\n display: flex;\n width: 100%;\n background-color: #fff;\n color: 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\n:host nav {\n width: 100%;\n}\n\n.shadow-wrapper {\n position: relative;\n z-index: 1;\n display: flex;\n width: 100%;\n}\n\n.shadow-wrapper::after {\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n box-shadow: var(--shadow-1);\n content: '';\n pointer-events: none;\n}\n\n.width-limiter {\n position: relative;\n display: flex;\n width: 100%;\n max-width: var(--zanit-menubar-max-width, 1366px);\n margin: 0 auto;\n}\n\n.shadow-wrapper + .shadow-wrapper {\n z-index: 0;\n}\n\n.sub-menubar > ul {\n gap: 28px;\n}\n\n.width-limiter > ul,\n.sub-menubar > ul {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 0 var(--grid-margin);\n margin-right: auto;\n margin-left: auto;\n gap: 20px;\n}\n\n.shadow-wrapper > .width-limiter,\n.shadow-wrapper > ul {\n width: 100%;\n max-width: var(--zanit-menubar-max-width, 1366px);\n}\n\nul.menubar {\n padding-right: 0;\n}\n\n.menubar z-ghost-loading {\n display: block;\n width: 120px;\n height: 1.25rem;\n}\n\n/* separator bar */\n.menubar > li[role='separator'] {\n width: 1px;\n height: 1.25rem;\n background-color: #000;\n}\n\n.menubar-item {\n position: relative;\n display: flex;\n align-items: center;\n padding: 14px 0;\n font-size: 1rem;\n gap: 8px;\n line-height: 1.25rem;\n}\n\n.menubar .menubar-item {\n text-transform: uppercase;\n}\n\n.menubar-item [data-text] {\n display: flex;\n flex-direction: column;\n}\n\n.menubar-item.active > [data-text],\n.menubar-item:hover > [data-text],\n.menubar-item:focus:focus-visible > [data-text] {\n font-weight: var(--font-bd);\n}\n\n/* To avoid size changes in the element, when it is hovered and becomes bold,\nwe put the same text already bold with height 0, so as to always occupy the maximum necessary width. */\n.menubar-item > [data-text]::after {\n height: 0;\n content: attr(data-text) / '';\n font-weight: var(--font-bd);\n letter-spacing: normal;\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n/* active item bottom border */\n.sub-menubar .menubar-item.active::after {\n position: absolute;\n z-index: -1;\n bottom: 0;\n left: -4px;\n width: calc(100% + 8px); /* the border is 4px per side larger than its container */\n height: 4px;\n background-color: var(--red500);\n content: '';\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-rg);\n}\n\n.menu .group .menu-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.menu .group .menu-list .menu-item {\n border-bottom: 2px solid transparent;\n font-size: 0.875rem;\n font-weight: var(--font-md);\n}\n\n.menu .menu-list .menu-item.active,\n.menu .menu-list .menu-item:hover {\n border-bottom-color: var(--red500);\n}\n\n.menu .group.highlight .menu-list .menu-item {\n font-size: 1rem;\n}\n\n@media (width >= 768px) {\n .menu-wrapper {\n position: absolute;\n top: 100%;\n left: 0;\n display: flex;\n justify-content: center;\n box-shadow: var(--shadow-1);\n }\n\n .menu {\n display: grid;\n width: 100%;\n max-width: var(--zanit-menubar-max-width, 1366px);\n padding: 16px var(--grid-margin);\n gap: 0 24px;\n grid-auto-columns: minmax(0, max-content);\n grid-auto-flow: column;\n grid-template-rows: minmax(0, max-content) max-content;\n }\n\n .menu .group {\n display: grid;\n grid-row: 1 / -1;\n grid-template-columns: 1fr;\n grid-template-rows: subgrid;\n }\n\n @supports not (grid-template-rows: subgrid) {\n .menu .group {\n grid-template-rows: repeat(auto-fit, minmax(0, max-content));\n }\n }\n\n .menu .group .group-name {\n border: none;\n margin-bottom: 16px;\n }\n\n .menu .group .menu-list .menu-item {\n font-size: 1rem;\n }\n\n .menu .group.highlight .menu-list .menu-item {\n font-size: 1.5rem;\n }\n\n .menu .group.highlight .menu-list {\n gap: 24px;\n }\n}\n","import { Component, Element, Fragment, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { MenubarItem } from '../../utils/types';\nimport { containsTarget, moveFocus } from '../../utils/utils';\nimport { Menu } from './menu/menu';\n\n/**\n * Main menubar component. Each item can have a menu with subitems\n * When a main menubar item is the current active one, a sub-menubar is shown and each subitem can have a menu with subitems.\n * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.\n */\n@Component({\n tag: 'zanit-menubar',\n styleUrls: ['menubar.css', 'menu/menu.css'],\n shadow: true,\n})\nexport class ZanitMenubar {\n @Element() host: HTMLZanitMenubarElement;\n\n /** Menubar items extracted from `data`. */\n @State()\n items: MenubarItem[] = [];\n\n /** ID of the currently open menu. */\n @State()\n openMenu: string | undefined = undefined;\n\n /** ID of the item to show the subitems navbar for. */\n @State()\n openNavbar: string | undefined = undefined;\n\n /** IDs of the current prop */\n @State()\n currentPath: string[] = [];\n\n @State()\n isMobile: boolean = false;\n\n @State()\n loading: boolean = false;\n\n /** The data to build the menu (as an array of `MenubarItem` or a JSON array) or the url to fetch to retrieve it. */\n @Prop()\n data: Promise<MenubarItem[]> | MenubarItem[] | URL | string;\n\n /** Path of the current item. */\n @Prop()\n current: string | undefined = undefined;\n\n /** Initial search query. */\n @Prop({ mutable: true })\n searchQuery: string | undefined = undefined;\n\n private timerId: number;\n\n /** Setup the list of items. */\n @Watch('data')\n async parseData(data: typeof this.data) {\n if (!data) {\n return;\n }\n\n if (data instanceof URL) {\n this.items = await this.fetchData(data);\n } else if (data instanceof Promise) {\n this.loading = true;\n this.items = await data;\n this.loading = false;\n } else if (typeof data === 'string') {\n try {\n this.items = JSON.parse(data);\n if (!Array.isArray(this.items) || !this.items?.every((item) => item satisfies MenubarItem)) {\n throw new Error('Expected an array of MenubarItem objects.');\n }\n } catch {\n let url: URL;\n try {\n url = new URL(data);\n } catch {\n throw new Error('Invalid string provided for `data` property: not a valid url or JSON.');\n }\n\n this.items = await this.fetchData(url);\n }\n } else if (Array.isArray(data) && data.every((item) => item satisfies MenubarItem)) {\n this.items = data;\n } else {\n throw new Error(\n 'Invalid `data` property value. Expected an url, a JSON or an array/promise of MenubarItem objects.'\n );\n }\n }\n\n @Watch('items')\n onItemsChange() {\n this.initTabindex();\n }\n\n @Watch('current')\n onCurrentChange() {\n this.currentPath = this.current?.split('/').filter(Boolean) || [];\n }\n\n async connectedCallback() {\n const mobileMediaQuery = window.matchMedia('(width < 768px)');\n this.isMobile = mobileMediaQuery.matches;\n mobileMediaQuery.onchange = (mql) => {\n this.isMobile = mql.matches;\n this.initTabindex();\n this.openMenu = undefined;\n };\n await this.parseData(this.data);\n this.onCurrentChange();\n this.initTabindex();\n }\n\n /** Close any open menu when clicking outside. */\n @Listen('click', { target: 'document', passive: true })\n handleOutsideClick(event: MouseEvent) {\n if (!this.openMenu || containsTarget(this.host, event)) {\n return;\n }\n\n this.openMenu = undefined;\n }\n\n /** Close any open menu when pressing Escape or Tab. */\n @Listen('keydown', { passive: true })\n handleKeydown(event: KeyboardEvent) {\n switch (event.key) {\n case 'Escape':\n case 'Tab':\n this.openMenu = undefined;\n break;\n }\n }\n\n @Listen('mouseover', { passive: true })\n handleMouseover() {\n clearTimeout(this.timerId);\n }\n\n /**\n * Automatically close any open menu on mouseout after with a little delay.\n * The delay is useful to avoid immediate closing when the pointer briefly leaves the component.\n */\n @Listen('mouseout', { passive: true })\n handleMouseout(event: MouseEvent) {\n this.timerId = window.setTimeout(() => {\n if (!this.openMenu || containsTarget(this.host, event)) {\n return;\n }\n\n this.openMenu = undefined;\n }, 500);\n }\n\n /** Close the menu when it loses focus. */\n @Listen('focusout', { passive: true })\n handleFocusout(event: FocusEvent) {\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (!this.openMenu || this.host.shadowRoot.querySelector('.menu')?.contains(relatedTarget)) {\n return;\n }\n\n this.openMenu = undefined;\n }\n\n /** Fetch data from passed URL. */\n private async fetchData(url: URL) {\n try {\n this.loading = true;\n const data = await (await fetch(url)).json();\n this.loading = false;\n if (!Array.isArray(data) || !data.every((item) => item satisfies MenubarItem)) {\n throw new Error('Invalid data structure. Expected an array of MenuItem objects.');\n }\n\n return data as MenubarItem[];\n } catch (error) {\n this.loading = false;\n console.error('Error fetching menubar data:', error);\n throw new Error('Failed to fetch menubar data from the provided URL.', { cause: error });\n }\n }\n\n /** Initialize tabindex on menuitems of menubars, setting -1 to all but the first one. */\n private initTabindex() {\n setTimeout(() => {\n this.host.shadowRoot.querySelectorAll('[role=\"menubar\"]')?.forEach((menubar) => {\n menubar\n .querySelectorAll('[role=\"menuitem\"]')\n ?.forEach((item, index) => item.setAttribute('tabindex', index === 0 ? '0' : '-1'));\n });\n }, 100);\n }\n\n /** Indicates whether the element has to be highlighted by checking whether it is set as current or one of its descendants is. */\n private isActive(item: MenubarItem) {\n if (this.currentPath.length === 0) {\n return false;\n }\n\n if (this.currentPath.includes(item.id)) {\n return true;\n }\n\n if (item.menuItems?.length) {\n return item.menuItems.some((menuItem) => menuItem.id === this.current);\n }\n\n if (item.navbarItems?.length) {\n const isActive = item.navbarItems.some((navbarItem) => this.isActive(navbarItem));\n if (isActive) {\n return true;\n }\n }\n\n return false;\n }\n\n /** Opens the menu associated with the menubar `item`, if any. */\n private showMenu(item: MenubarItem) {\n this.openMenu = undefined; // close any open menu first\n if (!item.menuItems?.length) {\n return;\n }\n\n this.openMenu = item.id;\n }\n\n /** Get all elements with `menuitem` role inside parent's `menubar`. * */\n private getParentMenubarElements(itemEl: HTMLElement) {\n return Array.from(\n itemEl?.closest('[role=\"menubar\"]')?.querySelectorAll(':scope > li a[role=\"menuitem\"]') ?? []\n ) as HTMLElement[];\n }\n\n /** Move the focus to the previous menubar item, or the last one. Then open its menu if any other menu was open. */\n private focusPreviousItem(itemEl: HTMLElement) {\n this.openMenu = undefined; // close any open menu first\n const menubarElements = this.getParentMenubarElements(itemEl);\n itemEl.tabIndex = -1;\n const currentIndex = menubarElements.indexOf(itemEl);\n const prevItem = menubarElements[(currentIndex - 1 + menubarElements.length) % menubarElements.length]; // get previous item or last one\n prevItem.tabIndex = 0;\n prevItem.focus();\n // open the item's menu if any other menu was open\n if (prevItem.ariaHasPopup === 'true' && this.openMenu) {\n this.openMenu = prevItem.id;\n }\n }\n\n /** Move the focus to the next menubar item, or the first one. Then open its menu if any other menu was open. */\n private focusNextItem(itemEl: HTMLElement) {\n this.openMenu = undefined; // close any open menu first\n const menubarElements = this.getParentMenubarElements(itemEl);\n itemEl.tabIndex = -1;\n const currentIndex = menubarElements.indexOf(itemEl);\n const nextItem = menubarElements[(currentIndex + 1) % menubarElements.length]; // get next item or first one\n nextItem.tabIndex = 0;\n nextItem.focus();\n // open the item's menu if any other menu was open\n if (nextItem.ariaHasPopup === 'true' && this.openMenu) {\n this.openMenu = nextItem.id;\n }\n }\n\n /** Handles keyboard navigation on menubar items. */\n private handleItemKeydown(event: KeyboardEvent, item: MenubarItem) {\n const target = event.target as HTMLElement;\n switch (event.key) {\n case 'Home': {\n event.preventDefault();\n event.stopPropagation();\n const firstItem = this.getParentMenubarElements(target)[0];\n moveFocus(target, firstItem);\n break;\n }\n case 'End': {\n event.preventDefault();\n event.stopPropagation();\n const lastItem = this.getParentMenubarElements(target).pop();\n moveFocus(target, lastItem);\n break;\n }\n case 'ArrowUp': {\n if (!item.menuItems?.length) {\n break;\n }\n event.preventDefault();\n event.stopPropagation();\n this.openMenu = item.id;\n // focus last item of the menu\n setTimeout(() => {\n const menuItems = Array.from(\n this.host.shadowRoot.querySelectorAll(`[aria-labelledby=${item.id}] [role=\"menuitem\"]`)\n ) as HTMLElement[];\n moveFocus(target, menuItems[menuItems.length - 1]);\n }, 100);\n break;\n }\n case 'ArrowRight': {\n event.preventDefault();\n event.stopPropagation();\n this.focusNextItem(target);\n break;\n }\n case 'ArrowDown': {\n if (!item.menuItems?.length) {\n break;\n }\n this.openMenu = item.id;\n setTimeout(() => {\n // focus first item of the menu\n const firsMenuItem = this.host.shadowRoot.querySelector(\n `[aria-labelledby=${item.id}] [role=\"menuitem\"]`\n ) as HTMLElement;\n firsMenuItem.tabIndex = 0;\n firsMenuItem.focus();\n }, 100);\n break;\n }\n case 'ArrowLeft': {\n event.preventDefault();\n event.stopPropagation();\n this.focusPreviousItem(target);\n break;\n }\n }\n }\n\n /** Get the previous element with `role=group`. */\n private getPreviousGroup(groupContainer: HTMLElement) {\n const groups = Array.from(\n groupContainer?.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"group\"]') ?? []\n ) as HTMLElement[];\n const currentIndex = groups.indexOf(groupContainer);\n\n return groups[currentIndex - 1];\n }\n\n /** Get the next element with `role=group`. */\n private getNextGroup(groupContainer: HTMLElement) {\n const groups = Array.from(\n groupContainer?.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"group\"]') ?? []\n ) as HTMLElement[];\n const currentIndex = groups.indexOf(groupContainer);\n\n return groups[currentIndex + 1];\n }\n\n /** Handles keyboard navigation events from `Menu` component. */\n private handleMenuKeydown(event: KeyboardEvent) {\n const itemElement = event.target as HTMLElement;\n const items = Array.from(\n itemElement.closest('[role=\"menu\"]')?.querySelectorAll('[role=\"menuitem\"]') ?? []\n ) as HTMLElement[];\n const currentIndex = items.indexOf(itemElement);\n switch (event.key) {\n case 'ArrowUp': {\n event.preventDefault();\n event.stopPropagation();\n const prevItem = items[currentIndex - 1] || items[items.length - 1];\n moveFocus(itemElement, prevItem);\n break;\n }\n // Move the focus to the first item of the next group if any, otherwise move it to the next menubar item\n case 'ArrowRight': {\n event.preventDefault();\n event.stopPropagation();\n const currentGroup = itemElement.closest('[role=group]') as HTMLElement;\n const nextGroup = this.getNextGroup(currentGroup);\n if (!nextGroup) {\n itemElement.tabIndex = -1;\n const menuTriggerId = itemElement.closest('[role=\"menu\"][aria-labelledby]').getAttribute('aria-labelledby');\n const focusedItem = this.host.shadowRoot.getElementById(menuTriggerId);\n this.focusNextItem(focusedItem);\n break;\n }\n\n const nextGroupItems = (nextGroup.querySelectorAll('[role=\"menuitem\"]') ?? []) as HTMLElement[];\n moveFocus(itemElement, nextGroupItems[0]);\n break;\n }\n case 'ArrowDown': {\n event.preventDefault();\n event.stopPropagation();\n const nextItem = items[currentIndex + 1] || items[0];\n moveFocus(itemElement, nextItem);\n break;\n }\n // Move the focus to the first item of the previous group if any, otherwise move it to the previous menubar item\n case 'ArrowLeft': {\n event.preventDefault();\n event.stopPropagation();\n const currentGroup = itemElement.closest('[role=group]') as HTMLElement;\n const prevGroup = this.getPreviousGroup(currentGroup);\n if (!prevGroup) {\n itemElement.tabIndex = -1;\n const menuTriggerId = itemElement.closest('[role=\"menu\"][aria-labelledby]').getAttribute('aria-labelledby');\n const focusedItem = this.host.shadowRoot.getElementById(menuTriggerId);\n this.focusPreviousItem(focusedItem);\n break;\n }\n\n const prevGroupItems = (prevGroup.querySelectorAll('[role=\"menuitem\"]') ?? []) as HTMLElement[];\n moveFocus(itemElement, prevGroupItems[0]);\n break;\n }\n case 'Home':\n // Move to the first menu item\n event.preventDefault();\n event.stopPropagation();\n moveFocus(itemElement, items[0]);\n break;\n case 'End':\n // Move to the last menu item\n event.preventDefault();\n event.stopPropagation();\n moveFocus(itemElement, items[items.length - 1]);\n break;\n }\n }\n\n render() {\n if (this.isMobile) {\n return (\n <zanit-mobile-menubar\n items={this.items}\n currentPath={this.currentPath}\n searchQuery={this.searchQuery}\n loading={this.loading}\n />\n );\n }\n\n return (\n <nav aria-label=\"Zanichelli.it\">\n <div class=\"shadow-wrapper\">\n <div class=\"width-limiter\">\n <ul\n class=\"menubar\"\n role=\"menubar\"\n aria-label=\"Zanichelli.it\"\n >\n {this.loading &&\n [...new Array(4)].map((_, index) => (\n <Fragment>\n <li role=\"none\">\n <div class=\"menubar-item\">\n <z-ghost-loading></z-ghost-loading>\n </div>\n </li>\n {index < 3 && <li role=\"separator\"></li>}\n </Fragment>\n ))}\n {this.items?.map((item, index) => (\n <Fragment>\n <li role=\"none\">\n <a\n class={{\n 'menubar-item': true,\n 'active': this.isActive(item),\n }}\n href={item.href}\n id={item.id}\n role=\"menuitem\"\n tabIndex={-1}\n aria-expanded={\n item.menuItems?.length ? (this.openMenu === item.id ? 'true' : 'false') : undefined\n }\n aria-haspopup={item.menuItems?.length ? 'true' : 'false'}\n aria-current={this.current.includes(item.id) ? 'page' : 'false'}\n onPointerOver={() => this.showMenu(item)}\n onKeyDown={(event) => this.handleItemKeydown(event, item)}\n target={item.target}\n >\n <span data-text={item.label}>{item.label}</span>\n {item.menuItems?.length > 0 && (\n <z-icon\n name={this.openMenu === item.id ? 'chevron-up' : 'chevron-down'}\n width=\"0.875rem\"\n height=\"0.875rem\"\n />\n )}\n </a>\n </li>\n {index < this.items?.length - 1 && <li role=\"separator\"></li>}\n </Fragment>\n ))}\n </ul>\n <zanit-search-form\n searchQuery={this.searchQuery}\n onResetSearch={() => (this.searchQuery = undefined)}\n />\n </div>\n\n {this.items.map(\n (item) =>\n this.openMenu === item.id && (\n <Menu\n controlledBy={item.id}\n items={item.menuItems}\n currentPath={this.currentPath}\n onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n />\n )\n )}\n </div>\n\n {this.items\n ?.filter((item) => this.isActive(item))\n .map(\n (item) =>\n item.navbarItems?.length && (\n <nav class={{ 'sub-menubar': true, 'shadow-wrapper': true }}>\n <ul role=\"menubar\">\n {item.navbarItems.map((subitem) => (\n <Fragment>\n <li role=\"none\">\n <a\n class={{\n 'menubar-item': true,\n 'active': this.isActive(subitem),\n }}\n href={subitem.href}\n id={subitem.id}\n role=\"menuitem\"\n tabIndex={-1}\n aria-haspopup={subitem.menuItems?.length ? 'true' : 'false'}\n aria-expanded={\n subitem.menuItems?.length ? (this.openMenu === subitem.id ? 'true' : 'false') : undefined\n }\n aria-current={this.current.includes(subitem.id) ? 'page' : 'false'}\n onPointerOver={() => this.showMenu(subitem)}\n onKeyDown={(event) => this.handleItemKeydown(event, subitem)}\n target={item.target}\n >\n <span>{subitem.label}</span>\n {subitem.menuItems?.length > 0 && (\n <z-icon\n name={this.openMenu === subitem.id ? 'chevron-up' : 'chevron-down'}\n width=\"0.75rem\"\n height=\"0.75rem\"\n />\n )}\n </a>\n </li>\n </Fragment>\n ))}\n </ul>\n {item.navbarItems.map(\n (subitem) =>\n this.openMenu === subitem.id && (\n <Menu\n controlledBy={subitem.id}\n items={subitem.menuItems}\n currentPath={this.currentPath}\n onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n />\n )\n )}\n </nav>\n )\n )}\n </nav>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Z as ZanitMobileMenubar$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { Z as ZanitMobileMenubar$1, d as defineCustomElement$1 } from './p-DGmSfTXD.js';
|
|
2
2
|
|
|
3
3
|
const ZanitMobileMenubar = ZanitMobileMenubar$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Z as ZanitSearchForm$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { Z as ZanitSearchForm$1, d as defineCustomElement$1 } from './p-CiHl-h3q.js';
|
|
2
2
|
|
|
3
3
|
const ZanitSearchForm = ZanitSearchForm$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -395,9 +395,6 @@ var parsePropertyValue = (propValue, propType) => {
|
|
|
395
395
|
if (propType & 4 /* Boolean */) {
|
|
396
396
|
return propValue === "false" ? false : propValue === "" || !!propValue;
|
|
397
397
|
}
|
|
398
|
-
if (propType & 2 /* Number */) {
|
|
399
|
-
return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
|
|
400
|
-
}
|
|
401
398
|
if (propType & 1 /* String */) {
|
|
402
399
|
return String(propValue);
|
|
403
400
|
}
|
|
@@ -1502,6 +1499,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
|
|
|
1502
1499
|
var setNonce = (nonce) => plt.$nonce$ = nonce;
|
|
1503
1500
|
|
|
1504
1501
|
export { Fragment as F, getElement as a, bootstrapLazy as b, createEvent as c, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
|
|
1505
|
-
//# sourceMappingURL=index-
|
|
1502
|
+
//# sourceMappingURL=index-BWVQ0LD4.js.map
|
|
1506
1503
|
|
|
1507
|
-
//# sourceMappingURL=index-
|
|
1504
|
+
//# sourceMappingURL=index-BWVQ0LD4.js.map
|