@zanichelli/albe-web-components 20.0.2-RC → 21.0.0-RC1

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 (354) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/z-app-header_12.cjs.entry.js +7 -1
  3. package/dist/cjs/z-app-header_12.cjs.entry.js.map +1 -1
  4. package/dist/collection/components/z-input/index.js +7 -1
  5. package/dist/collection/components/z-input/index.js.map +1 -1
  6. package/dist/components/index.js +1 -1
  7. package/dist/components/index.js.map +1 -1
  8. package/dist/components/{utils.js → p-8C_CrFxp.js} +3 -3
  9. package/dist/components/p-B3VFztJH.js +6 -0
  10. package/dist/components/p-B5U9pSXR.js +2 -0
  11. package/dist/components/{index14.js.map → p-B5U9pSXR.js.map} +1 -1
  12. package/dist/components/p-B6jtvVtV.js +2 -0
  13. package/dist/components/{utils2.js.map → p-B6jtvVtV.js.map} +1 -1
  14. package/dist/components/{_commonjsHelpers.js → p-B85MJLTf.js} +1 -1
  15. package/dist/components/p-BAguKZnb.js +2 -0
  16. package/dist/components/{index4.js.map → p-BAguKZnb.js.map} +1 -1
  17. package/dist/components/p-BbZelagf.js +2 -0
  18. package/dist/components/{index20.js.map → p-BbZelagf.js.map} +1 -1
  19. package/dist/components/p-BeSVHdId.js +2 -0
  20. package/dist/components/{index9.js.map → p-BeSVHdId.js.map} +1 -1
  21. package/dist/components/p-Bj8MyegH.js +2 -0
  22. package/dist/components/{index18.js.map → p-Bj8MyegH.js.map} +1 -1
  23. package/dist/components/p-BoiZb7m1.js +2 -0
  24. package/dist/components/{index13.js.map → p-BoiZb7m1.js.map} +1 -1
  25. package/dist/components/p-BolVsvfr.js +2 -0
  26. package/dist/components/{index5.js.map → p-BolVsvfr.js.map} +1 -1
  27. package/dist/components/p-CGSP8diU.js +2 -0
  28. package/dist/components/{index15.js.map → p-CGSP8diU.js.map} +1 -1
  29. package/dist/components/p-CJjo0ntH.js +2 -0
  30. package/dist/components/{index12.js.map → p-CJjo0ntH.js.map} +1 -1
  31. package/dist/components/p-CaSvyuw6.js +2 -0
  32. package/dist/components/{index17.js.map → p-CaSvyuw6.js.map} +1 -1
  33. package/dist/components/p-CbXEdwLi.js +2 -0
  34. package/dist/components/{index3.js.map → p-CbXEdwLi.js.map} +1 -1
  35. package/dist/components/p-CdBqnUF6.js +2 -0
  36. package/dist/components/{index7.js.map → p-CdBqnUF6.js.map} +1 -1
  37. package/dist/components/p-Ch6o4_VN.js +2 -0
  38. package/dist/components/{index21.js.map → p-Ch6o4_VN.js.map} +1 -1
  39. package/dist/components/{iconset.js → p-D1c5gR45.js} +1 -1
  40. package/dist/components/p-D8wde41u.js +2 -0
  41. package/dist/components/{index16.js.map → p-D8wde41u.js.map} +1 -1
  42. package/dist/components/p-DL2QAfIP.js +2 -0
  43. package/dist/components/{index11.js.map → p-DL2QAfIP.js.map} +1 -1
  44. package/dist/components/{index2.js → p-DdetsoIY.js} +1 -1
  45. package/dist/components/p-LXvmZzZa.js +2 -0
  46. package/dist/components/p-LXvmZzZa.js.map +1 -0
  47. package/dist/components/{breakpoints.js → p-Q-tWjk7P.js} +1 -1
  48. package/dist/components/p-RmbDDbWd.js +2 -0
  49. package/dist/components/p-RmbDDbWd.js.map +1 -0
  50. package/dist/components/p-VP75-vje.js +2 -0
  51. package/dist/components/{index19.js.map → p-VP75-vje.js.map} +1 -1
  52. package/dist/components/p-cpTAMdcF.js +2 -0
  53. package/dist/components/{index8.js.map → p-cpTAMdcF.js.map} +1 -1
  54. package/dist/components/p-mphirYN3.js +2 -0
  55. package/dist/components/{index10.js.map → p-mphirYN3.js.map} +1 -1
  56. package/dist/components/z-accordion.js +1 -1
  57. package/dist/components/z-accordion.js.map +1 -1
  58. package/dist/components/z-anchor-navigation.js +1 -1
  59. package/dist/components/z-anchor-navigation.js.map +1 -1
  60. package/dist/components/z-app-header.js +1 -1
  61. package/dist/components/z-app-header.js.map +1 -1
  62. package/dist/components/z-aria-alert.js +1 -1
  63. package/dist/components/z-aria-alert.js.map +1 -1
  64. package/dist/components/z-avatar.js +1 -1
  65. package/dist/components/z-avatar.js.map +1 -1
  66. package/dist/components/z-book-card-app.js +1 -1
  67. package/dist/components/z-book-card-app.js.map +1 -1
  68. package/dist/components/z-book-card.js +1 -1
  69. package/dist/components/z-book-card.js.map +1 -1
  70. package/dist/components/z-book-cover.js +1 -1
  71. package/dist/components/z-breadcrumb.js +1 -1
  72. package/dist/components/z-breadcrumb.js.map +1 -1
  73. package/dist/components/z-button-sort.js +1 -1
  74. package/dist/components/z-button-sort.js.map +1 -1
  75. package/dist/components/z-button.js +1 -1
  76. package/dist/components/z-card.js +1 -1
  77. package/dist/components/z-card.js.map +1 -1
  78. package/dist/components/z-carousel.js +1 -1
  79. package/dist/components/z-carousel.js.map +1 -1
  80. package/dist/components/z-chip.js +1 -1
  81. package/dist/components/z-color-picker.js +1 -1
  82. package/dist/components/z-color-picker.js.map +1 -1
  83. package/dist/components/z-combobox.js +1 -1
  84. package/dist/components/z-combobox.js.map +1 -1
  85. package/dist/components/z-cover-hero.js +1 -1
  86. package/dist/components/z-cover-hero.js.map +1 -1
  87. package/dist/components/z-date-picker.js +2 -2
  88. package/dist/components/z-date-picker.js.map +1 -1
  89. package/dist/components/z-divider.js +1 -1
  90. package/dist/components/z-dragdrop-area.js +1 -1
  91. package/dist/components/z-file-upload.js +1 -1
  92. package/dist/components/z-file-upload.js.map +1 -1
  93. package/dist/components/z-file.js +1 -1
  94. package/dist/components/z-file.js.map +1 -1
  95. package/dist/components/z-ghost-loading.js +1 -1
  96. package/dist/components/z-icon.js +1 -1
  97. package/dist/components/z-info-box.js +1 -1
  98. package/dist/components/z-info-box.js.map +1 -1
  99. package/dist/components/z-info-reveal.js +1 -1
  100. package/dist/components/z-input-message.js +1 -1
  101. package/dist/components/z-input-range.js +1 -1
  102. package/dist/components/z-input-range.js.map +1 -1
  103. package/dist/components/z-input.js +1 -1
  104. package/dist/components/z-list-element.js +1 -1
  105. package/dist/components/z-list-group.js +1 -1
  106. package/dist/components/z-list.js +1 -1
  107. package/dist/components/z-logo.js +1 -1
  108. package/dist/components/z-logo.js.map +1 -1
  109. package/dist/components/z-menu-section.js +1 -1
  110. package/dist/components/z-menu-section.js.map +1 -1
  111. package/dist/components/z-menu.js +1 -1
  112. package/dist/components/z-menu.js.map +1 -1
  113. package/dist/components/z-modal.js +1 -1
  114. package/dist/components/z-navigation-tabs.js +1 -1
  115. package/dist/components/z-navigation-tabs.js.map +1 -1
  116. package/dist/components/z-notification.js +1 -1
  117. package/dist/components/z-notification.js.map +1 -1
  118. package/dist/components/z-offcanvas.js +1 -1
  119. package/dist/components/z-pagination.js +1 -1
  120. package/dist/components/z-pagination.js.map +1 -1
  121. package/dist/components/z-popover.js +1 -1
  122. package/dist/components/z-range-picker.js +1 -1
  123. package/dist/components/z-range-picker.js.map +1 -1
  124. package/dist/components/z-result-card.js +1 -1
  125. package/dist/components/z-result-card.js.map +1 -1
  126. package/dist/components/z-searchbar.js +1 -1
  127. package/dist/components/z-select.js +1 -1
  128. package/dist/components/z-select.js.map +1 -1
  129. package/dist/components/z-skip-to-content.js +1 -1
  130. package/dist/components/z-skip-to-content.js.map +1 -1
  131. package/dist/components/z-stepper-item.js +1 -1
  132. package/dist/components/z-stepper-item.js.map +1 -1
  133. package/dist/components/z-stepper.js +1 -1
  134. package/dist/components/z-stepper.js.map +1 -1
  135. package/dist/components/z-table.js +1 -1
  136. package/dist/components/z-table.js.map +1 -1
  137. package/dist/components/z-tag.js +1 -1
  138. package/dist/components/z-tbody.js +1 -1
  139. package/dist/components/z-tbody.js.map +1 -1
  140. package/dist/components/z-td.js +1 -1
  141. package/dist/components/z-td.js.map +1 -1
  142. package/dist/components/z-tfoot.js +1 -1
  143. package/dist/components/z-tfoot.js.map +1 -1
  144. package/dist/components/z-th.js +1 -1
  145. package/dist/components/z-th.js.map +1 -1
  146. package/dist/components/z-thead.js +1 -1
  147. package/dist/components/z-thead.js.map +1 -1
  148. package/dist/components/z-toast-notification-list.js +1 -1
  149. package/dist/components/z-toast-notification-list.js.map +1 -1
  150. package/dist/components/z-toast-notification.js +3 -3
  151. package/dist/components/z-toggle-switch.js +1 -1
  152. package/dist/components/z-toggle-switch.js.map +1 -1
  153. package/dist/components/z-tool.js +1 -1
  154. package/dist/components/z-tool.js.map +1 -1
  155. package/dist/components/z-toolbar.js +1 -1
  156. package/dist/components/z-toolbar.js.map +1 -1
  157. package/dist/components/z-tooltip.js +1 -1
  158. package/dist/components/z-tr.js +1 -1
  159. package/dist/components/z-tr.js.map +1 -1
  160. package/dist/components/z-tree-list.js +1 -1
  161. package/dist/components/z-tree-list.js.map +1 -1
  162. package/dist/components/z-visually-hidden.js +1 -1
  163. package/dist/components/z-visually-hidden.js.map +1 -1
  164. package/dist/esm/z-app-header_12.entry.js +7 -1
  165. package/dist/esm/z-app-header_12.entry.js.map +1 -1
  166. package/dist/types/components/z-input/index.d.ts +1 -0
  167. package/dist/web-components-library/p-e2eea612.entry.js +2 -0
  168. package/dist/web-components-library/p-e2eea612.entry.js.map +1 -0
  169. package/dist/web-components-library/web-components-library.esm.js +1 -1
  170. package/package.json +8 -4
  171. package/react/components.d.ts +68 -66
  172. package/react/components.js +134 -69
  173. package/react/z-accordion.d.ts +12 -0
  174. package/react/z-accordion.js +18 -0
  175. package/react/z-anchor-navigation.d.ts +9 -0
  176. package/react/z-anchor-navigation.js +18 -0
  177. package/react/z-app-header.d.ts +12 -0
  178. package/react/z-app-header.js +18 -0
  179. package/react/z-aria-alert.d.ts +9 -0
  180. package/react/z-aria-alert.js +18 -0
  181. package/react/z-avatar.d.ts +9 -0
  182. package/react/z-avatar.js +18 -0
  183. package/react/z-book-card-app.d.ts +12 -0
  184. package/react/z-book-card-app.js +18 -0
  185. package/react/z-book-card.d.ts +14 -0
  186. package/react/z-book-card.js +22 -0
  187. package/react/z-book-cover.d.ts +9 -0
  188. package/react/z-book-cover.js +18 -0
  189. package/react/z-breadcrumb.d.ts +12 -0
  190. package/react/z-breadcrumb.js +18 -0
  191. package/react/z-button-sort.d.ts +12 -0
  192. package/react/z-button-sort.js +18 -0
  193. package/react/z-button.d.ts +9 -0
  194. package/react/z-button.js +18 -0
  195. package/react/z-card.d.ts +9 -0
  196. package/react/z-card.js +18 -0
  197. package/react/z-carousel.d.ts +14 -0
  198. package/react/z-carousel.js +18 -0
  199. package/react/z-chip.d.ts +12 -0
  200. package/react/z-chip.js +18 -0
  201. package/react/z-color-picker.d.ts +12 -0
  202. package/react/z-color-picker.js +18 -0
  203. package/react/z-combobox.d.ts +12 -0
  204. package/react/z-combobox.js +18 -0
  205. package/react/z-cover-hero.d.ts +9 -0
  206. package/react/z-cover-hero.js +18 -0
  207. package/react/z-date-picker.d.ts +12 -0
  208. package/react/z-date-picker.js +18 -0
  209. package/react/z-divider.d.ts +9 -0
  210. package/react/z-divider.js +18 -0
  211. package/react/z-dragdrop-area.d.ts +12 -0
  212. package/react/z-dragdrop-area.js +18 -0
  213. package/react/z-file-upload.d.ts +16 -0
  214. package/react/z-file-upload.js +21 -0
  215. package/react/z-file.d.ts +12 -0
  216. package/react/z-file.js +18 -0
  217. package/react/z-ghost-loading.d.ts +9 -0
  218. package/react/z-ghost-loading.js +18 -0
  219. package/react/z-icon.d.ts +9 -0
  220. package/react/z-icon.js +18 -0
  221. package/react/z-info-box.d.ts +14 -0
  222. package/react/z-info-box.js +18 -0
  223. package/react/z-info-reveal.d.ts +9 -0
  224. package/react/z-info-reveal.js +18 -0
  225. package/react/z-input-message.d.ts +9 -0
  226. package/react/z-input-message.js +18 -0
  227. package/react/z-input-range.d.ts +13 -0
  228. package/react/z-input-range.js +21 -0
  229. package/react/z-input.d.ts +17 -0
  230. package/react/z-input.js +25 -0
  231. package/react/z-list-element.d.ts +14 -0
  232. package/react/z-list-element.js +22 -0
  233. package/react/z-list-group.d.ts +9 -0
  234. package/react/z-list-group.js +18 -0
  235. package/react/z-list.d.ts +9 -0
  236. package/react/z-list.js +18 -0
  237. package/react/z-logo.d.ts +9 -0
  238. package/react/z-logo.js +18 -0
  239. package/react/z-menu-section.d.ts +13 -0
  240. package/react/z-menu-section.js +21 -0
  241. package/react/z-menu.d.ts +13 -0
  242. package/react/z-menu.js +21 -0
  243. package/react/z-modal.d.ts +14 -0
  244. package/react/z-modal.js +22 -0
  245. package/react/z-navigation-tabs.d.ts +12 -0
  246. package/react/z-navigation-tabs.js +18 -0
  247. package/react/z-notification.d.ts +13 -0
  248. package/react/z-notification.js +21 -0
  249. package/react/z-offcanvas.d.ts +12 -0
  250. package/react/z-offcanvas.js +18 -0
  251. package/react/z-pagination.d.ts +12 -0
  252. package/react/z-pagination.js +18 -0
  253. package/react/z-popover.d.ts +17 -0
  254. package/react/z-popover.js +21 -0
  255. package/react/z-range-picker.d.ts +12 -0
  256. package/react/z-range-picker.js +18 -0
  257. package/react/z-result-card.d.ts +9 -0
  258. package/react/z-result-card.js +18 -0
  259. package/react/z-searchbar.d.ts +14 -0
  260. package/react/z-searchbar.js +22 -0
  261. package/react/z-select.d.ts +13 -0
  262. package/react/z-select.js +21 -0
  263. package/react/z-skip-to-content.d.ts +9 -0
  264. package/react/z-skip-to-content.js +18 -0
  265. package/react/z-stepper-item.d.ts +9 -0
  266. package/react/z-stepper-item.js +18 -0
  267. package/react/z-stepper.d.ts +9 -0
  268. package/react/z-stepper.js +18 -0
  269. package/react/z-table.d.ts +9 -0
  270. package/react/z-table.js +18 -0
  271. package/react/z-tag.d.ts +9 -0
  272. package/react/z-tag.js +18 -0
  273. package/react/z-tbody.d.ts +9 -0
  274. package/react/z-tbody.js +18 -0
  275. package/react/z-td.d.ts +12 -0
  276. package/react/z-td.js +18 -0
  277. package/react/z-tfoot.d.ts +9 -0
  278. package/react/z-tfoot.js +18 -0
  279. package/react/z-th.d.ts +12 -0
  280. package/react/z-th.js +18 -0
  281. package/react/z-thead.d.ts +9 -0
  282. package/react/z-thead.js +18 -0
  283. package/react/z-toast-notification-list.d.ts +9 -0
  284. package/react/z-toast-notification-list.js +18 -0
  285. package/react/z-toast-notification.d.ts +12 -0
  286. package/react/z-toast-notification.js +18 -0
  287. package/react/z-toggle-switch.d.ts +12 -0
  288. package/react/z-toggle-switch.js +18 -0
  289. package/react/z-tool.d.ts +13 -0
  290. package/react/z-tool.js +21 -0
  291. package/react/z-toolbar.d.ts +9 -0
  292. package/react/z-toolbar.js +18 -0
  293. package/react/z-tooltip.d.ts +14 -0
  294. package/react/z-tooltip.js +18 -0
  295. package/react/z-tr.d.ts +12 -0
  296. package/react/z-tr.js +18 -0
  297. package/react/z-tree-list.d.ts +16 -0
  298. package/react/z-tree-list.js +18 -0
  299. package/react/z-visually-hidden.d.ts +9 -0
  300. package/react/z-visually-hidden.js +18 -0
  301. package/readme.md +7 -4
  302. package/www/build/{p-9a93e186.js → p-de6e8c2b.js} +1 -1
  303. package/www/build/p-e2eea612.entry.js +2 -0
  304. package/www/build/p-e2eea612.entry.js.map +1 -0
  305. package/www/build/web-components-library.esm.js +1 -1
  306. package/www/index.html +1 -1
  307. package/dist/components/index10.js +0 -2
  308. package/dist/components/index11.js +0 -2
  309. package/dist/components/index12.js +0 -2
  310. package/dist/components/index13.js +0 -2
  311. package/dist/components/index14.js +0 -2
  312. package/dist/components/index15.js +0 -2
  313. package/dist/components/index16.js +0 -2
  314. package/dist/components/index17.js +0 -2
  315. package/dist/components/index18.js +0 -2
  316. package/dist/components/index19.js +0 -2
  317. package/dist/components/index20.js +0 -2
  318. package/dist/components/index21.js +0 -2
  319. package/dist/components/index3.js +0 -2
  320. package/dist/components/index4.js +0 -2
  321. package/dist/components/index5.js +0 -2
  322. package/dist/components/index6.js +0 -2
  323. package/dist/components/index6.js.map +0 -1
  324. package/dist/components/index7.js +0 -2
  325. package/dist/components/index8.js +0 -2
  326. package/dist/components/index9.js +0 -2
  327. package/dist/components/reactive-controller.js +0 -6
  328. package/dist/components/utils2.js +0 -2
  329. package/dist/web-components-library/p-1fad41b2.entry.js +0 -2
  330. package/dist/web-components-library/p-1fad41b2.entry.js.map +0 -1
  331. package/react/react-component-lib/createComponent.d.ts +0 -10
  332. package/react/react-component-lib/createComponent.js +0 -101
  333. package/react/react-component-lib/createOverlayComponent.d.ts +0 -21
  334. package/react/react-component-lib/createOverlayComponent.js +0 -115
  335. package/react/react-component-lib/index.d.ts +0 -2
  336. package/react/react-component-lib/index.js +0 -7
  337. package/react/react-component-lib/interfaces.d.ts +0 -29
  338. package/react/react-component-lib/interfaces.js +0 -2
  339. package/react/react-component-lib/utils/attachProps.d.ts +0 -16
  340. package/react/react-component-lib/utils/attachProps.js +0 -115
  341. package/react/react-component-lib/utils/case.d.ts +0 -2
  342. package/react/react-component-lib/utils/case.js +0 -11
  343. package/react/react-component-lib/utils/dev.d.ts +0 -2
  344. package/react/react-component-lib/utils/dev.js +0 -17
  345. package/react/react-component-lib/utils/index.d.ts +0 -10
  346. package/react/react-component-lib/utils/index.js +0 -55
  347. package/www/build/p-1fad41b2.entry.js +0 -2
  348. package/www/build/p-1fad41b2.entry.js.map +0 -1
  349. /package/dist/components/{utils.js.map → p-8C_CrFxp.js.map} +0 -0
  350. /package/dist/components/{reactive-controller.js.map → p-B3VFztJH.js.map} +0 -0
  351. /package/dist/components/{_commonjsHelpers.js.map → p-B85MJLTf.js.map} +0 -0
  352. /package/dist/components/{iconset.js.map → p-D1c5gR45.js.map} +0 -0
  353. /package/dist/components/{index2.js.map → p-DdetsoIY.js.map} +0 -0
  354. /package/dist/components/{breakpoints.js.map → p-Q-tWjk7P.js.map} +0 -0
package/dist/components/z-input-range.js CHANGED
@@ -1,2 +1,2 @@
1
- import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as n,Host as o,transformTag as a}from"@stencil/core/internal/client";import{O as r,P as s}from"./index2.js";import{r as h}from"./utils.js";import{d as l}from"./index16.js";import{d as g}from"./index21.js";const d=()=>`:host,*{box-sizing:border-box}:host{--progress:0%;--progress-ratio:0;--z-input-range-thumb-size:calc(var(--space-unit) * 3);display:flex;width:fit-content;height:fit-content;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([size="small"]){--z-input-range-thumb-size:calc(var(--space-unit) * 2)}:host([size="x-small"]){--z-input-range-thumb-size:calc(var(--space-unit) * 1.5)}:host([orientation="vertical"]){height:100%;flex-direction:row}.input-container{--z-input-range-track-size:calc(var(--z-input-range-thumb-size) / 3);position:relative;display:flex;width:100%;height:100%}label.z-label{padding:0;margin-bottom:calc(var(--space-unit) * 1.5)}:host([orientation="vertical"]) label.z-label{display:none}input[type="range"]{--main-color:var(--color-primary01);width:100%;height:var(--z-input-range-thumb-size);padding:0;margin:0;appearance:none;background:transparent;writing-mode:horizontal-tb}input[type="range"]:hover,input[type="range"]:hover~z-tooltip{--main-color:var(--color-hover-primary)}input[type="range"]:focus:focus-visible{outline:none}input[type="range"]:disabled,input[type="range"]:disabled~z-tooltip{--main-color:var(--color-form-disabled03);cursor:default}input[type="range"]::-webkit-slider-runnable-track{width:100%;height:var(--z-input-range-track-size);border:none;appearance:none;background:linear-gradient(var(--main-color), var(--main-color)) 0 / var(--progress) 100% no-repeat, var(--color-surface03);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]{width:var(--z-input-range-thumb-size);height:100%;direction:rtl;writing-mode:vertical-lr}:host([orientation="vertical"]) input[type="range"]::-webkit-slider-runnable-track{width:var(--z-input-range-track-size);height:100%;background:linear-gradient(var(--main-color), var(--main-color)) 0 100% / 100% var(--progress) no-repeat, var(--color-surface03)}input[type="range"]::-webkit-slider-thumb{width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);box-sizing:border-box;border:calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);margin-top:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);appearance:none;background-color:var(--color-surface01);border-radius:50%}:host([orientation="vertical"]) input[type="range"]::-webkit-slider-thumb{margin-top:0;margin-left:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2)}input[type="range"]:not(:disabled)::-webkit-slider-runnable-track{cursor:pointer}input[type="range"]:not(:disabled)::-webkit-slider-thumb{cursor:grab}input[type="range"]:focus:not(:active)::-webkit-slider-thumb{box-shadow:var(--shadow-focus-primary)}input[type="range"]:active:not(:disabled)::-webkit-slider-thumb{cursor:grabbing}input[type="range"]::-moz-range-track{width:100%;height:var(--z-input-range-track-size);border:none;appearance:none;background:var(--color-surface03);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]::-moz-range-track{width:var(--z-input-range-track-size);height:100%}input[type="range"]::-moz-range-progress{height:var(--z-input-range-track-size);border:none;background:var(--main-color);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]::-moz-range-progress{width:var(--z-input-range-track-size);height:auto}input[type="range"]::-moz-range-thumb{width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);box-sizing:border-box;border:calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);margin-top:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);appearance:none;background-color:var(--color-surface01);border-radius:50%}:host([orientation="vertical"]) input[type="range"]::-moz-range-thumb{margin-top:0;margin-left:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2)}input[type="range"]:not(:disabled)::-moz-range-track,input[type="range"]:not(:disabled)::-moz-range-progress{cursor:pointer}input[type="range"]:not(:disabled)::-moz-range-thumb{cursor:grab}input[type="range"]:active:not(:disabled)::-moz-range-thumb{cursor:grabbing}input[type="range"]:focus:not(:active)::-moz-range-thumb{box-shadow:var(--shadow-focus-primary)}.tooltip-guide{--progress-position:calc( (var(--progress-ratio) * (100% - var(--z-input-range-thumb-size))) + (var(--z-input-range-thumb-size) / 2) );position:absolute;z-index:-1;top:0;left:var(--progress-position);width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);background:transparent;pointer-events:none;transform:translateX(-50%)}:host([orientation="vertical"]) .tooltip-guide{top:auto;bottom:var(--progress-position);left:0;transform:translateY(50%)}z-tooltip{--main-color:var(--color-primary01);--z-tooltip-theme--surface:var(--main-color);--z-tooltip-theme--text:var(--color-text-inverse);--z-tooltip-padding:calc(var(--space-unit) / 2)}z-tooltip .current-value{min-width:calc(var(--space-unit) * 3.5)}.edges{display:flex;justify-content:space-between}.edges :is(.min,.max){min-width:var(--z-input-range-thumb-size);text-align:center}:host([orientation="vertical"]) .edges{display:none}`;const f=()=>`: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 b=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.rangeInput=i(this,"rangeInput",7);this.rangeChange=i(this,"rangeChange",7);this.internals=this.attachInternals();this.disabled=false;this.htmlId=`z-input-range-${h()}`;this.max=100;this.min=0;this.showEdges=false;this.step=1;this.value=0;this.currentValue=this.value;this.showValueTooltip=false;this.needsNativeValueSync=false}get ariaLabel(){var t;return(t=this.htmlAriaLabel)!==null&&t!==void 0?t:this.orientation===r.VERTICAL?this.label:undefined}get tooltipPosition(){var t;return(t=this.valuePosition)!==null&&t!==void 0?t:this.orientation===r.VERTICAL?s.LEFT:s.TOP}updateCurrentValue(t){if(Number.isNaN(t)||t===this.currentValue){return}this.currentValue=t;this.internals.setFormValue(this.currentValue.toString())}getCurrentRatio(){const t=this.max-this.min;if(t<=0){return 0}const e=(this.currentValue-this.min)/t;return Math.min(1,Math.max(0,e))}updateProgress(){var t,e;const i=this.getCurrentRatio();const n=i*100;(t=this.host)===null||t===void 0?void 0:t.style.setProperty("--progress-ratio",`${i}`);(e=this.host)===null||e===void 0?void 0:e.style.setProperty("--progress",`${n}%`)}syncCurrentValueFromNativeInput(){if(!this.inputRef){return}this.updateCurrentValue(this.inputRef.valueAsNumber);this.updateProgress()}onInput(t){t.stopPropagation();this.syncCurrentValueFromNativeInput();this.rangeInput.emit(this.currentValue)}onChange(t){t.stopPropagation();this.syncCurrentValueFromNativeInput();this.rangeChange.emit(this.currentValue)}onConstraintsChange(){this.needsNativeValueSync=true}componentDidLoad(){this.needsNativeValueSync=true;this.syncCurrentValueFromNativeInput()}componentDidRender(){if(!this.needsNativeValueSync){return}this.syncCurrentValueFromNativeInput();this.needsNativeValueSync=false}render(){return n(o,{key:"51cd64ea5f401a05ca85d825f8820b201fccfaa5"},this.label&&n("label",{key:"1723fbfbb1155b5bf5d245ef21343077fafe9a69",class:"z-label",htmlFor:this.htmlId},this.label),n("div",{key:"2edf09ba117831c6d499fcbb49719fe060212a1e",class:"input-container body-3"},n("input",{key:"ae66468d7ecf3e4e10bfea046fbb3cd42a5fadb0",ref:t=>this.inputRef=t,type:"range","aria-label":this.ariaLabel,id:this.htmlId,disabled:this.disabled,min:this.min,max:this.max,step:this.step,value:this.currentValue,onInput:t=>this.onInput(t),onChange:t=>this.onChange(t),onFocus:()=>this.showValueTooltip=true,onBlur:()=>this.showValueTooltip=false}),n("div",{key:"fe97396a4d8451a5c824b935d63321695408f83a",class:"tooltip-guide",ref:t=>this.tooltipGuideRef=t}),n("z-tooltip",{key:"7d2a301c6761e6717e9dc96d8c381b6e635931ad",position:this.tooltipPosition,bindTo:this.tooltipGuideRef,open:this.showValueTooltip,closable:false},n("div",{key:"0e2d565aed7ca0a8a3abef40c57ddc685662a149",class:"current-value"},this.currentValue))),this.showEdges&&n("div",{key:"9d392e5957da0f249311155b8b3ecabe5f5463c6",class:"edges body-3"},n("span",{key:"457873b47a6e1548c7a59531803afef84492d232",class:"min"},this.min),n("span",{key:"83f112675dcd1e67ee28eaf9a06bad3d937e5d0c",class:"max"},this.max)))}static get formAssociated(){return true}get host(){return this}static get watchers(){return{min:[{onConstraintsChange:0}],max:[{onConstraintsChange:0}],step:[{onConstraintsChange:0}],value:[{onConstraintsChange:0}]}}static get style(){return d()+f()}},[65,"z-input-range",{disabled:[4],htmlAriaLabel:[1,"html-aria-label"],htmlId:[1,"html-id"],label:[1],max:[2],min:[2],orientation:[513],showEdges:[4,"show-edges"],size:[513],step:[2],value:[2],valuePosition:[1,"value-position"],currentValue:[32],showValueTooltip:[32]},undefined,{min:[{onConstraintsChange:0}],max:[{onConstraintsChange:0}],step:[{onConstraintsChange:0}],value:[{onConstraintsChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const t=["z-input-range","z-popover","z-tooltip"];t.forEach((t=>{switch(t){case"z-input-range":if(!customElements.get(a(t))){customElements.define(a(t),b)}break;case"z-popover":if(!customElements.get(a(t))){l()}break;case"z-tooltip":if(!customElements.get(a(t))){g()}break}}))}const c=b;const p=v;export{c as ZInputRange,p as defineCustomElement};
1
+ import{p as t,H as e,c as i,h as n,d as o,t as a}from"./p-RmbDDbWd.js";import{O as r,P as s}from"./p-DdetsoIY.js";import{r as h}from"./p-8C_CrFxp.js";import{d as l}from"./p-D8wde41u.js";import{d as g}from"./p-Ch6o4_VN.js";const d=()=>`:host,*{box-sizing:border-box}:host{--progress:0%;--progress-ratio:0;--z-input-range-thumb-size:calc(var(--space-unit) * 3);display:flex;width:fit-content;height:fit-content;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([size="small"]){--z-input-range-thumb-size:calc(var(--space-unit) * 2)}:host([size="x-small"]){--z-input-range-thumb-size:calc(var(--space-unit) * 1.5)}:host([orientation="vertical"]){height:100%;flex-direction:row}.input-container{--z-input-range-track-size:calc(var(--z-input-range-thumb-size) / 3);position:relative;display:flex;width:100%;height:100%}label.z-label{padding:0;margin-bottom:calc(var(--space-unit) * 1.5)}:host([orientation="vertical"]) label.z-label{display:none}input[type="range"]{--main-color:var(--color-primary01);width:100%;height:var(--z-input-range-thumb-size);padding:0;margin:0;appearance:none;background:transparent;writing-mode:horizontal-tb}input[type="range"]:hover,input[type="range"]:hover~z-tooltip{--main-color:var(--color-hover-primary)}input[type="range"]:focus:focus-visible{outline:none}input[type="range"]:disabled,input[type="range"]:disabled~z-tooltip{--main-color:var(--color-form-disabled03);cursor:default}input[type="range"]::-webkit-slider-runnable-track{width:100%;height:var(--z-input-range-track-size);border:none;appearance:none;background:linear-gradient(var(--main-color), var(--main-color)) 0 / var(--progress) 100% no-repeat, var(--color-surface03);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]{width:var(--z-input-range-thumb-size);height:100%;direction:rtl;writing-mode:vertical-lr}:host([orientation="vertical"]) input[type="range"]::-webkit-slider-runnable-track{width:var(--z-input-range-track-size);height:100%;background:linear-gradient(var(--main-color), var(--main-color)) 0 100% / 100% var(--progress) no-repeat, var(--color-surface03)}input[type="range"]::-webkit-slider-thumb{width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);box-sizing:border-box;border:calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);margin-top:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);appearance:none;background-color:var(--color-surface01);border-radius:50%}:host([orientation="vertical"]) input[type="range"]::-webkit-slider-thumb{margin-top:0;margin-left:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2)}input[type="range"]:not(:disabled)::-webkit-slider-runnable-track{cursor:pointer}input[type="range"]:not(:disabled)::-webkit-slider-thumb{cursor:grab}input[type="range"]:focus:not(:active)::-webkit-slider-thumb{box-shadow:var(--shadow-focus-primary)}input[type="range"]:active:not(:disabled)::-webkit-slider-thumb{cursor:grabbing}input[type="range"]::-moz-range-track{width:100%;height:var(--z-input-range-track-size);border:none;appearance:none;background:var(--color-surface03);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]::-moz-range-track{width:var(--z-input-range-track-size);height:100%}input[type="range"]::-moz-range-progress{height:var(--z-input-range-track-size);border:none;background:var(--main-color);border-radius:var(--border-radius)}:host([orientation="vertical"]) input[type="range"]::-moz-range-progress{width:var(--z-input-range-track-size);height:auto}input[type="range"]::-moz-range-thumb{width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);box-sizing:border-box;border:calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);margin-top:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);appearance:none;background-color:var(--color-surface01);border-radius:50%}:host([orientation="vertical"]) input[type="range"]::-moz-range-thumb{margin-top:0;margin-left:calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2)}input[type="range"]:not(:disabled)::-moz-range-track,input[type="range"]:not(:disabled)::-moz-range-progress{cursor:pointer}input[type="range"]:not(:disabled)::-moz-range-thumb{cursor:grab}input[type="range"]:active:not(:disabled)::-moz-range-thumb{cursor:grabbing}input[type="range"]:focus:not(:active)::-moz-range-thumb{box-shadow:var(--shadow-focus-primary)}.tooltip-guide{--progress-position:calc( (var(--progress-ratio) * (100% - var(--z-input-range-thumb-size))) + (var(--z-input-range-thumb-size) / 2) );position:absolute;z-index:-1;top:0;left:var(--progress-position);width:var(--z-input-range-thumb-size);height:var(--z-input-range-thumb-size);background:transparent;pointer-events:none;transform:translateX(-50%)}:host([orientation="vertical"]) .tooltip-guide{top:auto;bottom:var(--progress-position);left:0;transform:translateY(50%)}z-tooltip{--main-color:var(--color-primary01);--z-tooltip-theme--surface:var(--main-color);--z-tooltip-theme--text:var(--color-text-inverse);--z-tooltip-padding:calc(var(--space-unit) / 2)}z-tooltip .current-value{min-width:calc(var(--space-unit) * 3.5)}.edges{display:flex;justify-content:space-between}.edges :is(.min,.max){min-width:var(--z-input-range-thumb-size);text-align:center}:host([orientation="vertical"]) .edges{display:none}`;const b=()=>`: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 f=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.rangeInput=i(this,"rangeInput",7);this.rangeChange=i(this,"rangeChange",7);this.internals=this.attachInternals();this.disabled=false;this.htmlId=`z-input-range-${h()}`;this.max=100;this.min=0;this.showEdges=false;this.step=1;this.value=0;this.currentValue=this.value;this.showValueTooltip=false;this.needsNativeValueSync=false}get ariaLabel(){var t;return(t=this.htmlAriaLabel)!==null&&t!==void 0?t:this.orientation===r.VERTICAL?this.label:undefined}get tooltipPosition(){var t;return(t=this.valuePosition)!==null&&t!==void 0?t:this.orientation===r.VERTICAL?s.LEFT:s.TOP}updateCurrentValue(t){if(Number.isNaN(t)||t===this.currentValue){return}this.currentValue=t;this.internals.setFormValue(this.currentValue.toString())}getCurrentRatio(){const t=this.max-this.min;if(t<=0){return 0}const e=(this.currentValue-this.min)/t;return Math.min(1,Math.max(0,e))}updateProgress(){var t,e;const i=this.getCurrentRatio();const n=i*100;(t=this.host)===null||t===void 0?void 0:t.style.setProperty("--progress-ratio",`${i}`);(e=this.host)===null||e===void 0?void 0:e.style.setProperty("--progress",`${n}%`)}syncCurrentValueFromNativeInput(){if(!this.inputRef){return}this.updateCurrentValue(this.inputRef.valueAsNumber);this.updateProgress()}onInput(t){t.stopPropagation();this.syncCurrentValueFromNativeInput();this.rangeInput.emit(this.currentValue)}onChange(t){t.stopPropagation();this.syncCurrentValueFromNativeInput();this.rangeChange.emit(this.currentValue)}onConstraintsChange(){this.needsNativeValueSync=true}componentDidLoad(){this.needsNativeValueSync=true;this.syncCurrentValueFromNativeInput()}componentDidRender(){if(!this.needsNativeValueSync){return}this.syncCurrentValueFromNativeInput();this.needsNativeValueSync=false}render(){return n(o,{key:"51cd64ea5f401a05ca85d825f8820b201fccfaa5"},this.label&&n("label",{key:"1723fbfbb1155b5bf5d245ef21343077fafe9a69",class:"z-label",htmlFor:this.htmlId},this.label),n("div",{key:"2edf09ba117831c6d499fcbb49719fe060212a1e",class:"input-container body-3"},n("input",{key:"ae66468d7ecf3e4e10bfea046fbb3cd42a5fadb0",ref:t=>this.inputRef=t,type:"range","aria-label":this.ariaLabel,id:this.htmlId,disabled:this.disabled,min:this.min,max:this.max,step:this.step,value:this.currentValue,onInput:t=>this.onInput(t),onChange:t=>this.onChange(t),onFocus:()=>this.showValueTooltip=true,onBlur:()=>this.showValueTooltip=false}),n("div",{key:"fe97396a4d8451a5c824b935d63321695408f83a",class:"tooltip-guide",ref:t=>this.tooltipGuideRef=t}),n("z-tooltip",{key:"7d2a301c6761e6717e9dc96d8c381b6e635931ad",position:this.tooltipPosition,bindTo:this.tooltipGuideRef,open:this.showValueTooltip,closable:false},n("div",{key:"0e2d565aed7ca0a8a3abef40c57ddc685662a149",class:"current-value"},this.currentValue))),this.showEdges&&n("div",{key:"9d392e5957da0f249311155b8b3ecabe5f5463c6",class:"edges body-3"},n("span",{key:"457873b47a6e1548c7a59531803afef84492d232",class:"min"},this.min),n("span",{key:"83f112675dcd1e67ee28eaf9a06bad3d937e5d0c",class:"max"},this.max)))}static get formAssociated(){return true}get host(){return this}static get watchers(){return{min:[{onConstraintsChange:0}],max:[{onConstraintsChange:0}],step:[{onConstraintsChange:0}],value:[{onConstraintsChange:0}]}}static get style(){return d()+b()}},[65,"z-input-range",{disabled:[4],htmlAriaLabel:[1,"html-aria-label"],htmlId:[1,"html-id"],label:[1],max:[2],min:[2],orientation:[513],showEdges:[4,"show-edges"],size:[513],step:[2],value:[2],valuePosition:[1,"value-position"],currentValue:[32],showValueTooltip:[32]},undefined,{min:[{onConstraintsChange:0}],max:[{onConstraintsChange:0}],step:[{onConstraintsChange:0}],value:[{onConstraintsChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const t=["z-input-range","z-popover","z-tooltip"];t.forEach((t=>{switch(t){case"z-input-range":if(!customElements.get(a(t))){customElements.define(a(t),f)}break;case"z-popover":if(!customElements.get(a(t))){l()}break;case"z-tooltip":if(!customElements.get(a(t))){g()}break}}))}const c=f;const p=v;export{c as ZInputRange,p as defineCustomElement};
2
2
  //# sourceMappingURL=z-input-range.js.map
package/dist/components/z-input-range.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["stylesCss","typographyCss","ZInputRange","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","disabled","htmlId","randomId","max","min","showEdges","step","value","currentValue","showValueTooltip","needsNativeValueSync","ariaLabel","_a","htmlAriaLabel","orientation","Orientation","VERTICAL","label","undefined","tooltipPosition","valuePosition","PopoverPosition","LEFT","TOP","updateCurrentValue","nextValue","Number","isNaN","internals","setFormValue","toString","getCurrentRatio","range","ratio","Math","updateProgress","progress","host","style","setProperty","_b","syncCurrentValueFromNativeInput","inputRef","valueAsNumber","onInput","event","stopPropagation","rangeInput","emit","onChange","rangeChange","onConstraintsChange","componentDidLoad","componentDidRender","render","h","Host","key","class","htmlFor","ref","el","type","id","onFocus","onBlur","tooltipGuideRef","position","bindTo","open","closable"],"sources":["src/components/z-input-range/styles.css?tag=z-input-range&encapsulation=shadow","src/tokens/typography.css?tag=z-input-range&encapsulation=shadow","src/components/z-input-range/index.tsx"],"sourcesContent":[":host,\n* {\n box-sizing: border-box;\n}\n\n:host {\n /* Internal CSS variable used to store the progress of the input range as a percentage.\n Needed to color the progress in the runnable track of the input (only Firefox natively provides a pseudo-element to do that: `::-moz-range-progress`).\n The value is updated by the component. */\n --progress: 0%;\n\n /* Internal CSS variable used to store the ratio of the current value to the total range, used for positioning the tooltip guide.\n The value is updated by the component. */\n --progress-ratio: 0;\n --z-input-range-thumb-size: calc(var(--space-unit) * 3);\n\n display: flex;\n width: fit-content;\n height: fit-content;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host([size=\"small\"]) {\n --z-input-range-thumb-size: calc(var(--space-unit) * 2);\n}\n\n:host([size=\"x-small\"]) {\n --z-input-range-thumb-size: calc(var(--space-unit) * 1.5);\n}\n\n:host([orientation=\"vertical\"]) {\n height: 100%;\n flex-direction: row;\n}\n\n.input-container {\n /* Thickness of the track. It is calculated as one-third of the thumb size. */\n --z-input-range-track-size: calc(var(--z-input-range-thumb-size) / 3);\n\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n}\n\nlabel.z-label {\n padding: 0;\n margin-bottom: calc(var(--space-unit) * 1.5);\n}\n\n:host([orientation=\"vertical\"]) label.z-label {\n display: none;\n}\n\ninput[type=\"range\"] {\n --main-color: var(--color-primary01);\n\n width: 100%;\n height: var(--z-input-range-thumb-size);\n padding: 0;\n margin: 0;\n appearance: none;\n background: transparent;\n writing-mode: horizontal-tb;\n}\n\ninput[type=\"range\"]:hover,\ninput[type=\"range\"]:hover ~ z-tooltip {\n --main-color: var(--color-hover-primary);\n}\n\ninput[type=\"range\"]:focus:focus-visible {\n outline: none;\n}\n\ninput[type=\"range\"]:disabled,\ninput[type=\"range\"]:disabled ~ z-tooltip {\n --main-color: var(--color-form-disabled03);\n\n cursor: default;\n}\n\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--z-input-range-track-size);\n border: none;\n appearance: none;\n background:\n linear-gradient(var(--main-color), var(--main-color)) 0 / var(--progress) 100% no-repeat,\n var(--color-surface03);\n border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"] {\n width: var(--z-input-range-thumb-size);\n height: 100%;\n direction: rtl;\n writing-mode: vertical-lr;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-webkit-slider-runnable-track {\n width: var(--z-input-range-track-size);\n height: 100%;\n background:\n linear-gradient(var(--main-color), var(--main-color)) 0 100% / 100% var(--progress) no-repeat,\n var(--color-surface03);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n width: var(--z-input-range-thumb-size);\n height: var(--z-input-range-thumb-size);\n box-sizing: border-box;\n border: calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);\n margin-top: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n appearance: none;\n background-color: var(--color-surface01);\n border-radius: 50%;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-webkit-slider-thumb {\n margin-top: 0;\n margin-left: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n}\n\ninput[type=\"range\"]:not(:disabled)::-webkit-slider-runnable-track {\n cursor: pointer;\n}\n\ninput[type=\"range\"]:not(:disabled)::-webkit-slider-thumb {\n cursor: grab;\n}\n\ninput[type=\"range\"]:focus:not(:active)::-webkit-slider-thumb {\n box-shadow: var(--shadow-focus-primary);\n}\n\ninput[type=\"range\"]:active:not(:disabled)::-webkit-slider-thumb {\n cursor: grabbing;\n}\n\n/* --- Firefox styles --- */\n\n/* All styles must be duplicated, because using comma-separated selectors\n(like `input[type=\"range\"]::-webkit-slider-thumb, input[type=\"range\"]::-moz-range-thumb`) would break webkit styles...\n*/\ninput[type=\"range\"]::-moz-range-track {\n width: 100%;\n height: var(--z-input-range-track-size);\n border: none;\n appearance: none;\n background: var(--color-surface03);\n border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-track {\n width: var(--z-input-range-track-size);\n height: 100%;\n}\n\ninput[type=\"range\"]::-moz-range-progress {\n height: var(--z-input-range-track-size);\n border: none;\n background: var(--main-color);\n border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-progress {\n width: var(--z-input-range-track-size);\n height: auto;\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n width: var(--z-input-range-thumb-size);\n height: var(--z-input-range-thumb-size);\n box-sizing: border-box;\n border: calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);\n margin-top: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n appearance: none;\n background-color: var(--color-surface01);\n border-radius: 50%;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-thumb {\n margin-top: 0;\n margin-left: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n}\n\ninput[type=\"range\"]:not(:disabled)::-moz-range-track,\ninput[type=\"range\"]:not(:disabled)::-moz-range-progress {\n cursor: pointer;\n}\n\ninput[type=\"range\"]:not(:disabled)::-moz-range-thumb {\n cursor: grab;\n}\n\ninput[type=\"range\"]:active:not(:disabled)::-moz-range-thumb {\n cursor: grabbing;\n}\n\ninput[type=\"range\"]:focus:not(:active)::-moz-range-thumb {\n box-shadow: var(--shadow-focus-primary);\n}\n\n/* --- End of Firefox styles --- */\n\n.tooltip-guide {\n --progress-position: calc(\n (var(--progress-ratio) * (100% - var(--z-input-range-thumb-size))) + (var(--z-input-range-thumb-size) / 2)\n );\n\n position: absolute;\n z-index: -1;\n top: 0;\n\n /* `--progress` is good for painting the filled track, but not enough for representing the thumb center.\n * The thumb center cannot go from 0 to 100%:\n * at min it sits at thumbSize/2, and at max it sits at width - thumbSize/2.\n * So we map a normalized ratio (0..1) over the usable travel distance\n * (width - thumbSize), then add thumbSize/2 to get the correct center coordinate.\n */\n left: var(--progress-position);\n width: var(--z-input-range-thumb-size);\n height: var(--z-input-range-thumb-size);\n background: transparent;\n pointer-events: none;\n transform: translateX(-50%);\n}\n\n:host([orientation=\"vertical\"]) .tooltip-guide {\n top: auto;\n bottom: var(--progress-position);\n left: 0;\n transform: translateY(50%);\n}\n\nz-tooltip {\n --main-color: var(--color-primary01);\n --z-tooltip-theme--surface: var(--main-color);\n --z-tooltip-theme--text: var(--color-text-inverse);\n --z-tooltip-padding: calc(var(--space-unit) / 2);\n}\n\nz-tooltip .current-value {\n min-width: calc(var(--space-unit) * 3.5);\n}\n\n.edges {\n display: flex;\n justify-content: space-between;\n}\n\n.edges :is(.min, .max) {\n min-width: var(--z-input-range-thumb-size); /* visually align single digit values to the center of the thumb */\n text-align: center;\n}\n\n:host([orientation=\"vertical\"]) .edges {\n display: none;\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 AttachInternals,\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {ControlSize, Orientation, PopoverPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n/**\n * Input range component.\n */\n@Component({\n tag: \"z-input-range\",\n styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n shadow: true,\n formAssociated: true,\n})\nexport class ZInputRange implements ComponentInterface {\n @Element() host: HTMLZInputRangeElement;\n\n @AttachInternals() internals: ElementInternals;\n\n /** Whether the input range is disabled. */\n @Prop()\n disabled = false;\n\n /**\n * The aria label of the input range. for accessibility.\n * Not necessary if the `label` prop is set.\n */\n @Prop()\n htmlAriaLabel: string;\n\n /** ID of the input range. */\n @Prop()\n htmlId = `z-input-range-${randomId()}`;\n\n /**\n * The label of the input range.\n * When `orientation` is set to `vertical`, the label is not visible but used as `aria-label`, unless `htmlAriaLabel` is provided.\n */\n @Prop()\n label: string;\n\n /** The greatest value in the range of permitted values. */\n @Prop()\n max = 100;\n\n /** The lowest value in the range of permitted values. */\n @Prop()\n min = 0;\n\n /** The orientation of the input range. */\n @Prop({reflect: true})\n orientation: Orientation;\n\n /** Whether to show `min` and `max` values of the input range. Only visible with the `horizontal` orientation. */\n @Prop()\n showEdges = false;\n\n /** The size of the input range. Default: `ControlSize.BIG` */\n @Prop({reflect: true})\n size: ControlSize.BIG;\n\n /** The step value for the input range. */\n @Prop()\n step = 1;\n\n /** The value of the input range. */\n @Prop()\n value = 0;\n\n /**\n * The position of the tooltip displaying the current value.\n * Defaults to `top` for horizontal orientation and `left` for vertical orientation.\n * May be necessary to adjust this prop when the input range is close to the edges of the screen,\n * to prevent the tooltip from showing out of the screen or in an unintended position due to auto adjustment.\n * For example, for a horizontal input range close to the top of the screen, you may want to set this prop to `bottom`.\n */\n @Prop()\n valuePosition: PopoverPosition.TOP | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT;\n\n /** Emitted when the value of the input range is being changed (`input` native event). */\n @Event()\n rangeInput: EventEmitter<number>;\n\n /** Emitted when the value of the input range has changed (`change` native event). */\n @Event()\n rangeChange: EventEmitter<number>;\n\n /** The current value of the input range synchronized with the native input element. */\n @State()\n currentValue = this.value;\n\n /**\n * Whether to show the tooltip displaying the current value.\n * The tooltip is shown only when the input range is focused or while the user is changing the value.\n */\n @State()\n showValueTooltip = false;\n\n /**\n * Whether the native input value needs to be synced with the component state.\n * This is necessary when the `step` prop changes, as the browser may round the value,\n * so we need to update the component state accordingly.\n */\n private needsNativeValueSync = false;\n\n private inputRef: HTMLInputElement;\n\n private tooltipGuideRef: HTMLSpanElement;\n\n private get ariaLabel(): string | undefined {\n return this.htmlAriaLabel ?? (this.orientation === Orientation.VERTICAL ? this.label : undefined);\n }\n\n private get tooltipPosition(): typeof this.valuePosition {\n return (\n this.valuePosition ?? (this.orientation === Orientation.VERTICAL ? PopoverPosition.LEFT : PopoverPosition.TOP)\n );\n }\n\n private updateCurrentValue(nextValue: number): void {\n if (Number.isNaN(nextValue) || nextValue === this.currentValue) {\n return;\n }\n\n this.currentValue = nextValue;\n this.internals.setFormValue(this.currentValue.toString());\n }\n\n /** Calculates the current ratio of the input range value. */\n private getCurrentRatio(): number {\n const range = this.max - this.min;\n if (range <= 0) {\n return 0;\n }\n\n const ratio = (this.currentValue - this.min) / range;\n\n return Math.min(1, Math.max(0, ratio));\n }\n\n /** Updates the CSS variables used to color the track progress and tooltip guide position. */\n private updateProgress(): void {\n const ratio = this.getCurrentRatio();\n const progress = ratio * 100;\n\n this.host?.style.setProperty(\"--progress-ratio\", `${ratio}`);\n this.host?.style.setProperty(\"--progress\", `${progress}%`);\n }\n\n /**\n * Syncs current value from native input after render-time browser coercions:\n * when `step` changes, the browser may round the value, so we need to update the component state accordingly.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step\n */\n private syncCurrentValueFromNativeInput(): void {\n if (!this.inputRef) {\n return;\n }\n\n this.updateCurrentValue(this.inputRef.valueAsNumber);\n this.updateProgress();\n }\n\n private onInput(event: InputEvent): void {\n event.stopPropagation();\n this.syncCurrentValueFromNativeInput();\n this.rangeInput.emit(this.currentValue);\n }\n\n private onChange(event: Event): void {\n event.stopPropagation();\n this.syncCurrentValueFromNativeInput();\n this.rangeChange.emit(this.currentValue);\n }\n\n @Watch(\"min\")\n @Watch(\"max\")\n @Watch(\"step\")\n @Watch(\"value\")\n onConstraintsChange(): void {\n this.needsNativeValueSync = true;\n }\n\n componentDidLoad() {\n this.needsNativeValueSync = true;\n this.syncCurrentValueFromNativeInput();\n }\n\n componentDidRender() {\n if (!this.needsNativeValueSync) {\n return;\n }\n\n this.syncCurrentValueFromNativeInput();\n this.needsNativeValueSync = false;\n }\n\n render() {\n return (\n <Host>\n {this.label && (\n <label\n class=\"z-label\"\n htmlFor={this.htmlId}\n >\n {this.label}\n </label>\n )}\n <div class=\"input-container body-3\">\n <input\n ref={(el) => (this.inputRef = el)}\n type=\"range\"\n aria-label={this.ariaLabel}\n id={this.htmlId}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.currentValue}\n onInput={(event) => this.onInput(event)}\n onChange={(event) => this.onChange(event)}\n onFocus={() => (this.showValueTooltip = true)}\n onBlur={() => (this.showValueTooltip = false)}\n />\n <div\n class=\"tooltip-guide\"\n ref={(el) => (this.tooltipGuideRef = el)}\n ></div>\n <z-tooltip\n position={this.tooltipPosition}\n bindTo={this.tooltipGuideRef}\n open={this.showValueTooltip}\n closable={false}\n >\n <div class=\"current-value\">{this.currentValue}</div>\n </z-tooltip>\n </div>\n {this.showEdges && (\n <div class=\"edges body-3\">\n <span class=\"min\">{this.min}</span>\n <span class=\"max\">{this.max}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["stylesCss","typographyCss","ZInputRange","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","disabled","htmlId","randomId","max","min","showEdges","step","value","currentValue","showValueTooltip","needsNativeValueSync","ariaLabel","_a","htmlAriaLabel","orientation","Orientation","VERTICAL","label","undefined","tooltipPosition","valuePosition","PopoverPosition","LEFT","TOP","updateCurrentValue","nextValue","Number","isNaN","internals","setFormValue","toString","getCurrentRatio","range","ratio","Math","updateProgress","progress","host","style","setProperty","_b","syncCurrentValueFromNativeInput","inputRef","valueAsNumber","onInput","event","stopPropagation","rangeInput","emit","onChange","rangeChange","onConstraintsChange","componentDidLoad","componentDidRender","render","h","Host","key","class","htmlFor","ref","el","type","id","onFocus","onBlur","tooltipGuideRef","position","bindTo","open","closable"],"sources":["src/components/z-input-range/styles.css?tag=z-input-range&encapsulation=shadow","src/tokens/typography.css?tag=z-input-range&encapsulation=shadow","src/components/z-input-range/index.tsx"],"sourcesContent":[":host,\n* {\n box-sizing: border-box;\n}\n\n:host {\n /* Internal CSS variable used to store the progress of the input range as a percentage.\n Needed to color the progress in the runnable track of the input (only Firefox natively provides a pseudo-element to do that: `::-moz-range-progress`).\n The value is updated by the component. */\n --progress: 0%;\n\n /* Internal CSS variable used to store the ratio of the current value to the total range, used for positioning the tooltip guide.\n The value is updated by the component. */\n --progress-ratio: 0;\n --z-input-range-thumb-size: calc(var(--space-unit) * 3);\n\n display: flex;\n width: fit-content;\n height: fit-content;\n flex-direction: column;\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n:host([size=\"small\"]) {\n --z-input-range-thumb-size: calc(var(--space-unit) * 2);\n}\n\n:host([size=\"x-small\"]) {\n --z-input-range-thumb-size: calc(var(--space-unit) * 1.5);\n}\n\n:host([orientation=\"vertical\"]) {\n height: 100%;\n flex-direction: row;\n}\n\n.input-container {\n /* Thickness of the track. It is calculated as one-third of the thumb size. */\n --z-input-range-track-size: calc(var(--z-input-range-thumb-size) / 3);\n\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n}\n\nlabel.z-label {\n padding: 0;\n margin-bottom: calc(var(--space-unit) * 1.5);\n}\n\n:host([orientation=\"vertical\"]) label.z-label {\n display: none;\n}\n\ninput[type=\"range\"] {\n --main-color: var(--color-primary01);\n\n width: 100%;\n height: var(--z-input-range-thumb-size);\n padding: 0;\n margin: 0;\n appearance: none;\n background: transparent;\n writing-mode: horizontal-tb;\n}\n\ninput[type=\"range\"]:hover,\ninput[type=\"range\"]:hover ~ z-tooltip {\n --main-color: var(--color-hover-primary);\n}\n\ninput[type=\"range\"]:focus:focus-visible {\n outline: none;\n}\n\ninput[type=\"range\"]:disabled,\ninput[type=\"range\"]:disabled ~ z-tooltip {\n --main-color: var(--color-form-disabled03);\n\n cursor: default;\n}\n\ninput[type=\"range\"]::-webkit-slider-runnable-track {\n width: 100%;\n height: var(--z-input-range-track-size);\n border: none;\n appearance: none;\n background:\n linear-gradient(var(--main-color), var(--main-color)) 0 / var(--progress) 100% no-repeat,\n var(--color-surface03);\n border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"] {\n width: var(--z-input-range-thumb-size);\n height: 100%;\n direction: rtl;\n writing-mode: vertical-lr;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-webkit-slider-runnable-track {\n width: var(--z-input-range-track-size);\n height: 100%;\n background:\n linear-gradient(var(--main-color), var(--main-color)) 0 100% / 100% var(--progress) no-repeat,\n var(--color-surface03);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n width: var(--z-input-range-thumb-size);\n height: var(--z-input-range-thumb-size);\n box-sizing: border-box;\n border: calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);\n margin-top: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n appearance: none;\n background-color: var(--color-surface01);\n border-radius: 50%;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-webkit-slider-thumb {\n margin-top: 0;\n margin-left: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n}\n\ninput[type=\"range\"]:not(:disabled)::-webkit-slider-runnable-track {\n cursor: pointer;\n}\n\ninput[type=\"range\"]:not(:disabled)::-webkit-slider-thumb {\n cursor: grab;\n}\n\ninput[type=\"range\"]:focus:not(:active)::-webkit-slider-thumb {\n box-shadow: var(--shadow-focus-primary);\n}\n\ninput[type=\"range\"]:active:not(:disabled)::-webkit-slider-thumb {\n cursor: grabbing;\n}\n\n/* --- Firefox styles --- */\n\n/* All styles must be duplicated, because using comma-separated selectors\n(like `input[type=\"range\"]::-webkit-slider-thumb, input[type=\"range\"]::-moz-range-thumb`) would break webkit styles...\n*/\ninput[type=\"range\"]::-moz-range-track {\n width: 100%;\n height: var(--z-input-range-track-size);\n border: none;\n appearance: none;\n background: var(--color-surface03);\n border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-track {\n width: var(--z-input-range-track-size);\n height: 100%;\n}\n\ninput[type=\"range\"]::-moz-range-progress {\n height: var(--z-input-range-track-size);\n border: none;\n background: var(--main-color);\n border-radius: var(--border-radius);\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-progress {\n width: var(--z-input-range-track-size);\n height: auto;\n}\n\ninput[type=\"range\"]::-moz-range-thumb {\n width: var(--z-input-range-thumb-size);\n height: var(--z-input-range-thumb-size);\n box-sizing: border-box;\n border: calc(var(--z-input-range-thumb-size) / 4.8) solid var(--main-color);\n margin-top: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n appearance: none;\n background-color: var(--color-surface01);\n border-radius: 50%;\n}\n\n:host([orientation=\"vertical\"]) input[type=\"range\"]::-moz-range-thumb {\n margin-top: 0;\n margin-left: calc((var(--z-input-range-track-size) - var(--z-input-range-thumb-size)) / 2);\n}\n\ninput[type=\"range\"]:not(:disabled)::-moz-range-track,\ninput[type=\"range\"]:not(:disabled)::-moz-range-progress {\n cursor: pointer;\n}\n\ninput[type=\"range\"]:not(:disabled)::-moz-range-thumb {\n cursor: grab;\n}\n\ninput[type=\"range\"]:active:not(:disabled)::-moz-range-thumb {\n cursor: grabbing;\n}\n\ninput[type=\"range\"]:focus:not(:active)::-moz-range-thumb {\n box-shadow: var(--shadow-focus-primary);\n}\n\n/* --- End of Firefox styles --- */\n\n.tooltip-guide {\n --progress-position: calc(\n (var(--progress-ratio) * (100% - var(--z-input-range-thumb-size))) + (var(--z-input-range-thumb-size) / 2)\n );\n\n position: absolute;\n z-index: -1;\n top: 0;\n\n /* `--progress` is good for painting the filled track, but not enough for representing the thumb center.\n * The thumb center cannot go from 0 to 100%:\n * at min it sits at thumbSize/2, and at max it sits at width - thumbSize/2.\n * So we map a normalized ratio (0..1) over the usable travel distance\n * (width - thumbSize), then add thumbSize/2 to get the correct center coordinate.\n */\n left: var(--progress-position);\n width: var(--z-input-range-thumb-size);\n height: var(--z-input-range-thumb-size);\n background: transparent;\n pointer-events: none;\n transform: translateX(-50%);\n}\n\n:host([orientation=\"vertical\"]) .tooltip-guide {\n top: auto;\n bottom: var(--progress-position);\n left: 0;\n transform: translateY(50%);\n}\n\nz-tooltip {\n --main-color: var(--color-primary01);\n --z-tooltip-theme--surface: var(--main-color);\n --z-tooltip-theme--text: var(--color-text-inverse);\n --z-tooltip-padding: calc(var(--space-unit) / 2);\n}\n\nz-tooltip .current-value {\n min-width: calc(var(--space-unit) * 3.5);\n}\n\n.edges {\n display: flex;\n justify-content: space-between;\n}\n\n.edges :is(.min, .max) {\n min-width: var(--z-input-range-thumb-size); /* visually align single digit values to the center of the thumb */\n text-align: center;\n}\n\n:host([orientation=\"vertical\"]) .edges {\n display: none;\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 AttachInternals,\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {ControlSize, Orientation, PopoverPosition} from \"../../beans\";\nimport {randomId} from \"../../utils/utils\";\n\n/**\n * Input range component.\n */\n@Component({\n tag: \"z-input-range\",\n styleUrls: [\"styles.css\", \"../../tokens/typography.css\"],\n shadow: true,\n formAssociated: true,\n})\nexport class ZInputRange implements ComponentInterface {\n @Element() host: HTMLZInputRangeElement;\n\n @AttachInternals() internals: ElementInternals;\n\n /** Whether the input range is disabled. */\n @Prop()\n disabled = false;\n\n /**\n * The aria label of the input range. for accessibility.\n * Not necessary if the `label` prop is set.\n */\n @Prop()\n htmlAriaLabel: string;\n\n /** ID of the input range. */\n @Prop()\n htmlId = `z-input-range-${randomId()}`;\n\n /**\n * The label of the input range.\n * When `orientation` is set to `vertical`, the label is not visible but used as `aria-label`, unless `htmlAriaLabel` is provided.\n */\n @Prop()\n label: string;\n\n /** The greatest value in the range of permitted values. */\n @Prop()\n max = 100;\n\n /** The lowest value in the range of permitted values. */\n @Prop()\n min = 0;\n\n /** The orientation of the input range. */\n @Prop({reflect: true})\n orientation: Orientation;\n\n /** Whether to show `min` and `max` values of the input range. Only visible with the `horizontal` orientation. */\n @Prop()\n showEdges = false;\n\n /** The size of the input range. Default: `ControlSize.BIG` */\n @Prop({reflect: true})\n size: ControlSize.BIG;\n\n /** The step value for the input range. */\n @Prop()\n step = 1;\n\n /** The value of the input range. */\n @Prop()\n value = 0;\n\n /**\n * The position of the tooltip displaying the current value.\n * Defaults to `top` for horizontal orientation and `left` for vertical orientation.\n * May be necessary to adjust this prop when the input range is close to the edges of the screen,\n * to prevent the tooltip from showing out of the screen or in an unintended position due to auto adjustment.\n * For example, for a horizontal input range close to the top of the screen, you may want to set this prop to `bottom`.\n */\n @Prop()\n valuePosition: PopoverPosition.TOP | PopoverPosition.BOTTOM | PopoverPosition.LEFT | PopoverPosition.RIGHT;\n\n /** Emitted when the value of the input range is being changed (`input` native event). */\n @Event()\n rangeInput: EventEmitter<number>;\n\n /** Emitted when the value of the input range has changed (`change` native event). */\n @Event()\n rangeChange: EventEmitter<number>;\n\n /** The current value of the input range synchronized with the native input element. */\n @State()\n currentValue = this.value;\n\n /**\n * Whether to show the tooltip displaying the current value.\n * The tooltip is shown only when the input range is focused or while the user is changing the value.\n */\n @State()\n showValueTooltip = false;\n\n /**\n * Whether the native input value needs to be synced with the component state.\n * This is necessary when the `step` prop changes, as the browser may round the value,\n * so we need to update the component state accordingly.\n */\n private needsNativeValueSync = false;\n\n private inputRef: HTMLInputElement;\n\n private tooltipGuideRef: HTMLSpanElement;\n\n private get ariaLabel(): string | undefined {\n return this.htmlAriaLabel ?? (this.orientation === Orientation.VERTICAL ? this.label : undefined);\n }\n\n private get tooltipPosition(): typeof this.valuePosition {\n return (\n this.valuePosition ?? (this.orientation === Orientation.VERTICAL ? PopoverPosition.LEFT : PopoverPosition.TOP)\n );\n }\n\n private updateCurrentValue(nextValue: number): void {\n if (Number.isNaN(nextValue) || nextValue === this.currentValue) {\n return;\n }\n\n this.currentValue = nextValue;\n this.internals.setFormValue(this.currentValue.toString());\n }\n\n /** Calculates the current ratio of the input range value. */\n private getCurrentRatio(): number {\n const range = this.max - this.min;\n if (range <= 0) {\n return 0;\n }\n\n const ratio = (this.currentValue - this.min) / range;\n\n return Math.min(1, Math.max(0, ratio));\n }\n\n /** Updates the CSS variables used to color the track progress and tooltip guide position. */\n private updateProgress(): void {\n const ratio = this.getCurrentRatio();\n const progress = ratio * 100;\n\n this.host?.style.setProperty(\"--progress-ratio\", `${ratio}`);\n this.host?.style.setProperty(\"--progress\", `${progress}%`);\n }\n\n /**\n * Syncs current value from native input after render-time browser coercions:\n * when `step` changes, the browser may round the value, so we need to update the component state accordingly.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range#step\n */\n private syncCurrentValueFromNativeInput(): void {\n if (!this.inputRef) {\n return;\n }\n\n this.updateCurrentValue(this.inputRef.valueAsNumber);\n this.updateProgress();\n }\n\n private onInput(event: InputEvent): void {\n event.stopPropagation();\n this.syncCurrentValueFromNativeInput();\n this.rangeInput.emit(this.currentValue);\n }\n\n private onChange(event: Event): void {\n event.stopPropagation();\n this.syncCurrentValueFromNativeInput();\n this.rangeChange.emit(this.currentValue);\n }\n\n @Watch(\"min\")\n @Watch(\"max\")\n @Watch(\"step\")\n @Watch(\"value\")\n onConstraintsChange(): void {\n this.needsNativeValueSync = true;\n }\n\n componentDidLoad() {\n this.needsNativeValueSync = true;\n this.syncCurrentValueFromNativeInput();\n }\n\n componentDidRender() {\n if (!this.needsNativeValueSync) {\n return;\n }\n\n this.syncCurrentValueFromNativeInput();\n this.needsNativeValueSync = false;\n }\n\n render() {\n return (\n <Host>\n {this.label && (\n <label\n class=\"z-label\"\n htmlFor={this.htmlId}\n >\n {this.label}\n </label>\n )}\n <div class=\"input-container body-3\">\n <input\n ref={(el) => (this.inputRef = el)}\n type=\"range\"\n aria-label={this.ariaLabel}\n id={this.htmlId}\n disabled={this.disabled}\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.currentValue}\n onInput={(event) => this.onInput(event)}\n onChange={(event) => this.onChange(event)}\n onFocus={() => (this.showValueTooltip = true)}\n onBlur={() => (this.showValueTooltip = false)}\n />\n <div\n class=\"tooltip-guide\"\n ref={(el) => (this.tooltipGuideRef = el)}\n ></div>\n <z-tooltip\n position={this.tooltipPosition}\n bindTo={this.tooltipGuideRef}\n open={this.showValueTooltip}\n closable={false}\n >\n <div class=\"current-value\">{this.currentValue}</div>\n </z-tooltip>\n </div>\n {this.showEdges && (\n <div class=\"edges body-3\">\n <span class=\"min\">{this.min}</span>\n <span class=\"max\">{this.max}</span>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
package/dist/components/z-input.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Z as o,d as s}from"./index6.js";const t=o;const n=s;export{t as ZInput,n as defineCustomElement};
1
+ import{Z as o,d as s}from"./p-LXvmZzZa.js";const t=o;const a=s;export{t as ZInput,a as defineCustomElement};
2
2
  //# sourceMappingURL=z-input.js.map
package/dist/components/z-list-element.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Z as o,d as s}from"./index9.js";const t=o;const n=s;export{t as ZListElement,n as defineCustomElement};
1
+ import{Z as o,d as s}from"./p-BeSVHdId.js";const t=o;const d=s;export{t as ZListElement,d as defineCustomElement};
2
2
  //# sourceMappingURL=z-list-element.js.map
package/dist/components/z-list-group.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Z as o,d as s}from"./index10.js";const t=o;const n=s;export{t as ZListGroup,n as defineCustomElement};
1
+ import{Z as o,d as s}from"./p-mphirYN3.js";const p=o;const r=s;export{p as ZListGroup,r as defineCustomElement};
2
2
  //# sourceMappingURL=z-list-group.js.map
package/dist/components/z-list.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Z as o,d as s}from"./index8.js";const t=o;const n=s;export{t as ZList,n as defineCustomElement};
1
+ import{Z as o,d as s}from"./p-cpTAMdcF.js";const c=o;const p=s;export{c as ZList,p as defineCustomElement};
2
2
  //# sourceMappingURL=z-list.js.map
package/dist/components/z-logo.js CHANGED
@@ -1,2 +1,2 @@
1
- import{proxyCustomElement as t,HTMLElement as i,h as o,Host as e,transformTag as L}from"@stencil/core/internal/client";const l=()=>`:host{display:inline-block;width:255px;height:64px;vertical-align:top}img{display:block;width:100%;height:100%;margin:auto;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}a{display:block;width:100%;height:100%}a:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(.mobile){width:31px;height:40px}:host(.mobile) img{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}`;const s=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}render(){const t={};if(this.width){t["width"]=t["max-width"]=`${this.width}px`}if(this.height){t["height"]=t["max-height"]=`${this.height}px`}return o(e,{key:"dca62e910fb9205c24f4787bd71339b8ba072bb5",style:t,class:{mobile:!!this.mobileLogo}},this.link?o("a",{href:this.link,target:this.targetBlank?"_blank":"_self"},o("img",{alt:this.imageAlt})):o("img",{alt:this.imageAlt}))}static get style(){return l()}},[1,"z-logo",{width:[2],height:[2],imageAlt:[1,"image-alt"],link:[1],targetBlank:[4,"target-blank"],mobileLogo:[4,"mobile-logo"]}]);function n(){if(typeof customElements==="undefined"){return}const t=["z-logo"];t.forEach((t=>{switch(t){case"z-logo":if(!customElements.get(L(t))){customElements.define(L(t),s)}break}}))}const g=s;const a=n;export{g as ZLogo,a as defineCustomElement};
1
+ import{p as t,H as o,h as i,d as L,t as e}from"./p-RmbDDbWd.js";const l=()=>`:host{display:inline-block;width:255px;height:64px;vertical-align:top}img{display:block;width:100%;height:100%;margin:auto;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}a{display:block;width:100%;height:100%}a:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(.mobile){width:31px;height:40px}:host(.mobile) img{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}`;const s=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}render(){const t={};if(this.width){t["width"]=t["max-width"]=`${this.width}px`}if(this.height){t["height"]=t["max-height"]=`${this.height}px`}return i(L,{key:"dca62e910fb9205c24f4787bd71339b8ba072bb5",style:t,class:{mobile:!!this.mobileLogo}},this.link?i("a",{href:this.link,target:this.targetBlank?"_blank":"_self"},i("img",{alt:this.imageAlt})):i("img",{alt:this.imageAlt}))}static get style(){return l()}},[1,"z-logo",{width:[2],height:[2],imageAlt:[1,"image-alt"],link:[1],targetBlank:[4,"target-blank"],mobileLogo:[4,"mobile-logo"]}]);function n(){if(typeof customElements==="undefined"){return}const t=["z-logo"];t.forEach((t=>{switch(t){case"z-logo":if(!customElements.get(e(t))){customElements.define(e(t),s)}break}}))}const g=s;const a=n;export{g as ZLogo,a as defineCustomElement};
2
2
  //# sourceMappingURL=z-logo.js.map
package/dist/components/z-logo.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["stylesCss","ZLogo","__stencil_proxyCustomElement","HTMLElement","render","style","this","width","height","h","Host","key","class","mobile","mobileLogo","link","href","target","targetBlank","alt","imageAlt"],"sources":["src/components/z-logo/styles.css?tag=z-logo&encapsulation=shadow","src/components/z-logo/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 255px;\n height: 64px;\n vertical-align: top;\n}\n\nimg {\n display: block;\n width: 100%;\n height: 100%;\n margin: auto;\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n\na {\n display: block;\n width: 100%;\n height: 100%;\n}\n\na:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(.mobile) {\n width: 31px;\n height: 40px;\n}\n\n:host(.mobile) img {\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-logo\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZLogo implements ComponentInterface {\n /** image width */\n @Prop()\n width?: number;\n\n /** image height */\n @Prop()\n height?: number;\n\n /** alternative image text */\n @Prop()\n imageAlt?: string;\n\n /** link url (optional) */\n @Prop()\n link?: string;\n\n /** link target: true means _blank, false means _self */\n @Prop()\n targetBlank?: boolean;\n\n /** if true, the mobile logo is displayed, otherwise the desktop one */\n @Prop()\n mobileLogo?: boolean;\n\n render(): HTMLZLogoElement {\n const style = {};\n\n if (this.width) {\n style[\"width\"] = style[\"max-width\"] = `${this.width}px`;\n }\n\n if (this.height) {\n style[\"height\"] = style[\"max-height\"] = `${this.height}px`;\n }\n\n return (\n <Host\n style={style}\n class={{mobile: !!this.mobileLogo}}\n >\n {this.link ? (\n <a\n href={this.link}\n target={this.targetBlank ? \"_blank\" : \"_self\"}\n >\n <img alt={this.imageAlt} />\n </a>\n ) : (\n <img alt={this.imageAlt} />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,m5I,MCOXC,EAAKC,EAAA,MAAAD,UAAAE,E,iFAyBhB,MAAAC,GACE,MAAMC,EAAQ,GAEd,GAAIC,KAAKC,MAAO,CACdF,EAAM,SAAWA,EAAM,aAAe,GAAGC,KAAKC,S,CAGhD,GAAID,KAAKE,OAAQ,CACfH,EAAM,UAAYA,EAAM,cAAgB,GAAGC,KAAKE,U,CAGlD,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHN,MAAOA,EACPO,MAAO,CAACC,SAAUP,KAAKQ,aAEtBR,KAAKS,KACJN,EAAA,KACEO,KAAMV,KAAKS,KACXE,OAAQX,KAAKY,YAAc,SAAW,SAEtCT,EAAA,OAAKU,IAAKb,KAAKc,YAGjBX,EAAA,OAAKU,IAAKb,KAAKc,W","ignoreList":[]}
1
+ {"version":3,"names":["stylesCss","ZLogo","__stencil_proxyCustomElement","HTMLElement","render","style","this","width","height","h","Host","key","class","mobile","mobileLogo","link","href","target","targetBlank","alt","imageAlt"],"sources":["src/components/z-logo/styles.css?tag=z-logo&encapsulation=shadow","src/components/z-logo/index.tsx"],"sourcesContent":[":host {\n display: inline-block;\n width: 255px;\n height: 64px;\n vertical-align: top;\n}\n\nimg {\n display: block;\n width: 100%;\n height: 100%;\n margin: auto;\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n\na {\n display: block;\n width: 100%;\n height: 100%;\n}\n\na:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(.mobile) {\n width: 31px;\n height: 40px;\n}\n\n:host(.mobile) img {\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n tag: \"z-logo\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZLogo implements ComponentInterface {\n /** image width */\n @Prop()\n width?: number;\n\n /** image height */\n @Prop()\n height?: number;\n\n /** alternative image text */\n @Prop()\n imageAlt?: string;\n\n /** link url (optional) */\n @Prop()\n link?: string;\n\n /** link target: true means _blank, false means _self */\n @Prop()\n targetBlank?: boolean;\n\n /** if true, the mobile logo is displayed, otherwise the desktop one */\n @Prop()\n mobileLogo?: boolean;\n\n render(): HTMLZLogoElement {\n const style = {};\n\n if (this.width) {\n style[\"width\"] = style[\"max-width\"] = `${this.width}px`;\n }\n\n if (this.height) {\n style[\"height\"] = style[\"max-height\"] = `${this.height}px`;\n }\n\n return (\n <Host\n style={style}\n class={{mobile: !!this.mobileLogo}}\n >\n {this.link ? (\n <a\n href={this.link}\n target={this.targetBlank ? \"_blank\" : \"_self\"}\n >\n <img alt={this.imageAlt} />\n </a>\n ) : (\n <img alt={this.imageAlt} />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAY,IAAM,m5I,MCOXC,EAAKC,EAAA,MAAAD,UAAAE,E,iFAyBhB,MAAAC,GACE,MAAMC,EAAQ,GAEd,GAAIC,KAAKC,MAAO,CACdF,EAAM,SAAWA,EAAM,aAAe,GAAGC,KAAKC,S,CAGhD,GAAID,KAAKE,OAAQ,CACfH,EAAM,UAAYA,EAAM,cAAgB,GAAGC,KAAKE,U,CAGlD,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHN,MAAOA,EACPO,MAAO,CAACC,SAAUP,KAAKQ,aAEtBR,KAAKS,KACJN,EAAA,KACEO,KAAMV,KAAKS,KACXE,OAAQX,KAAKY,YAAc,SAAW,SAEtCT,EAAA,OAAKU,IAAKb,KAAKc,YAGjBX,EAAA,OAAKU,IAAKb,KAAKc,W","ignoreList":[]}
package/dist/components/z-menu-section.js CHANGED
@@ -1,2 +1,2 @@
1
- import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as o,transformTag as n}from"@stencil/core/internal/client";import{g as a}from"./index2.js";import{d as l}from"./index3.js";const h=()=>`:host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-primary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items[hidden]{display:none}::slotted([slot="section"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot="section"]:last-of-type){border:none}::slotted([slot="section"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}::slotted([slot="section"]:hover),::slotted([slot="section"]:focus:focus-visible),::slotted([slot="section"]:active),::slotted([slot="section"][active]),::slotted([slot="section"][data-active]){color:var(--color-primary01);font-weight:var(--font-bd)}`;const c=t(class t extends e{get focusableItem(){return this.items.find((({tabIndex:t})=>t===0))}toggle(){if(!this.hasItems){return}this.open=!this.open}setItemsA11yAttrs(){if(!this.hasItems){return}this.items.forEach((t=>{t.setAttribute("role","menuitem");t.tabIndex=-1}))}onItemsChange(){this.items=Array.from(this.host.querySelectorAll('[slot="section"]'));this.hasItems=this.items.length>0;this.setItemsA11yAttrs()}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null||e===void 0?void 0:e.textContent}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===a.ENTER||t.key===a.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.focustFirstItem()}}}moveFocus(t,e){t.tabIndex=0;setTimeout((()=>{t.focus()}),100);if(e){e.tabIndex=-1}}focustFirstItem(){this.moveFocus(this.items[0])}async focusLastItem(){this.moveFocus(this.items[this.items.length-1])}async setFocus(){this.htmlTabindex=0;setTimeout((()=>{this.label.focus()}),100)}onOpenChange(){if(!this.open){this.setItemsA11yAttrs();this.closed.emit()}else{this.opened.emit()}}onTabindexChange(){if(!this.label){return}this.label.tabIndex=this.htmlTabindex}onItemsKeydown(t){switch(t.key){case a.ESC:case a.ARROW_LEFT:if(!this.open){break}t.preventDefault();t.stopPropagation();this.moveFocus(this.label,this.focusableItem);this.open=false;break;case a.ARROW_RIGHT:if(this.open){break}t.preventDefault();t.stopPropagation();this.open=true;this.focustFirstItem();break;case a.ARROW_DOWN:{if(!this.open){break}if(document.activeElement===this.host){t.preventDefault();t.stopPropagation();this.focustFirstItem();break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e+1];if(s){t.preventDefault();t.stopPropagation();this.moveFocus(s,this.focusableItem)}else{this.htmlTabindex=0;this.focusableItem.tabIndex=-1}break}case a.ARROW_UP:{if(!this.open||document.activeElement===this.host){break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e-1];t.preventDefault();t.stopPropagation();if(s){this.moveFocus(s,this.focusableItem)}else{this.focusableItem.tabIndex=-1;this.setFocus()}break}}}constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.opened=s(this,"opened",7);this.closed=s(this,"closed",7);this.htmlTabindex=-1;this.toggle=this.toggle.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this);this.onItemsKeydown=this.onItemsKeydown.bind(this)}connectedCallback(){this.onItemsChange()}render(){return i(o,{key:"22251fd530b23b2bcabfeee25fd9d525696eb23d",open:this.open},i("button",{key:"381c6d7d638b20ea8cf4fb5d5a64354266ee6db3",ref:t=>this.label=t,class:"label","aria-haspopup":`${!!this.hasItems}`,"aria-expanded":`${!!this.open}`,role:"menuitem",tabindex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},i("slot",{key:"fa5d3c3b8f230b097fa0da8c6f581820fb6c9a50",onSlotchange:this.onLabelSlotChange}),this.hasItems&&i("z-icon",{key:"5721d485f8001b61ad4a10c08132b505d0046973",name:this.open?"chevron-up":"chevron-down"})),i("div",{key:"01a2ccb8a2aa0f091b5848e56432de608980fab6",class:"items",role:"menu",hidden:!this.open},i("slot",{key:"14e0d5acc5fd958bb2beb8f0dca166e2fe239e8c",name:"section",onSlotchange:this.onItemsChange})))}get host(){return this}static get watchers(){return{open:[{onOpenChange:0}],htmlTabindex:[{onTabindexChange:0}]}}static get style(){return h()}},[257,"z-menu-section",{active:[516],htmlTabindex:[2,"html-tabindex"],open:[1028],hasItems:[32],items:[32],focusLastItem:[64],setFocus:[64]},[[0,"keydown","onItemsKeydown"]],{open:[{onOpenChange:0}],htmlTabindex:[{onTabindexChange:0}]}]);function r(){if(typeof customElements==="undefined"){return}const t=["z-menu-section","z-icon"];t.forEach((t=>{switch(t){case"z-menu-section":if(!customElements.get(n(t))){customElements.define(n(t),c)}break;case"z-icon":if(!customElements.get(n(t))){l()}break}}))}const d=c;const f=r;export{d as ZMenuSection,f as defineCustomElement};
1
+ import{p as t,H as e,c as s,h as i,d as o,t as n}from"./p-RmbDDbWd.js";import{g as a}from"./p-DdetsoIY.js";import{d as l}from"./p-CbXEdwLi.js";const h=()=>`:host{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.label{display:flex;width:100%;align-items:center;padding:var(--space-unit) 0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface03);margin:0;background:transparent;border-radius:0;cursor:pointer;text-align:left}:host(:last-child:not([open])) .label{border-bottom:none}:host(:is([active],[open])) .label,.label:focus:focus-visible,.label:hover{border-color:var(--color-primary01)}.label:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host(:is([active],[open])) .label ::slotted(*),.label:focus:focus-visible ::slotted(*),.label:hover ::slotted(*){font-weight:var(--font-bd)}::slotted([data-text]){display:inline-flex;flex-direction:column}::slotted([data-text])::after{overflow:hidden;height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text])::after{display:none}}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.items{display:flex;width:100%;flex-direction:column;padding:calc(var(--space-unit) / 2);padding-bottom:calc(var(--space-unit) * 1.5)}.items[hidden]{display:none}::slotted([slot="section"]){display:inline-flex;padding:calc(var(--space-unit) / 2);margin:0;font-size:var(--font-size-1);line-height:1.333;outline:none}::slotted([slot="section"]:last-of-type){border:none}::slotted([slot="section"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-primary01)}::slotted([slot="section"]:hover),::slotted([slot="section"]:focus:focus-visible),::slotted([slot="section"]:active),::slotted([slot="section"][active]),::slotted([slot="section"][data-active]){color:var(--color-primary01);font-weight:var(--font-bd)}`;const c=t(class t extends e{get focusableItem(){return this.items.find((({tabIndex:t})=>t===0))}toggle(){if(!this.hasItems){return}this.open=!this.open}setItemsA11yAttrs(){if(!this.hasItems){return}this.items.forEach((t=>{t.setAttribute("role","menuitem");t.tabIndex=-1}))}onItemsChange(){this.items=Array.from(this.host.querySelectorAll('[slot="section"]'));this.hasItems=this.items.length>0;this.setItemsA11yAttrs()}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null||e===void 0?void 0:e.textContent}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===a.ENTER||t.key===a.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.focustFirstItem()}}}moveFocus(t,e){t.tabIndex=0;setTimeout((()=>{t.focus()}),100);if(e){e.tabIndex=-1}}focustFirstItem(){this.moveFocus(this.items[0])}async focusLastItem(){this.moveFocus(this.items[this.items.length-1])}async setFocus(){this.htmlTabindex=0;setTimeout((()=>{this.label.focus()}),100)}onOpenChange(){if(!this.open){this.setItemsA11yAttrs();this.closed.emit()}else{this.opened.emit()}}onTabindexChange(){if(!this.label){return}this.label.tabIndex=this.htmlTabindex}onItemsKeydown(t){switch(t.key){case a.ESC:case a.ARROW_LEFT:if(!this.open){break}t.preventDefault();t.stopPropagation();this.moveFocus(this.label,this.focusableItem);this.open=false;break;case a.ARROW_RIGHT:if(this.open){break}t.preventDefault();t.stopPropagation();this.open=true;this.focustFirstItem();break;case a.ARROW_DOWN:{if(!this.open){break}if(document.activeElement===this.host){t.preventDefault();t.stopPropagation();this.focustFirstItem();break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e+1];if(s){t.preventDefault();t.stopPropagation();this.moveFocus(s,this.focusableItem)}else{this.htmlTabindex=0;this.focusableItem.tabIndex=-1}break}case a.ARROW_UP:{if(!this.open||document.activeElement===this.host){break}const e=this.items.indexOf(this.focusableItem);const s=this.items[e-1];t.preventDefault();t.stopPropagation();if(s){this.moveFocus(s,this.focusableItem)}else{this.focusableItem.tabIndex=-1;this.setFocus()}break}}}constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.opened=s(this,"opened",7);this.closed=s(this,"closed",7);this.htmlTabindex=-1;this.toggle=this.toggle.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this);this.onItemsKeydown=this.onItemsKeydown.bind(this)}connectedCallback(){this.onItemsChange()}render(){return i(o,{key:"22251fd530b23b2bcabfeee25fd9d525696eb23d",open:this.open},i("button",{key:"381c6d7d638b20ea8cf4fb5d5a64354266ee6db3",ref:t=>this.label=t,class:"label","aria-haspopup":`${!!this.hasItems}`,"aria-expanded":`${!!this.open}`,role:"menuitem",tabindex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},i("slot",{key:"fa5d3c3b8f230b097fa0da8c6f581820fb6c9a50",onSlotchange:this.onLabelSlotChange}),this.hasItems&&i("z-icon",{key:"5721d485f8001b61ad4a10c08132b505d0046973",name:this.open?"chevron-up":"chevron-down"})),i("div",{key:"01a2ccb8a2aa0f091b5848e56432de608980fab6",class:"items",role:"menu",hidden:!this.open},i("slot",{key:"14e0d5acc5fd958bb2beb8f0dca166e2fe239e8c",name:"section",onSlotchange:this.onItemsChange})))}get host(){return this}static get watchers(){return{open:[{onOpenChange:0}],htmlTabindex:[{onTabindexChange:0}]}}static get style(){return h()}},[257,"z-menu-section",{active:[516],htmlTabindex:[2,"html-tabindex"],open:[1028],hasItems:[32],items:[32],focusLastItem:[64],setFocus:[64]},[[0,"keydown","onItemsKeydown"]],{open:[{onOpenChange:0}],htmlTabindex:[{onTabindexChange:0}]}]);function r(){if(typeof customElements==="undefined"){return}const t=["z-menu-section","z-icon"];t.forEach((t=>{switch(t){case"z-menu-section":if(!customElements.get(n(t))){customElements.define(n(t),c)}break;case"z-icon":if(!customElements.get(n(t))){l()}break}}))}const d=c;const f=r;export{d as ZMenuSection,f as defineCustomElement};
2
2
  //# sourceMappingURL=z-menu-section.js.map
package/dist/components/z-menu-section.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["stylesCss","ZMenuSection","__stencil_proxyCustomElement","HTMLElement","focusableItem","this","items","find","tabIndex","toggle","hasItems","open","setItemsA11yAttrs","forEach","item","setAttribute","onItemsChange","Array","from","host","querySelectorAll","length","onLabelSlotChange","ev","labelElement","target","assignedElements","dataset","text","textContent","onLabelClick","setFocus","onLabelKeydown","key","KeyboardCode","ENTER","SPACE","preventDefault","stopPropagation","focustFirstItem","moveFocus","receiver","current","setTimeout","focus","focusLastItem","htmlTabindex","label","onOpenChange","closed","emit","opened","onTabindexChange","onItemsKeydown","ESC","ARROW_LEFT","ARROW_RIGHT","ARROW_DOWN","document","activeElement","currentIndex","indexOf","ARROW_UP","constructor","registerHost","bind","connectedCallback","render","h","Host","ref","el","class","role","tabindex","onClick","onKeyDown","onSlotchange","name","hidden"],"sources":["src/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/z-menu-section/index.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0;\n font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n box-sizing: border-box;\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted(*) {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.label {\n display: flex;\n width: 100%;\n align-items: center;\n padding: var(--space-unit) 0;\n border: 0;\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n margin: 0;\n background: transparent;\n border-radius: 0;\n cursor: pointer;\n text-align: left;\n}\n\n:host(:last-child:not([open])) .label {\n border-bottom: none;\n}\n\n:host(:is([active], [open])) .label,\n.label:focus:focus-visible,\n.label:hover {\n border-color: var(--color-primary01);\n}\n\n.label:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n font-weight: var(--font-bd);\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n overflow: hidden;\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n.label ::slotted(*) {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.5;\n}\n\n.label z-icon {\n margin-left: calc(var(--space-unit) * 4);\n fill: var(--color-default-icon);\n}\n\n.items {\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: calc(var(--space-unit) / 2);\n padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items[hidden] {\n display: none;\n}\n\n::slotted([slot=\"section\"]) {\n display: inline-flex;\n padding: calc(var(--space-unit) / 2);\n margin: 0;\n font-size: var(--font-size-1);\n line-height: 1.333;\n outline: none;\n}\n\n::slotted([slot=\"section\"]:last-of-type) {\n border: none;\n}\n\n::slotted([slot=\"section\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n color: var(--color-primary01);\n}\n\n::slotted([slot=\"section\"]:hover),\n::slotted([slot=\"section\"]:focus:focus-visible),\n::slotted([slot=\"section\"]:active),\n::slotted([slot=\"section\"][active]),\n::slotted([slot=\"section\"][data-active]) {\n color: var(--color-primary01);\n font-weight: var(--font-bd);\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `data-active` attribute to a slotted element to highlight it (`active` also works but `data-active` is preferable).\n */\n@Component({\n tag: \"z-menu-section\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenuSection implements ComponentInterface {\n @Element() host: HTMLZMenuSectionElement;\n\n /** Active state */\n @Prop({reflect: true})\n active?: boolean;\n\n /**\n * Tabindex value to set on the label button.\n * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\n */\n @Prop()\n htmlTabindex = -1;\n\n /** The opening state of the section. */\n @Prop({mutable: true})\n open: boolean;\n\n @State()\n hasItems: boolean;\n\n @State()\n items: HTMLElement[];\n\n /** The section has been opened. */\n @Event()\n opened: EventEmitter;\n\n /** The section has been closed. */\n @Event()\n closed: EventEmitter;\n\n private label: HTMLButtonElement;\n\n private get focusableItem(): HTMLElement {\n return this.items.find(({tabIndex}) => tabIndex === 0);\n }\n\n private toggle(): void {\n if (!this.hasItems) {\n return;\n }\n\n this.open = !this.open;\n }\n\n private setItemsA11yAttrs(): void {\n if (!this.hasItems) {\n return;\n }\n\n this.items.forEach((item) => {\n item.setAttribute(\"role\", \"menuitem\");\n item.tabIndex = -1;\n });\n }\n\n private onItemsChange(): void {\n this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n this.hasItems = this.items.length > 0;\n this.setItemsA11yAttrs();\n }\n\n /**\n * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n * @param ev Slotchange event\n */\n private onLabelSlotChange(ev: Event): void {\n const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n labelElement.dataset.text = labelElement?.textContent;\n }\n\n private onLabelClick(): void {\n this.toggle();\n this.setFocus();\n }\n\n private onLabelKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n ev.stopPropagation();\n this.toggle();\n if (this.open) {\n this.focustFirstItem();\n }\n }\n }\n\n /**\n * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n */\n private moveFocus(receiver: HTMLElement, current?: HTMLElement): void {\n receiver.tabIndex = 0;\n setTimeout(() => {\n receiver.focus();\n }, 100);\n if (current) {\n current.tabIndex = -1;\n }\n }\n\n private focustFirstItem(): void {\n this.moveFocus(this.items[0]);\n }\n\n /** Focus the last item. */\n @Method()\n async focusLastItem(): Promise<void> {\n this.moveFocus(this.items[this.items.length - 1]);\n }\n\n /** Set tabindex of the label to 0, then focus it. */\n @Method()\n async setFocus(): Promise<void> {\n this.htmlTabindex = 0;\n setTimeout(() => {\n this.label.focus();\n }, 100);\n }\n\n @Watch(\"open\")\n onOpenChange(): void {\n if (!this.open) {\n this.setItemsA11yAttrs();\n this.closed.emit();\n } else {\n this.opened.emit();\n }\n }\n\n @Watch(\"htmlTabindex\")\n onTabindexChange(): void {\n if (!this.label) {\n return;\n }\n\n this.label.tabIndex = this.htmlTabindex;\n }\n\n @Listen(\"keydown\")\n private onItemsKeydown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case KeyboardCode.ESC:\n case KeyboardCode.ARROW_LEFT:\n if (!this.open) {\n break;\n }\n ev.preventDefault();\n ev.stopPropagation();\n this.moveFocus(this.label, this.focusableItem);\n this.open = false;\n break;\n case KeyboardCode.ARROW_RIGHT:\n if (this.open) {\n break;\n }\n ev.preventDefault();\n ev.stopPropagation();\n this.open = true;\n this.focustFirstItem();\n break;\n case KeyboardCode.ARROW_DOWN: {\n if (!this.open) {\n break;\n }\n if (document.activeElement === this.host) {\n ev.preventDefault();\n ev.stopPropagation();\n this.focustFirstItem();\n break;\n }\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex + 1];\n if (receiver) {\n ev.preventDefault();\n ev.stopPropagation();\n this.moveFocus(receiver, this.focusableItem);\n } else {\n this.htmlTabindex = 0;\n this.focusableItem.tabIndex = -1;\n }\n break;\n }\n case KeyboardCode.ARROW_UP: {\n if (!this.open || document.activeElement === this.host) {\n break;\n }\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex - 1];\n ev.preventDefault();\n ev.stopPropagation();\n if (receiver) {\n this.moveFocus(receiver, this.focusableItem);\n } else {\n // since there isn't a previous item to focus, give the focus to the label element\n this.focusableItem.tabIndex = -1;\n this.setFocus();\n }\n break;\n }\n }\n }\n\n constructor() {\n this.toggle = this.toggle.bind(this);\n this.onItemsChange = this.onItemsChange.bind(this);\n this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n this.onLabelClick = this.onLabelClick.bind(this);\n this.onLabelKeydown = this.onLabelKeydown.bind(this);\n this.onItemsKeydown = this.onItemsKeydown.bind(this);\n }\n\n connectedCallback(): void {\n this.onItemsChange();\n }\n\n render(): HTMLZMenuSectionElement {\n return (\n <Host open={this.open}>\n <button\n ref={(el) => (this.label = el)}\n class=\"label\"\n aria-haspopup={`${!!this.hasItems}`}\n aria-expanded={`${!!this.open}`}\n role=\"menuitem\"\n tabindex={this.htmlTabindex}\n onClick={this.onLabelClick}\n onKeyDown={this.onLabelKeydown}\n >\n <slot onSlotchange={this.onLabelSlotChange} />\n {this.hasItems && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n </button>\n <div\n class=\"items\"\n role=\"menu\"\n hidden={!this.open}\n >\n <slot\n name=\"section\"\n onSlotchange={this.onItemsChange}\n />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"names":["stylesCss","ZMenuSection","__stencil_proxyCustomElement","HTMLElement","focusableItem","this","items","find","tabIndex","toggle","hasItems","open","setItemsA11yAttrs","forEach","item","setAttribute","onItemsChange","Array","from","host","querySelectorAll","length","onLabelSlotChange","ev","labelElement","target","assignedElements","dataset","text","textContent","onLabelClick","setFocus","onLabelKeydown","key","KeyboardCode","ENTER","SPACE","preventDefault","stopPropagation","focustFirstItem","moveFocus","receiver","current","setTimeout","focus","focusLastItem","htmlTabindex","label","onOpenChange","closed","emit","opened","onTabindexChange","onItemsKeydown","ESC","ARROW_LEFT","ARROW_RIGHT","ARROW_DOWN","document","activeElement","currentIndex","indexOf","ARROW_UP","constructor","registerHost","bind","connectedCallback","render","h","Host","ref","el","class","role","tabindex","onClick","onKeyDown","onSlotchange","name","hidden"],"sources":["src/components/z-menu-section/styles.css?tag=z-menu-section&encapsulation=shadow","src/components/z-menu-section/index.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 0;\n font-family: var(--font-family-sans);\n}\n\n:host,\n::slotted(*),\n* {\n box-sizing: border-box;\n}\n\n::slotted(a) {\n text-decoration: none;\n}\n\n::slotted(*) {\n color: var(--color-default-text);\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n}\n\n.label {\n display: flex;\n width: 100%;\n align-items: center;\n padding: var(--space-unit) 0;\n border: 0;\n border-bottom: var(--border-size-small) solid var(--color-surface03);\n margin: 0;\n background: transparent;\n border-radius: 0;\n cursor: pointer;\n text-align: left;\n}\n\n:host(:last-child:not([open])) .label {\n border-bottom: none;\n}\n\n:host(:is([active], [open])) .label,\n.label:focus:focus-visible,\n.label:hover {\n border-color: var(--color-primary01);\n}\n\n.label:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:is([active], [open])) .label ::slotted(*),\n.label:focus:focus-visible ::slotted(*),\n.label:hover ::slotted(*) {\n font-weight: var(--font-bd);\n}\n\n::slotted([data-text]) {\n display: inline-flex;\n flex-direction: column;\n}\n\n/* Trick to prevent layout shifts on font-weight changes.\nThe trick is to put an hidden copy of the text already set to bold,\nso the needed space is correctly calculated before any hover/active state changes the\nfont-weight of the real text.\nThe hidden text has an height of 0px so it can expand the width without changing the height\nwhen placed below the real text using `flex-direction: column`. */\n::slotted([data-text])::after {\n overflow: hidden;\n height: 0;\n content: attr(data-text);\n content: attr(data-text) / \"\";\n font-weight: var(--font-bd);\n pointer-events: none;\n user-select: none;\n visibility: hidden;\n}\n\n@media speech {\n ::slotted([data-text])::after {\n display: none;\n }\n}\n\n.label ::slotted(*) {\n width: 100%;\n margin: 0;\n font-size: var(--font-size-3);\n line-height: 1.5;\n}\n\n.label z-icon {\n margin-left: calc(var(--space-unit) * 4);\n fill: var(--color-default-icon);\n}\n\n.items {\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: calc(var(--space-unit) / 2);\n padding-bottom: calc(var(--space-unit) * 1.5);\n}\n\n.items[hidden] {\n display: none;\n}\n\n::slotted([slot=\"section\"]) {\n display: inline-flex;\n padding: calc(var(--space-unit) / 2);\n margin: 0;\n font-size: var(--font-size-1);\n line-height: 1.333;\n outline: none;\n}\n\n::slotted([slot=\"section\"]:last-of-type) {\n border: none;\n}\n\n::slotted([slot=\"section\"]:focus:focus-visible) {\n box-shadow: var(--shadow-focus-primary);\n color: var(--color-primary01);\n}\n\n::slotted([slot=\"section\"]:hover),\n::slotted([slot=\"section\"]:focus:focus-visible),\n::slotted([slot=\"section\"]:active),\n::slotted([slot=\"section\"][active]),\n::slotted([slot=\"section\"][data-active]) {\n color: var(--color-primary01);\n font-weight: var(--font-bd);\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {KeyboardCode} from \"../../beans\";\n\n/**\n * A component to create submenus inside the ZMenu.\n * @slot - Label of the menu section.\n * @slot section - Single entry of the menu section. Set the same slot name to different elements to put many of them. Add the `data-active` attribute to a slotted element to highlight it (`active` also works but `data-active` is preferable).\n */\n@Component({\n tag: \"z-menu-section\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZMenuSection implements ComponentInterface {\n @Element() host: HTMLZMenuSectionElement;\n\n /** Active state */\n @Prop({reflect: true})\n active?: boolean;\n\n /**\n * Tabindex value to set on the label button.\n * Useful to manage keyboard navigation focus with roving tabindex handled by this component's parent (usually ZMenu).\n */\n @Prop()\n htmlTabindex = -1;\n\n /** The opening state of the section. */\n @Prop({mutable: true})\n open: boolean;\n\n @State()\n hasItems: boolean;\n\n @State()\n items: HTMLElement[];\n\n /** The section has been opened. */\n @Event()\n opened: EventEmitter;\n\n /** The section has been closed. */\n @Event()\n closed: EventEmitter;\n\n private label: HTMLButtonElement;\n\n private get focusableItem(): HTMLElement {\n return this.items.find(({tabIndex}) => tabIndex === 0);\n }\n\n private toggle(): void {\n if (!this.hasItems) {\n return;\n }\n\n this.open = !this.open;\n }\n\n private setItemsA11yAttrs(): void {\n if (!this.hasItems) {\n return;\n }\n\n this.items.forEach((item) => {\n item.setAttribute(\"role\", \"menuitem\");\n item.tabIndex = -1;\n });\n }\n\n private onItemsChange(): void {\n this.items = Array.from(this.host.querySelectorAll('[slot=\"section\"]')) as HTMLElement[];\n this.hasItems = this.items.length > 0;\n this.setItemsA11yAttrs();\n }\n\n /**\n * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.\n * @param ev Slotchange event\n */\n private onLabelSlotChange(ev: Event): void {\n const labelElement = (ev.target as HTMLSlotElement).assignedElements()[0] as HTMLElement;\n labelElement.dataset.text = labelElement?.textContent;\n }\n\n private onLabelClick(): void {\n this.toggle();\n this.setFocus();\n }\n\n private onLabelKeydown(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.ENTER || ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n ev.stopPropagation();\n this.toggle();\n if (this.open) {\n this.focustFirstItem();\n }\n }\n }\n\n /**\n * Move focus and adjust the tabindex value of `receiver` and `current` elements,\n * setting -1 to the `current` and 0 to the `receiver`, then focus the `receiver` element.\n */\n private moveFocus(receiver: HTMLElement, current?: HTMLElement): void {\n receiver.tabIndex = 0;\n setTimeout(() => {\n receiver.focus();\n }, 100);\n if (current) {\n current.tabIndex = -1;\n }\n }\n\n private focustFirstItem(): void {\n this.moveFocus(this.items[0]);\n }\n\n /** Focus the last item. */\n @Method()\n async focusLastItem(): Promise<void> {\n this.moveFocus(this.items[this.items.length - 1]);\n }\n\n /** Set tabindex of the label to 0, then focus it. */\n @Method()\n async setFocus(): Promise<void> {\n this.htmlTabindex = 0;\n setTimeout(() => {\n this.label.focus();\n }, 100);\n }\n\n @Watch(\"open\")\n onOpenChange(): void {\n if (!this.open) {\n this.setItemsA11yAttrs();\n this.closed.emit();\n } else {\n this.opened.emit();\n }\n }\n\n @Watch(\"htmlTabindex\")\n onTabindexChange(): void {\n if (!this.label) {\n return;\n }\n\n this.label.tabIndex = this.htmlTabindex;\n }\n\n @Listen(\"keydown\")\n private onItemsKeydown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case KeyboardCode.ESC:\n case KeyboardCode.ARROW_LEFT:\n if (!this.open) {\n break;\n }\n ev.preventDefault();\n ev.stopPropagation();\n this.moveFocus(this.label, this.focusableItem);\n this.open = false;\n break;\n case KeyboardCode.ARROW_RIGHT:\n if (this.open) {\n break;\n }\n ev.preventDefault();\n ev.stopPropagation();\n this.open = true;\n this.focustFirstItem();\n break;\n case KeyboardCode.ARROW_DOWN: {\n if (!this.open) {\n break;\n }\n if (document.activeElement === this.host) {\n ev.preventDefault();\n ev.stopPropagation();\n this.focustFirstItem();\n break;\n }\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex + 1];\n if (receiver) {\n ev.preventDefault();\n ev.stopPropagation();\n this.moveFocus(receiver, this.focusableItem);\n } else {\n this.htmlTabindex = 0;\n this.focusableItem.tabIndex = -1;\n }\n break;\n }\n case KeyboardCode.ARROW_UP: {\n if (!this.open || document.activeElement === this.host) {\n break;\n }\n const currentIndex = this.items.indexOf(this.focusableItem);\n const receiver = this.items[currentIndex - 1];\n ev.preventDefault();\n ev.stopPropagation();\n if (receiver) {\n this.moveFocus(receiver, this.focusableItem);\n } else {\n // since there isn't a previous item to focus, give the focus to the label element\n this.focusableItem.tabIndex = -1;\n this.setFocus();\n }\n break;\n }\n }\n }\n\n constructor() {\n this.toggle = this.toggle.bind(this);\n this.onItemsChange = this.onItemsChange.bind(this);\n this.onLabelSlotChange = this.onLabelSlotChange.bind(this);\n this.onLabelClick = this.onLabelClick.bind(this);\n this.onLabelKeydown = this.onLabelKeydown.bind(this);\n this.onItemsKeydown = this.onItemsKeydown.bind(this);\n }\n\n connectedCallback(): void {\n this.onItemsChange();\n }\n\n render(): HTMLZMenuSectionElement {\n return (\n <Host open={this.open}>\n <button\n ref={(el) => (this.label = el)}\n class=\"label\"\n aria-haspopup={`${!!this.hasItems}`}\n aria-expanded={`${!!this.open}`}\n role=\"menuitem\"\n tabindex={this.htmlTabindex}\n onClick={this.onLabelClick}\n onKeyDown={this.onLabelKeydown}\n >\n <slot onSlotchange={this.onLabelSlotChange} />\n {this.hasItems && <z-icon name={this.open ? \"chevron-up\" : \"chevron-down\"} />}\n </button>\n <div\n class=\"items\"\n role=\"menu\"\n hidden={!this.open}\n >\n <slot\n name=\"section\"\n onSlotchange={this.onItemsChange}\n />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"+IAAA,MAAMA,EAAY,IAAM,gnE,MC0BXC,EAAYC,EAAA,MAAAD,UAAAE,EAkCvB,iBAAYC,GACV,OAAOC,KAAKC,MAAMC,MAAK,EAAEC,cAAcA,IAAa,G,CAG9C,MAAAC,GACN,IAAKJ,KAAKK,SAAU,CAClB,M,CAGFL,KAAKM,MAAQN,KAAKM,I,CAGZ,iBAAAC,GACN,IAAKP,KAAKK,SAAU,CAClB,M,CAGFL,KAAKC,MAAMO,SAASC,IAClBA,EAAKC,aAAa,OAAQ,YAC1BD,EAAKN,UAAW,CAAE,G,CAId,aAAAQ,GACNX,KAAKC,MAAQW,MAAMC,KAAKb,KAAKc,KAAKC,iBAAiB,qBACnDf,KAAKK,SAAWL,KAAKC,MAAMe,OAAS,EACpChB,KAAKO,mB,CAOC,iBAAAU,CAAkBC,GACxB,MAAMC,EAAgBD,EAAGE,OAA2BC,mBAAmB,GACvEF,EAAaG,QAAQC,KAAOJ,IAAY,MAAZA,SAAY,SAAZA,EAAcK,W,CAGpC,YAAAC,GACNzB,KAAKI,SACLJ,KAAK0B,U,CAGC,cAAAC,CAAeT,GACrB,GAAIA,EAAGU,MAAQC,EAAaC,OAASZ,EAAGU,MAAQC,EAAaE,MAAO,CAClEb,EAAGc,iBACHd,EAAGe,kBACHjC,KAAKI,SACL,GAAIJ,KAAKM,KAAM,CACbN,KAAKkC,iB,GASH,SAAAC,CAAUC,EAAuBC,GACvCD,EAASjC,SAAW,EACpBmC,YAAW,KACTF,EAASG,OAAO,GACf,KACH,GAAIF,EAAS,CACXA,EAAQlC,UAAW,C,EAIf,eAAA+B,GACNlC,KAAKmC,UAAUnC,KAAKC,MAAM,G,CAK5B,mBAAMuC,GACJxC,KAAKmC,UAAUnC,KAAKC,MAAMD,KAAKC,MAAMe,OAAS,G,CAKhD,cAAMU,GACJ1B,KAAKyC,aAAe,EACpBH,YAAW,KACTtC,KAAK0C,MAAMH,OAAO,GACjB,I,CAIL,YAAAI,GACE,IAAK3C,KAAKM,KAAM,CACdN,KAAKO,oBACLP,KAAK4C,OAAOC,M,KACP,CACL7C,KAAK8C,OAAOD,M,EAKhB,gBAAAE,GACE,IAAK/C,KAAK0C,MAAO,CACf,M,CAGF1C,KAAK0C,MAAMvC,SAAWH,KAAKyC,Y,CAIrB,cAAAO,CAAe9B,GACrB,OAAQA,EAAGU,KACT,KAAKC,EAAaoB,IAClB,KAAKpB,EAAaqB,WAChB,IAAKlD,KAAKM,KAAM,CACd,K,CAEFY,EAAGc,iBACHd,EAAGe,kBACHjC,KAAKmC,UAAUnC,KAAK0C,MAAO1C,KAAKD,eAChCC,KAAKM,KAAO,MACZ,MACF,KAAKuB,EAAasB,YAChB,GAAInD,KAAKM,KAAM,CACb,K,CAEFY,EAAGc,iBACHd,EAAGe,kBACHjC,KAAKM,KAAO,KACZN,KAAKkC,kBACL,MACF,KAAKL,EAAauB,WAAY,CAC5B,IAAKpD,KAAKM,KAAM,CACd,K,CAEF,GAAI+C,SAASC,gBAAkBtD,KAAKc,KAAM,CACxCI,EAAGc,iBACHd,EAAGe,kBACHjC,KAAKkC,kBACL,K,CAEF,MAAMqB,EAAevD,KAAKC,MAAMuD,QAAQxD,KAAKD,eAC7C,MAAMqC,EAAWpC,KAAKC,MAAMsD,EAAe,GAC3C,GAAInB,EAAU,CACZlB,EAAGc,iBACHd,EAAGe,kBACHjC,KAAKmC,UAAUC,EAAUpC,KAAKD,c,KACzB,CACLC,KAAKyC,aAAe,EACpBzC,KAAKD,cAAcI,UAAW,C,CAEhC,K,CAEF,KAAK0B,EAAa4B,SAAU,CAC1B,IAAKzD,KAAKM,MAAQ+C,SAASC,gBAAkBtD,KAAKc,KAAM,CACtD,K,CAEF,MAAMyC,EAAevD,KAAKC,MAAMuD,QAAQxD,KAAKD,eAC7C,MAAMqC,EAAWpC,KAAKC,MAAMsD,EAAe,GAC3CrC,EAAGc,iBACHd,EAAGe,kBACH,GAAIG,EAAU,CACZpC,KAAKmC,UAAUC,EAAUpC,KAAKD,c,KACzB,CAELC,KAAKD,cAAcI,UAAW,EAC9BH,KAAK0B,U,CAEP,K,GAKN,WAAAgC,CAAAC,G,gIAhMA3D,KAAAyC,cAAe,EAiMbzC,KAAKI,OAASJ,KAAKI,OAAOwD,KAAK5D,MAC/BA,KAAKW,cAAgBX,KAAKW,cAAciD,KAAK5D,MAC7CA,KAAKiB,kBAAoBjB,KAAKiB,kBAAkB2C,KAAK5D,MACrDA,KAAKyB,aAAezB,KAAKyB,aAAamC,KAAK5D,MAC3CA,KAAK2B,eAAiB3B,KAAK2B,eAAeiC,KAAK5D,MAC/CA,KAAKgD,eAAiBhD,KAAKgD,eAAeY,KAAK5D,KAChD,CAED,iBAAA6D,GACE7D,KAAKW,e,CAGP,MAAAmD,GACE,OACEC,EAACC,EAAI,CAAApC,IAAA,2CAACtB,KAAMN,KAAKM,MACfyD,EAAA,UAAAnC,IAAA,2CACEqC,IAAMC,GAAQlE,KAAK0C,MAAQwB,EAC3BC,MAAM,QAAO,gBACE,KAAKnE,KAAKK,WAAU,gBACpB,KAAKL,KAAKM,OACzB8D,KAAK,WACLC,SAAUrE,KAAKyC,aACf6B,QAAStE,KAAKyB,aACd8C,UAAWvE,KAAK2B,gBAEhBoC,EAAA,QAAAnC,IAAA,2CAAM4C,aAAcxE,KAAKiB,oBACxBjB,KAAKK,UAAY0D,EAAA,UAAAnC,IAAA,2CAAQ6C,KAAMzE,KAAKM,KAAO,aAAe,kBAE7DyD,EAAA,OAAAnC,IAAA,2CACEuC,MAAM,QACNC,KAAK,OACLM,QAAS1E,KAAKM,MAEdyD,EAAA,QAAAnC,IAAA,2CACE6C,KAAK,UACLD,aAAcxE,KAAKW,iB","ignoreList":[]}
package/dist/components/z-menu.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{g as a}from"./index2.js";import{a as l}from"./utils.js";import{d as r}from"./index3.js";const h=()=>`:host,::slotted(*),*{box-sizing:border-box;outline:none}:host{position:relative;display:inline-flex;height:fit-content;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;display:flex;width:100%;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-primary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:calc(var(--border-size-small) * -1);left:0;width:100%;height:var(--border-size-large);background-color:var(--color-primary01);content:""}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::slotted(*){display:inline-flex;width:100%;min-width:fit-content;padding-bottom:2px;margin:0;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::slotted([data-text]:not([slot]))::after{height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:inline-flex;flex-direction:column}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot="header"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot="header"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot="item"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot="item"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot="item"]:last-child){border-bottom:0}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"]:active),.items>::slotted([slot="item"][active]),.items>::slotted([slot="item"][data-active]){border-color:var(--color-primary01);font-weight:var(--font-bd)}`;const c=t=>(t===null||t===void 0?void 0:t.tagName)==="Z-MENU-SECTION";const d=t(class t extends e{get focusableItem(){return this.items.find((t=>c(t)?t.htmlTabindex===0:t.tabIndex===0))}toggle(){if(!this.hasContent){return}this.open=!this.open}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null||e===void 0?void 0:e.textContent;this.setLabelA11yAttrs()}reflow(t=false){if(!this.floating){return}if(this.content&&this.hasContent){const{style:t}=this.content;const{left:e}=this.host.getBoundingClientRect();const i=getComputedStyle(this.content).width;const s=i?parseFloat(i.replace("px","")):375;const o=30;t.left=`${Math.min(window.innerWidth-e-s-o,0)}px`}if(t){this.raf=requestAnimationFrame(this.reflow.bind(this,t))}}checkContent(){this.hasHeader=!!this.host.querySelectorAll("[slot=header]").length;this.hasContent=!!this.host.querySelectorAll("[slot=item]").length||this.hasHeader}setItemTabindex(t,e){if(c(t)){t.htmlTabindex=e}else{t.tabIndex=e}}setItemsA11yAttrs(){this.items.forEach(((t,e)=>{const i=e===0?0:-1;this.setItemTabindex(t,i);if(!c(t)){t.setAttribute("role","menuitem")}}))}onItemsChange(){this.checkContent();this.items=Array.from(this.host.children).filter((({slot:t})=>t==="item"));this.setItemsA11yAttrs();this.items.forEach((t=>{if(!c(t)){t.dataset.text=t.textContent}}))}moveFocus(t,e){if(c(t)){t.setFocus()}else{t.tabIndex=0;setTimeout((()=>{t.focus()}),100)}if(!e){return}this.setItemTabindex(e,-1)}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===a.ENTER||t.key===a.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.moveFocus(this.items[0])}return}if(!this.verticalContext){return}if(t.key===a.ARROW_RIGHT&&!this.open){t.preventDefault();t.stopPropagation();this.open=true;this.moveFocus(this.items[0])}}async setFocus(){this.htmlTabindex=0;const t=this.hasContent?this.labelButton:this.host.firstElementChild;t.focus()}async focusLastItem(){const t=this.items[this.items.length-1];if(c(t)&&t.open){t.focusLastItem();return}this.moveFocus(t)}onOpenChanged(){if(!this.open){cancelAnimationFrame(this.raf);this.closed.emit();this.items.forEach((t=>{if(c(t)&&t.open){t.open=false}}));return}this.setItemsA11yAttrs();this.opened.emit();if(this.floating){this.reflow(true)}}setLabelA11yAttrs(){if(this.hasContent&&this.labelButton){this.labelButton.tabIndex=this.htmlTabindex;return}const t=this.host.firstElementChild;t.role="menuitem";t.tabIndex=this.htmlTabindex}onItemClick(t){const e=this.items.find((e=>l(e,t.target)));if(e){this.items.forEach((t=>{if(t===e){return}if(c(t)){t.htmlTabindex=-1}else{t.tabIndex=-1}}))}}onKeyDown(t){var e;if(!this.hasContent){return}switch(t.key){case a.ESC:if(!this.open){break}t.stopPropagation();t.preventDefault();this.open=false;this.setFocus();break;case a.ARROW_DOWN:{if(document.activeElement===this.host){if(this.verticalContext&&!this.open){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[0]);break}const e=this.items.indexOf(this.focusableItem);if(this.verticalContext&&e===this.items.length-1){this.setItemTabindex(this.items[e],-1);this.htmlTabindex=0;break}t.stopPropagation();t.preventDefault();const i=this.items[e+1];this.moveFocus(i!==null&&i!==void 0?i:this.items[0],this.focusableItem);break}case a.ARROW_UP:{if(document.activeElement===this.host){if(this.verticalContext){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[this.items.length-1],this.focusableItem);break}t.stopPropagation();t.preventDefault();const i=this.items.indexOf(this.focusableItem);if(i===0&&this.verticalContext){this.setItemTabindex(this.focusableItem,-1);this.setFocus();break}const s=(e=this.items[i-1])!==null&&e!==void 0?e:this.items[this.items.length-1];if(c(s)&&s.open){this.setItemTabindex(this.focusableItem,-1);s.focusLastItem();break}this.moveFocus(s,this.focusableItem);break}case a.ARROW_LEFT:if(!this.open||!this.verticalContext){break}t.preventDefault();t.stopPropagation();this.open=false;this.setFocus()}}constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.opened=i(this,"opened",7);this.closed=i(this,"closed",7);this.floating=true;this.open=false;this.verticalContext=false;this.htmlTabindex=-1;this.items=[];this.toggle=this.toggle.bind(this);this.checkContent=this.checkContent.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this)}componentWillLoad(){this.setLabelA11yAttrs();this.onItemsChange()}render(){if(!this.hasContent){return s("div",{class:"menu-label"},s("slot",{onSlotchange:this.onLabelSlotChange}))}return s(o,null,s("button",{ref:t=>this.labelButton=t,class:"menu-label","aria-expanded":`${!!this.open}`,"aria-haspopup":`${this.hasContent}`,"aria-label":this.open?"Chiudi menù":"Apri menù",role:"menuitem",tabIndex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},s("slot",{onSlotchange:this.onLabelSlotChange}),s("z-icon",{name:this.open?"chevron-up":"chevron-down"})),s("div",{class:"content",ref:t=>this.content=t},this.hasHeader&&s("header",{class:"header"},s("slot",{name:"header",onSlotchange:this.checkContent})),s("div",{class:"items",role:"menu"},s("slot",{name:"item",onSlotchange:this.onItemsChange}))))}get host(){return this}static get watchers(){return{open:[{onOpenChanged:0}],htmlTabindex:[{setLabelA11yAttrs:0}]}}static get style(){return h()}},[257,"z-menu",{active:[516],floating:[516],open:[1540],verticalContext:[516,"vertical-context"],htmlTabindex:[1026,"html-tabindex"],hasHeader:[32],hasContent:[32],setFocus:[64],focusLastItem:[64]},[[4,"click","onItemClick"],[0,"keydown","onKeyDown"]],{open:[{onOpenChanged:0}],htmlTabindex:[{setLabelA11yAttrs:0}]}]);function m(){if(typeof customElements==="undefined"){return}const t=["z-menu","z-icon"];t.forEach((t=>{switch(t){case"z-menu":if(!customElements.get(n(t))){customElements.define(n(t),d)}break;case"z-icon":if(!customElements.get(n(t))){r()}break}}))}const f=d;const u=m;export{f as ZMenu,u as defineCustomElement};
1
+ import{p as t,H as e,c as i,h as s,d as o,t as n}from"./p-RmbDDbWd.js";import{g as a}from"./p-DdetsoIY.js";import{a as l}from"./p-8C_CrFxp.js";import{d as r}from"./p-CbXEdwLi.js";const h=()=>`:host,::slotted(*),*{box-sizing:border-box;outline:none}:host{position:relative;display:inline-flex;height:fit-content;flex-direction:column}::slotted(a){text-decoration:none}::slotted(*){color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{position:relative;display:flex;width:100%;align-items:center;padding:0;border:0;border-bottom:var(--border-size-large) solid transparent;margin:0;background:transparent;border-radius:0;color:inherit;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-visible,div.menu-label:focus-within{box-shadow:var(--shadow-focus-primary)}:host(:is([active],[open])) .menu-label ::slotted(*),.menu-label:focus-visible ::slotted(*),div.menu-label:focus-within ::slotted(*){color:var(--color-primary01);font-weight:var(--font-bd)}:host([vertical-context]) .menu-label{padding:var(--space-unit) 0;border-width:var(--border-size-small);border-color:var(--color-surface03)}:host(:is([active],[open])) .menu-label,.menu-label:hover,.menu-label:focus-visible,div.menu-label:focus-within{border-color:var(--color-primary01)}:host([vertical-context]:is([active],[open])) .menu-label::after,:host([vertical-context]) .menu-label:hover::after,:host([vertical-context]) .menu-label:focus-visible::after,:host([vertical-context]) div.menu-label:focus-within::after{position:absolute;bottom:calc(var(--border-size-small) * -1);left:0;width:100%;height:var(--border-size-large);background-color:var(--color-primary01);content:""}:host([vertical-context]) .menu-label ::slotted(*){padding:0}.menu-label ::slotted(*){display:inline-flex;width:100%;min-width:fit-content;padding-bottom:2px;margin:0;appearance:none;color:var(--z-menu-label-color, var(--color-default-text));font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:inherit;line-height:1.5;white-space:nowrap}.menu-label z-icon{margin-left:calc(var(--space-unit) * 1.5);fill:var(--color-default-icon)}::slotted([data-text]:not([slot]))::after{height:0;content:attr(data-text);content:attr(data-text) / "";font-weight:var(--font-bd);letter-spacing:normal;pointer-events:none;user-select:none;visibility:hidden}@media speech{::slotted([data-text]:not([slot]))::after{display:none}}::slotted([data-text]:not([slot])){display:inline-flex;flex-direction:column}.content{background:var(--color-surface01)}:host(:not([open])) .content{display:none}:host([floating]:not([vertical-context])) .content{position:absolute;top:100%;left:0;width:375px;min-width:100%;max-width:100vw;padding:0 calc(var(--space-unit) * 2);box-shadow:var(--shadow-2)}:host(:not([floating])) .content{width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot="header"]){width:calc(var(--space-unit) * 11.25);height:auto;object-fit:contain}.header ::slotted([slot="header"]:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot="item"]){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.5}.items>::slotted([slot="item"]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot="item"]:not(z-menu-section)){padding:var(--space-unit) 0;border-bottom:var(--border-size-small) solid var(--color-surface03)}:host(:not([vertical-context])) .items>::slotted([slot="item"]:last-child){border-bottom:0}.items>::slotted([slot="item"]:hover),.items>::slotted([slot="item"]:focus:focus-visible),.items>::slotted([slot="item"]:active),.items>::slotted([slot="item"][active]),.items>::slotted([slot="item"][data-active]){border-color:var(--color-primary01);font-weight:var(--font-bd)}`;const c=t=>(t===null||t===void 0?void 0:t.tagName)==="Z-MENU-SECTION";const d=t(class t extends e{get focusableItem(){return this.items.find((t=>c(t)?t.htmlTabindex===0:t.tabIndex===0))}toggle(){if(!this.hasContent){return}this.open=!this.open}onLabelSlotChange(t){const e=t.target.assignedElements()[0];e.dataset.text=e===null||e===void 0?void 0:e.textContent;this.setLabelA11yAttrs()}reflow(t=false){if(!this.floating){return}if(this.content&&this.hasContent){const{style:t}=this.content;const{left:e}=this.host.getBoundingClientRect();const i=getComputedStyle(this.content).width;const s=i?parseFloat(i.replace("px","")):375;const o=30;t.left=`${Math.min(window.innerWidth-e-s-o,0)}px`}if(t){this.raf=requestAnimationFrame(this.reflow.bind(this,t))}}checkContent(){this.hasHeader=!!this.host.querySelectorAll("[slot=header]").length;this.hasContent=!!this.host.querySelectorAll("[slot=item]").length||this.hasHeader}setItemTabindex(t,e){if(c(t)){t.htmlTabindex=e}else{t.tabIndex=e}}setItemsA11yAttrs(){this.items.forEach(((t,e)=>{const i=e===0?0:-1;this.setItemTabindex(t,i);if(!c(t)){t.setAttribute("role","menuitem")}}))}onItemsChange(){this.checkContent();this.items=Array.from(this.host.children).filter((({slot:t})=>t==="item"));this.setItemsA11yAttrs();this.items.forEach((t=>{if(!c(t)){t.dataset.text=t.textContent}}))}moveFocus(t,e){if(c(t)){t.setFocus()}else{t.tabIndex=0;setTimeout((()=>{t.focus()}),100)}if(!e){return}this.setItemTabindex(e,-1)}onLabelClick(){this.toggle();this.setFocus()}onLabelKeydown(t){if(t.key===a.ENTER||t.key===a.SPACE){t.preventDefault();t.stopPropagation();this.toggle();if(this.open){this.moveFocus(this.items[0])}return}if(!this.verticalContext){return}if(t.key===a.ARROW_RIGHT&&!this.open){t.preventDefault();t.stopPropagation();this.open=true;this.moveFocus(this.items[0])}}async setFocus(){this.htmlTabindex=0;const t=this.hasContent?this.labelButton:this.host.firstElementChild;t.focus()}async focusLastItem(){const t=this.items[this.items.length-1];if(c(t)&&t.open){t.focusLastItem();return}this.moveFocus(t)}onOpenChanged(){if(!this.open){cancelAnimationFrame(this.raf);this.closed.emit();this.items.forEach((t=>{if(c(t)&&t.open){t.open=false}}));return}this.setItemsA11yAttrs();this.opened.emit();if(this.floating){this.reflow(true)}}setLabelA11yAttrs(){if(this.hasContent&&this.labelButton){this.labelButton.tabIndex=this.htmlTabindex;return}const t=this.host.firstElementChild;t.role="menuitem";t.tabIndex=this.htmlTabindex}onItemClick(t){const e=this.items.find((e=>l(e,t.target)));if(e){this.items.forEach((t=>{if(t===e){return}if(c(t)){t.htmlTabindex=-1}else{t.tabIndex=-1}}))}}onKeyDown(t){var e;if(!this.hasContent){return}switch(t.key){case a.ESC:if(!this.open){break}t.stopPropagation();t.preventDefault();this.open=false;this.setFocus();break;case a.ARROW_DOWN:{if(document.activeElement===this.host){if(this.verticalContext&&!this.open){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[0]);break}const e=this.items.indexOf(this.focusableItem);if(this.verticalContext&&e===this.items.length-1){this.setItemTabindex(this.items[e],-1);this.htmlTabindex=0;break}t.stopPropagation();t.preventDefault();const i=this.items[e+1];this.moveFocus(i!==null&&i!==void 0?i:this.items[0],this.focusableItem);break}case a.ARROW_UP:{if(document.activeElement===this.host){if(this.verticalContext){break}t.stopPropagation();t.preventDefault();if(!this.open){this.open=true}this.moveFocus(this.items[this.items.length-1],this.focusableItem);break}t.stopPropagation();t.preventDefault();const i=this.items.indexOf(this.focusableItem);if(i===0&&this.verticalContext){this.setItemTabindex(this.focusableItem,-1);this.setFocus();break}const s=(e=this.items[i-1])!==null&&e!==void 0?e:this.items[this.items.length-1];if(c(s)&&s.open){this.setItemTabindex(this.focusableItem,-1);s.focusLastItem();break}this.moveFocus(s,this.focusableItem);break}case a.ARROW_LEFT:if(!this.open||!this.verticalContext){break}t.preventDefault();t.stopPropagation();this.open=false;this.setFocus()}}constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.opened=i(this,"opened",7);this.closed=i(this,"closed",7);this.floating=true;this.open=false;this.verticalContext=false;this.htmlTabindex=-1;this.items=[];this.toggle=this.toggle.bind(this);this.checkContent=this.checkContent.bind(this);this.onLabelSlotChange=this.onLabelSlotChange.bind(this);this.onLabelClick=this.onLabelClick.bind(this);this.onItemsChange=this.onItemsChange.bind(this);this.onLabelKeydown=this.onLabelKeydown.bind(this)}componentWillLoad(){this.setLabelA11yAttrs();this.onItemsChange()}render(){if(!this.hasContent){return s("div",{class:"menu-label"},s("slot",{onSlotchange:this.onLabelSlotChange}))}return s(o,null,s("button",{ref:t=>this.labelButton=t,class:"menu-label","aria-expanded":`${!!this.open}`,"aria-haspopup":`${this.hasContent}`,"aria-label":this.open?"Chiudi menù":"Apri menù",role:"menuitem",tabIndex:this.htmlTabindex,onClick:this.onLabelClick,onKeyDown:this.onLabelKeydown},s("slot",{onSlotchange:this.onLabelSlotChange}),s("z-icon",{name:this.open?"chevron-up":"chevron-down"})),s("div",{class:"content",ref:t=>this.content=t},this.hasHeader&&s("header",{class:"header"},s("slot",{name:"header",onSlotchange:this.checkContent})),s("div",{class:"items",role:"menu"},s("slot",{name:"item",onSlotchange:this.onItemsChange}))))}get host(){return this}static get watchers(){return{open:[{onOpenChanged:0}],htmlTabindex:[{setLabelA11yAttrs:0}]}}static get style(){return h()}},[257,"z-menu",{active:[516],floating:[516],open:[1540],verticalContext:[516,"vertical-context"],htmlTabindex:[1026,"html-tabindex"],hasHeader:[32],hasContent:[32],setFocus:[64],focusLastItem:[64]},[[4,"click","onItemClick"],[0,"keydown","onKeyDown"]],{open:[{onOpenChanged:0}],htmlTabindex:[{setLabelA11yAttrs:0}]}]);function m(){if(typeof customElements==="undefined"){return}const t=["z-menu","z-icon"];t.forEach((t=>{switch(t){case"z-menu":if(!customElements.get(n(t))){customElements.define(n(t),d)}break;case"z-icon":if(!customElements.get(n(t))){r()}break}}))}const f=d;const u=m;export{f as ZMenu,u as defineCustomElement};
2
2
  //# sourceMappingURL=z-menu.js.map