@zanichelli/zanichelli-it-frontend-kit 0.0.1-rc.9 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/dist/cjs/{index-CPHNzI-S.js → index-C45Wd3rZ.js} +40 -9
  2. package/dist/cjs/index-C45Wd3rZ.js.map +1 -0
  3. package/dist/cjs/loader.cjs.js +3 -4
  4. package/dist/cjs/loader.cjs.js.map +1 -1
  5. package/dist/cjs/zanichelli-it-frontend-kit.cjs.js +4 -5
  6. package/dist/cjs/zanichelli-it-frontend-kit.cjs.js.map +1 -1
  7. package/dist/cjs/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.cjs.js.map +1 -0
  8. package/dist/cjs/{zanit-menubar_2.cjs.entry.js → zanit-menubar_3.cjs.entry.js} +120 -75
  9. package/dist/cjs/zanit-menubar_3.cjs.entry.js.map +1 -0
  10. package/dist/collection/collection-manifest.json +3 -2
  11. package/dist/collection/components/menubar/menu/menu.js +1 -1
  12. package/dist/collection/components/menubar/menu/menu.js.map +1 -1
  13. package/dist/collection/components/menubar/menubar.css +22 -80
  14. package/dist/collection/components/menubar/menubar.js +55 -67
  15. package/dist/collection/components/menubar/menubar.js.map +1 -1
  16. package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.css +0 -51
  17. package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js +2 -41
  18. package/dist/collection/components/menubar/mobile-menubar/mobile-menubar.js.map +1 -1
  19. package/dist/collection/components/menubar/search-form/search-form.css +147 -0
  20. package/dist/collection/components/menubar/search-form/search-form.js +173 -0
  21. package/dist/collection/components/menubar/search-form/search-form.js.map +1 -0
  22. package/dist/components/index.js +15 -4
  23. package/dist/components/index.js.map +1 -1
  24. package/dist/components/{p-XjRfDlOp.js → p-CWNmI_TK.js} +15 -48
  25. package/dist/components/p-CWNmI_TK.js.map +1 -0
  26. package/dist/components/p-Cphl7FvH.js +135 -0
  27. package/dist/components/p-Cphl7FvH.js.map +1 -0
  28. package/dist/components/zanit-menubar.js +37 -56
  29. package/dist/components/zanit-menubar.js.map +1 -1
  30. package/dist/components/zanit-mobile-menubar.js +1 -1
  31. package/dist/components/zanit-search-form.d.ts +11 -0
  32. package/dist/components/zanit-search-form.js +9 -0
  33. package/dist/components/zanit-search-form.js.map +1 -0
  34. package/dist/esm/{index-DywnjgyN.js → index-BGwuI2U_.js} +21 -9
  35. package/dist/esm/index-BGwuI2U_.js.map +1 -0
  36. package/dist/esm/loader.js +3 -4
  37. package/dist/esm/loader.js.map +1 -1
  38. package/dist/esm/zanichelli-it-frontend-kit.js +4 -5
  39. package/dist/esm/zanichelli-it-frontend-kit.js.map +1 -1
  40. package/dist/esm/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.js.map +1 -0
  41. package/dist/esm/{zanit-menubar_2.entry.js → zanit-menubar_3.entry.js} +120 -76
  42. package/dist/esm/zanit-menubar_3.entry.js.map +1 -0
  43. package/dist/types/components/menubar/menubar.d.ts +9 -15
  44. package/dist/types/components/menubar/mobile-menubar/mobile-menubar.d.ts +0 -10
  45. package/dist/types/components/menubar/search-form/search-form.d.ts +27 -0
  46. package/dist/types/components.d.ts +57 -29
  47. package/dist/types/stencil-public-runtime.d.ts +1 -1
  48. package/dist/zanichelli-it-frontend-kit/loader.esm.js.map +1 -1
  49. package/dist/zanichelli-it-frontend-kit/p-BGwuI2U_.js +3 -0
  50. package/dist/zanichelli-it-frontend-kit/p-BGwuI2U_.js.map +1 -0
  51. package/dist/zanichelli-it-frontend-kit/p-b064a657.entry.js +2 -0
  52. package/dist/zanichelli-it-frontend-kit/p-b064a657.entry.js.map +1 -0
  53. package/dist/zanichelli-it-frontend-kit/zanichelli-it-frontend-kit.esm.js +1 -1
  54. package/dist/zanichelli-it-frontend-kit/zanichelli-it-frontend-kit.esm.js.map +1 -1
  55. package/dist/zanichelli-it-frontend-kit/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +1 -0
  56. package/package.json +11 -7
  57. package/www/build/loader.esm.js.map +1 -1
  58. package/www/build/p-BGwuI2U_.js +3 -0
  59. package/www/build/p-BGwuI2U_.js.map +1 -0
  60. package/www/build/p-b064a657.entry.js +2 -0
  61. package/www/build/p-b064a657.entry.js.map +1 -0
  62. package/www/build/p-ff7fd122.js +2 -0
  63. package/www/build/zanichelli-it-frontend-kit.esm.js +1 -1
  64. package/www/build/zanichelli-it-frontend-kit.esm.js.map +1 -1
  65. package/www/build/zanit-menubar.zanit-mobile-menubar.zanit-search-form.entry.esm.js.map +1 -0
  66. package/www/index.html +3 -3
  67. package/dist/cjs/app-globals-V2Kpy_OQ.js +0 -8
  68. package/dist/cjs/app-globals-V2Kpy_OQ.js.map +0 -1
  69. package/dist/cjs/index-CPHNzI-S.js.map +0 -1
  70. package/dist/cjs/zanit-menubar.zanit-mobile-menubar.entry.cjs.js.map +0 -1
  71. package/dist/cjs/zanit-menubar_2.cjs.entry.js.map +0 -1
  72. package/dist/components/p-XjRfDlOp.js.map +0 -1
  73. package/dist/esm/app-globals-DQuL1Twl.js +0 -6
  74. package/dist/esm/app-globals-DQuL1Twl.js.map +0 -1
  75. package/dist/esm/index-DywnjgyN.js.map +0 -1
  76. package/dist/esm/zanit-menubar.zanit-mobile-menubar.entry.js.map +0 -1
  77. package/dist/esm/zanit-menubar_2.entry.js.map +0 -1
  78. package/dist/zanichelli-it-frontend-kit/p-2ff77197.entry.js +0 -2
  79. package/dist/zanichelli-it-frontend-kit/p-2ff77197.entry.js.map +0 -1
  80. package/dist/zanichelli-it-frontend-kit/p-DQuL1Twl.js +0 -2
  81. package/dist/zanichelli-it-frontend-kit/p-DQuL1Twl.js.map +0 -1
  82. package/dist/zanichelli-it-frontend-kit/p-DywnjgyN.js +0 -3
  83. package/dist/zanichelli-it-frontend-kit/p-DywnjgyN.js.map +0 -1
  84. package/dist/zanichelli-it-frontend-kit/zanit-menubar.zanit-mobile-menubar.entry.esm.js.map +0 -1
  85. package/www/build/p-2ff77197.entry.js +0 -2
  86. package/www/build/p-2ff77197.entry.js.map +0 -1
  87. package/www/build/p-9ba51e3a.js +0 -2
  88. package/www/build/p-DQuL1Twl.js +0 -2
  89. package/www/build/p-DQuL1Twl.js.map +0 -1
  90. package/www/build/p-DywnjgyN.js +0 -3
  91. package/www/build/p-DywnjgyN.js.map +0 -1
  92. package/www/build/zanit-menubar.zanit-mobile-menubar.entry.esm.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menubar/menu/menu.tsx"],"names":[],"mappings":"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","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} current - The id of the current active 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 current?: 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, current, onItemKeyDown }) => {\n if (!items?.length) {\n return null;\n }\n\n const groups = getGroupedItems(items);\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\n class={{ group: true, highlight: items.some((item) => item.highlight) }}\n role=\"none\"\n >\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={{ 'menu-item': true, 'active': current === item.id }}\n href={item.href}\n role=\"menuitem\"\n tabIndex={-1}\n aria-current={current === item.id ? 'page' : 'false'}\n onKeyDown={(event) => onItemKeyDown(event)}\n >\n {item.label}\n </a>\n )}\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"]}
1
+ {"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menubar/menu/menu.tsx"],"names":[],"mappings":"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","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} current - The id of the current active 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 current?: 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, current, onItemKeyDown }) => {\n if (!items?.length) {\n return null;\n }\n\n const groups = getGroupedItems(items);\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={{ 'menu-item': true, 'active': current === item.id }}\n href={item.href}\n role=\"menuitem\"\n tabIndex={-1}\n aria-current={current === item.id ? 'page' : 'false'}\n onKeyDown={(event) => onItemKeyDown(event)}\n >\n {item.label}\n </a>\n )}\n </li>\n ))}\n </ul>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"]}
@@ -46,6 +46,7 @@ button {
46
46
  .shadow-wrapper {
47
47
  position: relative;
48
48
  z-index: 1;
49
+ display: flex;
49
50
  width: 100%;
50
51
  }
51
52
 
@@ -61,15 +62,27 @@ button {
61
62
  pointer-events: none;
62
63
  }
63
64
 
65
+ .width-limiter {
66
+ position: relative;
67
+ display: flex;
68
+ width: 100%;
69
+ max-width: var(--zanit-menubar-max-width, 1366px);
70
+ margin: 0 auto;
71
+ }
72
+
64
73
  .shadow-wrapper + .shadow-wrapper {
65
74
  z-index: 0;
66
75
  }
67
76
 
68
- .shadow-wrapper > ul {
77
+ .sub-menubar > ul {
78
+ gap: 28px;
79
+ }
80
+
81
+ .width-limiter > ul,
82
+ .sub-menubar > ul {
69
83
  position: relative;
70
84
  display: flex;
71
85
  width: 100%;
72
- max-width: var(--zanit-menubar-max-width, 1366px);
73
86
  align-items: center;
74
87
  padding: 0 var(--grid-margin);
75
88
  margin-right: auto;
@@ -77,6 +90,12 @@ button {
77
90
  gap: 20px;
78
91
  }
79
92
 
93
+ .shadow-wrapper > .width-limiter,
94
+ .shadow-wrapper > ul {
95
+ width: 100%;
96
+ max-width: var(--zanit-menubar-max-width, 1366px);
97
+ }
98
+
80
99
  ul.menubar {
81
100
  padding-right: 0;
82
101
  }
@@ -135,10 +154,6 @@ we put the same text already bold with height 0, so as to always occupy the maxi
135
154
  display: none;
136
155
  }
137
156
 
138
- .sub-menubar > ul {
139
- gap: 28px;
140
- }
141
-
142
157
  /* active item bottom border */
143
158
  .sub-menubar .menubar-item.active::after {
144
159
  position: absolute;
@@ -151,79 +166,6 @@ we put the same text already bold with height 0, so as to always occupy the maxi
151
166
  content: '';
152
167
  }
153
168
 
154
- .searchbar-container {
169
+ zanit-search-form {
155
170
  margin-left: auto;
156
171
  }
157
-
158
- .searchbar {
159
- display: flex;
160
- font-size: 1.5rem;
161
- }
162
-
163
- .searchbar.searchbar-open {
164
- position: absolute;
165
- width: 100%;
166
- height: 100%;
167
- inset: 0;
168
- }
169
-
170
- .searchbar .input-wrapper {
171
- display: flex;
172
- width: 100%;
173
- align-items: center;
174
- padding: 0 var(--grid-margin);
175
- background-color: #fff;
176
- gap: 14px;
177
- }
178
-
179
- .searchbar button[type='reset'] {
180
- display: flex;
181
- height: 100%;
182
- align-items: center;
183
- border-radius: 4px;
184
- cursor: pointer;
185
- }
186
-
187
- .searchbar input {
188
- z-index: 1;
189
- width: 100%;
190
- height: 100%;
191
- padding: 8px 0;
192
- border: none;
193
- background-color: #fff;
194
- font-family: var(--font-family-sans);
195
- font-size: inherit;
196
- }
197
-
198
- .searchbar input[type='search']::-webkit-search-cancel-button,
199
- .searchbar input[type='search']::-webkit-search-decoration {
200
- appearance: none;
201
- }
202
-
203
- .searchbar input::placeholder {
204
- color: var(--gray500);
205
- }
206
-
207
- .searchbar .searchbar-button {
208
- display: flex;
209
- align-items: center;
210
- padding: 8px 16px;
211
- border-right: 1px solid #000;
212
- border-left: 1px solid #000;
213
- background: var(--zanit-accent-color);
214
- font-family: inherit;
215
- font-size: inherit;
216
- gap: 64px;
217
- line-height: 1;
218
- }
219
-
220
- .searchbar input:focus:focus-visible,
221
- .searchbar .searchbar-button:focus:focus-visible {
222
- z-index: 1;
223
- }
224
-
225
- @media (width >= 768px) and (width < 1152px) {
226
- .searchbar .searchbar-button > .searchbar-button-label {
227
- display: none;
228
- }
229
- }
@@ -7,7 +7,6 @@ import { Menu } from "./menu/menu";
7
7
  * @cssprop {--zanit-menubar-max-width} Maximum width of the menubar.
8
8
  */
9
9
  export class ZanitMenubar {
10
- formElement;
11
10
  host;
12
11
  /** Menubar items extracted from `data`. */
13
12
  items = [];
@@ -15,18 +14,20 @@ export class ZanitMenubar {
15
14
  openMenu = undefined;
16
15
  /** ID of the item to show the subitems navbar for. */
17
16
  openNavbar = undefined;
18
- /** Indicates whether the searchbar is visible and usable. */
19
- showSearchbar = false;
20
- /** Search query to apply. */
21
- _searchQuery = undefined;
22
17
  isMobile = false;
23
18
  loading = false;
24
19
  /** The data to build the menu (as an array of `MenubarItem` or a JSON array) or the url to fetch to retrieve it. */
25
20
  data;
26
21
  /** ID of the current active item. */
27
22
  current = undefined;
23
+ /**
24
+ * Delay in milliseconds before closing the menu after a mouseout event.
25
+ * Useful to avoid immediate closing when the pointer briefly leaves the component.
26
+ */
27
+ mouseOutTimeout = 1000;
28
28
  /** Initial search query. */
29
29
  searchQuery = undefined;
30
+ timerId;
30
31
  /** Setup the list of items. */
31
32
  async parseData(data) {
32
33
  if (!data) {
@@ -52,7 +53,7 @@ export class ZanitMenubar {
52
53
  try {
53
54
  url = new URL(data);
54
55
  }
55
- catch (error) {
56
+ catch {
56
57
  throw new Error('Invalid string provided for `data` property: not a valid url or JSON.');
57
58
  }
58
59
  this.items = await this.fetchData(url);
@@ -68,38 +69,19 @@ export class ZanitMenubar {
68
69
  onItemsChange() {
69
70
  this.initTabindex();
70
71
  }
71
- /** Focus searchbar input when it becomes visible. */
72
- onShowSearchbar() {
73
- if (!this.showSearchbar) {
74
- return;
75
- }
76
- setTimeout(() => {
77
- const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input');
78
- if (this.showSearchbar && !this.searchQuery) {
79
- searchbarInput.focus();
80
- }
81
- }, 100);
82
- }
83
- /** Emitted on search form submission. */
84
- search;
85
72
  async connectedCallback() {
86
- this.showSearchbar = !!this.searchQuery;
87
73
  const mobileMediaQuery = window.matchMedia('(width < 768px)');
88
74
  this.isMobile = mobileMediaQuery.matches;
89
75
  mobileMediaQuery.onchange = (mql) => {
90
76
  this.isMobile = mql.matches;
91
77
  this.initTabindex();
92
78
  this.openMenu = undefined;
93
- this.showSearchbar = false;
94
79
  };
95
80
  await this.parseData(this.data);
96
81
  this.initTabindex();
97
82
  }
98
- /** Close open searchbar or any open menu when clicking outside. */
83
+ /** Close any open menu when clicking outside. */
99
84
  handleOutsideClick(event) {
100
- if (this.showSearchbar && this.formElement && !containsTarget(this.formElement, event)) {
101
- this.showSearchbar = false;
102
- }
103
85
  if (!this.openMenu || containsTarget(this.host, event)) {
104
86
  return;
105
87
  }
@@ -114,6 +96,17 @@ export class ZanitMenubar {
114
96
  break;
115
97
  }
116
98
  }
99
+ handleMouseover() {
100
+ clearTimeout(this.timerId);
101
+ }
102
+ handleMouseout(event) {
103
+ this.timerId = window.setTimeout(() => {
104
+ if (!this.openMenu || containsTarget(this.host, event)) {
105
+ return;
106
+ }
107
+ this.openMenu = undefined;
108
+ }, this.mouseOutTimeout);
109
+ }
117
110
  /** Close the menu when it loses focus. */
118
111
  handleFocusout(event) {
119
112
  const relatedTarget = event.relatedTarget;
@@ -311,7 +304,7 @@ export class ZanitMenubar {
311
304
  break;
312
305
  }
313
306
  // Move the focus to the first item of the previous group if any, otherwise move it to the previous menubar item
314
- case 'ArrowLeft':
307
+ case 'ArrowLeft': {
315
308
  event.preventDefault();
316
309
  event.stopPropagation();
317
310
  const currentGroup = itemElement.closest('[role=group]');
@@ -326,6 +319,7 @@ export class ZanitMenubar {
326
319
  const prevGroupItems = (prevGroup.querySelectorAll('[role="menuitem"]') ?? []);
327
320
  moveFocus(itemElement, prevGroupItems[0]);
328
321
  break;
322
+ }
329
323
  case 'Home':
330
324
  // Move to the first menu item
331
325
  event.preventDefault();
@@ -340,27 +334,12 @@ export class ZanitMenubar {
340
334
  break;
341
335
  }
342
336
  }
343
- handleInputChange(event) {
344
- this._searchQuery = event.target.value;
345
- }
346
- onSearchSubmit(event) {
347
- event.preventDefault();
348
- if (!this._searchQuery) {
349
- return;
350
- }
351
- const searchEv = this.search.emit({ query: this._searchQuery });
352
- // do not submit the form if the event default behavior was prevented
353
- if (searchEv.defaultPrevented) {
354
- return;
355
- }
356
- this.formElement.submit();
357
- }
358
337
  render() {
359
338
  if (this.isMobile) {
360
339
  return (h("zanit-mobile-menubar", { items: this.items, current: this.current, searchQuery: this.searchQuery, loading: this.loading }));
361
340
  }
362
- return (h("nav", { "aria-label": "Zanichelli.it" }, h("div", { class: "shadow-wrapper", role: "none" }, h("ul", { class: "menubar", role: "menubar", "aria-label": "Zanichelli.it" }, this.loading &&
363
- [...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: { 'menubar-item': true, 'active': this.isActive(item) }, href: item.href, id: item.id, role: "menuitem", tabIndex: -1, "aria-expanded": this.openMenu === item.id ? 'true' : 'false', "aria-haspopup": item.menuItems?.length ? 'true' : 'false', "aria-current": this.current === 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("li", { class: "searchbar-container", role: "none" }, 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.searchQuery = undefined) }, this.showSearchbar && (h("div", { class: "input-wrapper", 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.showSearchbar = true) }, this.showSearchbar ? null : h("span", { class: "searchbar-button-label" }, "Cerca"), h("z-icon", { name: "search", width: "2rem", height: "2rem" }))))), this.items.map((item) => this.openMenu === item.id && (h(Menu, { controlledBy: item.id, items: item.menuItems, current: this.current, onItemKeyDown: (event) => this.handleMenuKeydown(event) })))), this.items?.map((item) => item.navbarItems?.length && (h("nav", { class: { 'sub-menubar': true, 'shadow-wrapper': true, 'visible': this.isActive(item) } }, h("ul", { role: "menubar" }, item.navbarItems.map((subitem) => (h(Fragment, null, h("li", { role: "none" }, h("a", { class: { 'menubar-item': true, 'active': this.isActive(subitem) }, href: subitem.href, id: subitem.id, role: "menuitem", tabIndex: -1, "aria-haspopup": subitem.menuItems?.length ? 'true' : 'false', "aria-expanded": this.openMenu === subitem.id ? 'true' : 'false', "aria-current": this.current === item.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, current: this.current, onItemKeyDown: (event) => this.handleMenuKeydown(event) }))))))));
341
+ return (h("nav", { "aria-label": "Zanichelli.it" }, h("div", { class: "shadow-wrapper" }, h("div", { class: "width-limiter" }, h("ul", { class: "menubar", role: "menubar", "aria-label": "Zanichelli.it" }, this.loading &&
342
+ [...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: { 'menubar-item': true, 'active': this.isActive(item) }, href: item.href, id: item.id, role: "menuitem", tabIndex: -1, "aria-expanded": item.menuItems?.length ? (this.openMenu === item.id ? 'true' : 'false') : undefined, "aria-haspopup": item.menuItems?.length ? 'true' : 'false', "aria-current": this.current === 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, current: this.current, onItemKeyDown: (event) => this.handleMenuKeydown(event) })))), this.items?.map((item) => item.navbarItems?.length && (h("nav", { class: { 'sub-menubar': true, 'shadow-wrapper': true, 'visible': this.isActive(item) } }, h("ul", { role: "menubar" }, item.navbarItems.map((subitem) => (h(Fragment, null, h("li", { role: "none" }, h("a", { class: { 'menubar-item': true, 'active': this.isActive(subitem) }, href: subitem.href, id: subitem.id, role: "menuitem", tabIndex: -1, "aria-haspopup": subitem.menuItems?.length ? 'true' : 'false', "aria-expanded": subitem.menuItems?.length ? (this.openMenu === subitem.id ? 'true' : 'false') : undefined, "aria-current": this.current === item.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, current: this.current, onItemKeyDown: (event) => this.handleMenuKeydown(event) }))))))));
364
343
  }
365
344
  static get is() { return "zanit-menubar"; }
366
345
  static get encapsulation() { return "shadow"; }
@@ -429,6 +408,26 @@ export class ZanitMenubar {
429
408
  "reflect": false,
430
409
  "defaultValue": "undefined"
431
410
  },
411
+ "mouseOutTimeout": {
412
+ "type": "number",
413
+ "attribute": "mouse-out-timeout",
414
+ "mutable": false,
415
+ "complexType": {
416
+ "original": "number | undefined",
417
+ "resolved": "number",
418
+ "references": {}
419
+ },
420
+ "required": false,
421
+ "optional": false,
422
+ "docs": {
423
+ "tags": [],
424
+ "text": "Delay in milliseconds before closing the menu after a mouseout event.\nUseful to avoid immediate closing when the pointer briefly leaves the component."
425
+ },
426
+ "getter": false,
427
+ "setter": false,
428
+ "reflect": false,
429
+ "defaultValue": "1000"
430
+ },
432
431
  "searchQuery": {
433
432
  "type": "string",
434
433
  "attribute": "search-query",
@@ -456,30 +455,10 @@ export class ZanitMenubar {
456
455
  "items": {},
457
456
  "openMenu": {},
458
457
  "openNavbar": {},
459
- "showSearchbar": {},
460
- "_searchQuery": {},
461
458
  "isMobile": {},
462
459
  "loading": {}
463
460
  };
464
461
  }
465
- static get events() {
466
- return [{
467
- "method": "search",
468
- "name": "search",
469
- "bubbles": true,
470
- "cancelable": true,
471
- "composed": true,
472
- "docs": {
473
- "tags": [],
474
- "text": "Emitted on search form submission."
475
- },
476
- "complexType": {
477
- "original": "{ query: string }",
478
- "resolved": "{ query: string; }",
479
- "references": {}
480
- }
481
- }];
482
- }
483
462
  static get elementRef() { return "host"; }
484
463
  static get watchers() {
485
464
  return [{
@@ -488,9 +467,6 @@ export class ZanitMenubar {
488
467
  }, {
489
468
  "propName": "items",
490
469
  "methodName": "onItemsChange"
491
- }, {
492
- "propName": "showSearchbar",
493
- "methodName": "onShowSearchbar"
494
470
  }];
495
471
  }
496
472
  static get listeners() {
@@ -506,6 +482,18 @@ export class ZanitMenubar {
506
482
  "target": undefined,
507
483
  "capture": false,
508
484
  "passive": true
485
+ }, {
486
+ "name": "mouseover",
487
+ "method": "handleMouseover",
488
+ "target": undefined,
489
+ "capture": false,
490
+ "passive": true
491
+ }, {
492
+ "name": "mouseout",
493
+ "method": "handleMouseout",
494
+ "target": undefined,
495
+ "capture": false,
496
+ "passive": true
509
497
  }, {
510
498
  "name": "focusout",
511
499
  "method": "handleFocusout",
@@ -1 +1 @@
1
- {"version":3,"file":"menubar.js","sourceRoot":"","sources":["../../../src/components/menubar/menubar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, 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 private formElement: HTMLFormElement;\n\n @Element() host: HTMLZanitMenubarElement;\n\n /** Menubar items extracted from `data`. */\n @State() items: MenubarItem[] = [];\n\n /** ID of the currently open menu. */\n @State() openMenu: string | undefined = undefined;\n\n /** ID of the item to show the subitems navbar for. */\n @State() openNavbar: string | undefined = undefined;\n\n /** Indicates whether the searchbar is visible and usable. */\n @State() showSearchbar: boolean = false;\n\n /** Search query to apply. */\n @State() _searchQuery: string | undefined = undefined;\n\n @State() isMobile: boolean = false;\n\n @State() 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() data: Promise<MenubarItem[]> | MenubarItem[] | URL | string;\n\n /** ID of the current active item. */\n @Prop() current: string | undefined = undefined;\n\n /** Initial search query. */\n @Prop({ mutable: true }) searchQuery: string | undefined = undefined;\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 (error) {\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 /** Focus searchbar input when it becomes visible. */\n @Watch('showSearchbar')\n onShowSearchbar() {\n if (!this.showSearchbar) {\n return;\n }\n\n setTimeout(() => {\n const searchbarInput = this.host.shadowRoot.querySelector('#searchbar-input') as HTMLInputElement;\n if (this.showSearchbar && !this.searchQuery) {\n searchbarInput.focus();\n }\n }, 100);\n }\n\n /** Emitted on search form submission. */\n @Event({ cancelable: true }) search: EventEmitter<{ query: string }>;\n\n 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 this.initTabindex();\n this.openMenu = undefined;\n this.showSearchbar = false;\n };\n await this.parseData(this.data);\n this.initTabindex();\n }\n\n /** Close open searchbar or any open menu 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 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 /** 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 (item.id === this.current) {\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 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 private handleInputChange(event: Event) {\n this._searchQuery = (event.target as HTMLInputElement).value;\n }\n\n private onSearchSubmit(event: Event) {\n event.preventDefault();\n if (!this._searchQuery) {\n return;\n }\n\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 <zanit-mobile-menubar\n items={this.items}\n current={this.current}\n searchQuery={this.searchQuery}\n loading={this.loading}\n />\n );\n }\n\n return (\n <nav aria-label=\"Zanichelli.it\">\n <div\n class=\"shadow-wrapper\"\n role=\"none\"\n >\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={{ 'menubar-item': true, 'active': this.isActive(item) }}\n href={item.href}\n id={item.id}\n role=\"menuitem\"\n tabIndex={-1}\n aria-expanded={this.openMenu === item.id ? 'true' : 'false'}\n aria-haspopup={item.menuItems?.length ? 'true' : 'false'}\n aria-current={this.current === 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 <li\n class=\"searchbar-container\"\n role=\"none\"\n >\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.searchQuery = undefined)}\n >\n {this.showSearchbar && (\n <div\n class=\"input-wrapper\"\n role=\"none\"\n >\n {this.searchQuery && (\n <button\n type=\"reset\"\n aria-label=\"Svuota campo di ricerca\"\n >\n <z-icon\n name=\"multiply-circled\"\n width=\"1.5rem\"\n height=\"1.5rem\"\n />\n </button>\n )}\n <input\n id=\"searchbar-input\"\n name=\"q\"\n type=\"search\"\n placeholder=\"Cerca per parola chiave o ISBN\"\n onInput={(event) => this.handleInputChange(event)}\n value={this.searchQuery}\n required\n ></input>\n </div>\n )}\n <button\n class=\"searchbar-button\"\n aria-label=\"Cerca\"\n aria-controls=\"searchbar-input\"\n type={this.showSearchbar ? 'submit' : 'button'}\n onClick={() => (this.showSearchbar = true)}\n >\n {this.showSearchbar ? null : <span class=\"searchbar-button-label\">Cerca</span>}\n <z-icon\n name=\"search\"\n width=\"2rem\"\n height=\"2rem\"\n ></z-icon>\n </button>\n </form>\n </li>\n </ul>\n {this.items.map(\n (item) =>\n this.openMenu === item.id && (\n <Menu\n controlledBy={item.id}\n items={item.menuItems}\n current={this.current}\n onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n />\n )\n )}\n </div>\n\n {this.items?.map(\n (item) =>\n item.navbarItems?.length && (\n <nav class={{ 'sub-menubar': true, 'shadow-wrapper': true, 'visible': this.isActive(item) }}>\n <ul role=\"menubar\">\n {item.navbarItems.map((subitem) => (\n <Fragment>\n <li role=\"none\">\n <a\n class={{ 'menubar-item': true, 'active': this.isActive(subitem) }}\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={this.openMenu === subitem.id ? 'true' : 'false'}\n aria-current={this.current === item.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 current={this.current}\n onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n />\n )\n )}\n </nav>\n )\n )}\n </nav>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"menubar.js","sourceRoot":"","sources":["../../../src/components/menubar/menubar.tsx"],"names":[],"mappings":"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","sourcesContent":["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 @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 /** ID of the current active 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 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.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 (item.id === this.current) {\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 current={this.current}\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={{ 'menubar-item': true, 'active': this.isActive(item) }}\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 === 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 current={this.current}\n onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n />\n )\n )}\n </div>\n\n {this.items?.map(\n (item) =>\n item.navbarItems?.length && (\n <nav class={{ 'sub-menubar': true, 'shadow-wrapper': true, 'visible': this.isActive(item) }}>\n <ul role=\"menubar\">\n {item.navbarItems.map((subitem) => (\n <Fragment>\n <li role=\"none\">\n <a\n class={{ 'menubar-item': true, 'active': this.isActive(subitem) }}\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 === item.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 current={this.current}\n onItemKeyDown={(event) => this.handleMenuKeydown(event)}\n />\n )\n )}\n </nav>\n )\n )}\n </nav>\n );\n }\n}\n"]}
@@ -75,57 +75,6 @@ nav::after {
75
75
  gap: 8px;
76
76
  }
77
77
 
78
- .searchbar {
79
- display: flex;
80
- align-items: center;
81
- border: 1px solid #000;
82
- border-radius: 4px;
83
- }
84
-
85
- .searchbar > *:first-child {
86
- /* 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 */
87
- border-bottom-left-radius: 3px;
88
- border-top-left-radius: 3px;
89
- }
90
-
91
- .searchbar button[type='reset'] {
92
- display: flex;
93
- padding: 0 0 0 8px;
94
- cursor: pointer;
95
- }
96
-
97
- .searchbar input {
98
- width: 100%;
99
- height: 100%;
100
- padding: 4px 8px;
101
- border: none;
102
- background-color: #fff;
103
- font-family: var(--font-family-sans);
104
- font-size: 1rem;
105
- }
106
-
107
- .searchbar input[type='search']::-webkit-search-cancel-button,
108
- .searchbar input[type='search']::-webkit-search-decoration {
109
- appearance: none;
110
- }
111
-
112
- .searchbar input::placeholder {
113
- color: var(--gray500);
114
- }
115
-
116
- .searchbar .searchbar-button {
117
- padding: 4px 8px;
118
- border-left: 1px solid #000;
119
- background: var(--zanit-accent-color);
120
- border-bottom-right-radius: 3px;
121
- border-top-right-radius: 3px;
122
- }
123
-
124
- .searchbar input:focus:focus-visible,
125
- .searchbar .searchbar-button:focus:focus-visible {
126
- z-index: 1;
127
- }
128
-
129
78
  .mobile-menu li {
130
79
  width: 100%;
131
80
  }