@zanichelli/albe-web-components 20.0.0 → 20.0.2-RC

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 (508) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/web-components-library.cjs.js +1 -1
  4. package/dist/cjs/z-accordion.cjs.entry.js +1 -1
  5. package/dist/cjs/z-anchor-navigation.cjs.entry.js +1 -1
  6. package/dist/cjs/z-app-header_12.cjs.entry.js +44 -19
  7. package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
  8. package/dist/cjs/z-aria-alert.cjs.entry.js +1 -1
  9. package/dist/cjs/z-avatar.cjs.entry.js +2 -2
  10. package/dist/cjs/z-book-card-app.cjs.entry.js +1 -1
  11. package/dist/cjs/z-book-card.cjs.entry.js +10 -3
  12. package/dist/cjs/z-book-card.cjs.entry.js.map +1 -1
  13. package/dist/cjs/z-book-cover.cjs.entry.js +1 -1
  14. package/dist/cjs/z-breadcrumb.cjs.entry.js +2 -2
  15. package/dist/cjs/z-button-sort.cjs.entry.js +1 -1
  16. package/dist/cjs/z-chip.cjs.entry.js +2 -2
  17. package/dist/cjs/z-color-picker.cjs.entry.js +1 -1
  18. package/dist/cjs/z-combobox.cjs.entry.js +6 -4
  19. package/dist/cjs/z-combobox.cjs.entry.js.map +1 -1
  20. package/dist/cjs/z-cover-hero.cjs.entry.js +2 -2
  21. package/dist/cjs/z-date-picker.cjs.entry.js +1 -1
  22. package/dist/cjs/z-dragdrop-area_2.cjs.entry.js +6 -6
  23. package/dist/cjs/z-file.cjs.entry.js +1 -1
  24. package/dist/cjs/z-ghost-loading.cjs.entry.js +1 -1
  25. package/dist/cjs/z-info-box.cjs.entry.js +1 -1
  26. package/dist/cjs/z-info-reveal.cjs.entry.js +1 -1
  27. package/dist/cjs/z-input-range.cjs.entry.js +1 -1
  28. package/dist/cjs/z-logo.cjs.entry.js +1 -1
  29. package/dist/cjs/z-menu-section.cjs.entry.js +1 -1
  30. package/dist/cjs/z-navigation-tabs.cjs.entry.js +2 -2
  31. package/dist/cjs/z-notification.cjs.entry.js +1 -1
  32. package/dist/cjs/z-popover.cjs.entry.js +1 -1
  33. package/dist/cjs/z-range-picker.cjs.entry.js +3 -3
  34. package/dist/cjs/z-select.cjs.entry.js +1 -1
  35. package/dist/cjs/z-skip-to-content.cjs.entry.js +1 -1
  36. package/dist/cjs/z-stepper-item.cjs.entry.js +1 -1
  37. package/dist/cjs/z-stepper.cjs.entry.js +1 -1
  38. package/dist/cjs/z-table.cjs.entry.js +1 -1
  39. package/dist/cjs/z-table.cjs.entry.js.map +1 -1
  40. package/dist/cjs/z-tbody.cjs.entry.js +1 -1
  41. package/dist/cjs/z-tbody.cjs.entry.js.map +1 -1
  42. package/dist/cjs/z-td.cjs.entry.js +1 -1
  43. package/dist/cjs/z-td.cjs.entry.js.map +1 -1
  44. package/dist/cjs/z-tfoot.cjs.entry.js +1 -1
  45. package/dist/cjs/z-tfoot.cjs.entry.js.map +1 -1
  46. package/dist/cjs/z-th.cjs.entry.js +1 -1
  47. package/dist/cjs/z-th.cjs.entry.js.map +1 -1
  48. package/dist/cjs/z-thead.cjs.entry.js +1 -1
  49. package/dist/cjs/z-thead.cjs.entry.js.map +1 -1
  50. package/dist/cjs/z-toast-notification-list.cjs.entry.js +1 -1
  51. package/dist/cjs/z-toast-notification.cjs.entry.js +3 -3
  52. package/dist/cjs/z-toggle-switch.cjs.entry.js +3 -3
  53. package/dist/cjs/z-tool.cjs.entry.js +2 -2
  54. package/dist/cjs/z-toolbar.cjs.entry.js +1 -1
  55. package/dist/cjs/z-tooltip.cjs.entry.js +1 -1
  56. package/dist/cjs/z-tr.cjs.entry.js +1 -1
  57. package/dist/cjs/z-tr.cjs.entry.js.map +1 -1
  58. package/dist/cjs/z-tree-list.cjs.entry.js +1 -1
  59. package/dist/cjs/z-visually-hidden.cjs.entry.js +1 -1
  60. package/dist/collection/collection-manifest.json +7 -7
  61. package/dist/collection/components/book-card/z-book-card/index.js +10 -3
  62. package/dist/collection/components/book-card/z-book-card/index.js.map +1 -1
  63. package/dist/collection/components/book-card/z-book-card/styles.css +3 -7
  64. package/dist/collection/components/book-card/z-book-card-app/index.js +1 -1
  65. package/dist/collection/components/date-picker/z-date-picker/index.js +1 -1
  66. package/dist/collection/components/date-picker/z-range-picker/index.js +3 -3
  67. package/dist/collection/components/{table → deprecated/table}/cells/z-td/index.js +6 -6
  68. package/dist/collection/components/deprecated/table/cells/z-td/index.js.map +1 -0
  69. package/dist/collection/components/{table → deprecated/table}/cells/z-th/index.js +8 -8
  70. package/dist/collection/components/deprecated/table/cells/z-th/index.js.map +1 -0
  71. package/dist/collection/components/{table → deprecated/table}/z-table/index.js +3 -3
  72. package/dist/collection/components/deprecated/table/z-table/index.js.map +1 -0
  73. package/dist/collection/components/{table → deprecated/table}/z-tbody/index.js +3 -3
  74. package/dist/collection/components/deprecated/table/z-tbody/index.js.map +1 -0
  75. package/dist/collection/components/{table → deprecated/table}/z-tfoot/index.js +3 -3
  76. package/dist/collection/components/deprecated/table/z-tfoot/index.js.map +1 -0
  77. package/dist/collection/components/{table → deprecated/table}/z-thead/index.js +3 -3
  78. package/dist/collection/components/deprecated/table/z-thead/index.js.map +1 -0
  79. package/dist/collection/components/{table → deprecated/table}/z-tr/index.js +4 -4
  80. package/dist/collection/components/deprecated/table/z-tr/index.js.map +1 -0
  81. package/dist/collection/components/file-upload/z-dragdrop-area/index.js +2 -2
  82. package/dist/collection/components/file-upload/z-file/index.js +1 -1
  83. package/dist/collection/components/list/z-list/index.js +1 -1
  84. package/dist/collection/components/list/z-list-element/index.js +1 -1
  85. package/dist/collection/components/list/z-list-group/index.js +2 -2
  86. package/dist/collection/components/list/z-tree-list/index.js +1 -1
  87. package/dist/collection/components/z-accordion/index.js +1 -1
  88. package/dist/collection/components/z-anchor-navigation/index.js +1 -1
  89. package/dist/collection/components/z-app-header/index.js +1 -1
  90. package/dist/collection/components/z-aria-alert/index.js +1 -1
  91. package/dist/collection/components/z-avatar/index.js +2 -2
  92. package/dist/collection/components/z-book-cover/index.js +1 -1
  93. package/dist/collection/components/z-breadcrumb/index.js +2 -2
  94. package/dist/collection/components/z-button-sort/index.js +1 -1
  95. package/dist/collection/components/z-chip/index.js +2 -2
  96. package/dist/collection/components/z-color-picker/index.js +1 -1
  97. package/dist/collection/components/z-combobox/index.js +5 -3
  98. package/dist/collection/components/z-combobox/index.js.map +1 -1
  99. package/dist/collection/components/z-combobox/styles.css +1 -1
  100. package/dist/collection/components/z-cover-hero/index.js +2 -2
  101. package/dist/collection/components/z-divider/index.js +1 -1
  102. package/dist/collection/components/z-ghost-loading/index.js +1 -1
  103. package/dist/collection/components/z-icon/index.js +1 -1
  104. package/dist/collection/components/z-info-box/index.js +1 -1
  105. package/dist/collection/components/z-info-reveal/index.js +1 -1
  106. package/dist/collection/components/z-input/index.js +45 -2
  107. package/dist/collection/components/z-input/index.js.map +1 -1
  108. package/dist/collection/components/z-input/styles-checkbox-radio.css +2 -2
  109. package/dist/collection/components/z-input-message/index.js +1 -1
  110. package/dist/collection/components/z-input-range/index.js +1 -1
  111. package/dist/collection/components/z-logo/index.js +1 -1
  112. package/dist/collection/components/z-menu-section/index.js +1 -1
  113. package/dist/collection/components/z-modal/index.js +4 -4
  114. package/dist/collection/components/z-navigation-tabs/index.js +2 -2
  115. package/dist/collection/components/z-notification/index.js +1 -1
  116. package/dist/collection/components/z-offcanvas/index.js +2 -2
  117. package/dist/collection/components/z-popover/index.js +1 -1
  118. package/dist/collection/components/z-searchbar/index.js +7 -4
  119. package/dist/collection/components/z-searchbar/index.js.map +1 -1
  120. package/dist/collection/components/z-select/index.js +1 -1
  121. package/dist/collection/components/z-skip-to-content/index.js +1 -1
  122. package/dist/collection/components/z-stepper/index.js +1 -1
  123. package/dist/collection/components/z-stepper-item/index.js +1 -1
  124. package/dist/collection/components/z-tag/index.js +2 -2
  125. package/dist/collection/components/z-toast-notification/index.js +3 -3
  126. package/dist/collection/components/z-toast-notification-list/index.js +1 -1
  127. package/dist/collection/components/z-toggle-switch/index.js +3 -3
  128. package/dist/collection/components/z-tool/index.js +2 -2
  129. package/dist/collection/components/z-toolbar/index.js +1 -1
  130. package/dist/collection/components/z-tooltip/index.js +1 -1
  131. package/dist/collection/components/z-visually-hidden/index.js +1 -1
  132. package/dist/components/index.d.ts +7 -7
  133. package/dist/components/index10.js +1 -1
  134. package/dist/components/index11.js +1 -1
  135. package/dist/components/index12.js +1 -1
  136. package/dist/components/index12.js.map +1 -1
  137. package/dist/components/index13.js +1 -1
  138. package/dist/components/index14.js +1 -1
  139. package/dist/components/index15.js +1 -1
  140. package/dist/components/index16.js +1 -1
  141. package/dist/components/index17.js +1 -1
  142. package/dist/components/index18.js +1 -1
  143. package/dist/components/index19.js +1 -1
  144. package/dist/components/index20.js +1 -1
  145. package/dist/components/index21.js +1 -1
  146. package/dist/components/index3.js +1 -1
  147. package/dist/components/index5.js +1 -1
  148. package/dist/components/index6.js +1 -1
  149. package/dist/components/index6.js.map +1 -1
  150. package/dist/components/index7.js +1 -1
  151. package/dist/components/index8.js +1 -1
  152. package/dist/components/index9.js +1 -1
  153. package/dist/components/z-accordion.js +1 -1
  154. package/dist/components/z-anchor-navigation.js +1 -1
  155. package/dist/components/z-app-header.js +1 -1
  156. package/dist/components/z-aria-alert.js +1 -1
  157. package/dist/components/z-avatar.js +1 -1
  158. package/dist/components/z-book-card-app.js +1 -1
  159. package/dist/components/z-book-card.js +1 -1
  160. package/dist/components/z-book-card.js.map +1 -1
  161. package/dist/components/z-breadcrumb.js +1 -1
  162. package/dist/components/z-button-sort.js +1 -1
  163. package/dist/components/z-color-picker.js +1 -1
  164. package/dist/components/z-combobox.js +1 -1
  165. package/dist/components/z-combobox.js.map +1 -1
  166. package/dist/components/z-cover-hero.js +1 -1
  167. package/dist/components/z-date-picker.js +1 -1
  168. package/dist/components/z-file.js +1 -1
  169. package/dist/components/z-info-box.js +1 -1
  170. package/dist/components/z-input-range.js +1 -1
  171. package/dist/components/z-logo.js +1 -1
  172. package/dist/components/z-menu-section.js +1 -1
  173. package/dist/components/z-navigation-tabs.js +1 -1
  174. package/dist/components/z-notification.js +1 -1
  175. package/dist/components/z-range-picker.js +1 -1
  176. package/dist/components/z-select.js +1 -1
  177. package/dist/components/z-skip-to-content.js +1 -1
  178. package/dist/components/z-stepper-item.js +1 -1
  179. package/dist/components/z-stepper.js +1 -1
  180. package/dist/components/z-table.js +1 -1
  181. package/dist/components/z-table.js.map +1 -1
  182. package/dist/components/z-tbody.js +1 -1
  183. package/dist/components/z-tbody.js.map +1 -1
  184. package/dist/components/z-td.js +1 -1
  185. package/dist/components/z-td.js.map +1 -1
  186. package/dist/components/z-tfoot.js +1 -1
  187. package/dist/components/z-tfoot.js.map +1 -1
  188. package/dist/components/z-th.js +1 -1
  189. package/dist/components/z-th.js.map +1 -1
  190. package/dist/components/z-thead.js +1 -1
  191. package/dist/components/z-thead.js.map +1 -1
  192. package/dist/components/z-toast-notification-list.js +1 -1
  193. package/dist/components/z-toast-notification.js +3 -3
  194. package/dist/components/z-toggle-switch.js +1 -1
  195. package/dist/components/z-tool.js +1 -1
  196. package/dist/components/z-toolbar.js +1 -1
  197. package/dist/components/z-tr.js +1 -1
  198. package/dist/components/z-tr.js.map +1 -1
  199. package/dist/components/z-tree-list.js +1 -1
  200. package/dist/components/z-visually-hidden.js +1 -1
  201. package/dist/esm/loader.js +1 -1
  202. package/dist/esm/web-components-library.js +1 -1
  203. package/dist/esm/z-accordion.entry.js +1 -1
  204. package/dist/esm/z-anchor-navigation.entry.js +1 -1
  205. package/dist/esm/z-app-header_12.entry.js +44 -19
  206. package/dist/esm/z-app-header_12.entry.js.map +1 -1
  207. package/dist/esm/z-aria-alert.entry.js +1 -1
  208. package/dist/esm/z-avatar.entry.js +2 -2
  209. package/dist/esm/z-book-card-app.entry.js +1 -1
  210. package/dist/esm/z-book-card.entry.js +10 -3
  211. package/dist/esm/z-book-card.entry.js.map +1 -1
  212. package/dist/esm/z-book-cover.entry.js +1 -1
  213. package/dist/esm/z-breadcrumb.entry.js +2 -2
  214. package/dist/esm/z-button-sort.entry.js +1 -1
  215. package/dist/esm/z-chip.entry.js +2 -2
  216. package/dist/esm/z-color-picker.entry.js +1 -1
  217. package/dist/esm/z-combobox.entry.js +6 -4
  218. package/dist/esm/z-combobox.entry.js.map +1 -1
  219. package/dist/esm/z-cover-hero.entry.js +2 -2
  220. package/dist/esm/z-date-picker.entry.js +1 -1
  221. package/dist/esm/z-dragdrop-area_2.entry.js +6 -6
  222. package/dist/esm/z-file.entry.js +1 -1
  223. package/dist/esm/z-ghost-loading.entry.js +1 -1
  224. package/dist/esm/z-info-box.entry.js +1 -1
  225. package/dist/esm/z-info-reveal.entry.js +1 -1
  226. package/dist/esm/z-input-range.entry.js +1 -1
  227. package/dist/esm/z-logo.entry.js +1 -1
  228. package/dist/esm/z-menu-section.entry.js +1 -1
  229. package/dist/esm/z-navigation-tabs.entry.js +2 -2
  230. package/dist/esm/z-notification.entry.js +1 -1
  231. package/dist/esm/z-popover.entry.js +1 -1
  232. package/dist/esm/z-range-picker.entry.js +3 -3
  233. package/dist/esm/z-select.entry.js +1 -1
  234. package/dist/esm/z-skip-to-content.entry.js +1 -1
  235. package/dist/esm/z-stepper-item.entry.js +1 -1
  236. package/dist/esm/z-stepper.entry.js +1 -1
  237. package/dist/esm/z-table.entry.js +1 -1
  238. package/dist/esm/z-table.entry.js.map +1 -1
  239. package/dist/esm/z-tbody.entry.js +1 -1
  240. package/dist/esm/z-tbody.entry.js.map +1 -1
  241. package/dist/esm/z-td.entry.js +1 -1
  242. package/dist/esm/z-td.entry.js.map +1 -1
  243. package/dist/esm/z-tfoot.entry.js +1 -1
  244. package/dist/esm/z-tfoot.entry.js.map +1 -1
  245. package/dist/esm/z-th.entry.js +1 -1
  246. package/dist/esm/z-th.entry.js.map +1 -1
  247. package/dist/esm/z-thead.entry.js +1 -1
  248. package/dist/esm/z-thead.entry.js.map +1 -1
  249. package/dist/esm/z-toast-notification-list.entry.js +1 -1
  250. package/dist/esm/z-toast-notification.entry.js +3 -3
  251. package/dist/esm/z-toggle-switch.entry.js +3 -3
  252. package/dist/esm/z-tool.entry.js +2 -2
  253. package/dist/esm/z-toolbar.entry.js +1 -1
  254. package/dist/esm/z-tooltip.entry.js +1 -1
  255. package/dist/esm/z-tr.entry.js +1 -1
  256. package/dist/esm/z-tr.entry.js.map +1 -1
  257. package/dist/esm/z-tree-list.entry.js +1 -1
  258. package/dist/esm/z-visually-hidden.entry.js +1 -1
  259. package/dist/types/components/book-card/z-book-card/index.d.ts +5 -1
  260. package/dist/types/components/{table → deprecated/table}/cells/z-td/index.d.ts +2 -2
  261. package/dist/types/components/{table → deprecated/table}/cells/z-th/index.d.ts +2 -2
  262. package/dist/types/components/{table → deprecated/table}/z-table/index.d.ts +1 -1
  263. package/dist/types/components/{table → deprecated/table}/z-tbody/index.d.ts +1 -1
  264. package/dist/types/components/{table → deprecated/table}/z-tfoot/index.d.ts +1 -1
  265. package/dist/types/components/{table → deprecated/table}/z-thead/index.d.ts +1 -1
  266. package/dist/types/components/{table → deprecated/table}/z-tr/index.d.ts +1 -1
  267. package/dist/types/components/z-input/index.d.ts +4 -0
  268. package/dist/types/components.d.ts +13 -2
  269. package/dist/web-components-library/{p-32bc925a.entry.js → p-059963b6.entry.js} +2 -2
  270. package/{www/build/p-33d993fe.entry.js → dist/web-components-library/p-06a196fb.entry.js} +2 -2
  271. package/dist/web-components-library/{p-8c3a7bc1.entry.js → p-08384d53.entry.js} +2 -2
  272. package/dist/web-components-library/{p-3748979c.entry.js → p-0fb73edd.entry.js} +2 -2
  273. package/dist/web-components-library/p-0fb73edd.entry.js.map +1 -0
  274. package/dist/web-components-library/p-12305e05.entry.js +2 -0
  275. package/dist/web-components-library/p-12305e05.entry.js.map +1 -0
  276. package/dist/web-components-library/{p-dfb0e8d8.entry.js → p-1b562386.entry.js} +2 -2
  277. package/dist/web-components-library/p-1fad41b2.entry.js +2 -0
  278. package/dist/web-components-library/p-1fad41b2.entry.js.map +1 -0
  279. package/dist/web-components-library/{p-a52b3dd1.entry.js → p-2780f6d9.entry.js} +2 -2
  280. package/dist/web-components-library/p-2780f6d9.entry.js.map +1 -0
  281. package/{www/build/p-7dbd0e3e.entry.js → dist/web-components-library/p-2a74e691.entry.js} +2 -2
  282. package/dist/web-components-library/{p-1efed23b.entry.js → p-2e4db422.entry.js} +2 -2
  283. package/dist/web-components-library/{p-4f6c86ce.entry.js → p-2eaf4b9b.entry.js} +2 -2
  284. package/dist/web-components-library/{p-6ea349f6.entry.js → p-350ea24f.entry.js} +2 -2
  285. package/dist/web-components-library/{p-df5eeb75.entry.js → p-3574a17e.entry.js} +2 -2
  286. package/{www/build/p-efe489a5.entry.js → dist/web-components-library/p-41966ee6.entry.js} +2 -2
  287. package/{www/build/p-ccedd440.entry.js → dist/web-components-library/p-42cfc136.entry.js} +2 -2
  288. package/dist/web-components-library/p-42cfc136.entry.js.map +1 -0
  289. package/{www/build/p-89b30fce.entry.js → dist/web-components-library/p-47d4000c.entry.js} +2 -2
  290. package/dist/web-components-library/p-55693913.entry.js +2 -0
  291. package/dist/web-components-library/p-55693913.entry.js.map +1 -0
  292. package/dist/web-components-library/{p-317cbb00.entry.js → p-55c3310f.entry.js} +2 -2
  293. package/dist/web-components-library/{p-8fb3354e.entry.js → p-5ae84959.entry.js} +2 -2
  294. package/dist/web-components-library/{p-e1ab33fe.entry.js → p-633d18e9.entry.js} +2 -2
  295. package/dist/web-components-library/{p-b4e0cd5c.entry.js → p-668b9254.entry.js} +2 -2
  296. package/{www/build/p-bc9237eb.entry.js → dist/web-components-library/p-6af7c34f.entry.js} +2 -2
  297. package/{www/build/p-d6441232.entry.js → dist/web-components-library/p-781d96de.entry.js} +2 -2
  298. package/dist/web-components-library/{p-1e71577c.entry.js → p-81c949eb.entry.js} +2 -2
  299. package/dist/web-components-library/{p-b7620e80.entry.js → p-87be3ccc.entry.js} +2 -2
  300. package/dist/web-components-library/p-87be3ccc.entry.js.map +1 -0
  301. package/{www/build/p-a5187022.entry.js → dist/web-components-library/p-886382a7.entry.js} +2 -2
  302. package/{www/build/p-9ac57635.entry.js → dist/web-components-library/p-95af0156.entry.js} +2 -2
  303. package/{www/build/p-127a6dda.entry.js → dist/web-components-library/p-a4f5e7e9.entry.js} +2 -2
  304. package/dist/web-components-library/{p-121f224a.entry.js → p-baa35a6e.entry.js} +2 -2
  305. package/dist/web-components-library/{p-02fb0bf9.entry.js → p-bc8eec12.entry.js} +2 -2
  306. package/{www/build/p-7f37e2a2.entry.js → dist/web-components-library/p-bdd9c781.entry.js} +2 -2
  307. package/dist/web-components-library/{p-6de548e3.entry.js → p-c15267bc.entry.js} +2 -2
  308. package/dist/web-components-library/{p-303fe1d0.entry.js → p-c983da75.entry.js} +2 -2
  309. package/dist/web-components-library/p-ce98069e.entry.js +2 -0
  310. package/{www/build/p-33e973b3.entry.js.map → dist/web-components-library/p-ce98069e.entry.js.map} +1 -1
  311. package/dist/web-components-library/p-d4e212cc.entry.js +2 -0
  312. package/{www/build/p-657802ce.entry.js.map → dist/web-components-library/p-d4e212cc.entry.js.map} +1 -1
  313. package/{www/build/p-904c7fdd.entry.js → dist/web-components-library/p-d4eb997c.entry.js} +2 -2
  314. package/dist/web-components-library/p-d4eb997c.entry.js.map +1 -0
  315. package/dist/web-components-library/{p-2bd1326c.entry.js → p-deed5153.entry.js} +2 -2
  316. package/dist/web-components-library/p-e160889a.entry.js +2 -0
  317. package/dist/web-components-library/{p-8f4fcd01.entry.js → p-e1d1445c.entry.js} +2 -2
  318. package/{www/build/p-1ef66142.entry.js → dist/web-components-library/p-e2cdf19c.entry.js} +2 -2
  319. package/dist/web-components-library/p-e2cdf19c.entry.js.map +1 -0
  320. package/dist/web-components-library/p-e972b9c2.entry.js +2 -0
  321. package/{www/build/p-222898cd.entry.js → dist/web-components-library/p-ea96790b.entry.js} +3 -3
  322. package/dist/web-components-library/{p-2bebbd04.entry.js → p-ee5ff565.entry.js} +2 -2
  323. package/dist/web-components-library/{p-51ebf661.entry.js → p-eea18ea6.entry.js} +2 -2
  324. package/dist/web-components-library/p-eea18ea6.entry.js.map +1 -0
  325. package/dist/web-components-library/p-f7e11eab.entry.js +2 -0
  326. package/dist/web-components-library/{p-067411f0.entry.js → p-fdafba48.entry.js} +2 -2
  327. package/dist/web-components-library/web-components-library.esm.js +1 -1
  328. package/package.json +9 -8
  329. package/www/build/{p-32bc925a.entry.js → p-059963b6.entry.js} +2 -2
  330. package/{dist/web-components-library/p-33d993fe.entry.js → www/build/p-06a196fb.entry.js} +2 -2
  331. package/www/build/{p-8c3a7bc1.entry.js → p-08384d53.entry.js} +2 -2
  332. package/www/build/{p-3748979c.entry.js → p-0fb73edd.entry.js} +2 -2
  333. package/www/build/p-0fb73edd.entry.js.map +1 -0
  334. package/www/build/p-12305e05.entry.js +2 -0
  335. package/www/build/p-12305e05.entry.js.map +1 -0
  336. package/www/build/{p-dfb0e8d8.entry.js → p-1b562386.entry.js} +2 -2
  337. package/www/build/p-1fad41b2.entry.js +2 -0
  338. package/www/build/p-1fad41b2.entry.js.map +1 -0
  339. package/www/build/{p-a52b3dd1.entry.js → p-2780f6d9.entry.js} +2 -2
  340. package/www/build/p-2780f6d9.entry.js.map +1 -0
  341. package/{dist/web-components-library/p-7dbd0e3e.entry.js → www/build/p-2a74e691.entry.js} +2 -2
  342. package/www/build/{p-1efed23b.entry.js → p-2e4db422.entry.js} +2 -2
  343. package/www/build/{p-4f6c86ce.entry.js → p-2eaf4b9b.entry.js} +2 -2
  344. package/www/build/{p-6ea349f6.entry.js → p-350ea24f.entry.js} +2 -2
  345. package/www/build/{p-df5eeb75.entry.js → p-3574a17e.entry.js} +2 -2
  346. package/{dist/web-components-library/p-efe489a5.entry.js → www/build/p-41966ee6.entry.js} +2 -2
  347. package/{dist/web-components-library/p-ccedd440.entry.js → www/build/p-42cfc136.entry.js} +2 -2
  348. package/www/build/p-42cfc136.entry.js.map +1 -0
  349. package/{dist/web-components-library/p-89b30fce.entry.js → www/build/p-47d4000c.entry.js} +2 -2
  350. package/www/build/p-55693913.entry.js +2 -0
  351. package/www/build/p-55693913.entry.js.map +1 -0
  352. package/www/build/{p-317cbb00.entry.js → p-55c3310f.entry.js} +2 -2
  353. package/www/build/{p-8fb3354e.entry.js → p-5ae84959.entry.js} +2 -2
  354. package/www/build/{p-e1ab33fe.entry.js → p-633d18e9.entry.js} +2 -2
  355. package/www/build/{p-b4e0cd5c.entry.js → p-668b9254.entry.js} +2 -2
  356. package/{dist/web-components-library/p-bc9237eb.entry.js → www/build/p-6af7c34f.entry.js} +2 -2
  357. package/{dist/web-components-library/p-d6441232.entry.js → www/build/p-781d96de.entry.js} +2 -2
  358. package/www/build/{p-1e71577c.entry.js → p-81c949eb.entry.js} +2 -2
  359. package/www/build/{p-b7620e80.entry.js → p-87be3ccc.entry.js} +2 -2
  360. package/www/build/p-87be3ccc.entry.js.map +1 -0
  361. package/{dist/web-components-library/p-a5187022.entry.js → www/build/p-886382a7.entry.js} +2 -2
  362. package/{dist/web-components-library/p-9ac57635.entry.js → www/build/p-95af0156.entry.js} +2 -2
  363. package/www/build/p-9a93e186.js +2 -0
  364. package/{dist/web-components-library/p-127a6dda.entry.js → www/build/p-a4f5e7e9.entry.js} +2 -2
  365. package/www/build/{p-121f224a.entry.js → p-baa35a6e.entry.js} +2 -2
  366. package/www/build/{p-02fb0bf9.entry.js → p-bc8eec12.entry.js} +2 -2
  367. package/{dist/web-components-library/p-7f37e2a2.entry.js → www/build/p-bdd9c781.entry.js} +2 -2
  368. package/www/build/{p-6de548e3.entry.js → p-c15267bc.entry.js} +2 -2
  369. package/www/build/{p-303fe1d0.entry.js → p-c983da75.entry.js} +2 -2
  370. package/www/build/p-ce98069e.entry.js +2 -0
  371. package/{dist/web-components-library/p-33e973b3.entry.js.map → www/build/p-ce98069e.entry.js.map} +1 -1
  372. package/www/build/p-d4e212cc.entry.js +2 -0
  373. package/{dist/web-components-library/p-657802ce.entry.js.map → www/build/p-d4e212cc.entry.js.map} +1 -1
  374. package/{dist/web-components-library/p-904c7fdd.entry.js → www/build/p-d4eb997c.entry.js} +2 -2
  375. package/www/build/p-d4eb997c.entry.js.map +1 -0
  376. package/www/build/{p-2bd1326c.entry.js → p-deed5153.entry.js} +2 -2
  377. package/www/build/p-e160889a.entry.js +2 -0
  378. package/www/build/{p-8f4fcd01.entry.js → p-e1d1445c.entry.js} +2 -2
  379. package/{dist/web-components-library/p-1ef66142.entry.js → www/build/p-e2cdf19c.entry.js} +2 -2
  380. package/www/build/p-e2cdf19c.entry.js.map +1 -0
  381. package/www/build/p-e972b9c2.entry.js +2 -0
  382. package/{dist/web-components-library/p-222898cd.entry.js → www/build/p-ea96790b.entry.js} +3 -3
  383. package/www/build/{p-2bebbd04.entry.js → p-ee5ff565.entry.js} +2 -2
  384. package/www/build/{p-51ebf661.entry.js → p-eea18ea6.entry.js} +2 -2
  385. package/www/build/p-eea18ea6.entry.js.map +1 -0
  386. package/www/build/p-f7e11eab.entry.js +2 -0
  387. package/www/build/{p-067411f0.entry.js → p-fdafba48.entry.js} +2 -2
  388. package/www/build/web-components-library.esm.js +1 -1
  389. package/www/index.html +1 -1
  390. package/dist/collection/components/table/cells/z-td/index.js.map +0 -1
  391. package/dist/collection/components/table/cells/z-th/index.js.map +0 -1
  392. package/dist/collection/components/table/z-table/index.js.map +0 -1
  393. package/dist/collection/components/table/z-tbody/index.js.map +0 -1
  394. package/dist/collection/components/table/z-tfoot/index.js.map +0 -1
  395. package/dist/collection/components/table/z-thead/index.js.map +0 -1
  396. package/dist/collection/components/table/z-tr/index.js.map +0 -1
  397. package/dist/web-components-library/p-1ef66142.entry.js.map +0 -1
  398. package/dist/web-components-library/p-33e973b3.entry.js +0 -2
  399. package/dist/web-components-library/p-3748979c.entry.js.map +0 -1
  400. package/dist/web-components-library/p-51ebf661.entry.js.map +0 -1
  401. package/dist/web-components-library/p-53c51bf4.entry.js +0 -2
  402. package/dist/web-components-library/p-53c51bf4.entry.js.map +0 -1
  403. package/dist/web-components-library/p-5a43af47.entry.js +0 -2
  404. package/dist/web-components-library/p-5a43af47.entry.js.map +0 -1
  405. package/dist/web-components-library/p-657802ce.entry.js +0 -2
  406. package/dist/web-components-library/p-8b3257b4.entry.js +0 -2
  407. package/dist/web-components-library/p-8d2704ee.entry.js +0 -2
  408. package/dist/web-components-library/p-8d2704ee.entry.js.map +0 -1
  409. package/dist/web-components-library/p-904c7fdd.entry.js.map +0 -1
  410. package/dist/web-components-library/p-a52b3dd1.entry.js.map +0 -1
  411. package/dist/web-components-library/p-a8f43afd.entry.js +0 -2
  412. package/dist/web-components-library/p-b7620e80.entry.js.map +0 -1
  413. package/dist/web-components-library/p-c217c65c.entry.js +0 -2
  414. package/dist/web-components-library/p-ccedd440.entry.js.map +0 -1
  415. package/www/build/p-1ef66142.entry.js.map +0 -1
  416. package/www/build/p-33e973b3.entry.js +0 -2
  417. package/www/build/p-3748979c.entry.js.map +0 -1
  418. package/www/build/p-51ebf661.entry.js.map +0 -1
  419. package/www/build/p-53c51bf4.entry.js +0 -2
  420. package/www/build/p-53c51bf4.entry.js.map +0 -1
  421. package/www/build/p-5a1df5b1.js +0 -2
  422. package/www/build/p-5a43af47.entry.js +0 -2
  423. package/www/build/p-5a43af47.entry.js.map +0 -1
  424. package/www/build/p-657802ce.entry.js +0 -2
  425. package/www/build/p-8b3257b4.entry.js +0 -2
  426. package/www/build/p-8d2704ee.entry.js +0 -2
  427. package/www/build/p-8d2704ee.entry.js.map +0 -1
  428. package/www/build/p-904c7fdd.entry.js.map +0 -1
  429. package/www/build/p-a52b3dd1.entry.js.map +0 -1
  430. package/www/build/p-a8f43afd.entry.js +0 -2
  431. package/www/build/p-b7620e80.entry.js.map +0 -1
  432. package/www/build/p-c217c65c.entry.js +0 -2
  433. package/www/build/p-ccedd440.entry.js.map +0 -1
  434. /package/dist/collection/components/{table → deprecated/table}/cells/z-table-cells.css +0 -0
  435. /package/dist/collection/components/{table → deprecated/table}/cells/z-th/styles.css +0 -0
  436. /package/dist/collection/components/{table → deprecated/table}/z-table/styles.css +0 -0
  437. /package/dist/collection/components/{table → deprecated/table}/z-tbody/styles.css +0 -0
  438. /package/dist/collection/components/{table → deprecated/table}/z-tfoot/styles.css +0 -0
  439. /package/dist/collection/components/{table → deprecated/table}/z-thead/styles.css +0 -0
  440. /package/dist/collection/components/{table → deprecated/table}/z-tr/styles.css +0 -0
  441. /package/dist/web-components-library/{p-32bc925a.entry.js.map → p-059963b6.entry.js.map} +0 -0
  442. /package/dist/web-components-library/{p-33d993fe.entry.js.map → p-06a196fb.entry.js.map} +0 -0
  443. /package/dist/web-components-library/{p-8c3a7bc1.entry.js.map → p-08384d53.entry.js.map} +0 -0
  444. /package/dist/web-components-library/{p-dfb0e8d8.entry.js.map → p-1b562386.entry.js.map} +0 -0
  445. /package/dist/web-components-library/{p-7dbd0e3e.entry.js.map → p-2a74e691.entry.js.map} +0 -0
  446. /package/dist/web-components-library/{p-1efed23b.entry.js.map → p-2e4db422.entry.js.map} +0 -0
  447. /package/dist/web-components-library/{p-4f6c86ce.entry.js.map → p-2eaf4b9b.entry.js.map} +0 -0
  448. /package/dist/web-components-library/{p-6ea349f6.entry.js.map → p-350ea24f.entry.js.map} +0 -0
  449. /package/dist/web-components-library/{p-df5eeb75.entry.js.map → p-3574a17e.entry.js.map} +0 -0
  450. /package/dist/web-components-library/{p-efe489a5.entry.js.map → p-41966ee6.entry.js.map} +0 -0
  451. /package/dist/web-components-library/{p-89b30fce.entry.js.map → p-47d4000c.entry.js.map} +0 -0
  452. /package/dist/web-components-library/{p-317cbb00.entry.js.map → p-55c3310f.entry.js.map} +0 -0
  453. /package/dist/web-components-library/{p-8fb3354e.entry.js.map → p-5ae84959.entry.js.map} +0 -0
  454. /package/dist/web-components-library/{p-e1ab33fe.entry.js.map → p-633d18e9.entry.js.map} +0 -0
  455. /package/dist/web-components-library/{p-b4e0cd5c.entry.js.map → p-668b9254.entry.js.map} +0 -0
  456. /package/dist/web-components-library/{p-bc9237eb.entry.js.map → p-6af7c34f.entry.js.map} +0 -0
  457. /package/dist/web-components-library/{p-d6441232.entry.js.map → p-781d96de.entry.js.map} +0 -0
  458. /package/dist/web-components-library/{p-1e71577c.entry.js.map → p-81c949eb.entry.js.map} +0 -0
  459. /package/dist/web-components-library/{p-a5187022.entry.js.map → p-886382a7.entry.js.map} +0 -0
  460. /package/dist/web-components-library/{p-9ac57635.entry.js.map → p-95af0156.entry.js.map} +0 -0
  461. /package/dist/web-components-library/{p-127a6dda.entry.js.map → p-a4f5e7e9.entry.js.map} +0 -0
  462. /package/dist/web-components-library/{p-121f224a.entry.js.map → p-baa35a6e.entry.js.map} +0 -0
  463. /package/dist/web-components-library/{p-02fb0bf9.entry.js.map → p-bc8eec12.entry.js.map} +0 -0
  464. /package/dist/web-components-library/{p-7f37e2a2.entry.js.map → p-bdd9c781.entry.js.map} +0 -0
  465. /package/dist/web-components-library/{p-6de548e3.entry.js.map → p-c15267bc.entry.js.map} +0 -0
  466. /package/dist/web-components-library/{p-303fe1d0.entry.js.map → p-c983da75.entry.js.map} +0 -0
  467. /package/dist/web-components-library/{p-2bd1326c.entry.js.map → p-deed5153.entry.js.map} +0 -0
  468. /package/dist/web-components-library/{p-c217c65c.entry.js.map → p-e160889a.entry.js.map} +0 -0
  469. /package/dist/web-components-library/{p-8f4fcd01.entry.js.map → p-e1d1445c.entry.js.map} +0 -0
  470. /package/dist/web-components-library/{p-a8f43afd.entry.js.map → p-e972b9c2.entry.js.map} +0 -0
  471. /package/dist/web-components-library/{p-222898cd.entry.js.map → p-ea96790b.entry.js.map} +0 -0
  472. /package/dist/web-components-library/{p-2bebbd04.entry.js.map → p-ee5ff565.entry.js.map} +0 -0
  473. /package/dist/web-components-library/{p-8b3257b4.entry.js.map → p-f7e11eab.entry.js.map} +0 -0
  474. /package/dist/web-components-library/{p-067411f0.entry.js.map → p-fdafba48.entry.js.map} +0 -0
  475. /package/www/build/{p-32bc925a.entry.js.map → p-059963b6.entry.js.map} +0 -0
  476. /package/www/build/{p-33d993fe.entry.js.map → p-06a196fb.entry.js.map} +0 -0
  477. /package/www/build/{p-8c3a7bc1.entry.js.map → p-08384d53.entry.js.map} +0 -0
  478. /package/www/build/{p-dfb0e8d8.entry.js.map → p-1b562386.entry.js.map} +0 -0
  479. /package/www/build/{p-7dbd0e3e.entry.js.map → p-2a74e691.entry.js.map} +0 -0
  480. /package/www/build/{p-1efed23b.entry.js.map → p-2e4db422.entry.js.map} +0 -0
  481. /package/www/build/{p-4f6c86ce.entry.js.map → p-2eaf4b9b.entry.js.map} +0 -0
  482. /package/www/build/{p-6ea349f6.entry.js.map → p-350ea24f.entry.js.map} +0 -0
  483. /package/www/build/{p-df5eeb75.entry.js.map → p-3574a17e.entry.js.map} +0 -0
  484. /package/www/build/{p-efe489a5.entry.js.map → p-41966ee6.entry.js.map} +0 -0
  485. /package/www/build/{p-89b30fce.entry.js.map → p-47d4000c.entry.js.map} +0 -0
  486. /package/www/build/{p-317cbb00.entry.js.map → p-55c3310f.entry.js.map} +0 -0
  487. /package/www/build/{p-8fb3354e.entry.js.map → p-5ae84959.entry.js.map} +0 -0
  488. /package/www/build/{p-e1ab33fe.entry.js.map → p-633d18e9.entry.js.map} +0 -0
  489. /package/www/build/{p-b4e0cd5c.entry.js.map → p-668b9254.entry.js.map} +0 -0
  490. /package/www/build/{p-bc9237eb.entry.js.map → p-6af7c34f.entry.js.map} +0 -0
  491. /package/www/build/{p-d6441232.entry.js.map → p-781d96de.entry.js.map} +0 -0
  492. /package/www/build/{p-1e71577c.entry.js.map → p-81c949eb.entry.js.map} +0 -0
  493. /package/www/build/{p-a5187022.entry.js.map → p-886382a7.entry.js.map} +0 -0
  494. /package/www/build/{p-9ac57635.entry.js.map → p-95af0156.entry.js.map} +0 -0
  495. /package/www/build/{p-127a6dda.entry.js.map → p-a4f5e7e9.entry.js.map} +0 -0
  496. /package/www/build/{p-121f224a.entry.js.map → p-baa35a6e.entry.js.map} +0 -0
  497. /package/www/build/{p-02fb0bf9.entry.js.map → p-bc8eec12.entry.js.map} +0 -0
  498. /package/www/build/{p-7f37e2a2.entry.js.map → p-bdd9c781.entry.js.map} +0 -0
  499. /package/www/build/{p-6de548e3.entry.js.map → p-c15267bc.entry.js.map} +0 -0
  500. /package/www/build/{p-303fe1d0.entry.js.map → p-c983da75.entry.js.map} +0 -0
  501. /package/www/build/{p-2bd1326c.entry.js.map → p-deed5153.entry.js.map} +0 -0
  502. /package/www/build/{p-c217c65c.entry.js.map → p-e160889a.entry.js.map} +0 -0
  503. /package/www/build/{p-8f4fcd01.entry.js.map → p-e1d1445c.entry.js.map} +0 -0
  504. /package/www/build/{p-a8f43afd.entry.js.map → p-e972b9c2.entry.js.map} +0 -0
  505. /package/www/build/{p-222898cd.entry.js.map → p-ea96790b.entry.js.map} +0 -0
  506. /package/www/build/{p-2bebbd04.entry.js.map → p-ee5ff565.entry.js.map} +0 -0
  507. /package/www/build/{p-8b3257b4.entry.js.map → p-f7e11eab.entry.js.map} +0 -0
  508. /package/www/build/{p-067411f0.entry.js.map → p-fdafba48.entry.js.map} +0 -0
package/dist/components/index12.js CHANGED
@@ -1,2 +1,2 @@
1
- import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as o,transformTag as n}from"@stencil/core/internal/client";import{e as a,B as r,g as l}from"./index2.js";import{r as h,n as d}from"./utils.js";import{d as f}from"./index4.js";import{d as b}from"./index5.js";import{d as c}from"./index3.js";import{d as g}from"./index6.js";import{d as v}from"./index7.js";import{d as m}from"./index8.js";import{d as p}from"./index9.js";import{d as u}from"./index10.js";import{d as z}from"./index13.js";const w=()=>`:host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:2.75rem;z-index:15;display:flex;align-items:flex-end;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*,::after,::before{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.input-container z-input{z-index:1}.results{--item-icon-size:1rem;--z-icon-height:var(--item-icon-size);--z-icon-width:var(--item-icon-size);--item-inline-padding:calc(var(--space-unit) * 1.5);--item-col-gap:var(--space-unit);position:absolute;top:calc(100% - 1px);left:0;overflow:auto;width:100%;max-height:var(--z-searchbar-results-height, 540px);border:var(--border-size-small) solid var(--color-form-surface03);border-top:none;background:var(--color-form-background)}.results z-list-element{--background-color-list-element:var(--color-form-background);position:relative;display:block}.results>z-list>z-list-element::part(list-item-container){padding:0 var(--item-inline-padding)}.results z-list-element>.list-item{position:relative;display:flex;align-items:center;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);background-color:transparent;color:var(--color-form-default-text);fill:var(--color-form-default-icon);gap:var(--item-col-gap)}.results z-list-element>.list-item:hover{background-color:var(--gray100);cursor:pointer}.results z-list-element>.list-item:focus-visible{z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.results>z-list>z-list-element:not(:last-child)>.list-item,.results z-list-group:not(:last-child)>z-list-element:not(.category-heading){border-bottom:1px solid var(--color-form-surface03)}.results z-list-group{padding:0 var(--item-inline-padding)}.results z-list-group>z-list-element::part(list-item-container){padding:0}.results .sub-list{padding-left:calc(var(--item-icon-size) + var(--item-col-gap))}.results .sub-list z-list-element::part(list-item-container){padding:0}.results .sub-list z-list-element>.list-item{position:relative}.results .sub-list>z-list-element:not(:last-child)::before,.results .sub-list>z-list-element>.list-item::before{position:absolute;top:0;left:calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);border-left:1px solid var(--color-form-surface03);content:""}.results .sub-list>z-list-element:not(:last-child)::before{top:-4px;height:calc(100% + 4px)}.results .sub-list z-list-element>.list-item::before{width:14px;height:calc(var(--z-searchbar-item-height) / 2);border-bottom:1px solid var(--color-form-surface03)}.results .category-heading>.category{font-style:italic}.results .category-heading>.subcategory{text-transform:uppercase}.results z-list-element>.list-item .ellipsis{overflow:hidden}.results .ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item-label mark{background:var(--color-primary03);color:var(--color-default-text)}.results .list-item>z-tag{--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color);margin-left:auto;white-space:nowrap}.results .item-show-all{width:100%;color:var(--color-primary01);cursor:pointer;text-align:center}.results .item-no-results{display:block;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);font-style:italic}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results{--item-icon-size:1.125rem}}`;const y=()=>`.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}`;const k=()=>`.z-scrollbar::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.z-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.z-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{--z-scrollbar-track-gradient:linear-gradient( to right, transparent 0 1px, var(--gray600) 1px 5px, transparent 5px 6px );--z-scrollbar-track-color:var(--gray600);--z-scrollbar-thumb-color:var(--color-primary03);--z-scrollbar-thumb-hover-color:var(--color-hover-primary);--z-scrollbar-corner-color:transparent}@supports not selector(.z-scrollbar::-webkit-scrollbar-track){.z-scrollbar{scrollbar-color:var(--color-primary01) transparent}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{scrollbar-color:var(--z-scrollbar-thumb-color, var(--color-primary03)) var(--z-scrollbar-track-color, var(--gray600))}}`;const x=()=>`:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}`;const C=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.searchSubmit=i(this,"searchSubmit",7);this.searchTyping=i(this,"searchTyping",7);this.searchItemClick=i(this,"searchItemClick",7);this.htmlid=`searchbar-${h()}`;this.preventSubmit=false;this.autocomplete=false;this.autocompleteMinChars=3;this.searchHelperLabel="Cerca {searchString}";this.sortResultsItems=false;this.showSearchButton=false;this.searchButtonIconOnly=false;this.searchButtonLabel="CERCA";this.size=a.BIG;this.variant=r.PRIMARY;this.searchString=this.value;this.currResultsCount=this.resultsCount;this.showResults=false;this.isMobile=false;this.resultsItemsList=null}emitSearchItemClick(t){this.searchItemClick.emit(t);this.selectedItem=t;this.searchString=""}emitSearchSubmit(){this.searchSubmit.emit(this.inputRef.value)}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.searchString=this.value}watchSearchString(){this.searchTyping.emit(this.searchString);if(!this.searchString){this.currResultsCount=this.resultsCount}}getResultsItemsList(){return typeof this.resultsItems==="string"?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(){const t={};this.resultsItemsList.forEach((e=>{var i;const s=`${e===null||e===void 0?void 0:e.category}${e===null||e===void 0?void 0:e.subcategory}`;t[s]=(i=t[s])!==null&&i!==void 0?i:{category:e===null||e===void 0?void 0:e.category,subcategory:e===null||e===void 0?void 0:e.subcategory,items:[]};t[s]["items"].push(e)}));if(this.sortResultsItems){return Object.keys(t).sort().reduce(((e,i)=>{e[i]=Object.assign(Object.assign({},t[i]),{items:t[i]["items"].sort(((t,e)=>{const i=t.label.toUpperCase();const s=e.label.toUpperCase();if(i<s){return-1}if(i>s){return 1}return 0}))});return e}),{})}return t}onListItemKeyDown(t,e){if(t.key===l.ENTER){t.preventDefault();this.emitSearchItemClick(e);return}this.handleArrowsNavigation(t)}onSearchHelperKeyDown(t){if(t.key===l.ENTER){t.preventDefault();this.emitSearchSubmit();return}this.handleArrowsNavigation(t)}handleArrowsNavigation(t){var e,i,s,o,n,a;if(![l.ARROW_DOWN,l.ARROW_UP].includes(t.key)){return}const r=t.target;const h=Array.from((i=(e=this.host.shadowRoot)===null||e===void 0?void 0:e.querySelectorAll("z-list .list-item"))!==null&&i!==void 0?i:[]);const d=h.indexOf(r);if(t.key===l.ARROW_DOWN){t.preventDefault();const e=d+1;if(e<h.length){h[e].focus()}}if(t.key===l.ARROW_UP){t.preventDefault();const e=d-1;if(e<0){(o=(s=this.host.shadowRoot)===null||s===void 0?void 0:s.querySelector("input"))===null||o===void 0?void 0:o.focus();(a=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("input"))===null||a===void 0?void 0:a.setSelectionRange(this.inputRef.value.length,this.inputRef.value.length)}if(e>=0){h[e].focus()}}}handleStopTyping(t){t.stopPropagation();this.searchString=t.detail.value;this.selectedItem=undefined}handleSubmit(){if(this.preventSubmit){return}this.emitSearchSubmit()}handleOutsideClick(t){const e=t.composedPath();if(e.includes(this.host)){return}this.showResults=false}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList();this.mql=matchMedia("(max-width: 767px)");this.onMobileViewChange=t=>this.isMobile=t.matches;this.mql.addEventListener("change",this.onMobileViewChange);this.isMobile=this.mql.matches}disconnectedCallback(){var t;(t=this.mql)===null||t===void 0?void 0:t.removeEventListener("change",this.onMobileViewChange)}renderItemLabel(t){if(!this.searchString){return t}return t.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"gmi"),(t=>`<mark>${t}</mark>`))}renderItem(t,e){var i;return s("z-list-element",{id:`list-item-${this.htmlid}-${e}`,role:"presentation",htmlTabindex:-1,onKeyDown:e=>this.onListItemKeyDown(e,t),onClick:()=>this.emitSearchItemClick(t)},s("div",{class:"list-item ellipsis",role:"option",tabindex:0},!!(t===null||t===void 0?void 0:t.icon)&&s("z-icon",{class:"item-icon",name:t.icon}),s("div",{class:"item-label body-3 mobile-body-4",title:t.label,innerHTML:this.renderItemLabel(t.label)}),!!(t===null||t===void 0?void 0:t.tag)&&s("z-tag",{icon:t.tag.icon},!this.isMobile?t.tag.text:"")),!!((i=t.children)===null||i===void 0?void 0:i.length)&&s("z-list",{class:"sub-list",role:"group","aria-label":t.label||undefined},t.children.map(((t,e)=>this.renderItem(t,e)))))}renderItemGroups(){var t;if(!((t=this.resultsItemsList)===null||t===void 0?void 0:t.length)){return}const e=Object.values(this.getGroupedItems());const i=[];const o=!!this.currResultsCount;let n=0;for(const t of e){const e=o?this.currResultsCount-n:t.items.length;if(e<=0){break}const a=t.items.slice(0,e);const r=a.map(((t,e)=>this.renderItem(t,e)));n+=r.length;if(!r.length){continue}const l=[t.category,t.subcategory].filter(Boolean).join(" ");i.push(s("z-list-group",{"aria-label":l||undefined},t.category&&s("z-list-element",{class:"category-heading body-3 mobile-body-4",slot:"header-title",role:"presentation",htmlTabindex:-1},s("div",{class:"category"},t.category),t.subcategory&&s("div",{class:"subcategory"},t.subcategory)),r))}return i}render(){var t,e,i,n,a;return s(o,{key:"666eb25b14ff2ad53ad24a804429a5d5c7fb9921",onFocus:()=>this.showResults=true,onClick:t=>this.handleOutsideClick(t),class:{"has-submit":!!this.showSearchButton,"has-results":!!this.autocomplete}},s("div",{key:"3bfc445797d517674f8fd359ebe78bd6a6bb67dc",class:"input-container"},s("z-input",{key:"a5332cea9ad170b49d0091290db492bc0109aec9",ref:t=>this.inputRef=t,htmlid:`input-${this.htmlid}`,message:false,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>{d(t,(()=>this.handleSubmit()));this.handleArrowsNavigation(t)},onFocus:()=>this.showResults=true,value:this.searchString||((t=this.selectedItem)===null||t===void 0?void 0:t.label),size:this.size,label:this.label,"aria-label":this.htmlAriaLabel||this.placeholder||undefined}),!!(this.showResults&&this.autocomplete&&this.searchString&&this.searchString.length>=this.autocompleteMinChars&&this.resultsItemsList)&&s("div",{key:"9a36f0021f7a52bc36fc9823a747820e188074ec",class:"results z-scrollbar"},this.preventSubmit&&!((e=this.resultsItemsList)===null||e===void 0?void 0:e.length)?s("div",{class:"item-no-results body-3 mobile-body-4"},"Non abbiamo trovato risultati per ",s("b",null,this.searchString),s("br",null),s("br",null),"Cosa puoi fare?",s("ul",null,s("li",null,"Verificare di aver scritto bene"),s("li",null,"Provare a cercare un'altra parola"),s("li",null,"Provare a cercare qualcosa di più generico"))):s("z-list",{role:"listbox",id:`list-${this.htmlid}`,"aria-label":this.htmlAriaLabel||this.label||undefined},this.autocomplete&&!this.preventSubmit&&!!this.searchString&&s("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-search`,onKeyDown:t=>this.onSearchHelperKeyDown(t),onClick:()=>this.emitSearchSubmit()},s("div",{class:"list-item item-search",role:"option",tabindex:0},s("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),s("div",{class:"item-label body-3 mobile-body-4",innerHTML:(i=this.searchHelperLabel)===null||i===void 0?void 0:i.replace("{searchString}",`<mark>${this.searchString}</mark>`)}))),this.renderItemGroups(),!!(this.searchString&&((n=this.resultsItemsList)===null||n===void 0?void 0:n.length)&&this.currResultsCount&&this.currResultsCount<((a=this.resultsItemsList)===null||a===void 0?void 0:a.length))&&s("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-show-all`},s("div",{role:"option",class:"item-show-all body-3 mobile-body-4",tabindex:0,onClick:()=>this.currResultsCount=undefined},"Vedi tutti i risultati"))))),this.showSearchButton&&s("z-button",{key:"c1633f9f99c0503301562f8f3828f965b075cb51",icon:this.searchButtonIconOnly?"search":undefined,"aria-label":this.searchButtonIconOnly?this.searchButtonLabel.trim()||"CERCA":undefined,disabled:!!this.preventSubmit,variant:this.variant,size:this.size,onClick:()=>this.handleSubmit()},this.searchButtonIconOnly?"":this.searchButtonLabel.trim()||"CERCA"))}get host(){return this}static get watchers(){return{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}}static get style(){return w()+(y()+(k()+x()))}},[1,"z-searchbar",{htmlid:[513],preventSubmit:[4,"prevent-submit"],label:[1],htmlAriaLabel:[1,"html-aria-label"],value:[1],placeholder:[1],autocomplete:[4],autocompleteMinChars:[2,"autocomplete-min-chars"],resultsCount:[2,"results-count"],searchHelperLabel:[1,"search-helper-label"],resultsItems:[1,"results-items"],sortResultsItems:[4,"sort-results-items"],showSearchButton:[4,"show-search-button"],searchButtonIconOnly:[4,"search-button-icon-only"],searchButtonLabel:[1,"search-button-label"],size:[1],variant:[1],searchString:[32],currResultsCount:[32],showResults:[32],isMobile:[32],selectedItem:[32]},[[4,"click","handleOutsideClick"]],{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}]);function S(){if(typeof customElements==="undefined"){return}const t=["z-searchbar","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-tag"];t.forEach((t=>{switch(t){case"z-searchbar":if(!customElements.get(n(t))){customElements.define(n(t),C)}break;case"z-button":if(!customElements.get(n(t))){f()}break;case"z-divider":if(!customElements.get(n(t))){b()}break;case"z-icon":if(!customElements.get(n(t))){c()}break;case"z-input":if(!customElements.get(n(t))){g()}break;case"z-input-message":if(!customElements.get(n(t))){v()}break;case"z-list":if(!customElements.get(n(t))){m()}break;case"z-list-element":if(!customElements.get(n(t))){p()}break;case"z-list-group":if(!customElements.get(n(t))){u()}break;case"z-tag":if(!customElements.get(n(t))){z()}break}}))}export{C as Z,S as d};
1
+ import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as o,transformTag as n}from"@stencil/core/internal/client";import{e as a,B as r,g as l}from"./index2.js";import{r as h,n as d}from"./utils.js";import{d as f}from"./index4.js";import{d as c}from"./index5.js";import{d as b}from"./index3.js";import{d as g}from"./index6.js";import{d as v}from"./index7.js";import{d as m}from"./index8.js";import{d as p}from"./index9.js";import{d as u}from"./index10.js";import{d as z}from"./index13.js";const w=()=>`:host{--z-searchbar-tag-text-color:var(--color-primary03);--z-searchbar-tag-bg:var(--color-hover-primary);--z-searchbar-item-height:2.75rem;z-index:15;display:flex;align-items:flex-end;column-gap:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*,::after,::before{box-sizing:border-box}.input-container{position:relative;display:flex;width:100%;flex-direction:column}.input-container z-input{z-index:1}.results{--item-icon-size:1rem;--z-icon-height:var(--item-icon-size);--z-icon-width:var(--item-icon-size);--item-inline-padding:calc(var(--space-unit) * 1.5);--item-col-gap:var(--space-unit);position:absolute;top:calc(100% - 1px);left:0;overflow:auto;width:100%;max-height:var(--z-searchbar-results-height, 540px);border:var(--border-size-small) solid var(--color-form-surface03);border-top:none;background:var(--color-form-background)}.results z-list-element{--background-color-list-element:var(--color-form-background);position:relative;display:block}.results>z-list>z-list-element::part(list-item-container){padding:0 var(--item-inline-padding)}.results z-list-element>.list-item{position:relative;display:flex;align-items:center;padding:calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);background-color:transparent;color:var(--color-form-default-text);fill:var(--color-form-default-icon);gap:var(--item-col-gap)}.results z-list-element>.list-item:hover{background-color:var(--gray100);cursor:pointer}.results z-list-element>.list-item:focus-visible{z-index:1;box-shadow:var(--shadow-focus-primary);outline:none}.results>z-list>z-list-element:not(:last-child)>.list-item,.results z-list-group:not(:last-child)>z-list-element:not(.category-heading){border-bottom:1px solid var(--color-form-surface03)}.results z-list-group{padding:0 var(--item-inline-padding)}.results z-list-group>z-list-element::part(list-item-container){padding:0}.results .sub-list{padding-left:calc(var(--item-icon-size) + var(--item-col-gap))}.results .sub-list z-list-element::part(list-item-container){padding:0}.results .sub-list z-list-element>.list-item{position:relative}.results .sub-list>z-list-element:not(:last-child)::before,.results .sub-list>z-list-element>.list-item::before{position:absolute;top:0;left:calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);border-left:1px solid var(--color-form-surface03);content:""}.results .sub-list>z-list-element:not(:last-child)::before{top:-4px;height:calc(100% + 4px)}.results .sub-list z-list-element>.list-item::before{width:14px;height:calc(var(--z-searchbar-item-height) / 2);border-bottom:1px solid var(--color-form-surface03)}.results .category-heading>.category{font-style:italic}.results .category-heading>.subcategory{text-transform:uppercase}.results z-list-element>.list-item .ellipsis{overflow:hidden}.results .ellipsis>.item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results .item-label mark{background:var(--color-primary03);color:var(--color-default-text)}.results .list-item>z-tag{--z-tag-bg:var(--z-searchbar-tag-bg);--z-tag-text-color:var(--z-searchbar-tag-text-color);margin-left:auto;white-space:nowrap}.results .item-show-all{width:100%;color:var(--color-primary01);cursor:pointer;text-align:center}.results .item-no-results{display:block;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);font-style:italic}.results .item-no-results>ul{padding-left:calc(var(--space-unit) * 2);margin:var(--space-unit)}@media (min-width: 768px){.results{--item-icon-size:1.125rem}}`;const y=()=>`.z-label{display:block;padding-bottom:var(--space-unit);color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}`;const k=()=>`.z-scrollbar::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}.z-scrollbar::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}.z-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{--z-scrollbar-track-gradient:linear-gradient( to right, transparent 0 1px, var(--gray600) 1px 5px, transparent 5px 6px );--z-scrollbar-track-color:var(--gray600);--z-scrollbar-thumb-color:var(--color-primary03);--z-scrollbar-thumb-hover-color:var(--color-hover-primary);--z-scrollbar-corner-color:transparent}@supports not selector(.z-scrollbar::-webkit-scrollbar-track){.z-scrollbar{scrollbar-color:var(--color-primary01) transparent}:host([theme="dark"]) .z-scrollbar,.z-scrollbar--dark{scrollbar-color:var(--z-scrollbar-thumb-color, var(--color-primary03)) var(--z-scrollbar-track-color, var(--gray600))}}`;const x=()=>`:root{--font-family-sans:"IBM Plex Sans", sans-serif;--font-family-serif:"IBM Plex Serif", serif;--font-lt:300;--font-rg:400;--font-sb:600;--font-bd:700;--font-size-1:0.75rem;--font-size-2:0.875rem;--font-size-3:1rem;--font-size-4:1.125rem;--font-size-5:1.25rem;--font-size-6:1.5rem;--font-size-7:1.75rem;--font-size-8:2rem;--font-size-9:2.25rem;--font-size-10:2.625rem;--font-size-11:3rem;--font-size-12:3.375rem;--font-size-13:3.75rem;--font-size-14:4.25rem;--font-size-15:4.75rem;--font-size-16:5.25rem;--font-size-17:5.75rem;--section-title-1:var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);--section-title-2:var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);--section-title-3:var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);--section-title-4:var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);--section-title-5:var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);--section-title-6:var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif)}.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-3,.heading-3-sb,.heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.heading-4,.heading-4-sb,.heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-1,.body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.body-2,.body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.body-3,.body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.body-4,.body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.body-5,.body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.interactive-1,.interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.interactive-2,.interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.interactive-3,.interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.helper,.helper-sb{font-size:var(--font-size-1);font-style:italic;font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.section-title-1{font:var(--section-title-1)}.section-title-2{font:var(--section-title-2)}.section-title-3{font:var(--section-title-3)}.section-title-4{font:var(--section-title-4)}.section-title-5{font:var(--section-title-5)}.section-title-6{font:var(--section-title-6)}@media (min-width: 1152px){.heading-1,.heading-1-sb,.heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.heading-2,.heading-2-sb,.heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}}@media (max-width: 767px){.mobile-heading-1,.mobile-heading-1-sb,.mobile-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.mobile-heading-2,.mobile-heading-2-sb,.mobile-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-3,.mobile-heading-3-sb,.mobile-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.mobile-heading-4,.mobile-heading-4-sb,.mobile-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-1,.mobile-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.mobile-body-2,.mobile-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.mobile-body-3,.mobile-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-body-4,.mobile-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-body-5,.mobile-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-interactive-1,.mobile-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.mobile-interactive-2,.mobile-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.mobile-interactive-3,.mobile-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.mobile-section-title-1{font:var(--section-title-1)}.mobile-section-title-2{font:var(--section-title-2)}.mobile-section-title-3{font:var(--section-title-3)}.mobile-section-title-4{font:var(--section-title-4)}.mobile-section-title-5{font:var(--section-title-5)}.mobile-section-title-6{font:var(--section-title-6)}.mobile-heading-1-lt,.mobile-heading-2-lt,.mobile-heading-3-lt,.mobile-heading-4-lt{font-weight:var(--font-lt)}.mobile-heading-1-sb,.mobile-heading-2-sb,.mobile-heading-3-sb,.mobile-heading-4-sb,.mobile-body-1-sb,.mobile-body-2-sb,.mobile-body-3-sb,.mobile-body-4-sb,.mobile-body-5-sb,.mobile-interactive-1-sb,.mobile-interactive-2-sb,.mobile-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 768px) and (max-width: 1151px){.tablet-heading-1,.tablet-heading-1-sb,.tablet-heading-1-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.tablet-heading-2,.tablet-heading-2-sb,.tablet-heading-2-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-3,.tablet-heading-3-sb,.tablet-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.tablet-heading-4,.tablet-heading-4-sb,.tablet-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-1,.tablet-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.tablet-body-2,.tablet-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.tablet-body-3,.tablet-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-body-4,.tablet-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-body-5,.tablet-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-interactive-1,.tablet-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.tablet-interactive-2,.tablet-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.tablet-interactive-3,.tablet-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.tablet-section-title-1{font:var(--section-title-1)}.tablet-section-title-2{font:var(--section-title-2)}.tablet-section-title-3{font:var(--section-title-3)}.tablet-section-title-4{font:var(--section-title-4)}.tablet-section-title-5{font:var(--section-title-5)}.tablet-section-title-6{font:var(--section-title-6)}.tablet-heading-1-lt,.tablet-heading-2-lt,.tablet-heading-3-lt,.tablet-heading-4-lt{font-weight:var(--font-lt)}.tablet-heading-1-sb,.tablet-heading-2-sb,.tablet-heading-3-sb,.tablet-heading-4-sb,.tablet-body-1-sb,.tablet-body-2-sb,.tablet-body-3-sb,.tablet-body-4-sb,.tablet-body-5-sb,.tablet-interactive-1-sb,.tablet-interactive-2-sb,.tablet-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1152px) and (max-width: 1365px){.desktop-heading-1,.desktop-heading-1-sb,.desktop-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.desktop-heading-2,.desktop-heading-2-sb,.desktop-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.desktop-heading-3,.desktop-heading-3-sb,.desktop-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.desktop-heading-4,.desktop-heading-4-sb,.desktop-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-1,.desktop-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.desktop-body-2,.desktop-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.desktop-body-3,.desktop-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-body-4,.desktop-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-body-5,.desktop-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-interactive-1,.desktop-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.desktop-interactive-2,.desktop-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.desktop-interactive-3,.desktop-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.desktop-section-title-1{font:var(--section-title-1)}.desktop-section-title-2{font:var(--section-title-2)}.desktop-section-title-3{font:var(--section-title-3)}.desktop-section-title-4{font:var(--section-title-4)}.desktop-section-title-5{font:var(--section-title-5)}.desktop-section-title-6{font:var(--section-title-6)}.desktop-heading-1-lt,.desktop-heading-2-lt,.desktop-heading-3-lt,.desktop-heading-4-lt{font-weight:var(--font-lt)}.desktop-heading-1-sb,.desktop-heading-2-sb,.desktop-heading-3-sb,.desktop-heading-4-sb,.desktop-body-1-sb,.desktop-body-2-sb,.desktop-body-3-sb,.desktop-body-4-sb,.desktop-body-5-sb,.desktop-interactive-1-sb,.desktop-interactive-2-sb,.desktop-interactive-3-sb{font-weight:var(--font-sb)}}@media (min-width: 1366px){.wide-heading-1,.wide-heading-1-sb,.wide-heading-1-lt{font-size:var(--font-size-8);font-weight:var(--font-rg);line-height:1.25}.wide-heading-2,.wide-heading-2-sb,.wide-heading-2-lt{font-size:var(--font-size-7);font-weight:var(--font-rg);line-height:1.28}.wide-heading-3,.wide-heading-3-sb,.wide-heading-3-lt{font-size:var(--font-size-6);font-weight:var(--font-rg);line-height:1.333}.wide-heading-4,.wide-heading-4-sb,.wide-heading-4-lt{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-1,.wide-body-1-sb{font-size:var(--font-size-5);font-weight:var(--font-rg);line-height:1.4}.wide-body-2,.wide-body-2-sb{font-size:var(--font-size-4);font-weight:var(--font-rg);line-height:1.5}.wide-body-3,.wide-body-3-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-body-4,.wide-body-4-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-body-5,.wide-body-5-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-interactive-1,.wide-interactive-1-sb{font-size:var(--font-size-3);font-weight:var(--font-rg);line-height:1.5}.wide-interactive-2,.wide-interactive-2-sb{font-size:var(--font-size-2);font-weight:var(--font-rg);letter-spacing:0.16px;line-height:1.4}.wide-interactive-3,.wide-interactive-3-sb{font-size:var(--font-size-1);font-weight:var(--font-rg);letter-spacing:0.32px;line-height:1.333}.wide-section-title-1{font:var(--section-title-1)}.wide-section-title-2{font:var(--section-title-2)}.wide-section-title-3{font:var(--section-title-3)}.wide-section-title-4{font:var(--section-title-4)}.wide-section-title-5{font:var(--section-title-5)}.wide-section-title-6{font:var(--section-title-6)}.wide-heading-1-lt,.wide-heading-2-lt,.wide-heading-3-lt,.wide-heading-4-lt{font-weight:var(--font-lt)}.wide-heading-1-sb,.wide-heading-2-sb,.wide-heading-3-sb,.wide-heading-4-sb,.wide-body-1-sb,.wide-body-2-sb,.wide-body-3-sb,.wide-body-4-sb,.wide-body-5-sb,.wide-interactive-1-sb,.wide-interactive-2-sb,.wide-interactive-3-sb{font-weight:var(--font-sb)}}.heading-1-lt,.heading-2-lt,.heading-3-lt,.heading-4-lt{font-weight:var(--font-lt)}.heading-1-sb,.heading-2-sb,.heading-3-sb,.heading-4-sb,.body-1-sb,.body-2-sb,.body-3-sb,.body-4-sb,.body-5-sb,.interactive-1-sb,.interactive-2-sb,.interactive-3-sb,.helper-sb{font-weight:var(--font-sb)}`;const C=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.searchSubmit=i(this,"searchSubmit",7);this.searchTyping=i(this,"searchTyping",7);this.searchItemClick=i(this,"searchItemClick",7);this.htmlid=`searchbar-${h()}`;this.preventSubmit=false;this.autocomplete=false;this.autocompleteMinChars=3;this.searchHelperLabel="Cerca {searchString}";this.sortResultsItems=false;this.showSearchButton=false;this.searchButtonIconOnly=false;this.searchButtonLabel="CERCA";this.size=a.BIG;this.variant=r.PRIMARY;this.searchString=this.value;this.currResultsCount=this.resultsCount;this.showResults=false;this.isMobile=false;this.resultsItemsList=null}emitSearchItemClick(t){this.searchItemClick.emit(t);this.selectedItem=t;this.searchString=""}emitSearchSubmit(){this.searchSubmit.emit(this.inputRef.value)}watchItems(){this.resultsItemsList=this.getResultsItemsList()}watchResultsCount(){this.currResultsCount=this.resultsCount}watchValue(){this.searchString=this.value}watchSearchString(){this.searchTyping.emit(this.searchString);if(!this.searchString){this.currResultsCount=this.resultsCount}}getResultsItemsList(){return typeof this.resultsItems==="string"?JSON.parse(this.resultsItems):this.resultsItems}getGroupedItems(){const t={};this.resultsItemsList.forEach((e=>{var i;const s=`${e===null||e===void 0?void 0:e.category}${e===null||e===void 0?void 0:e.subcategory}`;t[s]=(i=t[s])!==null&&i!==void 0?i:{category:e===null||e===void 0?void 0:e.category,subcategory:e===null||e===void 0?void 0:e.subcategory,items:[]};t[s]["items"].push(e)}));if(this.sortResultsItems){return Object.keys(t).sort().reduce(((e,i)=>{e[i]=Object.assign(Object.assign({},t[i]),{items:t[i]["items"].sort(((t,e)=>{const i=t.label.toUpperCase();const s=e.label.toUpperCase();if(i<s){return-1}if(i>s){return 1}return 0}))});return e}),{})}return t}onListItemKeyDown(t,e){if(t.key===l.ENTER){t.preventDefault();this.emitSearchItemClick(e);return}this.handleArrowsNavigation(t)}onSearchHelperKeyDown(t){if(t.key===l.ENTER){t.preventDefault();this.emitSearchSubmit();return}this.handleArrowsNavigation(t)}handleArrowsNavigation(t){var e,i,s,o,n,a;if(![l.ARROW_DOWN,l.ARROW_UP].includes(t.key)){return}const r=t.target;const h=Array.from((i=(e=this.host.shadowRoot)===null||e===void 0?void 0:e.querySelectorAll("z-list .list-item"))!==null&&i!==void 0?i:[]);const d=h.indexOf(r);if(t.key===l.ARROW_DOWN){t.preventDefault();const e=d+1;if(e<h.length){h[e].focus()}}if(t.key===l.ARROW_UP){t.preventDefault();const e=d-1;if(e<0){(o=(s=this.host.shadowRoot)===null||s===void 0?void 0:s.querySelector("input"))===null||o===void 0?void 0:o.focus();(a=(n=this.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("input"))===null||a===void 0?void 0:a.setSelectionRange(this.inputRef.value.length,this.inputRef.value.length)}if(e>=0){h[e].focus()}}}handleStopTyping(t){t.stopPropagation();this.searchString=t.detail.value;this.selectedItem=undefined}handleSubmit(){if(this.preventSubmit){return}this.emitSearchSubmit()}handleOutsideClick(t){const e=t.composedPath();if(e.includes(this.host)){return}this.showResults=false}componentWillLoad(){this.resultsItemsList=this.getResultsItemsList();this.mql=matchMedia("(max-width: 767px)");this.onMobileViewChange=t=>this.isMobile=t.matches;this.mql.addEventListener("change",this.onMobileViewChange);this.isMobile=this.mql.matches}disconnectedCallback(){var t;(t=this.mql)===null||t===void 0?void 0:t.removeEventListener("change",this.onMobileViewChange)}renderItemLabel(t){if(!this.searchString){return t}return t.replace(new RegExp(this.searchString.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),"gmi"),(t=>`<mark>${t}</mark>`))}renderItem(t,e){var i;return s("z-list-element",{id:`list-item-${this.htmlid}-${e}`,role:"presentation",htmlTabindex:-1,onKeyDown:e=>this.onListItemKeyDown(e,t),onClick:e=>{e.stopPropagation();this.emitSearchItemClick(t)}},s("div",{class:"list-item ellipsis",role:"option",tabindex:0},!!(t===null||t===void 0?void 0:t.icon)&&s("z-icon",{class:"item-icon",name:t.icon}),s("div",{class:"item-label body-3 mobile-body-4",title:t.label,innerHTML:this.renderItemLabel(t.label)}),!!(t===null||t===void 0?void 0:t.tag)&&s("z-tag",{icon:t.tag.icon},!this.isMobile?t.tag.text:"")),!!((i=t.children)===null||i===void 0?void 0:i.length)&&s("z-list",{class:"sub-list",role:"group","aria-label":t.label||undefined},t.children.map(((t,e)=>this.renderItem(t,e)))))}renderItemGroups(){var t;if(!((t=this.resultsItemsList)===null||t===void 0?void 0:t.length)){return}const e=Object.values(this.getGroupedItems());const i=[];const o=!!this.currResultsCount;let n=0;for(const t of e){const e=o?this.currResultsCount-n:t.items.length;if(e<=0){break}const a=t.items.slice(0,e);const r=a.map(((t,e)=>this.renderItem(t,e)));n+=r.length;if(!r.length){continue}const l=[t.category,t.subcategory].filter(Boolean).join(" ");i.push(s("z-list-group",{"aria-label":l||undefined},t.category&&s("z-list-element",{class:"category-heading body-3 mobile-body-4",slot:"header-title",role:"presentation",htmlTabindex:-1},s("div",{class:"category"},t.category),t.subcategory&&s("div",{class:"subcategory"},t.subcategory)),r))}return i}render(){var t,e,i,n,a;return s(o,{key:"82c926179762db33e8d1c425cac474affd59fea6",onFocus:()=>this.showResults=true,onClick:t=>this.handleOutsideClick(t),class:{"has-submit":!!this.showSearchButton,"has-results":!!this.autocomplete}},s("div",{key:"689d1cda6b0c217e5afe892627f31100858c1a72",class:"input-container"},s("z-input",{key:"d596769c9a346c4548c5b71d10bbe9b2456556ee",ref:t=>this.inputRef=t,htmlid:`input-${this.htmlid}`,message:false,placeholder:this.placeholder,onStopTyping:t=>this.handleStopTyping(t),onKeyUp:t=>{d(t,(()=>this.handleSubmit()));this.handleArrowsNavigation(t)},onFocus:()=>this.showResults=true,value:this.searchString||((t=this.selectedItem)===null||t===void 0?void 0:t.label),size:this.size,label:this.label,"aria-label":this.htmlAriaLabel||this.placeholder||undefined}),!!(this.showResults&&this.autocomplete&&this.searchString&&this.searchString.length>=this.autocompleteMinChars&&this.resultsItemsList)&&s("div",{key:"954f6984c04ba133c1637220ed47e778d7440e22",class:"results z-scrollbar"},this.preventSubmit&&!((e=this.resultsItemsList)===null||e===void 0?void 0:e.length)?s("div",{class:"item-no-results body-3 mobile-body-4"},"Non abbiamo trovato risultati per ",s("b",null,this.searchString),s("br",null),s("br",null),"Cosa puoi fare?",s("ul",null,s("li",null,"Verificare di aver scritto bene"),s("li",null,"Provare a cercare un'altra parola"),s("li",null,"Provare a cercare qualcosa di più generico"))):s("z-list",{role:"listbox",id:`list-${this.htmlid}`,"aria-label":this.htmlAriaLabel||this.label||undefined},this.autocomplete&&!this.preventSubmit&&!!this.searchString&&s("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-search`,onKeyDown:t=>this.onSearchHelperKeyDown(t),onClick:()=>this.emitSearchSubmit()},s("div",{class:"list-item item-search",role:"option",tabindex:0},s("z-icon",{class:"search-icon",name:"left-magnifying-glass"}),s("div",{class:"item-label body-3 mobile-body-4",innerHTML:(i=this.searchHelperLabel)===null||i===void 0?void 0:i.replace("{searchString}",`<mark>${this.searchString}</mark>`)}))),this.renderItemGroups(),!!(this.searchString&&((n=this.resultsItemsList)===null||n===void 0?void 0:n.length)&&this.currResultsCount&&this.currResultsCount<((a=this.resultsItemsList)===null||a===void 0?void 0:a.length))&&s("z-list-element",{role:"presentation",htmlTabindex:-1,id:`list-item-${this.htmlid}-show-all`},s("div",{role:"option",class:"item-show-all body-3 mobile-body-4",tabindex:0,onClick:()=>this.currResultsCount=undefined},"Vedi tutti i risultati"))))),this.showSearchButton&&s("z-button",{key:"898d0c61de5c60e3e78be3b2336c1cbb4adcc3e3",icon:this.searchButtonIconOnly?"search":undefined,"aria-label":this.searchButtonIconOnly?this.searchButtonLabel.trim()||"CERCA":undefined,disabled:!!this.preventSubmit,variant:this.variant,size:this.size,onClick:()=>this.handleSubmit()},this.searchButtonIconOnly?"":this.searchButtonLabel.trim()||"CERCA"))}get host(){return this}static get watchers(){return{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}}static get style(){return w()+(y()+(k()+x()))}},[1,"z-searchbar",{htmlid:[513],preventSubmit:[4,"prevent-submit"],label:[1],htmlAriaLabel:[1,"html-aria-label"],value:[1],placeholder:[1],autocomplete:[4],autocompleteMinChars:[2,"autocomplete-min-chars"],resultsCount:[2,"results-count"],searchHelperLabel:[1,"search-helper-label"],resultsItems:[1,"results-items"],sortResultsItems:[4,"sort-results-items"],showSearchButton:[4,"show-search-button"],searchButtonIconOnly:[4,"search-button-icon-only"],searchButtonLabel:[1,"search-button-label"],size:[1],variant:[1],searchString:[32],currResultsCount:[32],showResults:[32],isMobile:[32],selectedItem:[32]},[[4,"click","handleOutsideClick"]],{resultsItems:[{watchItems:0}],resultsCount:[{watchResultsCount:0}],value:[{watchValue:0}],searchString:[{watchSearchString:0}]}]);function S(){if(typeof customElements==="undefined"){return}const t=["z-searchbar","z-button","z-divider","z-icon","z-input","z-input-message","z-list","z-list-element","z-list-group","z-tag"];t.forEach((t=>{switch(t){case"z-searchbar":if(!customElements.get(n(t))){customElements.define(n(t),C)}break;case"z-button":if(!customElements.get(n(t))){f()}break;case"z-divider":if(!customElements.get(n(t))){c()}break;case"z-icon":if(!customElements.get(n(t))){b()}break;case"z-input":if(!customElements.get(n(t))){g()}break;case"z-input-message":if(!customElements.get(n(t))){v()}break;case"z-list":if(!customElements.get(n(t))){m()}break;case"z-list-element":if(!customElements.get(n(t))){p()}break;case"z-list-group":if(!customElements.get(n(t))){u()}break;case"z-tag":if(!customElements.get(n(t))){z()}break}}))}export{C as Z,S as d};
2
2
  //# sourceMappingURL=index12.js.map
package/dist/components/index12.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["stylesCss","typographyCss","ZSearchbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","preventSubmit","autocomplete","autocompleteMinChars","searchHelperLabel","sortResultsItems","showSearchButton","searchButtonIconOnly","searchButtonLabel","size","ControlSize","BIG","variant","ButtonVariant","PRIMARY","searchString","value","currResultsCount","resultsCount","showResults","isMobile","resultsItemsList","emitSearchItemClick","item","searchItemClick","emit","selectedItem","emitSearchSubmit","searchSubmit","inputRef","watchItems","getResultsItemsList","watchResultsCount","watchValue","watchSearchString","searchTyping","resultsItems","JSON","parse","getGroupedItems","groupedItems","forEach","key","category","subcategory","_a","items","push","Object","keys","sort","reduce","obj","assign","a","b","nameA","label","toUpperCase","nameB","onListItemKeyDown","e","KeyboardCode","ENTER","preventDefault","handleArrowsNavigation","onSearchHelperKeyDown","ARROW_DOWN","ARROW_UP","includes","currentElement","target","Array","from","_b","host","shadowRoot","querySelectorAll","currentIndex","indexOf","nextIndex","length","focus","prevIndex","_d","_c","querySelector","_f","_e","setSelectionRange","handleStopTyping","stopPropagation","detail","undefined","handleSubmit","handleOutsideClick","cp","composedPath","componentWillLoad","mql","matchMedia","onMobileViewChange","matches","addEventListener","disconnectedCallback","removeEventListener","renderItemLabel","replace","RegExp","found","renderItem","index","h","id","role","htmlTabindex","onKeyDown","onClick","class","tabindex","icon","name","title","innerHTML","tag","text","children","map","child","renderItemGroups","values","listGroups","hasResultsLimit","renderedCount","groupItem","remaining","visibleItems","slice","listGroupsElements","subindex","ariaLabel","filter","Boolean","join","slot","render","Host","onFocus","ref","el","message","placeholder","onStopTyping","onKeyUp","handleEnterKeydSubmit","htmlAriaLabel","trim","disabled"],"sources":["src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-label/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-scrollbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/tokens/typography.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx"],"sourcesContent":[":host {\n /**\n * @prop --z-searchbar-results-height: Max height of the results container (default: 540px)\n * @prop --z-searchbar-tag-text-color: Color of tag's text (default --color-primary03);\n * @prop --z-searchbar-tag-bg: Color of tag's background (default --color-hover-primary);\n */\n --z-searchbar-tag-text-color: var(--color-primary03);\n --z-searchbar-tag-bg: var(--color-hover-primary);\n --z-searchbar-item-height: 2.75rem;\n\n z-index: 15;\n display: flex;\n align-items: flex-end;\n column-gap: calc(var(--space-unit) * 2);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host,\n*,\n::after,\n::before {\n box-sizing: border-box;\n}\n\n.input-container {\n position: relative;\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n\n.input-container z-input {\n z-index: 1;\n}\n\n.results {\n --item-icon-size: 1rem;\n --z-icon-height: var(--item-icon-size);\n --z-icon-width: var(--item-icon-size);\n --item-inline-padding: calc(var(--space-unit) * 1.5);\n --item-col-gap: var(--space-unit);\n\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n overflow: auto;\n width: 100%;\n max-height: var(--z-searchbar-results-height, 540px);\n border: var(--border-size-small) solid var(--color-form-surface03);\n border-top: none;\n background: var(--color-form-background);\n}\n\n.results z-list-element {\n --background-color-list-element: var(--color-form-background);\n\n position: relative;\n display: block;\n}\n\n.results > z-list > z-list-element::part(list-item-container) {\n padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-element > .list-item {\n position: relative;\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);\n background-color: transparent;\n color: var(--color-form-default-text);\n fill: var(--color-form-default-icon);\n gap: var(--item-col-gap);\n}\n\n.results z-list-element > .list-item:hover {\n background-color: var(--gray100); /* TODO: use correct form-related token when available */\n cursor: pointer;\n}\n\n.results z-list-element > .list-item:focus-visible {\n z-index: 1;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n/* list elements separator */\n.results > z-list > z-list-element:not(:last-child) > .list-item,\n.results z-list-group:not(:last-child) > z-list-element:not(.category-heading) {\n border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results z-list-group {\n padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-group > z-list-element::part(list-item-container) {\n padding: 0;\n}\n\n.results .sub-list {\n padding-left: calc(var(--item-icon-size) + var(--item-col-gap));\n}\n\n.results .sub-list z-list-element::part(list-item-container) {\n padding: 0;\n}\n\n.results .sub-list z-list-element > .list-item {\n position: relative;\n}\n\n/* tree indicators */\n.results .sub-list > z-list-element:not(:last-child)::before,\n.results .sub-list > z-list-element > .list-item::before {\n position: absolute;\n top: 0;\n left: calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);\n border-left: 1px solid var(--color-form-surface03);\n content: \"\";\n}\n\n/* \"|\" tree indicator */\n.results .sub-list > z-list-element:not(:last-child)::before {\n top: -4px;\n height: calc(100% + 4px);\n}\n\n/* \"—\" tree indicator */\n.results .sub-list z-list-element > .list-item::before {\n width: 14px;\n height: calc(var(--z-searchbar-item-height) / 2);\n border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results .category-heading > .category {\n font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n text-transform: uppercase;\n}\n\n.results z-list-element > .list-item .ellipsis {\n overflow: hidden;\n}\n\n.results .ellipsis > .item-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.results .item-label mark {\n background: var(--color-primary03);\n color: var(--color-default-text);\n}\n\n.results .list-item > z-tag {\n --z-tag-bg: var(--z-searchbar-tag-bg);\n --z-tag-text-color: var(--z-searchbar-tag-text-color);\n\n margin-left: auto;\n white-space: nowrap;\n}\n\n.results .item-show-all {\n width: 100%;\n color: var(--color-primary01);\n cursor: pointer;\n text-align: center;\n}\n\n.results .item-no-results {\n display: block;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n font-style: italic;\n}\n\n.results .item-no-results > ul {\n padding-left: calc(var(--space-unit) * 2);\n margin: var(--space-unit);\n}\n\n@media (min-width: 768px) {\n .results {\n --item-icon-size: 1.125rem;\n }\n}\n",".z-label {\n display: block;\n padding-bottom: var(--space-unit);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n text-align: left;\n text-transform: uppercase;\n}\n","/* Webkit Scrollbar */\n.z-scrollbar::-webkit-scrollbar {\n width: 6px;\n background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--color-primary01);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n --z-scrollbar-track-gradient: linear-gradient(\n to right,\n transparent 0 1px,\n var(--gray600) 1px 5px,\n transparent 5px 6px\n );\n --z-scrollbar-track-color: var(--gray600);\n --z-scrollbar-thumb-color: var(--color-primary03);\n --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n .z-scrollbar {\n scrollbar-color: var(--color-primary01) transparent;\n }\n\n :host([theme=\"dark\"]) .z-scrollbar,\n .z-scrollbar--dark {\n scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))\n var(--z-scrollbar-track-color, var(--gray600));\n }\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ControlSize,\n KeyboardCode,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n} from \"../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-searchbar\",\n styleUrls: [\n \"styles.css\",\n \"../css-components/z-label/styles.css\",\n \"../css-components/z-scrollbar/styles.css\",\n \"../../tokens/typography.css\",\n ],\n shadow: true,\n})\nexport class ZSearchbar implements ComponentInterface {\n @Element() host: HTMLZSearchbarElement;\n\n /** The id of the searchbar element */\n @Prop({reflect: true})\n htmlid = `searchbar-${randomId()}`;\n\n /** Prevent submit action */\n @Prop()\n preventSubmit?: boolean = false;\n\n /** The input label */\n @Prop()\n label?: string;\n\n /** The input aria-label */\n @Prop()\n htmlAriaLabel?: string;\n\n /** Input search string */\n @Prop()\n value?: string;\n\n /** Search input placeholder */\n @Prop()\n placeholder?: string;\n\n /** Show autocomplete results */\n @Prop()\n autocomplete?: boolean = false;\n\n /** Minimun number of characters to dispatch typing event */\n @Prop()\n autocompleteMinChars?: number = 3;\n\n /** Number of results shown. Default: all */\n @Prop()\n resultsCount?: number;\n\n /** Search helper text */\n @Prop()\n searchHelperLabel?: string = \"Cerca {searchString}\";\n\n /** Autocomplete results items */\n @Prop()\n resultsItems?: SearchbarItem[] | string;\n\n /** Sort autocomplete results items */\n @Prop()\n sortResultsItems?: boolean = false;\n\n /** Show submit button */\n @Prop()\n showSearchButton?: boolean = false;\n\n /** Hide the label of the submit button, showing only the icon */\n @Prop()\n searchButtonIconOnly?: boolean = false;\n\n /** The label of the submit button */\n @Prop()\n searchButtonLabel?: string = \"CERCA\";\n\n /** Size of the `z-input` and submit `z-button` */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /** Submit `z-button` variant */\n @Prop()\n variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n @State()\n searchString = this.value;\n\n @State()\n currResultsCount: number | undefined = this.resultsCount;\n\n @State()\n showResults = false;\n\n @State()\n isMobile = false;\n\n @State()\n selectedItem?: SearchbarItem;\n\n private resultsItemsList: SearchbarItem[] | undefined = null;\n\n private inputRef: HTMLZInputElement;\n\n /** Media query list for detecting mobile view. */\n private mql?: MediaQueryList;\n\n /** Listener for changes in the mobile view media query. */\n private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n /** Emitted on search submit, return search string */\n @Event()\n searchSubmit: EventEmitter<string>;\n\n /** Emitted on search typing, return search string */\n @Event()\n searchTyping: EventEmitter<string>;\n\n /** Emitted on search result click, return item */\n @Event()\n searchItemClick: EventEmitter<SearchbarItem>;\n\n private emitSearchItemClick(item: SearchbarItem): void {\n this.searchItemClick.emit(item);\n this.selectedItem = item;\n this.searchString = \"\";\n }\n\n private emitSearchSubmit(): void {\n this.searchSubmit.emit(this.inputRef.value);\n }\n\n @Watch(\"resultsItems\")\n watchItems(): void {\n this.resultsItemsList = this.getResultsItemsList();\n }\n\n @Watch(\"resultsCount\")\n watchResultsCount(): void {\n this.currResultsCount = this.resultsCount;\n }\n\n @Watch(\"value\")\n watchValue(): void {\n this.searchString = this.value;\n }\n\n @Watch(\"searchString\")\n watchSearchString(): void {\n this.searchTyping.emit(this.searchString);\n if (!this.searchString) {\n this.currResultsCount = this.resultsCount;\n }\n }\n\n private getResultsItemsList(): SearchbarItem[] | undefined {\n return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n }\n\n private getGroupedItems(): SearchbarGroupedItem {\n const groupedItems = {};\n this.resultsItemsList.forEach((item: SearchbarItem) => {\n const key = `${item?.category}${item?.subcategory}`;\n groupedItems[key] = groupedItems[key] ?? {\n category: item?.category,\n subcategory: item?.subcategory,\n items: [],\n };\n groupedItems[key][\"items\"].push(item);\n });\n\n if (this.sortResultsItems) {\n return Object.keys(groupedItems)\n .sort()\n .reduce((obj, key) => {\n obj[key] = {\n ...groupedItems[key],\n items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n const nameA = a.label.toUpperCase();\n const nameB = b.label.toUpperCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n }),\n };\n\n return obj;\n }, {});\n }\n\n return groupedItems;\n }\n\n private onListItemKeyDown(e: KeyboardEvent, item: SearchbarItem): void {\n if (e.key === KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitSearchItemClick(item);\n\n return;\n }\n\n this.handleArrowsNavigation(e);\n }\n\n private onSearchHelperKeyDown(e: KeyboardEvent): void {\n if (e.key === KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitSearchSubmit();\n\n return;\n }\n\n this.handleArrowsNavigation(e);\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode)) {\n return;\n }\n\n const currentElement = e.target as HTMLElement;\n const items = Array.from(this.host.shadowRoot?.querySelectorAll(\"z-list .list-item\") ?? []);\n const currentIndex = items.indexOf(currentElement);\n\n if (e.key === KeyboardCode.ARROW_DOWN) {\n e.preventDefault();\n const nextIndex = currentIndex + 1;\n if (nextIndex < items.length) {\n (items[nextIndex] as HTMLElement).focus();\n }\n }\n\n if (e.key === KeyboardCode.ARROW_UP) {\n e.preventDefault();\n const prevIndex = currentIndex - 1;\n if (prevIndex < 0) {\n this.host.shadowRoot?.querySelector(\"input\")?.focus();\n this.host.shadowRoot\n ?.querySelector(\"input\")\n ?.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n }\n if (prevIndex >= 0) {\n (items[prevIndex] as HTMLElement).focus();\n }\n }\n }\n\n private handleStopTyping(e: CustomEvent): void {\n e.stopPropagation();\n this.searchString = e.detail.value;\n this.selectedItem = undefined;\n }\n\n private handleSubmit(): void {\n if (this.preventSubmit) {\n return;\n }\n\n this.emitSearchSubmit();\n }\n\n @Listen(\"click\", {target: \"document\"})\n private handleOutsideClick(e: MouseEvent): void {\n const cp = e.composedPath();\n if (cp.includes(this.host)) {\n return;\n }\n\n this.showResults = false;\n }\n\n componentWillLoad(): void {\n this.resultsItemsList = this.getResultsItemsList();\n\n this.mql = matchMedia(\"(max-width: 767px)\");\n this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n this.mql.addEventListener(\"change\", this.onMobileViewChange);\n this.isMobile = this.mql.matches;\n }\n\n disconnectedCallback(): void {\n this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n }\n\n private renderItemLabel(label: string): string {\n if (!this.searchString) {\n return label;\n }\n\n return label.replace(\n new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n (found) => `<mark>${found}</mark>`\n );\n }\n\n private renderItem(item: SearchbarItem, index: number): HTMLZListElementElement {\n return (\n <z-list-element\n id={`list-item-${this.htmlid}-${index}`}\n role=\"presentation\"\n htmlTabindex={-1}\n onKeyDown={(e: KeyboardEvent) => this.onListItemKeyDown(e, item)}\n onClick={() => this.emitSearchItemClick(item)}\n >\n <div\n class=\"list-item ellipsis\"\n role=\"option\"\n tabindex={0}\n >\n {!!item?.icon && (\n <z-icon\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n\n <div\n class=\"item-label body-3 mobile-body-4\"\n title={item.label}\n innerHTML={this.renderItemLabel(item.label)}\n />\n {!!item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n </div>\n {!!item.children?.length && (\n <z-list\n class=\"sub-list\"\n role=\"group\"\n aria-label={item.label || undefined}\n >\n {item.children.map((child, index) => this.renderItem(child, index))}\n </z-list>\n )}\n </z-list-element>\n );\n }\n\n /**\n * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.\n */\n private renderItemGroups(): HTMLZListGroupElement[] | undefined {\n if (!this.resultsItemsList?.length) {\n return;\n }\n\n const groupedItems = Object.values(this.getGroupedItems()) as SearchbarGroup[];\n const listGroups: HTMLZListGroupElement[] = [];\n const hasResultsLimit = !!this.currResultsCount;\n let renderedCount = 0;\n\n for (const groupItem of groupedItems) {\n const remaining = hasResultsLimit ? this.currResultsCount - renderedCount : groupItem.items.length;\n if (remaining <= 0) {\n break;\n }\n\n const visibleItems = groupItem.items.slice(0, remaining);\n const listGroupsElements: HTMLZListElement[] = visibleItems.map((item: SearchbarItem, subindex: number) =>\n this.renderItem(item, subindex)\n );\n renderedCount += listGroupsElements.length;\n\n if (!listGroupsElements.length) {\n continue;\n }\n\n const ariaLabel = [groupItem.category, groupItem.subcategory].filter(Boolean).join(\" \");\n\n listGroups.push(\n <z-list-group aria-label={ariaLabel || undefined}>\n {groupItem.category && (\n <z-list-element\n class=\"category-heading body-3 mobile-body-4\"\n slot=\"header-title\"\n role=\"presentation\"\n htmlTabindex={-1}\n >\n <div class=\"category\">{groupItem.category}</div>\n {groupItem.subcategory && <div class=\"subcategory\">{groupItem.subcategory}</div>}\n </z-list-element>\n )}\n\n {listGroupsElements}\n </z-list-group>\n );\n }\n\n return listGroups;\n }\n\n render(): HTMLZSearchbarElement {\n return (\n <Host\n onFocus={() => (this.showResults = true)}\n onClick={(e: MouseEvent) => this.handleOutsideClick(e)}\n class={{\"has-submit\": !!this.showSearchButton, \"has-results\": !!this.autocomplete}}\n >\n <div class=\"input-container\">\n <z-input\n ref={(el) => (this.inputRef = el)}\n htmlid={`input-${this.htmlid}`}\n message={false}\n placeholder={this.placeholder}\n onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n onKeyUp={(e: KeyboardEvent) => {\n handleEnterKeydSubmit(e, () => this.handleSubmit());\n this.handleArrowsNavigation(e);\n }}\n onFocus={() => (this.showResults = true)}\n value={this.searchString || this.selectedItem?.label}\n size={this.size}\n label={this.label}\n aria-label={this.htmlAriaLabel || this.placeholder || undefined}\n />\n\n {!!(\n this.showResults &&\n this.autocomplete &&\n this.searchString &&\n this.searchString.length >= this.autocompleteMinChars &&\n this.resultsItemsList\n ) && (\n <div class=\"results z-scrollbar\">\n {this.preventSubmit && !this.resultsItemsList?.length ? (\n <div class=\"item-no-results body-3 mobile-body-4\">\n Non abbiamo trovato risultati per <b>{this.searchString}</b>\n <br />\n <br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </div>\n ) : (\n <z-list\n role=\"listbox\"\n id={`list-${this.htmlid}`}\n aria-label={this.htmlAriaLabel || this.label || undefined}\n >\n {this.autocomplete && !this.preventSubmit && !!this.searchString && (\n <z-list-element\n role=\"presentation\"\n htmlTabindex={-1}\n id={`list-item-${this.htmlid}-search`}\n onKeyDown={(e: KeyboardEvent) => this.onSearchHelperKeyDown(e)}\n onClick={() => this.emitSearchSubmit()}\n >\n <div\n class=\"list-item item-search\"\n role=\"option\"\n tabindex={0}\n >\n <z-icon\n class=\"search-icon\"\n name=\"left-magnifying-glass\"\n />\n <div\n class=\"item-label body-3 mobile-body-4\"\n innerHTML={this.searchHelperLabel?.replace(\n \"{searchString}\",\n `<mark>${this.searchString}</mark>`\n )}\n />\n </div>\n </z-list-element>\n )}\n\n {this.renderItemGroups()}\n\n {!!(\n this.searchString &&\n this.resultsItemsList?.length &&\n this.currResultsCount &&\n this.currResultsCount < this.resultsItemsList?.length\n ) && (\n <z-list-element\n role=\"presentation\"\n htmlTabindex={-1}\n id={`list-item-${this.htmlid}-show-all`}\n >\n <div\n role=\"option\"\n class=\"item-show-all body-3 mobile-body-4\"\n tabindex={0}\n onClick={() => (this.currResultsCount = undefined)}\n >\n Vedi tutti i risultati\n </div>\n </z-list-element>\n )}\n </z-list>\n )}\n </div>\n )}\n </div>\n\n {this.showSearchButton && (\n <z-button\n icon={this.searchButtonIconOnly ? \"search\" : undefined}\n aria-label={this.searchButtonIconOnly ? this.searchButtonLabel.trim() || \"CERCA\" : undefined}\n disabled={!!this.preventSubmit}\n variant={this.variant}\n size={this.size}\n onClick={() => this.handleSubmit()}\n >\n {this.searchButtonIconOnly ? \"\" : this.searchButtonLabel.trim() || \"CERCA\"}\n </z-button>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["stylesCss","typographyCss","ZSearchbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","htmlid","randomId","preventSubmit","autocomplete","autocompleteMinChars","searchHelperLabel","sortResultsItems","showSearchButton","searchButtonIconOnly","searchButtonLabel","size","ControlSize","BIG","variant","ButtonVariant","PRIMARY","searchString","value","currResultsCount","resultsCount","showResults","isMobile","resultsItemsList","emitSearchItemClick","item","searchItemClick","emit","selectedItem","emitSearchSubmit","searchSubmit","inputRef","watchItems","getResultsItemsList","watchResultsCount","watchValue","watchSearchString","searchTyping","resultsItems","JSON","parse","getGroupedItems","groupedItems","forEach","key","category","subcategory","_a","items","push","Object","keys","sort","reduce","obj","assign","a","b","nameA","label","toUpperCase","nameB","onListItemKeyDown","e","KeyboardCode","ENTER","preventDefault","handleArrowsNavigation","onSearchHelperKeyDown","ARROW_DOWN","ARROW_UP","includes","currentElement","target","Array","from","_b","host","shadowRoot","querySelectorAll","currentIndex","indexOf","nextIndex","length","focus","prevIndex","_d","_c","querySelector","_f","_e","setSelectionRange","handleStopTyping","stopPropagation","detail","undefined","handleSubmit","handleOutsideClick","cp","composedPath","componentWillLoad","mql","matchMedia","onMobileViewChange","matches","addEventListener","disconnectedCallback","removeEventListener","renderItemLabel","replace","RegExp","found","renderItem","index","h","id","role","htmlTabindex","onKeyDown","onClick","class","tabindex","icon","name","title","innerHTML","tag","text","children","map","child","renderItemGroups","values","listGroups","hasResultsLimit","renderedCount","groupItem","remaining","visibleItems","slice","listGroupsElements","subindex","ariaLabel","filter","Boolean","join","slot","render","Host","onFocus","ref","el","message","placeholder","onStopTyping","onKeyUp","handleEnterKeydSubmit","htmlAriaLabel","trim","disabled"],"sources":["src/components/z-searchbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-label/styles.css?tag=z-searchbar&encapsulation=shadow","src/components/css-components/z-scrollbar/styles.css?tag=z-searchbar&encapsulation=shadow","src/tokens/typography.css?tag=z-searchbar&encapsulation=shadow","src/components/z-searchbar/index.tsx"],"sourcesContent":[":host {\n /**\n * @prop --z-searchbar-results-height: Max height of the results container (default: 540px)\n * @prop --z-searchbar-tag-text-color: Color of tag's text (default --color-primary03);\n * @prop --z-searchbar-tag-bg: Color of tag's background (default --color-hover-primary);\n */\n --z-searchbar-tag-text-color: var(--color-primary03);\n --z-searchbar-tag-bg: var(--color-hover-primary);\n --z-searchbar-item-height: 2.75rem;\n\n z-index: 15;\n display: flex;\n align-items: flex-end;\n column-gap: calc(var(--space-unit) * 2);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host,\n*,\n::after,\n::before {\n box-sizing: border-box;\n}\n\n.input-container {\n position: relative;\n display: flex;\n width: 100%;\n flex-direction: column;\n}\n\n.input-container z-input {\n z-index: 1;\n}\n\n.results {\n --item-icon-size: 1rem;\n --z-icon-height: var(--item-icon-size);\n --z-icon-width: var(--item-icon-size);\n --item-inline-padding: calc(var(--space-unit) * 1.5);\n --item-col-gap: var(--space-unit);\n\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n overflow: auto;\n width: 100%;\n max-height: var(--z-searchbar-results-height, 540px);\n border: var(--border-size-small) solid var(--color-form-surface03);\n border-top: none;\n background: var(--color-form-background);\n}\n\n.results z-list-element {\n --background-color-list-element: var(--color-form-background);\n\n position: relative;\n display: block;\n}\n\n.results > z-list > z-list-element::part(list-item-container) {\n padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-element > .list-item {\n position: relative;\n display: flex;\n align-items: center;\n padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) / 4);\n background-color: transparent;\n color: var(--color-form-default-text);\n fill: var(--color-form-default-icon);\n gap: var(--item-col-gap);\n}\n\n.results z-list-element > .list-item:hover {\n background-color: var(--gray100); /* TODO: use correct form-related token when available */\n cursor: pointer;\n}\n\n.results z-list-element > .list-item:focus-visible {\n z-index: 1;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n/* list elements separator */\n.results > z-list > z-list-element:not(:last-child) > .list-item,\n.results z-list-group:not(:last-child) > z-list-element:not(.category-heading) {\n border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results z-list-group {\n padding: 0 var(--item-inline-padding);\n}\n\n.results z-list-group > z-list-element::part(list-item-container) {\n padding: 0;\n}\n\n.results .sub-list {\n padding-left: calc(var(--item-icon-size) + var(--item-col-gap));\n}\n\n.results .sub-list z-list-element::part(list-item-container) {\n padding: 0;\n}\n\n.results .sub-list z-list-element > .list-item {\n position: relative;\n}\n\n/* tree indicators */\n.results .sub-list > z-list-element:not(:last-child)::before,\n.results .sub-list > z-list-element > .list-item::before {\n position: absolute;\n top: 0;\n left: calc(0px - var(--item-col-gap) - var(--item-icon-size) / 2 + 1px);\n border-left: 1px solid var(--color-form-surface03);\n content: \"\";\n}\n\n/* \"|\" tree indicator */\n.results .sub-list > z-list-element:not(:last-child)::before {\n top: -4px;\n height: calc(100% + 4px);\n}\n\n/* \"—\" tree indicator */\n.results .sub-list z-list-element > .list-item::before {\n width: 14px;\n height: calc(var(--z-searchbar-item-height) / 2);\n border-bottom: 1px solid var(--color-form-surface03);\n}\n\n.results .category-heading > .category {\n font-style: italic;\n}\n\n.results .category-heading > .subcategory {\n text-transform: uppercase;\n}\n\n.results z-list-element > .list-item .ellipsis {\n overflow: hidden;\n}\n\n.results .ellipsis > .item-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.results .item-label mark {\n background: var(--color-primary03);\n color: var(--color-default-text);\n}\n\n.results .list-item > z-tag {\n --z-tag-bg: var(--z-searchbar-tag-bg);\n --z-tag-text-color: var(--z-searchbar-tag-text-color);\n\n margin-left: auto;\n white-space: nowrap;\n}\n\n.results .item-show-all {\n width: 100%;\n color: var(--color-primary01);\n cursor: pointer;\n text-align: center;\n}\n\n.results .item-no-results {\n display: block;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n font-style: italic;\n}\n\n.results .item-no-results > ul {\n padding-left: calc(var(--space-unit) * 2);\n margin: var(--space-unit);\n}\n\n@media (min-width: 768px) {\n .results {\n --item-icon-size: 1.125rem;\n }\n}\n",".z-label {\n display: block;\n padding-bottom: var(--space-unit);\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-size: var(--font-size-1);\n font-weight: var(--font-sb);\n text-align: left;\n text-transform: uppercase;\n}\n","/* Webkit Scrollbar */\n.z-scrollbar::-webkit-scrollbar {\n width: 6px;\n background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--color-primary01);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--color-hover-primary);\n}\n\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n --z-scrollbar-track-gradient: linear-gradient(\n to right,\n transparent 0 1px,\n var(--gray600) 1px 5px,\n transparent 5px 6px\n );\n --z-scrollbar-track-color: var(--gray600);\n --z-scrollbar-thumb-color: var(--color-primary03);\n --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n .z-scrollbar {\n scrollbar-color: var(--color-primary01) transparent;\n }\n\n :host([theme=\"dark\"]) .z-scrollbar,\n .z-scrollbar--dark {\n scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))\n var(--z-scrollbar-track-color, var(--gray600));\n }\n}\n",":root {\n /* font-family */\n --font-family-sans: \"IBM Plex Sans\", sans-serif;\n --font-family-serif: \"IBM Plex Serif\", serif;\n\n /* font-weight */\n --font-lt: 300;\n --font-rg: 400;\n --font-sb: 600;\n --font-bd: 700;\n\n /* font-size type scale */\n --font-size-1: 0.75rem; /* 12px */\n --font-size-2: 0.875rem; /* 14px */\n --font-size-3: 1rem; /* assuming 16px */\n --font-size-4: 1.125rem; /* 18px */\n --font-size-5: 1.25rem; /* 20px */\n --font-size-6: 1.5rem; /* 24px */\n --font-size-7: 1.75rem; /* 28px */\n --font-size-8: 2rem; /* 32px */\n --font-size-9: 2.25rem; /* 36px */\n --font-size-10: 2.625rem; /* 42px */\n --font-size-11: 3rem; /* 48px */\n --font-size-12: 3.375rem; /* 54px */\n --font-size-13: 3.75rem; /* 60px */\n --font-size-14: 4.25rem; /* 68px */\n --font-size-15: 4.75rem; /* 76px */\n --font-size-16: 5.25rem; /* 84px */\n --font-size-17: 5.75rem; /* 92px */\n\n /* cssprops to use with `font` shorthand property */\n --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n font-size: var(--font-size-1);\n font-style: italic;\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n font: var(--section-title-1);\n}\n\n.section-title-2 {\n font: var(--section-title-2);\n}\n\n.section-title-3 {\n font: var(--section-title-3);\n}\n\n.section-title-4 {\n font: var(--section-title-4);\n}\n\n.section-title-5 {\n font: var(--section-title-5);\n}\n\n.section-title-6 {\n font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n .heading-1,\n .heading-1-sb,\n .heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .heading-2,\n .heading-2-sb,\n .heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n .mobile-heading-1,\n .mobile-heading-1-sb,\n .mobile-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .mobile-heading-2,\n .mobile-heading-2-sb,\n .mobile-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-3,\n .mobile-heading-3-sb,\n .mobile-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .mobile-heading-4,\n .mobile-heading-4-sb,\n .mobile-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-1,\n .mobile-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .mobile-body-2,\n .mobile-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-3,\n .mobile-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-body-4,\n .mobile-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-body-5,\n .mobile-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-interactive-1,\n .mobile-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .mobile-interactive-2,\n .mobile-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .mobile-interactive-3,\n .mobile-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .mobile-section-title-1 {\n font: var(--section-title-1);\n }\n\n .mobile-section-title-2 {\n font: var(--section-title-2);\n }\n\n .mobile-section-title-3 {\n font: var(--section-title-3);\n }\n\n .mobile-section-title-4 {\n font: var(--section-title-4);\n }\n\n .mobile-section-title-5 {\n font: var(--section-title-5);\n }\n\n .mobile-section-title-6 {\n font: var(--section-title-6);\n }\n\n .mobile-heading-1-lt,\n .mobile-heading-2-lt,\n .mobile-heading-3-lt,\n .mobile-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .mobile-heading-1-sb,\n .mobile-heading-2-sb,\n .mobile-heading-3-sb,\n .mobile-heading-4-sb,\n .mobile-body-1-sb,\n .mobile-body-2-sb,\n .mobile-body-3-sb,\n .mobile-body-4-sb,\n .mobile-body-5-sb,\n .mobile-interactive-1-sb,\n .mobile-interactive-2-sb,\n .mobile-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n .tablet-heading-1,\n .tablet-heading-1-sb,\n .tablet-heading-1-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .tablet-heading-2,\n .tablet-heading-2-sb,\n .tablet-heading-2-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-3,\n .tablet-heading-3-sb,\n .tablet-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .tablet-heading-4,\n .tablet-heading-4-sb,\n .tablet-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-1,\n .tablet-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .tablet-body-2,\n .tablet-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-3,\n .tablet-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-body-4,\n .tablet-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-body-5,\n .tablet-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-interactive-1,\n .tablet-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .tablet-interactive-2,\n .tablet-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .tablet-interactive-3,\n .tablet-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .tablet-section-title-1 {\n font: var(--section-title-1);\n }\n\n .tablet-section-title-2 {\n font: var(--section-title-2);\n }\n\n .tablet-section-title-3 {\n font: var(--section-title-3);\n }\n\n .tablet-section-title-4 {\n font: var(--section-title-4);\n }\n\n .tablet-section-title-5 {\n font: var(--section-title-5);\n }\n\n .tablet-section-title-6 {\n font: var(--section-title-6);\n }\n\n .tablet-heading-1-lt,\n .tablet-heading-2-lt,\n .tablet-heading-3-lt,\n .tablet-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .tablet-heading-1-sb,\n .tablet-heading-2-sb,\n .tablet-heading-3-sb,\n .tablet-heading-4-sb,\n .tablet-body-1-sb,\n .tablet-body-2-sb,\n .tablet-body-3-sb,\n .tablet-body-4-sb,\n .tablet-body-5-sb,\n .tablet-interactive-1-sb,\n .tablet-interactive-2-sb,\n .tablet-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n .desktop-heading-1,\n .desktop-heading-1-sb,\n .desktop-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .desktop-heading-2,\n .desktop-heading-2-sb,\n .desktop-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .desktop-heading-3,\n .desktop-heading-3-sb,\n .desktop-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .desktop-heading-4,\n .desktop-heading-4-sb,\n .desktop-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-1,\n .desktop-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .desktop-body-2,\n .desktop-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-3,\n .desktop-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-body-4,\n .desktop-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-body-5,\n .desktop-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-interactive-1,\n .desktop-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .desktop-interactive-2,\n .desktop-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .desktop-interactive-3,\n .desktop-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .desktop-section-title-1 {\n font: var(--section-title-1);\n }\n\n .desktop-section-title-2 {\n font: var(--section-title-2);\n }\n\n .desktop-section-title-3 {\n font: var(--section-title-3);\n }\n\n .desktop-section-title-4 {\n font: var(--section-title-4);\n }\n\n .desktop-section-title-5 {\n font: var(--section-title-5);\n }\n\n .desktop-section-title-6 {\n font: var(--section-title-6);\n }\n\n .desktop-heading-1-lt,\n .desktop-heading-2-lt,\n .desktop-heading-3-lt,\n .desktop-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .desktop-heading-1-sb,\n .desktop-heading-2-sb,\n .desktop-heading-3-sb,\n .desktop-heading-4-sb,\n .desktop-body-1-sb,\n .desktop-body-2-sb,\n .desktop-body-3-sb,\n .desktop-body-4-sb,\n .desktop-body-5-sb,\n .desktop-interactive-1-sb,\n .desktop-interactive-2-sb,\n .desktop-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n@media (min-width: 1366px) {\n .wide-heading-1,\n .wide-heading-1-sb,\n .wide-heading-1-lt {\n font-size: var(--font-size-8);\n font-weight: var(--font-rg);\n line-height: 1.25;\n }\n\n .wide-heading-2,\n .wide-heading-2-sb,\n .wide-heading-2-lt {\n font-size: var(--font-size-7);\n font-weight: var(--font-rg);\n line-height: 1.28;\n }\n\n .wide-heading-3,\n .wide-heading-3-sb,\n .wide-heading-3-lt {\n font-size: var(--font-size-6);\n font-weight: var(--font-rg);\n line-height: 1.333;\n }\n\n .wide-heading-4,\n .wide-heading-4-sb,\n .wide-heading-4-lt {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-1,\n .wide-body-1-sb {\n font-size: var(--font-size-5);\n font-weight: var(--font-rg);\n line-height: 1.4;\n }\n\n .wide-body-2,\n .wide-body-2-sb {\n font-size: var(--font-size-4);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-3,\n .wide-body-3-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-body-4,\n .wide-body-4-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-body-5,\n .wide-body-5-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-interactive-1,\n .wide-interactive-1-sb {\n font-size: var(--font-size-3);\n font-weight: var(--font-rg);\n line-height: 1.5;\n }\n\n .wide-interactive-2,\n .wide-interactive-2-sb {\n font-size: var(--font-size-2);\n font-weight: var(--font-rg);\n letter-spacing: 0.16px;\n line-height: 1.4;\n }\n\n .wide-interactive-3,\n .wide-interactive-3-sb {\n font-size: var(--font-size-1);\n font-weight: var(--font-rg);\n letter-spacing: 0.32px;\n line-height: 1.333;\n }\n\n .wide-section-title-1 {\n font: var(--section-title-1);\n }\n\n .wide-section-title-2 {\n font: var(--section-title-2);\n }\n\n .wide-section-title-3 {\n font: var(--section-title-3);\n }\n\n .wide-section-title-4 {\n font: var(--section-title-4);\n }\n\n .wide-section-title-5 {\n font: var(--section-title-5);\n }\n\n .wide-section-title-6 {\n font: var(--section-title-6);\n }\n\n .wide-heading-1-lt,\n .wide-heading-2-lt,\n .wide-heading-3-lt,\n .wide-heading-4-lt {\n font-weight: var(--font-lt);\n }\n\n .wide-heading-1-sb,\n .wide-heading-2-sb,\n .wide-heading-3-sb,\n .wide-heading-4-sb,\n .wide-body-1-sb,\n .wide-body-2-sb,\n .wide-body-3-sb,\n .wide-body-4-sb,\n .wide-body-5-sb,\n .wide-interactive-1-sb,\n .wide-interactive-2-sb,\n .wide-interactive-3-sb {\n font-weight: var(--font-sb);\n }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n font-weight: var(--font-sb);\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {\n ButtonVariant,\n ControlSize,\n KeyboardCode,\n SearchbarGroup,\n SearchbarGroupedItem,\n SearchbarItem,\n} from \"../../beans\";\nimport {handleEnterKeydSubmit, randomId} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-searchbar\",\n styleUrls: [\n \"styles.css\",\n \"../css-components/z-label/styles.css\",\n \"../css-components/z-scrollbar/styles.css\",\n \"../../tokens/typography.css\",\n ],\n shadow: true,\n})\nexport class ZSearchbar implements ComponentInterface {\n @Element() host: HTMLZSearchbarElement;\n\n /** The id of the searchbar element */\n @Prop({reflect: true})\n htmlid = `searchbar-${randomId()}`;\n\n /** Prevent submit action */\n @Prop()\n preventSubmit?: boolean = false;\n\n /** The input label */\n @Prop()\n label?: string;\n\n /** The input aria-label */\n @Prop()\n htmlAriaLabel?: string;\n\n /** Input search string */\n @Prop()\n value?: string;\n\n /** Search input placeholder */\n @Prop()\n placeholder?: string;\n\n /** Show autocomplete results */\n @Prop()\n autocomplete?: boolean = false;\n\n /** Minimun number of characters to dispatch typing event */\n @Prop()\n autocompleteMinChars?: number = 3;\n\n /** Number of results shown. Default: all */\n @Prop()\n resultsCount?: number;\n\n /** Search helper text */\n @Prop()\n searchHelperLabel?: string = \"Cerca {searchString}\";\n\n /** Autocomplete results items */\n @Prop()\n resultsItems?: SearchbarItem[] | string;\n\n /** Sort autocomplete results items */\n @Prop()\n sortResultsItems?: boolean = false;\n\n /** Show submit button */\n @Prop()\n showSearchButton?: boolean = false;\n\n /** Hide the label of the submit button, showing only the icon */\n @Prop()\n searchButtonIconOnly?: boolean = false;\n\n /** The label of the submit button */\n @Prop()\n searchButtonLabel?: string = \"CERCA\";\n\n /** Size of the `z-input` and submit `z-button` */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n /** Submit `z-button` variant */\n @Prop()\n variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n @State()\n searchString = this.value;\n\n @State()\n currResultsCount: number | undefined = this.resultsCount;\n\n @State()\n showResults = false;\n\n @State()\n isMobile = false;\n\n @State()\n selectedItem?: SearchbarItem;\n\n private resultsItemsList: SearchbarItem[] | undefined = null;\n\n private inputRef: HTMLZInputElement;\n\n /** Media query list for detecting mobile view. */\n private mql?: MediaQueryList;\n\n /** Listener for changes in the mobile view media query. */\n private onMobileViewChange?: (e: MediaQueryListEvent) => void;\n\n /** Emitted on search submit, return search string */\n @Event()\n searchSubmit: EventEmitter<string>;\n\n /** Emitted on search typing, return search string */\n @Event()\n searchTyping: EventEmitter<string>;\n\n /** Emitted on search result click, return item */\n @Event()\n searchItemClick: EventEmitter<SearchbarItem>;\n\n private emitSearchItemClick(item: SearchbarItem): void {\n this.searchItemClick.emit(item);\n this.selectedItem = item;\n this.searchString = \"\";\n }\n\n private emitSearchSubmit(): void {\n this.searchSubmit.emit(this.inputRef.value);\n }\n\n @Watch(\"resultsItems\")\n watchItems(): void {\n this.resultsItemsList = this.getResultsItemsList();\n }\n\n @Watch(\"resultsCount\")\n watchResultsCount(): void {\n this.currResultsCount = this.resultsCount;\n }\n\n @Watch(\"value\")\n watchValue(): void {\n this.searchString = this.value;\n }\n\n @Watch(\"searchString\")\n watchSearchString(): void {\n this.searchTyping.emit(this.searchString);\n if (!this.searchString) {\n this.currResultsCount = this.resultsCount;\n }\n }\n\n private getResultsItemsList(): SearchbarItem[] | undefined {\n return typeof this.resultsItems === \"string\" ? JSON.parse(this.resultsItems) : this.resultsItems;\n }\n\n private getGroupedItems(): SearchbarGroupedItem {\n const groupedItems = {};\n this.resultsItemsList.forEach((item: SearchbarItem) => {\n const key = `${item?.category}${item?.subcategory}`;\n groupedItems[key] = groupedItems[key] ?? {\n category: item?.category,\n subcategory: item?.subcategory,\n items: [],\n };\n groupedItems[key][\"items\"].push(item);\n });\n\n if (this.sortResultsItems) {\n return Object.keys(groupedItems)\n .sort()\n .reduce((obj, key) => {\n obj[key] = {\n ...groupedItems[key],\n items: groupedItems[key][\"items\"].sort((a: SearchbarItem, b: SearchbarItem) => {\n const nameA = a.label.toUpperCase();\n const nameB = b.label.toUpperCase();\n if (nameA < nameB) {\n return -1;\n }\n if (nameA > nameB) {\n return 1;\n }\n\n return 0;\n }),\n };\n\n return obj;\n }, {});\n }\n\n return groupedItems;\n }\n\n private onListItemKeyDown(e: KeyboardEvent, item: SearchbarItem): void {\n if (e.key === KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitSearchItemClick(item);\n\n return;\n }\n\n this.handleArrowsNavigation(e);\n }\n\n private onSearchHelperKeyDown(e: KeyboardEvent): void {\n if (e.key === KeyboardCode.ENTER) {\n e.preventDefault();\n this.emitSearchSubmit();\n\n return;\n }\n\n this.handleArrowsNavigation(e);\n }\n\n private handleArrowsNavigation(e: KeyboardEvent): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode)) {\n return;\n }\n\n const currentElement = e.target as HTMLElement;\n const items = Array.from(this.host.shadowRoot?.querySelectorAll(\"z-list .list-item\") ?? []);\n const currentIndex = items.indexOf(currentElement);\n\n if (e.key === KeyboardCode.ARROW_DOWN) {\n e.preventDefault();\n const nextIndex = currentIndex + 1;\n if (nextIndex < items.length) {\n (items[nextIndex] as HTMLElement).focus();\n }\n }\n\n if (e.key === KeyboardCode.ARROW_UP) {\n e.preventDefault();\n const prevIndex = currentIndex - 1;\n if (prevIndex < 0) {\n this.host.shadowRoot?.querySelector(\"input\")?.focus();\n this.host.shadowRoot\n ?.querySelector(\"input\")\n ?.setSelectionRange(this.inputRef.value.length, this.inputRef.value.length);\n }\n if (prevIndex >= 0) {\n (items[prevIndex] as HTMLElement).focus();\n }\n }\n }\n\n private handleStopTyping(e: CustomEvent): void {\n e.stopPropagation();\n this.searchString = e.detail.value;\n this.selectedItem = undefined;\n }\n\n private handleSubmit(): void {\n if (this.preventSubmit) {\n return;\n }\n\n this.emitSearchSubmit();\n }\n\n @Listen(\"click\", {target: \"document\"})\n private handleOutsideClick(e: MouseEvent): void {\n const cp = e.composedPath();\n if (cp.includes(this.host)) {\n return;\n }\n\n this.showResults = false;\n }\n\n componentWillLoad(): void {\n this.resultsItemsList = this.getResultsItemsList();\n\n this.mql = matchMedia(\"(max-width: 767px)\");\n this.onMobileViewChange = (e: MediaQueryListEvent) => (this.isMobile = e.matches);\n this.mql.addEventListener(\"change\", this.onMobileViewChange);\n this.isMobile = this.mql.matches;\n }\n\n disconnectedCallback(): void {\n this.mql?.removeEventListener(\"change\", this.onMobileViewChange);\n }\n\n private renderItemLabel(label: string): string {\n if (!this.searchString) {\n return label;\n }\n\n return label.replace(\n new RegExp(this.searchString.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\"), \"gmi\"),\n (found) => `<mark>${found}</mark>`\n );\n }\n\n private renderItem(item: SearchbarItem, index: number): HTMLZListElementElement {\n return (\n <z-list-element\n id={`list-item-${this.htmlid}-${index}`}\n role=\"presentation\"\n htmlTabindex={-1}\n onKeyDown={(e: KeyboardEvent) => this.onListItemKeyDown(e, item)}\n onClick={(e: MouseEvent) => {\n e.stopPropagation();\n this.emitSearchItemClick(item);\n }}\n >\n <div\n class=\"list-item ellipsis\"\n role=\"option\"\n tabindex={0}\n >\n {!!item?.icon && (\n <z-icon\n class=\"item-icon\"\n name={item.icon}\n />\n )}\n\n <div\n class=\"item-label body-3 mobile-body-4\"\n title={item.label}\n innerHTML={this.renderItemLabel(item.label)}\n />\n {!!item?.tag && <z-tag icon={item.tag.icon}>{!this.isMobile ? item.tag.text : \"\"}</z-tag>}\n </div>\n {!!item.children?.length && (\n <z-list\n class=\"sub-list\"\n role=\"group\"\n aria-label={item.label || undefined}\n >\n {item.children.map((child, index) => this.renderItem(child, index))}\n </z-list>\n )}\n </z-list-element>\n );\n }\n\n /**\n * Renders the item grouped by category and subcategory. If `resultsCount` is set, it limits the number of rendered items.\n */\n private renderItemGroups(): HTMLZListGroupElement[] | undefined {\n if (!this.resultsItemsList?.length) {\n return;\n }\n\n const groupedItems = Object.values(this.getGroupedItems()) as SearchbarGroup[];\n const listGroups: HTMLZListGroupElement[] = [];\n const hasResultsLimit = !!this.currResultsCount;\n let renderedCount = 0;\n\n for (const groupItem of groupedItems) {\n const remaining = hasResultsLimit ? this.currResultsCount - renderedCount : groupItem.items.length;\n if (remaining <= 0) {\n break;\n }\n\n const visibleItems = groupItem.items.slice(0, remaining);\n const listGroupsElements: HTMLZListElement[] = visibleItems.map((item: SearchbarItem, subindex: number) =>\n this.renderItem(item, subindex)\n );\n renderedCount += listGroupsElements.length;\n\n if (!listGroupsElements.length) {\n continue;\n }\n\n const ariaLabel = [groupItem.category, groupItem.subcategory].filter(Boolean).join(\" \");\n\n listGroups.push(\n <z-list-group aria-label={ariaLabel || undefined}>\n {groupItem.category && (\n <z-list-element\n class=\"category-heading body-3 mobile-body-4\"\n slot=\"header-title\"\n role=\"presentation\"\n htmlTabindex={-1}\n >\n <div class=\"category\">{groupItem.category}</div>\n {groupItem.subcategory && <div class=\"subcategory\">{groupItem.subcategory}</div>}\n </z-list-element>\n )}\n\n {listGroupsElements}\n </z-list-group>\n );\n }\n\n return listGroups;\n }\n\n render(): HTMLZSearchbarElement {\n return (\n <Host\n onFocus={() => (this.showResults = true)}\n onClick={(e: MouseEvent) => this.handleOutsideClick(e)}\n class={{\"has-submit\": !!this.showSearchButton, \"has-results\": !!this.autocomplete}}\n >\n <div class=\"input-container\">\n <z-input\n ref={(el) => (this.inputRef = el)}\n htmlid={`input-${this.htmlid}`}\n message={false}\n placeholder={this.placeholder}\n onStopTyping={(e: CustomEvent) => this.handleStopTyping(e)}\n onKeyUp={(e: KeyboardEvent) => {\n handleEnterKeydSubmit(e, () => this.handleSubmit());\n this.handleArrowsNavigation(e);\n }}\n onFocus={() => (this.showResults = true)}\n value={this.searchString || this.selectedItem?.label}\n size={this.size}\n label={this.label}\n aria-label={this.htmlAriaLabel || this.placeholder || undefined}\n />\n\n {!!(\n this.showResults &&\n this.autocomplete &&\n this.searchString &&\n this.searchString.length >= this.autocompleteMinChars &&\n this.resultsItemsList\n ) && (\n <div class=\"results z-scrollbar\">\n {this.preventSubmit && !this.resultsItemsList?.length ? (\n <div class=\"item-no-results body-3 mobile-body-4\">\n Non abbiamo trovato risultati per <b>{this.searchString}</b>\n <br />\n <br />\n Cosa puoi fare?\n <ul>\n <li>Verificare di aver scritto bene</li>\n <li>Provare a cercare un'altra parola</li>\n <li>Provare a cercare qualcosa di più generico</li>\n </ul>\n </div>\n ) : (\n <z-list\n role=\"listbox\"\n id={`list-${this.htmlid}`}\n aria-label={this.htmlAriaLabel || this.label || undefined}\n >\n {this.autocomplete && !this.preventSubmit && !!this.searchString && (\n <z-list-element\n role=\"presentation\"\n htmlTabindex={-1}\n id={`list-item-${this.htmlid}-search`}\n onKeyDown={(e: KeyboardEvent) => this.onSearchHelperKeyDown(e)}\n onClick={() => this.emitSearchSubmit()}\n >\n <div\n class=\"list-item item-search\"\n role=\"option\"\n tabindex={0}\n >\n <z-icon\n class=\"search-icon\"\n name=\"left-magnifying-glass\"\n />\n <div\n class=\"item-label body-3 mobile-body-4\"\n innerHTML={this.searchHelperLabel?.replace(\n \"{searchString}\",\n `<mark>${this.searchString}</mark>`\n )}\n />\n </div>\n </z-list-element>\n )}\n\n {this.renderItemGroups()}\n\n {!!(\n this.searchString &&\n this.resultsItemsList?.length &&\n this.currResultsCount &&\n this.currResultsCount < this.resultsItemsList?.length\n ) && (\n <z-list-element\n role=\"presentation\"\n htmlTabindex={-1}\n id={`list-item-${this.htmlid}-show-all`}\n >\n <div\n role=\"option\"\n class=\"item-show-all body-3 mobile-body-4\"\n tabindex={0}\n onClick={() => (this.currResultsCount = undefined)}\n >\n Vedi tutti i risultati\n </div>\n </z-list-element>\n )}\n </z-list>\n )}\n </div>\n )}\n </div>\n\n {this.showSearchButton && (\n <z-button\n icon={this.searchButtonIconOnly ? \"search\" : undefined}\n aria-label={this.searchButtonIconOnly ? this.searchButtonLabel.trim() || \"CERCA\" : undefined}\n disabled={!!this.preventSubmit}\n variant={this.variant}\n size={this.size}\n onClick={() => this.handleSubmit()}\n >\n {this.searchButtonIconOnly ? \"\" : this.searchButtonLabel.trim() || \"CERCA\"}\n </z-button>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/components/index13.js CHANGED
@@ -1,2 +1,2 @@
1
- import{proxyCustomElement as t,HTMLElement as e,h as a,Host as i,transformTag as s}from"@stencil/core/internal/client";import{d as n}from"./index3.js";const r=()=>`.sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;align-items:flex-start;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg, var(--color-hover-primary));border-radius:var(--border-radius);color:var(--z-tag-text-color, var(--color-text-inverse));fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:14px;text-transform:uppercase}.sc-z-tag-h>z-icon.sc-z-tag{margin-right:0;transition:margin-right 0.3s ease-out}.has-text.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag{margin-right:var(--space-unit)}.has-text.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag{margin-right:var(--space-unit)}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}}render(){return a(i,{key:"0f2c63d3955fdb97015df9854ccac4030bc18f1e",class:{expandable:this.expandable&&!!this.icon,"has-text":!!this.host.textContent.trim()}},this.icon&&a("z-icon",{key:"46d5bfd904a8f2421d06b94f2e7c8e6ce81692d5",name:this.icon}),a("div",{key:"9c4fdeb859730e336eb18db8128c1fc7dc527410"},a("slot",{key:"aa6adbac4bcec80f1e3fb94d7276dee1386d9483"})))}get host(){return this}static get style(){return r()}},[262,"z-tag",{icon:[1],expandable:[4]}]);function o(){if(typeof customElements==="undefined"){return}const t=["z-tag","z-icon"];t.forEach((t=>{switch(t){case"z-tag":if(!customElements.get(s(t))){customElements.define(s(t),c)}break;case"z-icon":if(!customElements.get(s(t))){n()}break}}))}export{c as Z,o as d};
1
+ import{proxyCustomElement as t,HTMLElement as e,h as a,Host as i,transformTag as s}from"@stencil/core/internal/client";import{d as n}from"./index3.js";const r=()=>`.sc-z-tag-h{--z-icon-width:14px;--z-icon-height:14px;display:flex;width:fit-content;max-width:inherit;height:fit-content;max-height:inherit;align-items:flex-start;padding:calc(var(--space-unit) / 2);background-color:var(--z-tag-bg, var(--color-hover-primary));border-radius:var(--border-radius);color:var(--z-tag-text-color, var(--color-text-inverse));fill:currentcolor;font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);letter-spacing:0.32px;line-height:14px;text-transform:uppercase}.sc-z-tag-h>z-icon.sc-z-tag{margin-right:0;transition:margin-right 0.3s ease-out}.has-text.sc-z-tag-h:not(.expandable)>z-icon.sc-z-tag{margin-right:var(--space-unit)}.has-text.expandable.sc-z-tag-h:hover>z-icon.sc-z-tag{margin-right:var(--space-unit)}.expandable.sc-z-tag-h>div.sc-z-tag{overflow:hidden;max-width:0;max-height:0}.expandable.sc-z-tag-h:hover>div.sc-z-tag{max-width:100%;max-height:100%}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}}render(){return a(i,{key:"656a936ce4073db7a7895cac9f07e1ba6b9b5c2f",class:{expandable:this.expandable&&!!this.icon,"has-text":!!this.host.textContent.trim()}},this.icon&&a("z-icon",{key:"df213cce44c020028985d53064c3d0cd1ba645e9",name:this.icon}),a("div",{key:"2fa92332ae99d54527d7ab347e66f4424d241cf3"},a("slot",{key:"c52c05d031edbe81a9547c72479dae5c8d924a60"})))}get host(){return this}static get style(){return r()}},[262,"z-tag",{icon:[1],expandable:[4]}]);function o(){if(typeof customElements==="undefined"){return}const t=["z-tag","z-icon"];t.forEach((t=>{switch(t){case"z-tag":if(!customElements.get(s(t))){customElements.define(s(t),c)}break;case"z-icon":if(!customElements.get(s(t))){n()}break}}))}export{c as Z,o as d};
2
2
  //# sourceMappingURL=index13.js.map