@zanichelli/albe-web-components 13.4.0-RC1 → 13.4.0

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 (262) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/cjs/z-alert.cjs.entry.js +1 -1
  3. package/dist/cjs/z-anchor-navigation.cjs.entry.js +4 -4
  4. package/dist/cjs/z-anchor-navigation.cjs.entry.js.map +1 -1
  5. package/dist/cjs/z-app-header_12.cjs.entry.js +4 -4
  6. package/dist/cjs/z-breadcrumb.cjs.entry.js +79 -86
  7. package/dist/cjs/z-breadcrumb.cjs.entry.js.map +1 -1
  8. package/dist/cjs/z-combobox.cjs.entry.js +6 -15
  9. package/dist/cjs/z-combobox.cjs.entry.js.map +1 -1
  10. package/dist/cjs/z-cover-hero.cjs.entry.js +2 -2
  11. package/dist/cjs/z-ghost-loading.cjs.entry.js +1 -1
  12. package/dist/cjs/z-info-reveal.cjs.entry.js +1 -1
  13. package/dist/cjs/z-link.cjs.entry.js +1 -1
  14. package/dist/cjs/z-messages-pocket.cjs.entry.js +1 -1
  15. package/dist/cjs/z-myz-card-alert.cjs.entry.js +1 -1
  16. package/dist/cjs/z-myz-card-dictionary.cjs.entry.js +1 -1
  17. package/dist/cjs/z-myz-card-footer-sections.cjs.entry.js +1 -1
  18. package/dist/cjs/z-myz-card-footer.cjs.entry.js +1 -1
  19. package/dist/cjs/z-myz-card-icon.cjs.entry.js +1 -1
  20. package/dist/cjs/z-myz-card-info.cjs.entry.js +1 -1
  21. package/dist/cjs/z-myz-card-list.cjs.entry.js +1 -1
  22. package/dist/cjs/z-myz-card_4.cjs.entry.js +4 -4
  23. package/dist/cjs/z-myz-list.cjs.entry.js +1 -1
  24. package/dist/cjs/z-otp.cjs.entry.js +2 -2
  25. package/dist/cjs/z-pocket-message.cjs.entry.js +1 -1
  26. package/dist/cjs/z-pocket_3.cjs.entry.js +3 -3
  27. package/dist/cjs/z-popover.cjs.entry.js +1 -1
  28. package/dist/cjs/z-section-title.cjs.entry.js +1 -1
  29. package/dist/cjs/z-skip-to-content.cjs.entry.js +1 -1
  30. package/dist/cjs/z-visually-hidden.cjs.entry.js +1 -1
  31. package/dist/collection/components/inputs/z-combobox/index.js +6 -15
  32. package/dist/collection/components/inputs/z-combobox/index.js.map +1 -1
  33. package/dist/collection/components/z-anchor-navigation/index.js +3 -3
  34. package/dist/collection/components/z-anchor-navigation/index.js.map +1 -1
  35. package/dist/collection/components/z-anchor-navigation/styles.css +3 -3
  36. package/dist/collection/components/z-breadcrumb/index.js +78 -85
  37. package/dist/collection/components/z-breadcrumb/index.js.map +1 -1
  38. package/dist/collection/components/z-breadcrumb/index.spec.js +3 -2
  39. package/dist/collection/components/z-breadcrumb/index.spec.js.map +1 -1
  40. package/dist/collection/components/z-breadcrumb/styles.css +61 -59
  41. package/dist/collection/components/z-cover-hero/index.js +2 -2
  42. package/dist/collection/components/z-divider/index.js +1 -1
  43. package/dist/collection/components/z-ghost-loading/index.js +1 -1
  44. package/dist/collection/components/z-info-reveal/index.js +1 -1
  45. package/dist/collection/components/z-offcanvas/index.js +1 -1
  46. package/dist/collection/components/z-popover/index.js +1 -1
  47. package/dist/collection/components/z-section-title/index.js +1 -1
  48. package/dist/collection/components/z-skip-to-content/index.js +1 -1
  49. package/dist/collection/components/z-tag/index.js +2 -2
  50. package/dist/collection/components/z-visually-hidden/index.js +1 -1
  51. package/dist/collection/deprecated/z-link/index.js +1 -1
  52. package/dist/collection/snowflakes/myz/card/z-myz-card/index.js +1 -1
  53. package/dist/collection/snowflakes/myz/card/z-myz-card-alert/index.js +1 -1
  54. package/dist/collection/snowflakes/myz/card/z-myz-card-body/index.js +1 -1
  55. package/dist/collection/snowflakes/myz/card/z-myz-card-cover/index.js +1 -1
  56. package/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/index.js +1 -1
  57. package/dist/collection/snowflakes/myz/card/z-myz-card-footer/index.js +1 -1
  58. package/dist/collection/snowflakes/myz/card/z-myz-card-footer-sections/index.js +1 -1
  59. package/dist/collection/snowflakes/myz/card/z-myz-card-header/index.js +1 -1
  60. package/dist/collection/snowflakes/myz/card/z-myz-card-icon/index.js +1 -1
  61. package/dist/collection/snowflakes/myz/card/z-myz-card-info/index.js +1 -1
  62. package/dist/collection/snowflakes/myz/card/z-myz-card-list/index.js +1 -1
  63. package/dist/collection/snowflakes/myz/list/z-myz-list/index.js +1 -1
  64. package/dist/collection/snowflakes/myz/pocket/z-messages-pocket/index.js +1 -1
  65. package/dist/collection/snowflakes/myz/pocket/z-pocket/index.js +1 -1
  66. package/dist/collection/snowflakes/myz/pocket/z-pocket-body/index.js +1 -1
  67. package/dist/collection/snowflakes/myz/pocket/z-pocket-header/index.js +1 -1
  68. package/dist/collection/snowflakes/myz/pocket/z-pocket-message/index.js +1 -1
  69. package/dist/collection/snowflakes/myz/z-alert/index.js +1 -1
  70. package/dist/collection/snowflakes/myz/z-otp/index.js +2 -2
  71. package/dist/components/index16.js +1 -1
  72. package/dist/components/index17.js +1 -1
  73. package/dist/components/index18.js +1 -1
  74. package/dist/components/index19.js +1 -1
  75. package/dist/components/index21.js +1 -1
  76. package/dist/components/index22.js +1 -1
  77. package/dist/components/index23.js +1 -1
  78. package/dist/components/index24.js +1 -1
  79. package/dist/components/index25.js +1 -1
  80. package/dist/components/index27.js +2 -2
  81. package/dist/components/index3.js +1 -1
  82. package/dist/components/index6.js +1 -1
  83. package/dist/components/index8.js +1 -1
  84. package/dist/components/z-anchor-navigation.js +4 -4
  85. package/dist/components/z-anchor-navigation.js.map +1 -1
  86. package/dist/components/z-breadcrumb.js +80 -87
  87. package/dist/components/z-breadcrumb.js.map +1 -1
  88. package/dist/components/z-combobox.js +7 -16
  89. package/dist/components/z-combobox.js.map +1 -1
  90. package/dist/components/z-cover-hero.js +2 -2
  91. package/dist/components/z-info-reveal.js +1 -1
  92. package/dist/components/z-link.js +1 -1
  93. package/dist/components/z-messages-pocket.js +1 -1
  94. package/dist/components/z-myz-card-alert.js +1 -1
  95. package/dist/components/z-myz-card-dictionary.js +1 -1
  96. package/dist/components/z-myz-card-footer-sections.js +1 -1
  97. package/dist/components/z-myz-card-footer.js +1 -1
  98. package/dist/components/z-myz-card-icon.js +1 -1
  99. package/dist/components/z-myz-card-info.js +1 -1
  100. package/dist/components/z-myz-card-list.js +1 -1
  101. package/dist/components/z-myz-list.js +1 -1
  102. package/dist/components/z-otp.js +2 -2
  103. package/dist/components/z-pocket-message.js +1 -1
  104. package/dist/components/z-section-title.js +1 -1
  105. package/dist/components/z-skip-to-content.js +1 -1
  106. package/dist/components/z-visually-hidden.js +1 -1
  107. package/dist/esm/z-alert.entry.js +1 -1
  108. package/dist/esm/z-anchor-navigation.entry.js +4 -4
  109. package/dist/esm/z-anchor-navigation.entry.js.map +1 -1
  110. package/dist/esm/z-app-header_12.entry.js +4 -4
  111. package/dist/esm/z-breadcrumb.entry.js +80 -87
  112. package/dist/esm/z-breadcrumb.entry.js.map +1 -1
  113. package/dist/esm/z-combobox.entry.js +7 -16
  114. package/dist/esm/z-combobox.entry.js.map +1 -1
  115. package/dist/esm/z-cover-hero.entry.js +2 -2
  116. package/dist/esm/z-ghost-loading.entry.js +1 -1
  117. package/dist/esm/z-info-reveal.entry.js +1 -1
  118. package/dist/esm/z-link.entry.js +1 -1
  119. package/dist/esm/z-messages-pocket.entry.js +1 -1
  120. package/dist/esm/z-myz-card-alert.entry.js +1 -1
  121. package/dist/esm/z-myz-card-dictionary.entry.js +1 -1
  122. package/dist/esm/z-myz-card-footer-sections.entry.js +1 -1
  123. package/dist/esm/z-myz-card-footer.entry.js +1 -1
  124. package/dist/esm/z-myz-card-icon.entry.js +1 -1
  125. package/dist/esm/z-myz-card-info.entry.js +1 -1
  126. package/dist/esm/z-myz-card-list.entry.js +1 -1
  127. package/dist/esm/z-myz-card_4.entry.js +4 -4
  128. package/dist/esm/z-myz-list.entry.js +1 -1
  129. package/dist/esm/z-otp.entry.js +2 -2
  130. package/dist/esm/z-pocket-message.entry.js +1 -1
  131. package/dist/esm/z-pocket_3.entry.js +3 -3
  132. package/dist/esm/z-popover.entry.js +1 -1
  133. package/dist/esm/z-section-title.entry.js +1 -1
  134. package/dist/esm/z-skip-to-content.entry.js +1 -1
  135. package/dist/esm/z-visually-hidden.entry.js +1 -1
  136. package/dist/types/components/z-anchor-navigation/index.d.ts +1 -1
  137. package/dist/types/components/z-breadcrumb/index.d.ts +5 -8
  138. package/dist/web-components-library/p-05359612.entry.js +2 -0
  139. package/dist/web-components-library/p-05359612.entry.js.map +1 -0
  140. package/dist/web-components-library/{p-dbc437d8.entry.js → p-06d2cd5d.entry.js} +2 -2
  141. package/dist/web-components-library/p-1768c5e0.entry.js +2 -0
  142. package/dist/web-components-library/p-1768c5e0.entry.js.map +1 -0
  143. package/dist/web-components-library/{p-8d81a5c8.entry.js → p-20226d0d.entry.js} +2 -2
  144. package/dist/web-components-library/{p-6edd5dbe.entry.js → p-242b71f0.entry.js} +2 -2
  145. package/dist/web-components-library/{p-5d67d311.entry.js → p-2ec544c4.entry.js} +2 -2
  146. package/{www/build/p-d1f8ca38.entry.js → dist/web-components-library/p-2ee5c83c.entry.js} +2 -2
  147. package/dist/web-components-library/{p-d251f105.entry.js → p-3643303f.entry.js} +2 -2
  148. package/dist/web-components-library/{p-239fb968.entry.js → p-48c6050f.entry.js} +2 -2
  149. package/{www/build/p-d92765b6.entry.js → dist/web-components-library/p-4e71c395.entry.js} +2 -2
  150. package/dist/web-components-library/{p-b57362ef.entry.js → p-589a9033.entry.js} +2 -2
  151. package/dist/web-components-library/{p-5eb0a064.entry.js → p-592a8b1f.entry.js} +2 -2
  152. package/dist/web-components-library/{p-f3c3448f.entry.js → p-5c9e7645.entry.js} +2 -2
  153. package/dist/web-components-library/{p-996c1471.entry.js → p-660b1494.entry.js} +2 -2
  154. package/dist/web-components-library/{p-24ab494d.entry.js → p-6b186398.entry.js} +2 -2
  155. package/dist/web-components-library/{p-95104b91.entry.js → p-6f35845e.entry.js} +2 -2
  156. package/dist/web-components-library/{p-f7607ce7.entry.js → p-7193d061.entry.js} +2 -2
  157. package/{www/build/p-04755b76.entry.js → dist/web-components-library/p-7579992d.entry.js} +2 -2
  158. package/dist/web-components-library/{p-00d7315a.entry.js → p-7ee8e11a.entry.js} +2 -2
  159. package/dist/web-components-library/p-b4888995.entry.js +2 -0
  160. package/dist/web-components-library/p-b4d30129.entry.js +2 -0
  161. package/dist/web-components-library/{p-b670ffa5.entry.js → p-c49602b1.entry.js} +2 -2
  162. package/dist/web-components-library/p-dbda8812.entry.js +2 -0
  163. package/dist/web-components-library/p-dbda8812.entry.js.map +1 -0
  164. package/{www/build/p-a53ab86e.entry.js → dist/web-components-library/p-de972497.entry.js} +2 -2
  165. package/dist/web-components-library/{p-05b39597.entry.js → p-e5e2e752.entry.js} +2 -2
  166. package/dist/web-components-library/{p-942e5126.entry.js → p-fdc6cf5a.entry.js} +2 -2
  167. package/dist/web-components-library/web-components-library.esm.js +1 -1
  168. package/package.json +1 -1
  169. package/www/build/p-05359612.entry.js +2 -0
  170. package/www/build/p-05359612.entry.js.map +1 -0
  171. package/www/build/{p-dbc437d8.entry.js → p-06d2cd5d.entry.js} +2 -2
  172. package/www/build/p-1768c5e0.entry.js +2 -0
  173. package/www/build/p-1768c5e0.entry.js.map +1 -0
  174. package/www/build/{p-8d81a5c8.entry.js → p-20226d0d.entry.js} +2 -2
  175. package/www/build/{p-6edd5dbe.entry.js → p-242b71f0.entry.js} +2 -2
  176. package/www/build/{p-5d67d311.entry.js → p-2ec544c4.entry.js} +2 -2
  177. package/{dist/web-components-library/p-d1f8ca38.entry.js → www/build/p-2ee5c83c.entry.js} +2 -2
  178. package/www/build/{p-d251f105.entry.js → p-3643303f.entry.js} +2 -2
  179. package/www/build/{p-239fb968.entry.js → p-48c6050f.entry.js} +2 -2
  180. package/{dist/web-components-library/p-d92765b6.entry.js → www/build/p-4e71c395.entry.js} +2 -2
  181. package/www/build/{p-b57362ef.entry.js → p-589a9033.entry.js} +2 -2
  182. package/www/build/{p-5eb0a064.entry.js → p-592a8b1f.entry.js} +2 -2
  183. package/www/build/{p-f3c3448f.entry.js → p-5c9e7645.entry.js} +2 -2
  184. package/www/build/{p-996c1471.entry.js → p-660b1494.entry.js} +2 -2
  185. package/www/build/{p-24ab494d.entry.js → p-6b186398.entry.js} +2 -2
  186. package/www/build/{p-95104b91.entry.js → p-6f35845e.entry.js} +2 -2
  187. package/www/build/{p-f7607ce7.entry.js → p-7193d061.entry.js} +2 -2
  188. package/{dist/web-components-library/p-04755b76.entry.js → www/build/p-7579992d.entry.js} +2 -2
  189. package/www/build/{p-00d7315a.entry.js → p-7ee8e11a.entry.js} +2 -2
  190. package/www/build/p-b4888995.entry.js +2 -0
  191. package/www/build/p-b4d30129.entry.js +2 -0
  192. package/www/build/{p-583ea45f.js → p-c239d399.js} +1 -1
  193. package/www/build/{p-b670ffa5.entry.js → p-c49602b1.entry.js} +2 -2
  194. package/www/build/p-dbda8812.entry.js +2 -0
  195. package/www/build/p-dbda8812.entry.js.map +1 -0
  196. package/{dist/web-components-library/p-a53ab86e.entry.js → www/build/p-de972497.entry.js} +2 -2
  197. package/www/build/{p-05b39597.entry.js → p-e5e2e752.entry.js} +2 -2
  198. package/www/build/{p-942e5126.entry.js → p-fdc6cf5a.entry.js} +2 -2
  199. package/www/build/web-components-library.esm.js +1 -1
  200. package/www/index.html +1 -1
  201. package/dist/web-components-library/p-0f8cc377.entry.js +0 -2
  202. package/dist/web-components-library/p-0f8cc377.entry.js.map +0 -1
  203. package/dist/web-components-library/p-120a809e.entry.js +0 -2
  204. package/dist/web-components-library/p-34541d7c.entry.js +0 -2
  205. package/dist/web-components-library/p-34541d7c.entry.js.map +0 -1
  206. package/dist/web-components-library/p-4c40561d.entry.js +0 -2
  207. package/dist/web-components-library/p-acfde9fa.entry.js +0 -2
  208. package/dist/web-components-library/p-acfde9fa.entry.js.map +0 -1
  209. package/www/build/p-0f8cc377.entry.js +0 -2
  210. package/www/build/p-0f8cc377.entry.js.map +0 -1
  211. package/www/build/p-120a809e.entry.js +0 -2
  212. package/www/build/p-34541d7c.entry.js +0 -2
  213. package/www/build/p-34541d7c.entry.js.map +0 -1
  214. package/www/build/p-4c40561d.entry.js +0 -2
  215. package/www/build/p-acfde9fa.entry.js +0 -2
  216. package/www/build/p-acfde9fa.entry.js.map +0 -1
  217. /package/dist/web-components-library/{p-dbc437d8.entry.js.map → p-06d2cd5d.entry.js.map} +0 -0
  218. /package/dist/web-components-library/{p-8d81a5c8.entry.js.map → p-20226d0d.entry.js.map} +0 -0
  219. /package/dist/web-components-library/{p-6edd5dbe.entry.js.map → p-242b71f0.entry.js.map} +0 -0
  220. /package/dist/web-components-library/{p-5d67d311.entry.js.map → p-2ec544c4.entry.js.map} +0 -0
  221. /package/dist/web-components-library/{p-d1f8ca38.entry.js.map → p-2ee5c83c.entry.js.map} +0 -0
  222. /package/dist/web-components-library/{p-d251f105.entry.js.map → p-3643303f.entry.js.map} +0 -0
  223. /package/dist/web-components-library/{p-239fb968.entry.js.map → p-48c6050f.entry.js.map} +0 -0
  224. /package/dist/web-components-library/{p-d92765b6.entry.js.map → p-4e71c395.entry.js.map} +0 -0
  225. /package/dist/web-components-library/{p-b57362ef.entry.js.map → p-589a9033.entry.js.map} +0 -0
  226. /package/dist/web-components-library/{p-5eb0a064.entry.js.map → p-592a8b1f.entry.js.map} +0 -0
  227. /package/dist/web-components-library/{p-f3c3448f.entry.js.map → p-5c9e7645.entry.js.map} +0 -0
  228. /package/dist/web-components-library/{p-996c1471.entry.js.map → p-660b1494.entry.js.map} +0 -0
  229. /package/dist/web-components-library/{p-24ab494d.entry.js.map → p-6b186398.entry.js.map} +0 -0
  230. /package/dist/web-components-library/{p-95104b91.entry.js.map → p-6f35845e.entry.js.map} +0 -0
  231. /package/dist/web-components-library/{p-f7607ce7.entry.js.map → p-7193d061.entry.js.map} +0 -0
  232. /package/dist/web-components-library/{p-04755b76.entry.js.map → p-7579992d.entry.js.map} +0 -0
  233. /package/dist/web-components-library/{p-00d7315a.entry.js.map → p-7ee8e11a.entry.js.map} +0 -0
  234. /package/dist/web-components-library/{p-4c40561d.entry.js.map → p-b4888995.entry.js.map} +0 -0
  235. /package/dist/web-components-library/{p-120a809e.entry.js.map → p-b4d30129.entry.js.map} +0 -0
  236. /package/dist/web-components-library/{p-b670ffa5.entry.js.map → p-c49602b1.entry.js.map} +0 -0
  237. /package/dist/web-components-library/{p-a53ab86e.entry.js.map → p-de972497.entry.js.map} +0 -0
  238. /package/dist/web-components-library/{p-05b39597.entry.js.map → p-e5e2e752.entry.js.map} +0 -0
  239. /package/dist/web-components-library/{p-942e5126.entry.js.map → p-fdc6cf5a.entry.js.map} +0 -0
  240. /package/www/build/{p-dbc437d8.entry.js.map → p-06d2cd5d.entry.js.map} +0 -0
  241. /package/www/build/{p-8d81a5c8.entry.js.map → p-20226d0d.entry.js.map} +0 -0
  242. /package/www/build/{p-6edd5dbe.entry.js.map → p-242b71f0.entry.js.map} +0 -0
  243. /package/www/build/{p-5d67d311.entry.js.map → p-2ec544c4.entry.js.map} +0 -0
  244. /package/www/build/{p-d1f8ca38.entry.js.map → p-2ee5c83c.entry.js.map} +0 -0
  245. /package/www/build/{p-d251f105.entry.js.map → p-3643303f.entry.js.map} +0 -0
  246. /package/www/build/{p-239fb968.entry.js.map → p-48c6050f.entry.js.map} +0 -0
  247. /package/www/build/{p-d92765b6.entry.js.map → p-4e71c395.entry.js.map} +0 -0
  248. /package/www/build/{p-b57362ef.entry.js.map → p-589a9033.entry.js.map} +0 -0
  249. /package/www/build/{p-5eb0a064.entry.js.map → p-592a8b1f.entry.js.map} +0 -0
  250. /package/www/build/{p-f3c3448f.entry.js.map → p-5c9e7645.entry.js.map} +0 -0
  251. /package/www/build/{p-996c1471.entry.js.map → p-660b1494.entry.js.map} +0 -0
  252. /package/www/build/{p-24ab494d.entry.js.map → p-6b186398.entry.js.map} +0 -0
  253. /package/www/build/{p-95104b91.entry.js.map → p-6f35845e.entry.js.map} +0 -0
  254. /package/www/build/{p-f7607ce7.entry.js.map → p-7193d061.entry.js.map} +0 -0
  255. /package/www/build/{p-04755b76.entry.js.map → p-7579992d.entry.js.map} +0 -0
  256. /package/www/build/{p-00d7315a.entry.js.map → p-7ee8e11a.entry.js.map} +0 -0
  257. /package/www/build/{p-4c40561d.entry.js.map → p-b4888995.entry.js.map} +0 -0
  258. /package/www/build/{p-120a809e.entry.js.map → p-b4d30129.entry.js.map} +0 -0
  259. /package/www/build/{p-b670ffa5.entry.js.map → p-c49602b1.entry.js.map} +0 -0
  260. /package/www/build/{p-a53ab86e.entry.js.map → p-de972497.entry.js.map} +0 -0
  261. /package/www/build/{p-05b39597.entry.js.map → p-e5e2e752.entry.js.map} +0 -0
  262. /package/www/build/{p-942e5126.entry.js.map → p-fdc6cf5a.entry.js.map} +0 -0
package/www/index.html CHANGED
@@ -1 +1 @@
1
- <!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-22cc270c.css"> <link rel="modulepreload" href="/build/p-583ea45f.js"><link rel="modulepreload" href="/build/p-025f494e.js"><link rel="modulepreload" href="/build/p-10bb4f4b.js"><link rel="modulepreload" href="/build/p-2c886e8b.js"><link rel="modulepreload" href="/build/p-955da62e.js"><script type="module" src="/build/p-583ea45f.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <header> <z-app-header> <h1 slot="title">Albe test app</h1> </z-app-header> </header> <main></main> </body></html>
1
+ <!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Albe test application</title> <link rel="stylesheet" type="text/css" href="/build/p-22cc270c.css"> <link rel="modulepreload" href="/build/p-c239d399.js"><link rel="modulepreload" href="/build/p-025f494e.js"><link rel="modulepreload" href="/build/p-10bb4f4b.js"><link rel="modulepreload" href="/build/p-2c886e8b.js"><link rel="modulepreload" href="/build/p-955da62e.js"><script type="module" src="/build/p-c239d399.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body> <header> <z-app-header> <h1 slot="title">Albe test app</h1> </z-app-header> </header> <main></main> </body></html>
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as e,g as s}from"./p-10bb4f4b.js";import{I as o,e as r,g as a,l as n,i as h}from"./p-025f494e.js";import{r as d,a as l}from"./p-955da62e.js";import"./p-2c886e8b.js";const c=':host{display:block;font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-input-field01);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{box-shadow:none}:host>div>div.header:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-text01)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-icon02);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-primary01);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled02)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-icon02);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-input-field01);border-radius:0}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}';const p=c;const u=class{watchItems(){this.itemsList=typeof this.items==="string"?JSON.parse(this.items):this.items;this.selectedCounter=this.itemsList.filter((t=>t.checked)).length;this.updateRenderItemsList()}watchSearchValue(){this.filterItems(this.searchValue)}watchCheckboxes(){this.checkboxes.forEach(((t,i)=>t.setAttribute("tabindex",i===0?"0":"-1")))}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(e){t(this,e);this.comboboxChange=i(this,"comboboxChange",7);this.itemsList=[];this.inputType=o.TEXT;this.inputid=`combo-${d()}`;this.items=undefined;this.label=undefined;this.disabled=false;this.hassearch=false;this.searchlabel=undefined;this.searchplaceholder=undefined;this.searchtitle=undefined;this.noresultslabel="Nessun risultato";this.isopen=false;this.isfixed=false;this.closesearchtext="Chiudi";this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.hasgroupitems=undefined;this.size=r.BIG;this.searchValue=undefined;this.selectedCounter=undefined;this.renderItemsList=[];this.focusedItemId=undefined;this.checkboxes=[];this.toggleComboBox=this.toggleComboBox.bind(this);this.closeFilterItems=this.closeFilterItems.bind(this)}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((t=>t.checked)).length}componentDidRender(){const t=this.getAllCheckboxes();if(JSON.stringify(t)!==JSON.stringify(this.checkboxes)){this.checkboxes=t}}getItemId(t){return`combo-checkbox-${this.inputid}-${t.id}`}getCheckboxClass(){return`combo-item-checkbox-input-${this.inputid}`}getAllCheckboxes(){return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`))}getControlToListSize(){let t;switch(this.size){case r.BIG:t=h.LARGE;break;case r.SMALL:t=h.SMALL;break;case r.X_SMALL:t=h.SMALL;break;default:t=h.MEDIUM}return t}handleSelectArrowsNavigation(t,i){if(![a.ARROW_DOWN,a.ARROW_UP].includes(t.key)||!this.isopen){return}t.preventDefault();t.stopPropagation();const e=this.element.shadowRoot.querySelector(`#${i}`);if(!e){return}const s=this.checkboxes;if(!s.length){return}const o=s.indexOf(e);const r=0;const n=s.length-1;let h=null;if(t.key===a.ARROW_DOWN){h=o===n?s[r]:s[o+1]}else if(t.key===a.ARROW_UP){h=o===r?s[n]:s[o-1]}this.focusComboboxItem(h)}handleHeaderKeyboardEvent(t){if(t.key===a.SPACE){t.preventDefault()}if(t.key===a.ARROW_DOWN&&!this.isopen||t.key===a.ARROW_UP&&this.isopen){this.toggleComboBox()}}handleCheckboxFocus(t){this.focusedItemId=t}focusComboboxItem(t){this.checkboxes.forEach((function(t){t.setAttribute("tabindex","-1")}));t.setAttribute("tabindex","0");t.focus()}updateRenderItemsList(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}}resetRenderItemsList(){const t=[];this.itemsList.forEach((i=>{t.push(Object.assign({},i))}));this.renderItemsList=t}filterItems(t){if(!t){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((i=>{const e=i.name.toUpperCase().indexOf(t.toUpperCase());const s=e+t.length;const o=i.name.substring(0,e)+"<strong>"+i.name.substring(e,s)+"</strong>"+i.name.substring(s,i.name.length);i.name=o;return e>=0}))}checkAll(t=true){this.itemsList=this.itemsList.map((i=>Object.assign(Object.assign({},i),{checked:t})));this.resetRenderItemsList();this.emitComboboxChange()}closeFilterItems(){this.searchValue="";this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getComboboxA11yAttributes(){return{role:"combobox","aria-label":this.label,"aria-expanded":this.isopen?"true":"false","aria-activedescendant":this.isopen?this.focusedItemId:"","aria-controls":`${this.inputid}_list`}}renderHeader(){return e("div",{class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:t=>{this.handleHeaderKeyboardEvent(t)},onKeyUp:t=>l(t,this.toggleComboBox),role:"button",tabindex:0,"aria-expanded":this.isopen?"true":"false"},e("p",{class:"body-3"},this.label,e("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),e("z-icon",{name:"caret-down",class:this.size}))}renderContent(){if(!this.isopen){return}return e("div",{class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),!this.hassearch?e("span",Object.assign({},this.getComboboxA11yAttributes())):null,e("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":true,id:`${this.inputid}_list`,"aria-owns":`${this.checkboxes.map((t=>t.id)).join(" ")}`},this.hascheckall&&this.renderCheckAll(),this.renderItems()))}renderItems(){return e("div",{class:this.searchValue&&"search"},this.renderList(this.renderItemsList),this.searchValue&&this.renderCloseButton())}renderItem(t,i,s){return e("z-list-element",{id:t.id,htmlTabindex:null,dividerType:i!==s-1?n.ELEMENT:n.NONE,size:this.getControlToListSize()},e("z-input",{type:o.CHECKBOX,checked:t.checked,htmlid:this.getItemId(t),label:t.name,class:this.getCheckboxClass(),disabled:!t.checked&&this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":t.checked?"true":"false",onKeyDown:i=>this.handleSelectArrowsNavigation(i,this.getItemId(t)),onInputCheck:i=>{this.itemsList=this.itemsList.map((e=>{if(t.id===e.id){e.checked=i.detail.checked}return e}));this.updateRenderItemsList();this.emitComboboxChange()},onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}renderList(t){if(!t){return}if(!t.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(t)}return e("ul",{role:"none"},t.map(((i,e)=>this.renderItem(i,e,t.length))))}renderGroups(t){const i=t.reduce(((i,e,s)=>{var o;const{category:r}=e;const a=this.renderItem(e,s,t.length);i[r]=(o=i[r])!==null&&o!==void 0?o:[];i[r].push(a);return i}),{});const s=Object.entries(i).map((([t,i])=>e("z-list-group",{"divider-type":n.ELEMENT},e("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},t),i.map((t=>t)))));return e("ul",{role:"none"},s)}renderNoSearchResults(){return e("ul",{role:"none"},e("z-myz-list-item",{id:"no-results",text:this.noresultslabel,listitemid:"no-results",icon:"multiply-circle",class:this.size}))}renderCloseButton(){return e("div",null,e("a",{onClick:()=>this.closeFilterItems(),onKeyUp:t=>l(t,this.closeFilterItems),role:"button",tabindex:0},this.closesearchtext))}renderSearchInput(){return e("z-input",Object.assign({htmlid:`${this.inputid}_search`,label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:false,size:this.size,"aria-autocomplete":"list"},this.getComboboxA11yAttributes(),{onKeyUp:t=>{if(t.key===a.ESC){this.closeFilterItems()}},onInputChange:t=>{this.searchValue=t.detail.value}}))}renderCheckAll(){if(this.searchValue){return}const t=`combo-checkbox-${this.inputid}-check-all`;const i=this.selectedCounter===this.itemsList.length;return e("div",{class:"check-all-wrapper"},e("z-input",{type:o.CHECKBOX,checked:i,htmlid:t,class:this.getCheckboxClass(),label:i?this.uncheckalltext:this.checkalltext,disabled:this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":i?"true":"false",onKeyDown:i=>this.handleSelectArrowsNavigation(i,t),onInputCheck:t=>this.checkAll(t.detail.checked),onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}render(){return e("div",{key:"c50100577924339fd4c1c05fe3971c0f53379cd5","data-action":`combo-${this.inputid}`,class:{open:this.isopen,fixed:this.isfixed,disabled:this.disabled},id:this.inputid},this.renderHeader(),!this.disabled&&this.renderContent())}get element(){return s(this)}static get watchers(){return{items:["watchItems"],searchValue:["watchSearchValue"],checkboxes:["watchCheckboxes"]}}};u.style=p;export{u as z_combobox};
2
- //# sourceMappingURL=p-0f8cc377.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZComboboxStyle0","ZCombobox","watchItems","this","itemsList","items","JSON","parse","selectedCounter","filter","item","checked","length","updateRenderItemsList","watchSearchValue","filterItems","searchValue","watchCheckboxes","checkboxes","forEach","index","setAttribute","emitComboboxChange","comboboxChange","emit","id","inputid","constructor","hostRef","inputType","InputType","TEXT","randomId","ControlSize","BIG","toggleComboBox","bind","closeFilterItems","componentWillLoad","componentWillRender","componentDidRender","getAllCheckboxes","stringify","getItemId","getCheckboxClass","Array","from","element","shadowRoot","querySelectorAll","getControlToListSize","size","ListSize","LARGE","SMALL","X_SMALL","MEDIUM","handleSelectArrowsNavigation","e","currId","KeyboardCode","ARROW_DOWN","ARROW_UP","includes","key","isopen","preventDefault","stopPropagation","currElem","querySelector","currElemIndex","indexOf","firstElemIndex","lastElemIndex","nextElem","focusComboboxItem","handleHeaderKeyboardEvent","ev","SPACE","handleCheckboxFocus","focusedItemId","elem","focus","resetRenderItemsList","renderItemsList","push","Object","assign","value","start","name","toUpperCase","end","newName","substring","checkAll","map","getComboboxA11yAttributes","role","label","renderHeader","h","class","onClick","onKeyDown","onKeyUp","handleKeyboardSubmit","tabindex","renderContent","hassearch","renderSearchInput","join","hascheckall","renderCheckAll","renderItems","renderList","renderCloseButton","renderItem","htmlTabindex","dividerType","ListDividerType","ELEMENT","NONE","type","CHECKBOX","htmlid","disabled","maxcheckableitems","onInputCheck","i","detail","onInputFocus","renderNoSearchResults","hasgroupitems","renderGroups","newData","reduce","group","category","zListItem","_a","listGroups","entries","slot","text","noresultslabel","listitemid","icon","closesearchtext","searchlabel","placeholder","searchplaceholder","htmltitle","searchtitle","message","ESC","onInputChange","checkAllId","allChecked","uncheckalltext","checkalltext","render","open","fixed","isfixed"],"sources":["src/components/inputs/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/inputs/z-combobox/index.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n position: relative;\n}\n\n:host > div > .header {\n position: relative;\n z-index: 10;\n display: flex;\n min-height: 42px;\n align-items: center;\n justify-content: space-between;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-surface04);\n margin: 0;\n background-color: var(--color-input-field01);\n border-radius: var(--border-radius-small);\n cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n min-height: 34px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n min-height: 30px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header p.body-3 {\n padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n:host > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-surface04);\n outline-offset: -2px;\n}\n\n:host > div.open > div.header:focus:focus-visible {\n box-shadow: none;\n}\n\n:host > div > div.header:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > p.body-3 {\n padding: var(--space-unit) 0;\n margin: 0;\n color: var(--color-text01);\n}\n\n:host > div > .header > p.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-icon02);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n border: var(--border-size-small) solid var(--color-primary01);\n border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n pointer-events: none;\n}\n\n:host > div.disabled .header {\n border-color: var(--color-disabled01);\n fill: var(--color-disabled01);\n}\n\n:host > div.disabled .header > p.body-3 {\n color: var(--color-disabled02);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-disabled01);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-icon02);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--gray200);\n border-top: 0;\n background-color: var(--color-input-field01);\n border-radius: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > z-input {\n width: 100%;\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n max-height: 235px;\n padding: 0 3px; /* needed for checkbox focus shadow */\n margin: 0;\n}\n\n::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n}\n\n:host > div.open > z-input {\n position: relative;\n z-index: 1;\n width: 238px;\n margin: 0 calc(var(--space-unit) * 2);\n color: var(--color-primary01);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n overflow: hidden;\n max-height: auto;\n margin-top: 0;\n box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n overflow: auto;\n max-height: 180px;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div > a {\n display: inline-block;\n height: 44px;\n color: var(--color-primary01);\n cursor: pointer;\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 44px;\n text-align: center;\n text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, Prop, h, State, Watch, Event, Element, EventEmitter} from \"@stencil/core\";\nimport {ComboItem, InputType, ListDividerType, ControlSize, KeyboardCode, ListSize} from \"../../../beans\";\nimport {ZInput} from \"../z-input\";\nimport {handleKeyboardSubmit, randomId} from \"../../../utils/utils\";\nimport {ZMyzListItem} from \"../../../snowflakes/myz/list/z-myz-list-item\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id */\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /** list items array */\n @Prop()\n items: ComboItem[] | string;\n\n /** label text */\n @Prop()\n label: string;\n\n /** the combobox is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** show search input flag (optional) */\n @Prop()\n hassearch?: boolean = false;\n\n /** search input label text (optional) */\n @Prop()\n searchlabel?: string;\n\n /** search input placeholder text (optional) */\n @Prop()\n searchplaceholder?: string;\n\n /** search input title text (optional) */\n @Prop()\n searchtitle?: string;\n\n /** no result text message */\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /** toggle combo list opening flag */\n @Prop({mutable: true})\n isopen = false;\n\n /** fixed style flag */\n @Prop()\n isfixed = false;\n\n /** close combobox list text */\n @Prop()\n closesearchtext?: string = \"Chiudi\";\n\n /** show \"check all\" checkbox (optional) */\n @Prop()\n hascheckall?: boolean = false;\n\n /** check all label (optional) */\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /** uncheck all label (optional) */\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /** max number of checkable items (0 = unlimited) */\n @Prop()\n maxcheckableitems = 0;\n\n /** group items by category */\n @Prop()\n hasgroupitems?: boolean;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId: string;\n\n @State()\n checkboxes: HTMLInputElement[] = [];\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n @Watch(\"checkboxes\")\n watchCheckboxes(): void {\n this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n }\n\n /** Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n componentDidRender(): void {\n const checkboxes = this.getAllCheckboxes();\n if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n this.checkboxes = checkboxes;\n }\n }\n\n private getItemId(item: ComboItem): string {\n return `combo-checkbox-${this.inputid}-${item.id}`;\n }\n\n private getCheckboxClass(): string {\n return `combo-item-checkbox-input-${this.inputid}`;\n }\n\n private getAllCheckboxes(): HTMLInputElement[] {\n return Array.from(\n this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n ) as HTMLInputElement[];\n }\n\n private getControlToListSize(): ListSize {\n let size;\n switch (this.size) {\n case ControlSize.BIG:\n size = ListSize.LARGE;\n break;\n case ControlSize.SMALL:\n size = ListSize.SMALL;\n break;\n case ControlSize.X_SMALL:\n size = ListSize.SMALL;\n break;\n default:\n size = ListSize.MEDIUM;\n }\n\n return size;\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) || !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n if (!currElem) {\n return;\n }\n\n const checkboxes = this.checkboxes;\n if (!checkboxes.length) {\n return;\n }\n\n const currElemIndex = checkboxes.indexOf(currElem);\n const firstElemIndex = 0;\n const lastElemIndex = checkboxes.length - 1;\n\n let nextElem = null;\n if (e.key === KeyboardCode.ARROW_DOWN) {\n nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n } else if (e.key === KeyboardCode.ARROW_UP) {\n nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n }\n\n this.focusComboboxItem(nextElem);\n }\n\n private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n }\n if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n this.toggleComboBox();\n }\n }\n\n private handleCheckboxFocus(id: string): void {\n this.focusedItemId = id;\n }\n\n private focusComboboxItem(elem): void {\n this.checkboxes.forEach(function (item) {\n item.setAttribute(\"tabindex\", \"-1\");\n });\n\n elem.setAttribute(\"tabindex\", \"0\");\n elem.focus();\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private checkAll(checked = true): void {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: checked,\n }));\n this.resetRenderItemsList();\n this.emitComboboxChange();\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(): Record<string, unknown> {\n return {\n \"role\": \"combobox\",\n \"aria-label\": this.label,\n \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n \"aria-controls\": `${this.inputid}_list`,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n this.handleHeaderKeyboardEvent(ev);\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n >\n <p class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </p>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n if (!this.isopen) {\n return;\n }\n\n return (\n <div class=\"open-combo-data\">\n {this.hassearch && this.renderSearchInput()}\n {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable={true}\n id={`${this.inputid}_list`}\n aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n >\n {this.hascheckall && this.renderCheckAll()}\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div class={this.searchValue && \"search\"}>\n {this.renderList(this.renderItemsList)}\n {this.searchValue && this.renderCloseButton()}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n return (\n <z-list-element\n id={item.id}\n htmlTabindex={null}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={item.checked}\n htmlid={this.getItemId(item)}\n label={item.name}\n class={this.getCheckboxClass()}\n disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={item.checked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n onInputCheck={(e: CustomEvent) => {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (item.id === i.id) {\n i.checked = e.detail.checked;\n }\n\n return i;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"none\">\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const {category} = item;\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n return (\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n });\n\n return <ul role=\"none\">{listGroups}</ul>;\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <ul role=\"none\">\n <z-myz-list-item\n id=\"no-results\"\n text={this.noresultslabel}\n listitemid=\"no-results\"\n icon=\"multiply-circle\"\n class={this.size}\n />\n </ul>\n );\n }\n\n private renderCloseButton(): HTMLDivElement {\n return (\n <div>\n <a\n onClick={() => this.closeFilterItems()}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n role=\"button\"\n tabindex={0}\n >\n {this.closesearchtext}\n </a>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes()}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.key === KeyboardCode.ESC) {\n this.closeFilterItems();\n }\n }}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (this.searchValue) {\n return;\n }\n\n const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n const allChecked = this.selectedCounter === this.itemsList.length;\n\n return (\n <div class=\"check-all-wrapper\">\n <z-input\n type={InputType.CHECKBOX}\n checked={allChecked}\n htmlid={checkAllId}\n class={this.getCheckboxClass()}\n label={allChecked ? this.uncheckalltext : this.checkalltext}\n // disabled={this.hasCheckAllDisabled()}\n disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={allChecked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{r as o,h as e}from"./p-10bb4f4b.js";const a=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div>footer{height:128px;box-sizing:border-box;padding:var(--space-unit) calc(var(--space-unit) * 2) 0;border-top:var(--border-size-medium) solid var(--color-surface03);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-size:16px;line-height:24px}:host>div>footer>div.top,:host>div>footer>div.bottom{height:60px}";const r=a;const t=class{constructor(e){o(this,e)}render(){return e("div",{key:"ad5a5b4ce763cd24f68d02ec7b6e29b2545b94be"},e("footer",{key:"85252bc9e7ac49dd5250160f31eda28d0cd9b56c"},e("div",{key:"43fdf6d47836f0c6cddb8e6a2a807837642a46b6",class:"top"},e("slot",{key:"ec8b4121c2c3aa2975f19c8ba846689f5a0e0dea",name:"top"})),e("div",{key:"a76056af1fba864d1dd3dbc7c4c6a109ee1e5e9d",class:"bottom"},e("slot",{key:"b1f51897fe2f8bac34c21b409c74003651bc641a",name:"bottom"}))))}};t.style=r;export{t as z_myz_card_footer_sections};
2
- //# sourceMappingURL=p-120a809e.entry.js.map
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as s,a as e,g as o}from"./p-10bb4f4b.js";import{V as r,W as h,p as n,P as a,g as l,i as p}from"./p-025f494e.js";import{g as c,a as d}from"./p-955da62e.js";import"./p-2c886e8b.js";const f=':host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;height:30px;align-items:center;padding-left:calc(var(--space-unit) / 2);overflow-x:hidden}li{display:flex;align-items:baseline}:host a:focus,:host button:focus{box-shadow:var(--shadow-focus-primary);outline:0}:host a{color:var(--color-link-primary);font-size:var(--font-size-2);text-decoration:none;white-space:nowrap}:host a.homepage-icon{display:list-item}:host a.homepage-text{display:initial;margin-top:calc(var(--space-unit) / 4);margin-right:var(--space-unit)}:host a.missing-path{color:var(--color-text01)}:host a.text-ellipsis{display:-webkit-box !important;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:normal}:host ol{display:flex;padding:0;margin:0;list-style-type:none}:host ol>li:not(:first-child,:last-child){margin-right:var(--space-unit)}nav.underlined>ol>li a:not(.missing-path),nav.underlined>ol>li button{text-decoration:underline}nav.semibold>ol>li a:not(.missing-path),nav.semibold>ol>li button{font-weight:var(--font-sb)}:host z-icon{margin-right:var(--space-unit);--z-icon-width:12px;--z-icon-height:12px}:host button.dots{display:inline-block;color:var(--color-link-primary);cursor:pointer}:host .hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}:host .hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}:host .hidden-paths-popover{--z-popover-theme--surface:var(--color-surface02);--z-popover-padding:0}:host .hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}:host .full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}:host .tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){:host ol>li+li::before{display:inline-block;width:10px;height:10px;flex:1;margin-right:2px;color:var(--color-disabled03);content:"\\203A"}:host a.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}';const u=f;const m=class{constructor(s){t(this,s);this.clickOnNode=i(this,"clickOnNode",7);this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null;this.pathStyle=r.UNDERLINED;this.homepageVariant=h.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.viewPortWidth=undefined;this.hasOverflow=false;this.popoverEllipsisOpen=false}handleResize(){this.viewPortWidth=c();if(this.viewPortWidth!==n.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb(this.viewPortWidth===n.MOBILE)}handleResizeUp(t,i){if(t===n.MOBILE||i===n.MOBILE&&t===n.TABLET||i===n.MOBILE&&t===n.DESKTOP||i===n.MOBILE&&t===n.DESKTOP_WIDE||i===n.TABLET&&t===n.DESKTOP||i===n.TABLET&&t===n.DESKTOP_WIDE||i===n.DESKTOP&&t===n.DESKTOP_WIDE){this.initializeBreadcrumb(this.viewPortWidth===n.MOBILE)}}componentWillLoad(){this.viewPortWidth=c();this.initializeBreadcrumb(this.viewPortWidth===n.MOBILE)}componentWillRender(){if(this.viewPortWidth!==n.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==n.MOBILE&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}initializeBreadcrumb(t){if(t){this.pathsList=this.getPathsItemsList().filter((t=>!!t.path))}else{this.pathsList=this.getPathsItemsList()}this.totalLenght=this.pathsList.length;this.homepageNode=this.pathsList.shift();this.pathListCopy=JSON.parse(JSON.stringify(this.pathsList));this.collapsedElements=[];if(this.totalLenght>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){if(this.pathListCopy.length>0){for(let t=0;t<this.pathsList.length;t++){if(this.pathsList[t].text.length>this.truncateChar){if(this.truncatePosition!==null){if(this.truncatePosition>0){const t=this.pathListCopy.splice(0,this.truncatePosition);t.forEach((t=>{this.collapsedElements.push(t)}));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}if(this.truncatePosition===0){const t=this.pathListCopy.splice(0,this.truncatePosition+1);this.collapsedElements.push(...t);this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}}if(t!==this.pathsList.length-1){const i=this.truncateWithEllipsis(this.pathsList[t].text,this.truncateChar);this.currentEllipsisText=this.pathsList[t].text;this.pathsList[t].text=i;this.pathsList[t].hasTooltip=true;this.truncatePosition=t;return}}}}}truncateWithEllipsis(t,i){const s="&mldr;";if(t.length>i){return t.substring(0,i-1)+s}return t}getPathsItemsList(){return Array.from(this.hostElement.children).map((t=>({text:t.textContent,path:t.href,hasTooltip:false})))}renderMobileBreadcrumb(){const t=this.pathsList[this.pathsList.length-1];return s("nav",{"aria-label":"Breadcrumb",class:{underlined:this.pathStyle===r.UNDERLINED,semibold:this.pathStyle===r.SEMIBOLD}},s("ol",null,this.renderNode(t,true)))}renderHomepageNode(t){return s("li",null,s("a",{class:{"homepage-icon":this.homepageVariant===h.ICON,"homepage-text":this.homepageVariant===h.TEXT},href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t)},this.homepageVariant===h.ICON?s("z-icon",{name:"home",fill:"color-link-primary",height:16,width:16}):"Home"))}renderNode(t,i){return s("li",null,t.hasTooltip&&s("z-popover",{class:"full-path-tooltip","bind-to":this.triggerEllipsis,open:this.popoverEllipsisOpen,position:a.BOTTOM_RIGHT,closable:false,showArrow:true},s("span",{class:"tooltip-content"},this.currentEllipsisText)),s("a",{class:{"missing-path":!t.path,"text-ellipsis":i},ref:t=>this.triggerEllipsis=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:i?`<z-icon fill="color-link-primary" name="chevron-left"></z-icon>${t.text}`:t.text}))}renderBreadcrumb(){return s("nav",{ref:t=>this.wrapElement=t,"aria-label":"Breadcrumb",class:{underlined:this.pathStyle===r.UNDERLINED,semibold:this.pathStyle===r.SEMIBOLD}},s("ol",null,this.renderHomepageNode(this.homepageNode),this.collapsedElements.length?this.renderOverflowMenu():"",this.pathsList.map((t=>this.renderNode(t,false)))))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(t,i){if(this.preventFollowUrl){t.preventDefault();this.clickOnNode.emit(i.path)}}handleOverflowMenuAccessibility(t){const i=this.anchorElements.length;if(t.key===l.TAB){t.preventDefault();return}t.stopPropagation();const s=[l.ARROW_DOWN,l.ARROW_UP];if(s.includes(t.key)){t.preventDefault();if(t.key===l.ARROW_DOWN){this.currentIndex=i===this.currentIndex+1?0:this.currentIndex+1}if(t.key===l.ARROW_UP){this.currentIndex=this.currentIndex<=0?i-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(t.key===l.ESC){this.triggerButton.focus()}}renderOverflowMenu(){if(this.collapsedElements.length){return s("li",null,s("z-popover",{class:"hidden-paths-popover",ref:t=>this.collapsedElementsRef=t,"bind-to":this.triggerButton,position:a.BOTTOM_RIGHT,closable:true,showArrow:true},s("div",{class:"popover-content"},s("z-list",null,s("z-list-group",{size:p.SMALL},this.collapsedElements.map(((t,i,e)=>s("div",null,s("z-list-element",{clickable:true},s("a",{class:"text-ellipsis",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onKeyDown:t=>this.handleOverflowMenuAccessibility(t)},t.text)),i<e.length-1&&s("z-divider",{color:"color-surface03"})))))))),s("button",{"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",ref:t=>this.triggerButton=t,class:"dots",onClick:()=>{this.togglePopover()},onKeyDown:t=>{d(t,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)}},"..."))}}render(){return s(e,{key:"0fdd2556f767ddc969bb26ad157149092c28976f",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},this.viewPortWidth===n.MOBILE?this.renderMobileBreadcrumb():this.renderBreadcrumb())}get hostElement(){return o(this)}static get watchers(){return{maxNodesToShow:["handlePropChange"],viewPortWidth:["handleResizeUp"]}}};m.style=u;export{m as z_breadcrumb};
2
- //# sourceMappingURL=p-34541d7c.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZBreadcrumbStyle0","ZBreadcrumb","this","collapsedElements","currentIndex","truncatePosition","BreadcrumbPathStyle","UNDERLINED","BreadcrumbHomepageVariant","ICON","handleResize","viewPortWidth","getDevice","Device","MOBILE","wrapElement","scrollWidth","clientWidth","hasOverflow","handlePropChange","initializeBreadcrumb","handleResizeUp","newValue","oldValue","TABLET","DESKTOP","DESKTOP_WIDE","componentWillLoad","componentWillRender","checkEllipsisOrOverflowMenu","componentDidRender","collapsedElementsRef","anchorElements","Array","from","hostElement","shadowRoot","querySelectorAll","isMobile","pathsList","getPathsItemsList","filter","item","path","totalLenght","length","homepageNode","shift","pathListCopy","JSON","parse","stringify","maxNodesToShow","splice","i","text","truncateChar","arrayToPush","forEach","push","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","ending","substring","children","map","textContent","href","renderMobileBreadcrumb","lastPath","h","class","underlined","pathStyle","semibold","SEMIBOLD","renderNode","renderHomepageNode","homepageVariant","TEXT","onClick","e","handlePreventFollowUrl","name","fill","height","width","mobile","triggerEllipsis","open","popoverEllipsisOpen","position","PopoverPosition","BOTTOM_RIGHT","closable","showArrow","ref","val","undefined","onMouseOver","onMouseLeave","innerHTML","renderBreadcrumb","renderOverflowMenu","togglePopover","preventFollowUrl","preventDefault","clickOnNode","emit","handleOverflowMenuAccessibility","anchorElementsLenght","key","KeyboardCode","TAB","stopPropagation","arrows","ARROW_DOWN","ARROW_UP","includes","focus","ESC","triggerButton","size","ListSize","SMALL","index","array","clickable","onKeyDown","color","el","handleKeyboardSubmit","bind","setTimeout","render","Host","style","overflowMenuItemRows"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n\n --line-clamp-popover: 0;\n --line-clamp-mobile: 1;\n}\n\nbutton {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\nnav {\n display: flex;\n height: 30px;\n align-items: center;\n padding-left: calc(var(--space-unit) / 2);\n overflow-x: hidden;\n}\n\nli {\n display: flex;\n align-items: baseline;\n}\n\n:host a:focus,\n:host button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: 0;\n}\n\n:host a {\n color: var(--color-link-primary);\n font-size: var(--font-size-2);\n text-decoration: none;\n white-space: nowrap;\n}\n\n:host a.homepage-icon {\n display: list-item;\n}\n\n:host a.homepage-text {\n display: initial;\n margin-top: calc(var(--space-unit) / 4);\n margin-right: var(--space-unit);\n}\n\n:host a.missing-path {\n color: var(--color-text01);\n}\n\n:host a.text-ellipsis {\n display: -webkit-box !important;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--line-clamp-mobile);\n text-overflow: ellipsis;\n white-space: normal;\n}\n\n:host ol {\n display: flex;\n padding: 0;\n margin: 0;\n list-style-type: none;\n}\n\n:host ol > li:not(:first-child, :last-child) {\n margin-right: var(--space-unit);\n}\n\nnav.underlined > ol > li a:not(.missing-path),\nnav.underlined > ol > li button {\n text-decoration: underline;\n}\n\nnav.semibold > ol > li a:not(.missing-path),\nnav.semibold > ol > li button {\n font-weight: var(--font-sb);\n}\n\n:host z-icon {\n margin-right: var(--space-unit);\n\n --z-icon-width: 12px;\n --z-icon-height: 12px;\n}\n\n:host button.dots {\n display: inline-block;\n color: var(--color-link-primary);\n cursor: pointer;\n}\n\n:host .hidden-paths-popover .popover-content {\n max-width: 302px;\n padding: calc(var(--space-unit) / 2) var(--space-unit);\n text-align: left;\n}\n\n:host .hidden-paths-popover .popover-content a {\n font-weight: var(--font-rg);\n text-decoration: none;\n}\n\n:host .hidden-paths-popover {\n --z-popover-theme--surface: var(--color-surface02);\n --z-popover-padding: 0;\n}\n\n:host .hidden-paths-popover::before,\n.full-path-tooltip::before {\n --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n:host .full-path-tooltip {\n --z-popover-theme--surface: var(--color-surface05);\n --z-popover-theme--text: var(--color-text-inverse);\n --z-popover-padding: 0;\n}\n\n:host .tooltip-content {\n padding: 0 var(--space-unit);\n font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n /* https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/#accessibilityfeatures */\n :host ol > li + li::before {\n display: inline-block;\n width: 10px;\n height: 10px;\n flex: 1;\n margin-right: 2px;\n color: var(--color-disabled03);\n content: \"\\203A\";\n }\n\n :host a.text-ellipsis {\n -webkit-line-clamp: var(--line-clamp-popover);\n }\n}\n","import {Component, Prop, h, State, Host, Listen, Element, Event, Watch, EventEmitter} from \"@stencil/core\";\nimport {\n BreadcrumbHomepageVariant,\n BreadcrumbPath,\n BreadcrumbPathStyle,\n Device,\n KeyboardCode,\n ListSize,\n PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-breadcrumb\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZBreadcrumb {\n /* Accessibility references */\n /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n @Element() hostElement: HTMLZBreadcrumbElement;\n\n /** [optional] Sets the path style */\n @Prop({reflect: true})\n pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n /** [optional] Variant of first node */\n @Prop()\n homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n /** [optional] Sets max number of element to show */\n @Prop()\n maxNodesToShow? = 5;\n\n /** [optional] Controls the behaviour on <a> tag click/enter */\n @Prop()\n preventFollowUrl? = false;\n\n /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n @Prop()\n overflowMenuItemRows? = 0;\n\n /** [optional] Sets the maximun number of chars per single node */\n @Prop()\n truncateChar? = 30;\n\n /** Handle mobile */\n @State()\n viewPortWidth: Device;\n\n /** Detect whether the length of the nodes shown exceeds the container length */\n @State()\n hasOverflow = false;\n\n @State()\n popoverEllipsisOpen = false;\n\n /** Emitted when preventFollowUrl=true to handle custom page transition */\n @Event()\n clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n @Listen(\"resize\", {target: \"window\"})\n handleResize(): void {\n this.viewPortWidth = getDevice();\n if (\n this.viewPortWidth !== Device.MOBILE &&\n this.wrapElement &&\n this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n ) {\n this.hasOverflow = true;\n }\n }\n // eslint-disable-next-line lines-between-class-members\n @Watch(\"maxNodesToShow\")\n handlePropChange(): void {\n this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n }\n\n @Watch(\"viewPortWidth\")\n handleResizeUp(newValue: Device, oldValue: Device): void {\n if (\n newValue === Device.MOBILE ||\n (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n ) {\n this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n }\n }\n\n private pathsList: BreadcrumbPath[];\n\n private pathListCopy: BreadcrumbPath[];\n\n private collapsedElements: BreadcrumbPath[] = [];\n\n private collapsedElementsRef: HTMLZPopoverElement;\n\n private triggerButton: HTMLButtonElement;\n\n private triggerEllipsis: HTMLAnchorElement;\n\n private wrapElement: HTMLElement;\n\n private currentIndex = 0;\n\n private homepageNode: BreadcrumbPath;\n\n private totalLenght: number;\n\n private anchorElements;\n\n private currentEllipsisText: string;\n\n private truncatePosition = null;\n\n componentWillLoad(): void {\n this.viewPortWidth = getDevice();\n this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n }\n\n componentWillRender(): void {\n if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n this.checkEllipsisOrOverflowMenu();\n this.hasOverflow = false;\n }\n }\n\n componentDidRender(): void {\n if (this.collapsedElementsRef) {\n this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n }\n\n if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n this.hasOverflow = true;\n }\n }\n\n private initializeBreadcrumb(isMobile: boolean): void {\n if (isMobile) {\n this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n } else {\n this.pathsList = this.getPathsItemsList();\n }\n this.totalLenght = this.pathsList.length;\n this.homepageNode = this.pathsList.shift();\n this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));\n this.collapsedElements = [];\n if (this.totalLenght > this.maxNodesToShow) {\n this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n }\n }\n\n private checkEllipsisOrOverflowMenu(): void {\n if (this.pathListCopy.length > 0) {\n for (let i = 0; i < this.pathsList.length; i++) {\n if (this.pathsList[i].text.length > this.truncateChar) {\n if (this.truncatePosition !== null) {\n if (this.truncatePosition > 0) {\n const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);\n arrayToPush.forEach((item) => {\n this.collapsedElements.push(item);\n });\n this.pathsList.splice(0, this.truncatePosition);\n this.truncatePosition = 0;\n\n return;\n }\n if (this.truncatePosition === 0) {\n const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);\n this.collapsedElements.push(...arrayToPush);\n this.pathsList.splice(0, this.truncatePosition + 1);\n this.truncatePosition = null;\n\n return;\n }\n }\n if (i !== this.pathsList.length - 1) {\n const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n this.currentEllipsisText = this.pathsList[i].text;\n this.pathsList[i].text = truncatedString;\n this.pathsList[i].hasTooltip = true;\n this.truncatePosition = i;\n\n return;\n }\n }\n }\n }\n }\n\n private truncateWithEllipsis(str: string, length: number): string {\n const ending = \"&mldr;\";\n\n if (str.length > length) {\n return str.substring(0, length - 1) + ending;\n }\n\n return str;\n }\n\n private getPathsItemsList(): BreadcrumbPath[] {\n return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n return {\n text: item.textContent,\n path: item.href,\n hasTooltip: false,\n };\n });\n }\n\n private renderMobileBreadcrumb(): HTMLDivElement {\n const lastPath = this.pathsList[this.pathsList.length - 1];\n\n return (\n <nav\n aria-label=\"Breadcrumb\"\n class={{\n underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n }}\n >\n <ol>{this.renderNode(lastPath, true)}</ol>\n </nav>\n );\n }\n\n private renderHomepageNode(item): HTMLLIElement {\n return (\n <li>\n <a\n class={{\n \"homepage-icon\": this.homepageVariant === BreadcrumbHomepageVariant.ICON,\n \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n }}\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n >\n {this.homepageVariant === BreadcrumbHomepageVariant.ICON ? (\n <z-icon\n name=\"home\"\n fill=\"color-link-primary\"\n height={16}\n width={16}\n />\n ) : (\n \"Home\"\n )}\n </a>\n </li>\n );\n }\n\n private renderNode(item, mobile): HTMLLIElement {\n return (\n <li>\n {item.hasTooltip && (\n <z-popover\n class=\"full-path-tooltip\"\n bind-to={this.triggerEllipsis}\n open={this.popoverEllipsisOpen}\n position={PopoverPosition.BOTTOM_RIGHT}\n closable={false}\n showArrow\n >\n <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n </z-popover>\n )}\n <a\n class={{\n \"missing-path\": !item.path,\n \"text-ellipsis\": mobile,\n }}\n ref={(val) => (this.triggerEllipsis = val)}\n aria-current={item.path ? undefined : \"page\"}\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n onMouseOver={() => {\n if (item.hasTooltip) {\n this.popoverEllipsisOpen = true;\n }\n }}\n onMouseLeave={() => {\n if (item.hasTooltip) {\n this.popoverEllipsisOpen = false;\n }\n }}\n innerHTML={mobile ? `<z-icon fill=\"color-link-primary\" name=\"chevron-left\"></z-icon>${item.text}` : item.text}\n />\n </li>\n );\n }\n\n private renderBreadcrumb(): HTMLElement {\n return (\n <nav\n ref={(val) => (this.wrapElement = val)}\n aria-label=\"Breadcrumb\"\n class={{\n underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n }}\n >\n <ol>\n {this.renderHomepageNode(this.homepageNode)}\n {this.collapsedElements.length ? this.renderOverflowMenu() : \"\"}\n {this.pathsList.map((item) => this.renderNode(item, false))}\n </ol>\n </nav>\n );\n }\n\n private togglePopover(): void {\n if (!this.collapsedElementsRef.open) {\n this.collapsedElementsRef.open = true;\n }\n }\n\n private handlePreventFollowUrl(e: MouseEvent, item): void {\n if (this.preventFollowUrl) {\n e.preventDefault();\n this.clickOnNode.emit(item.path);\n }\n }\n\n private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n const anchorElementsLenght = this.anchorElements.length;\n if (e.key === KeyboardCode.TAB) {\n e.preventDefault();\n\n return;\n }\n e.stopPropagation();\n const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n if (arrows.includes(e.key as KeyboardCode)) {\n e.preventDefault();\n\n if (e.key === KeyboardCode.ARROW_DOWN) {\n this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n }\n if (e.key === KeyboardCode.ARROW_UP) {\n this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n }\n\n this.anchorElements[this.currentIndex].focus();\n }\n\n if (e.key === KeyboardCode.ESC) {\n this.triggerButton.focus();\n }\n }\n\n private renderOverflowMenu(): HTMLLIElement {\n if (this.collapsedElements.length) {\n return (\n <li>\n <z-popover\n class=\"hidden-paths-popover\"\n ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n bind-to={this.triggerButton}\n position={PopoverPosition.BOTTOM_RIGHT}\n closable={true}\n showArrow\n >\n <div class=\"popover-content\">\n <z-list>\n <z-list-group size={ListSize.SMALL}>\n {this.collapsedElements.map((item, index, array) => {\n return (\n <div>\n <z-list-element clickable>\n <a\n class=\"text-ellipsis\"\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n >\n {item.text}\n </a>\n </z-list-element>\n {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n </div>\n );\n })}\n </z-list-group>\n </z-list>\n </div>\n </z-popover>\n <button\n aria-label=\"Mostra più breadcrumb\"\n aria-haspopup=\"true\"\n ref={(el) => (this.triggerButton = el as HTMLButtonElement)}\n class=\"dots\"\n onClick={() => {\n this.togglePopover();\n }}\n onKeyDown={(e) => {\n handleKeyboardSubmit(e, this.togglePopover.bind(this));\n setTimeout(() => {\n this.anchorElements[0].focus();\n }, 100);\n }}\n >\n ...\n </button>\n </li>\n );\n }\n }\n\n render(): HTMLZBreadcrumbElement {\n return (\n <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n {this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{r as t,h as o}from"./p-10bb4f4b.js";const s=":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";const e=s;const r=class{constructor(o){t(this,o)}render(){return o("slot",{key:"9fb05af5cc8c977fc5041b5a5b75d5813caefd82"})}};r.style=e;export{r as z_visually_hidden};
2
- //# sourceMappingURL=p-4c40561d.entry.js.map
@@ -1,2 +0,0 @@
1
- import{r as o,h as n,a}from"./p-10bb4f4b.js";import{B as i}from"./p-025f494e.js";const t="html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;color:inherit;font-weight:inherit;-webkit-line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-surface04);color:var(--color-text01);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out}z-anchor-navigation nav>[current]{border-left-color:var(--color-primary01);color:var(--color-link-primary);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button,z-icon){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}z-anchor-navigation nav z-icon{--z-icon-width:16px;--z-icon-height:16px;display:flex;padding:calc(var(--space-unit) * 1.5);fill:var(--color-icon02)}@media (min-width: 768px){z-anchor-navigation z-button.toggle{display:none !important}z-anchor-navigation nav{display:flex}z-anchor-navigation nav a{outline:none}@media (hover: hover){z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-secondary);background-color:var(--color-hover-surface);color:var(--color-hover-link)}}z-anchor-navigation nav>*:is(:focus,:focus-within),z-anchor-navigation nav :is(z-icon,button):focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation[hide-unselected] nav>*:not([current],:hover,:focus,:focus-within){color:transparent}z-anchor-navigation nav>*:not([current],:hover,:focus,:focus-within)>*:is(z-button,button,z-icon):not(:focus:focus-visible){opacity:0;pointer-events:none}@media (hover: none){z-anchor-navigation:not([hide-unselected]) nav>*>*:is(z-button,button,z-icon){opacity:1;pointer-events:all}}}";const r=t;const e=class{constructor(n){o(this,n);this.hideUnselected=false;this.collapsed=false}setAriaCurrent(){Array.from(this.nav.children).forEach((o=>{const n=o instanceof HTMLAnchorElement?o:o.querySelector("a");const a=window.location.href===n.href;n.setAttribute("aria-current",a.toString());o.toggleAttribute("current",a)}))}toggleCollapsed(){this.collapsed=!this.collapsed}componentDidLoad(){window.addEventListener("hashchange",this.setAriaCurrent.bind(this));this.setAriaCurrent()}disconnectedCallback(){window.removeEventListener("hashchange",this.setAriaCurrent)}render(){return n(a,{key:"2f19d516f4b99e0f76268f025227f94d302273ea",collapsed:this.collapsed},n("z-button",{key:"822dca30f3ea2176f463b35a167fcc4714feeb7f",class:"toggle",variant:i.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},"salta a"),n("nav",{key:"218bf9aeb919037ad4725a9593ded46302b9e42a",ref:o=>this.nav=o},n("slot",{key:"0dfb9d2e7642d86b5c3e7da97be6ec04d05db70f"})))}};e.style=r;export{e as z_anchor_navigation};
2
- //# sourceMappingURL=p-acfde9fa.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZAnchorNavigationStyle0","ZAnchorNavigation","setAriaCurrent","Array","from","this","nav","children","forEach","item","anchor","HTMLAnchorElement","querySelector","isCurrent","window","location","href","setAttribute","toString","toggleAttribute","toggleCollapsed","collapsed","componentDidLoad","addEventListener","bind","disconnectedCallback","removeEventListener","render","h","Host","key","class","variant","ButtonVariant","SECONDARY","icon","onClick","ref","el"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n display: none;\n flex-direction: column;\n justify-content: flex-start;\n row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n display: flex;\n margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n display: -webkit-box;\n overflow: clip;\n width: 100%;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n -webkit-box-orient: vertical;\n color: inherit;\n font-weight: inherit;\n -webkit-line-clamp: 2;\n overflow-clip-margin: content-box;\n text-decoration: none;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n z-anchor-navigation nav a {\n display: inline-block;\n overflow: hidden;\n -webkit-line-clamp: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\nz-anchor-navigation nav > * {\n position: relative;\n border-left: var(--border-size-large) solid var(--color-surface04);\n color: var(--color-text01);\n font-family: var(--font-family-sans);\n transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [current] {\n border-left-color: var(--color-primary01);\n color: var(--color-link-primary);\n font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > *:is(z-button, button, z-icon) {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav button {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\nz-anchor-navigation nav z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n\n display: flex;\n padding: calc(var(--space-unit) * 1.5);\n fill: var(--color-icon02);\n}\n\n@media (min-width: 768px) {\n z-anchor-navigation z-button.toggle {\n display: none !important;\n }\n\n z-anchor-navigation nav {\n display: flex;\n }\n\n z-anchor-navigation nav a {\n outline: none;\n }\n\n @media (hover: hover) {\n z-anchor-navigation nav > *:hover {\n border-left-color: var(--color-hover-secondary);\n background-color: var(--color-hover-surface);\n color: var(--color-hover-link);\n }\n }\n\n z-anchor-navigation nav > *:is(:focus, :focus-within),\n z-anchor-navigation nav :is(z-icon, button):focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n }\n\n z-anchor-navigation[hide-unselected] nav > *:not([current], :hover, :focus, :focus-within) {\n color: transparent;\n }\n\n z-anchor-navigation\n nav\n > *:not([current], :hover, :focus, :focus-within)\n > *:is(z-button, button, z-icon):not(:focus:focus-visible) {\n opacity: 0;\n pointer-events: none;\n }\n\n @media (hover: none) {\n z-anchor-navigation:not([hide-unselected]) nav > * > *:is(z-button, button, z-icon) {\n opacity: 1;\n pointer-events: all;\n }\n }\n}\n","import {Component, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/**\n * * Anchor navigation component.\n * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /**\n * If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n */\n @Prop({reflect: true})\n hideUnselected = false;\n\n /**\n * Whether the mobile list is collapsed.\n */\n @State()\n collapsed = false;\n\n /** Reference to the nav element. */\n private nav: HTMLElement;\n\n /**\n * Set aria-current attribute to the anchors and `current` to nav children.\n */\n private setAriaCurrent(): void {\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = window.location.href === anchor.href;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"current\", isCurrent);\n });\n }\n\n /**\n * Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n window.addEventListener(\"hashchange\", this.setAriaCurrent.bind(this));\n this.setAriaCurrent();\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setAriaCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host collapsed={this.collapsed}>\n <z-button\n class=\"toggle\"\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n salta a\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"iFAAA,MAAMA,EAAY,k7EAClB,MAAAC,EAAeD,E,MCsBFE,EAAiB,M,6CAMX,M,eAML,K,CAQJ,cAAAC,GACNC,MAAMC,KAAKC,KAAKC,IAAIC,UAAUC,SAASC,IACrC,MAAMC,EAASD,aAAgBE,kBAAoBF,EAAOA,EAAKG,cAAc,KAC7E,MAAMC,EAAYC,OAAOC,SAASC,OAASN,EAAOM,KAClDN,EAAOO,aAAa,eAAgBJ,EAAUK,YAC9CT,EAAKU,gBAAgB,UAAWN,EAAU,G,CAOtC,eAAAO,GACNf,KAAKgB,WAAahB,KAAKgB,S,CAGzB,gBAAAC,GACER,OAAOS,iBAAiB,aAAclB,KAAKH,eAAesB,KAAKnB,OAC/DA,KAAKH,gB,CAGP,oBAAAuB,GACEX,OAAOY,oBAAoB,aAAcrB,KAAKH,e,CAGhD,MAAAyB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACT,UAAWhB,KAAKgB,WACpBO,EAAA,YAAAE,IAAA,2CACEC,MAAM,SACNC,QAASC,EAAcC,UACvBC,KAAM9B,KAAKgB,UAAY,aAAe,eACtCe,QAAS/B,KAAKe,gBAAgBI,KAAKnB,OAAK,WAI1CuB,EAAA,OAAAE,IAAA,2CAAKO,IAAMC,GAAQjC,KAAKC,IAAMgC,GAC5BV,EAAA,QAAAE,IAAA,8C"}
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as e,g as s}from"./p-10bb4f4b.js";import{I as o,e as r,g as a,l as n,i as h}from"./p-025f494e.js";import{r as d,a as l}from"./p-955da62e.js";import"./p-2c886e8b.js";const c=':host{display:block;font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-surface04);margin:0;background-color:var(--color-input-field01);border-radius:var(--border-radius-small);cursor:pointer}:host([size="small"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size="x-small"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{box-shadow:none}:host>div>div.header:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--color-text01)}:host>div>.header>p.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-icon02);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-primary01);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--color-disabled02)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--color-icon02);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--color-input-field01);border-radius:0}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--color-primary01) transparent}:host>div.open>div.open-combo-data>div>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search>div>a{display:inline-block;height:44px;color:var(--color-primary01);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size="small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size="x-small"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}';const p=c;const u=class{watchItems(){this.itemsList=typeof this.items==="string"?JSON.parse(this.items):this.items;this.selectedCounter=this.itemsList.filter((t=>t.checked)).length;this.updateRenderItemsList()}watchSearchValue(){this.filterItems(this.searchValue)}watchCheckboxes(){this.checkboxes.forEach(((t,i)=>t.setAttribute("tabindex",i===0?"0":"-1")))}emitComboboxChange(){this.comboboxChange.emit({id:this.inputid,items:this.itemsList})}constructor(e){t(this,e);this.comboboxChange=i(this,"comboboxChange",7);this.itemsList=[];this.inputType=o.TEXT;this.inputid=`combo-${d()}`;this.items=undefined;this.label=undefined;this.disabled=false;this.hassearch=false;this.searchlabel=undefined;this.searchplaceholder=undefined;this.searchtitle=undefined;this.noresultslabel="Nessun risultato";this.isopen=false;this.isfixed=false;this.closesearchtext="Chiudi";this.hascheckall=false;this.checkalltext="Seleziona tutti";this.uncheckalltext="Deseleziona tutti";this.maxcheckableitems=0;this.hasgroupitems=undefined;this.size=r.BIG;this.searchValue=undefined;this.selectedCounter=undefined;this.renderItemsList=[];this.focusedItemId=undefined;this.checkboxes=[];this.toggleComboBox=this.toggleComboBox.bind(this);this.closeFilterItems=this.closeFilterItems.bind(this)}componentWillLoad(){this.watchItems()}componentWillRender(){this.selectedCounter=this.itemsList.filter((t=>t.checked)).length}componentDidRender(){const t=this.getAllCheckboxes();if(JSON.stringify(t)!==JSON.stringify(this.checkboxes)){this.checkboxes=t}}getItemId(t){return`combo-checkbox-${this.inputid}-${t.id}`}getCheckboxClass(){return`combo-item-checkbox-input-${this.inputid}`}getAllCheckboxes(){return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`))}getControlToListSize(){let t;switch(this.size){case r.BIG:t=h.LARGE;break;case r.SMALL:t=h.SMALL;break;case r.X_SMALL:t=h.SMALL;break;default:t=h.MEDIUM}return t}handleSelectArrowsNavigation(t,i){if(![a.ARROW_DOWN,a.ARROW_UP].includes(t.key)||!this.isopen){return}t.preventDefault();t.stopPropagation();const e=this.element.shadowRoot.querySelector(`#${i}`);if(!e){return}const s=this.checkboxes;if(!s.length){return}const o=s.indexOf(e);const r=0;const n=s.length-1;let h=null;if(t.key===a.ARROW_DOWN){h=o===n?s[r]:s[o+1]}else if(t.key===a.ARROW_UP){h=o===r?s[n]:s[o-1]}this.focusComboboxItem(h)}handleHeaderKeyboardEvent(t){if(t.key===a.SPACE){t.preventDefault()}if(t.key===a.ARROW_DOWN&&!this.isopen||t.key===a.ARROW_UP&&this.isopen){this.toggleComboBox()}}handleCheckboxFocus(t){this.focusedItemId=t}focusComboboxItem(t){this.checkboxes.forEach((function(t){t.setAttribute("tabindex","-1")}));t.setAttribute("tabindex","0");t.focus()}updateRenderItemsList(){if(this.searchValue){this.filterItems(this.searchValue)}else{this.resetRenderItemsList()}}resetRenderItemsList(){const t=[];this.itemsList.forEach((i=>{t.push(Object.assign({},i))}));this.renderItemsList=t}filterItems(t){if(!t){return this.closeFilterItems()}this.resetRenderItemsList();this.renderItemsList=this.renderItemsList.filter((i=>{const e=i.name.toUpperCase().indexOf(t.toUpperCase());const s=e+t.length;const o=i.name.substring(0,e)+"<strong>"+i.name.substring(e,s)+"</strong>"+i.name.substring(s,i.name.length);i.name=o;return e>=0}))}checkAll(t=true){this.itemsList=this.itemsList.map((i=>Object.assign(Object.assign({},i),{checked:t})));this.resetRenderItemsList();this.emitComboboxChange()}closeFilterItems(){this.searchValue="";this.resetRenderItemsList()}toggleComboBox(){this.isopen=!this.isopen}getComboboxA11yAttributes(){return{role:"combobox","aria-label":this.label,"aria-expanded":this.isopen?"true":"false","aria-activedescendant":this.isopen?this.focusedItemId:"","aria-controls":`${this.inputid}_list`}}renderHeader(){return e("div",{class:"header",onClick:()=>this.toggleComboBox(),onKeyDown:t=>{this.handleHeaderKeyboardEvent(t)},onKeyUp:t=>l(t,this.toggleComboBox),role:"button",tabindex:0,"aria-expanded":this.isopen?"true":"false"},e("p",{class:"body-3"},this.label,e("span",null,this.selectedCounter>0&&` (${this.selectedCounter})`)),e("z-icon",{name:"caret-down",class:this.size}))}renderContent(){if(!this.isopen){return}return e("div",{class:"open-combo-data"},this.hassearch&&this.renderSearchInput(),!this.hassearch?e("span",Object.assign({},this.getComboboxA11yAttributes())):null,e("div",{role:"listbox","aria-label":this.label,"aria-multiselectable":true,id:`${this.inputid}_list`,"aria-owns":`${this.checkboxes.map((t=>t.id)).join(" ")}`},this.hascheckall&&this.renderCheckAll(),this.renderItems()))}renderItems(){return e("div",{class:this.searchValue&&"search"},this.renderList(this.renderItemsList),this.searchValue&&this.renderCloseButton())}renderItem(t,i,s){return e("z-list-element",{id:t.id,htmlTabindex:null,dividerType:i!==s-1?n.ELEMENT:n.NONE,size:this.getControlToListSize()},e("z-input",{type:o.CHECKBOX,checked:t.checked,htmlid:this.getItemId(t),label:t.name,class:this.getCheckboxClass(),disabled:!t.checked&&this.maxcheckableitems&&this.selectedCounter>=this.maxcheckableitems,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":t.checked?"true":"false",onKeyDown:i=>this.handleSelectArrowsNavigation(i,this.getItemId(t)),onInputCheck:i=>{this.itemsList=this.itemsList.map((e=>{if(t.id===e.id){e.checked=i.detail.checked}return e}));this.updateRenderItemsList();this.emitComboboxChange()},onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}renderList(t){if(!t){return}if(!t.length&&this.searchValue){return this.renderNoSearchResults()}if(this.hasgroupitems){return this.renderGroups(t)}return e("ul",{role:"none"},t.map(((i,e)=>this.renderItem(i,e,t.length))))}renderGroups(t){const i=t.reduce(((i,e,s)=>{var o;const{category:r}=e;const a=this.renderItem(e,s,t.length);i[r]=(o=i[r])!==null&&o!==void 0?o:[];i[r].push(a);return i}),{});const s=Object.entries(i).map((([t,i])=>e("z-list-group",{"divider-type":n.ELEMENT},e("span",{class:"body-3-sb z-list-group-title",slot:"header-title"},t),i.map((t=>t)))));return e("ul",{role:"none"},s)}renderNoSearchResults(){return e("ul",{role:"none"},e("z-myz-list-item",{id:"no-results",text:this.noresultslabel,listitemid:"no-results",icon:"multiply-circle",class:this.size}))}renderCloseButton(){return e("div",null,e("a",{onClick:()=>this.closeFilterItems(),onKeyUp:t=>l(t,this.closeFilterItems),role:"button",tabindex:0},this.closesearchtext))}renderSearchInput(){return e("z-input",Object.assign({htmlid:`${this.inputid}_search`,label:this.searchlabel,placeholder:this.searchplaceholder,htmltitle:this.searchtitle,type:this.inputType,value:this.searchValue,message:false,size:this.size,"aria-autocomplete":"list"},this.getComboboxA11yAttributes(),{onKeyUp:t=>{if(t.key===a.ESC){this.closeFilterItems()}},onInputChange:t=>{this.searchValue=t.detail.value}}))}renderCheckAll(){if(this.searchValue){return}const t=`combo-checkbox-${this.inputid}-check-all`;const i=this.selectedCounter===this.itemsList.length;return e("div",{class:"check-all-wrapper"},e("z-input",{type:o.CHECKBOX,checked:i,htmlid:t,class:this.getCheckboxClass(),label:i?this.uncheckalltext:this.checkalltext,disabled:this.maxcheckableitems&&this.maxcheckableitems<this.itemsList.length,size:this.size===r.X_SMALL?r.SMALL:this.size,role:"option","aria-selected":i?"true":"false",onKeyDown:i=>this.handleSelectArrowsNavigation(i,t),onInputCheck:t=>this.checkAll(t.detail.checked),onInputFocus:t=>this.handleCheckboxFocus(t.detail.id)}))}render(){return e("div",{key:"c50100577924339fd4c1c05fe3971c0f53379cd5","data-action":`combo-${this.inputid}`,class:{open:this.isopen,fixed:this.isfixed,disabled:this.disabled},id:this.inputid},this.renderHeader(),!this.disabled&&this.renderContent())}get element(){return s(this)}static get watchers(){return{items:["watchItems"],searchValue:["watchSearchValue"],checkboxes:["watchCheckboxes"]}}};u.style=p;export{u as z_combobox};
2
- //# sourceMappingURL=p-0f8cc377.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZComboboxStyle0","ZCombobox","watchItems","this","itemsList","items","JSON","parse","selectedCounter","filter","item","checked","length","updateRenderItemsList","watchSearchValue","filterItems","searchValue","watchCheckboxes","checkboxes","forEach","index","setAttribute","emitComboboxChange","comboboxChange","emit","id","inputid","constructor","hostRef","inputType","InputType","TEXT","randomId","ControlSize","BIG","toggleComboBox","bind","closeFilterItems","componentWillLoad","componentWillRender","componentDidRender","getAllCheckboxes","stringify","getItemId","getCheckboxClass","Array","from","element","shadowRoot","querySelectorAll","getControlToListSize","size","ListSize","LARGE","SMALL","X_SMALL","MEDIUM","handleSelectArrowsNavigation","e","currId","KeyboardCode","ARROW_DOWN","ARROW_UP","includes","key","isopen","preventDefault","stopPropagation","currElem","querySelector","currElemIndex","indexOf","firstElemIndex","lastElemIndex","nextElem","focusComboboxItem","handleHeaderKeyboardEvent","ev","SPACE","handleCheckboxFocus","focusedItemId","elem","focus","resetRenderItemsList","renderItemsList","push","Object","assign","value","start","name","toUpperCase","end","newName","substring","checkAll","map","getComboboxA11yAttributes","role","label","renderHeader","h","class","onClick","onKeyDown","onKeyUp","handleKeyboardSubmit","tabindex","renderContent","hassearch","renderSearchInput","join","hascheckall","renderCheckAll","renderItems","renderList","renderCloseButton","renderItem","htmlTabindex","dividerType","ListDividerType","ELEMENT","NONE","type","CHECKBOX","htmlid","disabled","maxcheckableitems","onInputCheck","i","detail","onInputFocus","renderNoSearchResults","hasgroupitems","renderGroups","newData","reduce","group","category","zListItem","_a","listGroups","entries","slot","text","noresultslabel","listitemid","icon","closesearchtext","searchlabel","placeholder","searchplaceholder","htmltitle","searchtitle","message","ESC","onInputChange","checkAllId","allChecked","uncheckalltext","checkalltext","render","open","fixed","isfixed"],"sources":["src/components/inputs/z-combobox/styles.css?tag=z-combobox&encapsulation=shadow","src/components/inputs/z-combobox/index.tsx"],"sourcesContent":[":host {\n display: block;\n font-family: var(--font-family-sans);\n}\n\n:host > div.fixed {\n position: relative;\n}\n\n:host > div > .header {\n position: relative;\n z-index: 10;\n display: flex;\n min-height: 42px;\n align-items: center;\n justify-content: space-between;\n padding: 0 calc(var(--space-unit) * 1.5);\n border: var(--border-size-small) solid var(--color-surface04);\n margin: 0;\n background-color: var(--color-input-field01);\n border-radius: var(--border-radius-small);\n cursor: pointer;\n}\n\n:host([size=\"small\"]) > div > .header {\n min-height: 34px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header {\n min-height: 30px;\n font-size: var(--font-size-2);\n}\n\n:host([size=\"x-small\"]) > div > .header p.body-3 {\n padding: calc(var(--space-unit) * 0.5) 0;\n}\n\n:host > div > .header:hover {\n outline: var(--border-size-medium) solid var(--color-surface04);\n outline-offset: -2px;\n}\n\n:host > div.open > div.header:focus:focus-visible {\n box-shadow: none;\n}\n\n:host > div > div.header:focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n:host > div > .header > p.body-3 {\n padding: var(--space-unit) 0;\n margin: 0;\n color: var(--color-text01);\n}\n\n:host > div > .header > p.body-3 > span {\n font-weight: var(--font-sb);\n}\n\n:host > div > .header > z-icon {\n fill: var(--color-icon02);\n transform: rotate(360deg);\n transition: all 200ms linear;\n}\n\n:host > div > .header > z-icon.small,\n:host > div > .header > z-icon.x-small {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n:host > div.open > .header {\n border: var(--border-size-small) solid var(--color-primary01);\n border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;\n}\n\n:host > div.disabled {\n pointer-events: none;\n}\n\n:host > div.disabled .header {\n border-color: var(--color-disabled01);\n fill: var(--color-disabled01);\n}\n\n:host > div.disabled .header > p.body-3 {\n color: var(--color-disabled02);\n}\n\n:host > div.disabled .header > z-icon:last-child {\n fill: var(--color-disabled01);\n}\n\n:host > div.open > .header > z-icon {\n fill: var(--color-icon02);\n transform: rotate(180deg);\n transition: all 200ms linear;\n}\n\n:host > div.open > div.open-combo-data {\n position: relative;\n z-index: 12;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n border: var(--border-size-small) solid var(--gray200);\n border-top: 0;\n background-color: var(--color-input-field01);\n border-radius: 0;\n}\n\n:host > div.open > div.open-combo-data > div > div {\n overflow: auto;\n max-height: 235px;\n padding: 0;\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > z-input {\n width: 100%;\n margin-bottom: calc(var(--space-unit) * 2);\n}\n\n:host > div.open > div.open-combo-data > div > div > ul {\n max-height: 235px;\n padding: 0 3px; /* needed for checkbox focus shadow */\n margin: 0;\n}\n\n::-webkit-scrollbar {\n width: 10px;\n background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);\n border-radius: var(--border-radius);\n}\n\n::-webkit-scrollbar-thumb {\n width: 10px;\n background-color: var(--color-primary01);\n}\n\n:host > div.open > z-input {\n position: relative;\n z-index: 1;\n width: 238px;\n margin: 0 calc(var(--space-unit) * 2);\n color: var(--color-primary01);\n}\n\n:host > div.open > div.open-combo-data > div > div.search {\n overflow: hidden;\n max-height: auto;\n margin-top: 0;\n box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);\n}\n\n:host > div.open > div.open-combo-data > div > div.search > ul {\n overflow: auto;\n max-height: 180px;\n padding: var(--space-unit) calc(var(--space-unit) * 2);\n scrollbar-color: var(--color-primary01) transparent;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div {\n display: flex;\n justify-content: center;\n}\n\n:host > div.open > div.open-combo-data > div > div.search > div > a {\n display: inline-block;\n height: 44px;\n color: var(--color-primary01);\n cursor: pointer;\n font-size: 14px;\n font-weight: var(--font-sb);\n line-height: 44px;\n text-align: center;\n text-transform: uppercase;\n}\n\n:host > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);\n border-bottom: var(--border-size-small) solid var(--gray800);\n margin-bottom: var(--space-unit);\n text-align: left;\n}\n\n:host([size=\"small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);\n}\n\n:host([size=\"x-small\"]) > div.open > div.open-combo-data > div > div.check-all-wrapper {\n padding: var(--space-unit) calc(var(--space-unit) * 0.5);\n}\n","import {Component, Prop, h, State, Watch, Event, Element, EventEmitter} from \"@stencil/core\";\nimport {ComboItem, InputType, ListDividerType, ControlSize, KeyboardCode, ListSize} from \"../../../beans\";\nimport {ZInput} from \"../z-input\";\nimport {handleKeyboardSubmit, randomId} from \"../../../utils/utils\";\nimport {ZMyzListItem} from \"../../../snowflakes/myz/list/z-myz-list-item\";\n\n@Component({\n tag: \"z-combobox\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZCombobox {\n @Element() element: HTMLZComboboxElement;\n\n /** input unique id */\n @Prop()\n inputid = `combo-${randomId()}`;\n\n /** list items array */\n @Prop()\n items: ComboItem[] | string;\n\n /** label text */\n @Prop()\n label: string;\n\n /** the combobox is disabled */\n @Prop({reflect: true})\n disabled?: boolean = false;\n\n /** show search input flag (optional) */\n @Prop()\n hassearch?: boolean = false;\n\n /** search input label text (optional) */\n @Prop()\n searchlabel?: string;\n\n /** search input placeholder text (optional) */\n @Prop()\n searchplaceholder?: string;\n\n /** search input title text (optional) */\n @Prop()\n searchtitle?: string;\n\n /** no result text message */\n @Prop()\n noresultslabel?: string = \"Nessun risultato\";\n\n /** toggle combo list opening flag */\n @Prop({mutable: true})\n isopen = false;\n\n /** fixed style flag */\n @Prop()\n isfixed = false;\n\n /** close combobox list text */\n @Prop()\n closesearchtext?: string = \"Chiudi\";\n\n /** show \"check all\" checkbox (optional) */\n @Prop()\n hascheckall?: boolean = false;\n\n /** check all label (optional) */\n @Prop()\n checkalltext?: string = \"Seleziona tutti\";\n\n /** uncheck all label (optional) */\n @Prop()\n uncheckalltext?: string = \"Deseleziona tutti\";\n\n /** max number of checkable items (0 = unlimited) */\n @Prop()\n maxcheckableitems = 0;\n\n /** group items by category */\n @Prop()\n hasgroupitems?: boolean;\n\n /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n @Prop()\n size?: ControlSize = ControlSize.BIG;\n\n @State()\n searchValue: string;\n\n @State()\n selectedCounter: number;\n\n @State()\n renderItemsList: ComboItem[] = []; // used for render only\n\n @State()\n focusedItemId: string;\n\n @State()\n checkboxes: HTMLInputElement[] = [];\n\n private itemsList: ComboItem[] = [];\n\n private inputType: InputType = InputType.TEXT;\n\n @Watch(\"items\")\n watchItems(): void {\n this.itemsList = typeof this.items === \"string\" ? JSON.parse(this.items) : this.items;\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n this.updateRenderItemsList();\n }\n\n @Watch(\"searchValue\")\n watchSearchValue(): void {\n this.filterItems(this.searchValue);\n }\n\n @Watch(\"checkboxes\")\n watchCheckboxes(): void {\n this.checkboxes.forEach((item, index) => item.setAttribute(\"tabindex\", index === 0 ? \"0\" : \"-1\"));\n }\n\n /** Emitted when value is checked/unchecked. Returns id, items. */\n @Event()\n comboboxChange: EventEmitter;\n\n private emitComboboxChange(): void {\n this.comboboxChange.emit({id: this.inputid, items: this.itemsList});\n }\n\n constructor() {\n this.toggleComboBox = this.toggleComboBox.bind(this);\n this.closeFilterItems = this.closeFilterItems.bind(this);\n }\n\n componentWillLoad(): void {\n this.watchItems();\n }\n\n componentWillRender(): void {\n this.selectedCounter = this.itemsList.filter((item) => item.checked).length;\n }\n\n componentDidRender(): void {\n const checkboxes = this.getAllCheckboxes();\n if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {\n this.checkboxes = checkboxes;\n }\n }\n\n private getItemId(item: ComboItem): string {\n return `combo-checkbox-${this.inputid}-${item.id}`;\n }\n\n private getCheckboxClass(): string {\n return `combo-item-checkbox-input-${this.inputid}`;\n }\n\n private getAllCheckboxes(): HTMLInputElement[] {\n return Array.from(\n this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`)\n ) as HTMLInputElement[];\n }\n\n private getControlToListSize(): ListSize {\n let size;\n switch (this.size) {\n case ControlSize.BIG:\n size = ListSize.LARGE;\n break;\n case ControlSize.SMALL:\n size = ListSize.SMALL;\n break;\n case ControlSize.X_SMALL:\n size = ListSize.SMALL;\n break;\n default:\n size = ListSize.MEDIUM;\n }\n\n return size;\n }\n\n private handleSelectArrowsNavigation(e: KeyboardEvent, currId: string): void {\n if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key as KeyboardCode) || !this.isopen) {\n return;\n }\n\n e.preventDefault();\n e.stopPropagation();\n\n const currElem = this.element.shadowRoot.querySelector(`#${currId}`) as HTMLInputElement;\n if (!currElem) {\n return;\n }\n\n const checkboxes = this.checkboxes;\n if (!checkboxes.length) {\n return;\n }\n\n const currElemIndex = checkboxes.indexOf(currElem);\n const firstElemIndex = 0;\n const lastElemIndex = checkboxes.length - 1;\n\n let nextElem = null;\n if (e.key === KeyboardCode.ARROW_DOWN) {\n nextElem = currElemIndex === lastElemIndex ? checkboxes[firstElemIndex] : checkboxes[currElemIndex + 1];\n } else if (e.key === KeyboardCode.ARROW_UP) {\n nextElem = currElemIndex === firstElemIndex ? checkboxes[lastElemIndex] : checkboxes[currElemIndex - 1];\n }\n\n this.focusComboboxItem(nextElem);\n }\n\n private handleHeaderKeyboardEvent(ev: KeyboardEvent): void {\n if (ev.key === KeyboardCode.SPACE) {\n ev.preventDefault();\n }\n if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {\n this.toggleComboBox();\n }\n }\n\n private handleCheckboxFocus(id: string): void {\n this.focusedItemId = id;\n }\n\n private focusComboboxItem(elem): void {\n this.checkboxes.forEach(function (item) {\n item.setAttribute(\"tabindex\", \"-1\");\n });\n\n elem.setAttribute(\"tabindex\", \"0\");\n elem.focus();\n }\n\n private updateRenderItemsList(): void {\n if (this.searchValue) {\n this.filterItems(this.searchValue);\n } else {\n this.resetRenderItemsList();\n }\n }\n\n private resetRenderItemsList(): void {\n const renderItemsList = [];\n this.itemsList.forEach((item: ComboItem) => {\n renderItemsList.push({...item});\n });\n this.renderItemsList = renderItemsList;\n }\n\n private filterItems(value: string): void {\n if (!value) {\n return this.closeFilterItems();\n }\n\n this.resetRenderItemsList();\n this.renderItemsList = this.renderItemsList.filter((item) => {\n const start = item.name.toUpperCase().indexOf(value.toUpperCase());\n const end = start + value.length;\n const newName =\n item.name.substring(0, start) +\n \"<strong>\" +\n item.name.substring(start, end) +\n \"</strong>\" +\n item.name.substring(end, item.name.length);\n\n item.name = newName;\n\n return start >= 0;\n });\n }\n\n private checkAll(checked = true): void {\n this.itemsList = this.itemsList.map((item: ComboItem) => ({\n ...item,\n checked: checked,\n }));\n this.resetRenderItemsList();\n this.emitComboboxChange();\n }\n\n private closeFilterItems(): void {\n this.searchValue = \"\";\n this.resetRenderItemsList();\n }\n\n private toggleComboBox(): void {\n this.isopen = !this.isopen;\n }\n\n private getComboboxA11yAttributes(): Record<string, unknown> {\n return {\n \"role\": \"combobox\",\n \"aria-label\": this.label,\n \"aria-expanded\": this.isopen ? \"true\" : \"false\",\n \"aria-activedescendant\": this.isopen ? this.focusedItemId : \"\",\n \"aria-controls\": `${this.inputid}_list`,\n };\n }\n\n private renderHeader(): HTMLDivElement {\n return (\n <div\n class=\"header\"\n onClick={() => this.toggleComboBox()}\n onKeyDown={(ev: KeyboardEvent) => {\n this.handleHeaderKeyboardEvent(ev);\n }}\n onKeyUp={(ev: KeyboardEvent) => handleKeyboardSubmit(ev, this.toggleComboBox)}\n role=\"button\"\n tabindex={0}\n aria-expanded={this.isopen ? \"true\" : \"false\"}\n >\n <p class=\"body-3\">\n {this.label}\n <span>{this.selectedCounter > 0 && ` (${this.selectedCounter})`}</span>\n </p>\n <z-icon\n name=\"caret-down\"\n class={this.size}\n />\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n if (!this.isopen) {\n return;\n }\n\n return (\n <div class=\"open-combo-data\">\n {this.hassearch && this.renderSearchInput()}\n {!this.hassearch ? <span {...this.getComboboxA11yAttributes()} /> : null}\n <div\n role=\"listbox\"\n aria-label={this.label}\n aria-multiselectable={true}\n id={`${this.inputid}_list`}\n aria-owns={`${this.checkboxes.map((item) => item.id).join(\" \")}`}\n >\n {this.hascheckall && this.renderCheckAll()}\n {this.renderItems()}\n </div>\n </div>\n );\n }\n\n private renderItems(): HTMLDivElement {\n return (\n <div class={this.searchValue && \"search\"}>\n {this.renderList(this.renderItemsList)}\n {this.searchValue && this.renderCloseButton()}\n </div>\n );\n }\n\n private renderItem(item: ComboItem, index: number, length: number): ZMyzListItem {\n return (\n <z-list-element\n id={item.id}\n htmlTabindex={null}\n dividerType={index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE}\n size={this.getControlToListSize()}\n >\n <z-input\n type={InputType.CHECKBOX}\n checked={item.checked}\n htmlid={this.getItemId(item)}\n label={item.name}\n class={this.getCheckboxClass()}\n disabled={!item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={item.checked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, this.getItemId(item))}\n onInputCheck={(e: CustomEvent) => {\n this.itemsList = this.itemsList.map((i: ComboItem) => {\n if (item.id === i.id) {\n i.checked = e.detail.checked;\n }\n\n return i;\n });\n this.updateRenderItemsList();\n this.emitComboboxChange();\n }}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </z-list-element>\n );\n }\n\n private renderList(items: ComboItem[]): HTMLUListElement {\n if (!items) {\n return;\n }\n if (!items.length && this.searchValue) {\n return this.renderNoSearchResults();\n }\n\n if (this.hasgroupitems) {\n return this.renderGroups(items);\n }\n\n return (\n <ul role=\"none\">\n {items.map((item, i) => {\n return this.renderItem(item, i, items.length);\n })}\n </ul>\n );\n }\n\n private renderGroups(items: ComboItem[]): HTMLUListElement {\n const newData = items.reduce((group, item, index) => {\n const {category} = item;\n const zListItem = this.renderItem(item, index, items.length);\n\n group[category] = group[category] ?? [];\n group[category].push(zListItem);\n\n return group;\n }, {});\n\n const listGroups = Object.entries(newData as {[key: string]: HTMLZListElementElement[]}).map(([key, value]) => {\n return (\n <z-list-group divider-type={ListDividerType.ELEMENT}>\n <span\n class=\"body-3-sb z-list-group-title\"\n slot=\"header-title\"\n >\n {key}\n </span>\n {value.map((item) => item)}\n </z-list-group>\n );\n });\n\n return <ul role=\"none\">{listGroups}</ul>;\n }\n\n private renderNoSearchResults(): HTMLUListElement {\n return (\n <ul role=\"none\">\n <z-myz-list-item\n id=\"no-results\"\n text={this.noresultslabel}\n listitemid=\"no-results\"\n icon=\"multiply-circle\"\n class={this.size}\n />\n </ul>\n );\n }\n\n private renderCloseButton(): HTMLDivElement {\n return (\n <div>\n <a\n onClick={() => this.closeFilterItems()}\n onKeyUp={(e: KeyboardEvent) => handleKeyboardSubmit(e, this.closeFilterItems)}\n role=\"button\"\n tabindex={0}\n >\n {this.closesearchtext}\n </a>\n </div>\n );\n }\n\n private renderSearchInput(): ZInput {\n return (\n <z-input\n htmlid={`${this.inputid}_search`}\n label={this.searchlabel}\n placeholder={this.searchplaceholder}\n htmltitle={this.searchtitle}\n type={this.inputType}\n value={this.searchValue}\n message={false}\n size={this.size}\n aria-autocomplete=\"list\"\n {...this.getComboboxA11yAttributes()}\n onKeyUp={(e: KeyboardEvent) => {\n if (e.key === KeyboardCode.ESC) {\n this.closeFilterItems();\n }\n }}\n onInputChange={(e: CustomEvent) => {\n this.searchValue = e.detail.value;\n }}\n />\n );\n }\n\n private renderCheckAll(): HTMLDivElement {\n if (this.searchValue) {\n return;\n }\n\n const checkAllId = `combo-checkbox-${this.inputid}-check-all`;\n const allChecked = this.selectedCounter === this.itemsList.length;\n\n return (\n <div class=\"check-all-wrapper\">\n <z-input\n type={InputType.CHECKBOX}\n checked={allChecked}\n htmlid={checkAllId}\n class={this.getCheckboxClass()}\n label={allChecked ? this.uncheckalltext : this.checkalltext}\n // disabled={this.hasCheckAllDisabled()}\n disabled={this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length}\n size={this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size}\n role=\"option\"\n aria-selected={allChecked ? \"true\" : \"false\"}\n onKeyDown={(e: KeyboardEvent) => this.handleSelectArrowsNavigation(e, checkAllId)}\n onInputCheck={(e: CustomEvent) => this.checkAll(e.detail.checked)}\n onInputFocus={(e: CustomEvent) => this.handleCheckboxFocus(e.detail.id)}\n />\n </div>\n );\n }\n\n render(): HTMLDivElement {\n return (\n <div\n data-action={`combo-${this.inputid}`}\n class={{open: this.isopen, fixed: this.isfixed, disabled: this.disabled}}\n id={this.inputid}\n >\n {this.renderHeader()}\n {!this.disabled && this.renderContent()}\n </div>\n );\n }\n}\n"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{r as o,h as e}from"./p-10bb4f4b.js";const a=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div>footer{height:128px;box-sizing:border-box;padding:var(--space-unit) calc(var(--space-unit) * 2) 0;border-top:var(--border-size-medium) solid var(--color-surface03);border-radius:0 0 var(--border-radius) var(--border-radius);color:var(--color-surface05);font-size:16px;line-height:24px}:host>div>footer>div.top,:host>div>footer>div.bottom{height:60px}";const r=a;const t=class{constructor(e){o(this,e)}render(){return e("div",{key:"ad5a5b4ce763cd24f68d02ec7b6e29b2545b94be"},e("footer",{key:"85252bc9e7ac49dd5250160f31eda28d0cd9b56c"},e("div",{key:"43fdf6d47836f0c6cddb8e6a2a807837642a46b6",class:"top"},e("slot",{key:"ec8b4121c2c3aa2975f19c8ba846689f5a0e0dea",name:"top"})),e("div",{key:"a76056af1fba864d1dd3dbc7c4c6a109ee1e5e9d",class:"bottom"},e("slot",{key:"b1f51897fe2f8bac34c21b409c74003651bc641a",name:"bottom"}))))}};t.style=r;export{t as z_myz_card_footer_sections};
2
- //# sourceMappingURL=p-120a809e.entry.js.map
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as s,a as e,g as o}from"./p-10bb4f4b.js";import{V as r,W as h,p as n,P as a,g as l,i as p}from"./p-025f494e.js";import{g as c,a as d}from"./p-955da62e.js";import"./p-2c886e8b.js";const f=':host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--line-clamp-popover:0;--line-clamp-mobile:1}button{padding:0;border:none;margin:0;background-color:transparent}nav{display:flex;height:30px;align-items:center;padding-left:calc(var(--space-unit) / 2);overflow-x:hidden}li{display:flex;align-items:baseline}:host a:focus,:host button:focus{box-shadow:var(--shadow-focus-primary);outline:0}:host a{color:var(--color-link-primary);font-size:var(--font-size-2);text-decoration:none;white-space:nowrap}:host a.homepage-icon{display:list-item}:host a.homepage-text{display:initial;margin-top:calc(var(--space-unit) / 4);margin-right:var(--space-unit)}:host a.missing-path{color:var(--color-text01)}:host a.text-ellipsis{display:-webkit-box !important;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--line-clamp-mobile);text-overflow:ellipsis;white-space:normal}:host ol{display:flex;padding:0;margin:0;list-style-type:none}:host ol>li:not(:first-child,:last-child){margin-right:var(--space-unit)}nav.underlined>ol>li a:not(.missing-path),nav.underlined>ol>li button{text-decoration:underline}nav.semibold>ol>li a:not(.missing-path),nav.semibold>ol>li button{font-weight:var(--font-sb)}:host z-icon{margin-right:var(--space-unit);--z-icon-width:12px;--z-icon-height:12px}:host button.dots{display:inline-block;color:var(--color-link-primary);cursor:pointer}:host .hidden-paths-popover .popover-content{max-width:302px;padding:calc(var(--space-unit) / 2) var(--space-unit);text-align:left}:host .hidden-paths-popover .popover-content a{font-weight:var(--font-rg);text-decoration:none}:host .hidden-paths-popover{--z-popover-theme--surface:var(--color-surface02);--z-popover-padding:0}:host .hidden-paths-popover::before,.full-path-tooltip::before{--arrow-edge-offset:calc(100% - (var(--space-unit) * 2.55))}:host .full-path-tooltip{--z-popover-theme--surface:var(--color-surface05);--z-popover-theme--text:var(--color-text-inverse);--z-popover-padding:0}:host .tooltip-content{padding:0 var(--space-unit);font-size:var(--font-size-2)}@media (min-width: 768px){:host ol>li+li::before{display:inline-block;width:10px;height:10px;flex:1;margin-right:2px;color:var(--color-disabled03);content:"\\203A"}:host a.text-ellipsis{-webkit-line-clamp:var(--line-clamp-popover)}}';const u=f;const m=class{constructor(s){t(this,s);this.clickOnNode=i(this,"clickOnNode",7);this.collapsedElements=[];this.currentIndex=0;this.truncatePosition=null;this.pathStyle=r.UNDERLINED;this.homepageVariant=h.ICON;this.maxNodesToShow=5;this.preventFollowUrl=false;this.overflowMenuItemRows=0;this.truncateChar=30;this.viewPortWidth=undefined;this.hasOverflow=false;this.popoverEllipsisOpen=false}handleResize(){this.viewPortWidth=c();if(this.viewPortWidth!==n.MOBILE&&this.wrapElement&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}handlePropChange(){this.initializeBreadcrumb(this.viewPortWidth===n.MOBILE)}handleResizeUp(t,i){if(t===n.MOBILE||i===n.MOBILE&&t===n.TABLET||i===n.MOBILE&&t===n.DESKTOP||i===n.MOBILE&&t===n.DESKTOP_WIDE||i===n.TABLET&&t===n.DESKTOP||i===n.TABLET&&t===n.DESKTOP_WIDE||i===n.DESKTOP&&t===n.DESKTOP_WIDE){this.initializeBreadcrumb(this.viewPortWidth===n.MOBILE)}}componentWillLoad(){this.viewPortWidth=c();this.initializeBreadcrumb(this.viewPortWidth===n.MOBILE)}componentWillRender(){if(this.viewPortWidth!==n.MOBILE&&this.hasOverflow){this.checkEllipsisOrOverflowMenu();this.hasOverflow=false}}componentDidRender(){if(this.collapsedElementsRef){this.anchorElements=Array.from(this.hostElement.shadowRoot.querySelectorAll("z-list-group a"))}if(this.viewPortWidth!==n.MOBILE&&this.wrapElement.scrollWidth>this.wrapElement.clientWidth){this.hasOverflow=true}}initializeBreadcrumb(t){if(t){this.pathsList=this.getPathsItemsList().filter((t=>!!t.path))}else{this.pathsList=this.getPathsItemsList()}this.totalLenght=this.pathsList.length;this.homepageNode=this.pathsList.shift();this.pathListCopy=JSON.parse(JSON.stringify(this.pathsList));this.collapsedElements=[];if(this.totalLenght>this.maxNodesToShow){this.collapsedElements=this.pathsList.splice(0,this.pathsList.length-2)}}checkEllipsisOrOverflowMenu(){if(this.pathListCopy.length>0){for(let t=0;t<this.pathsList.length;t++){if(this.pathsList[t].text.length>this.truncateChar){if(this.truncatePosition!==null){if(this.truncatePosition>0){const t=this.pathListCopy.splice(0,this.truncatePosition);t.forEach((t=>{this.collapsedElements.push(t)}));this.pathsList.splice(0,this.truncatePosition);this.truncatePosition=0;return}if(this.truncatePosition===0){const t=this.pathListCopy.splice(0,this.truncatePosition+1);this.collapsedElements.push(...t);this.pathsList.splice(0,this.truncatePosition+1);this.truncatePosition=null;return}}if(t!==this.pathsList.length-1){const i=this.truncateWithEllipsis(this.pathsList[t].text,this.truncateChar);this.currentEllipsisText=this.pathsList[t].text;this.pathsList[t].text=i;this.pathsList[t].hasTooltip=true;this.truncatePosition=t;return}}}}}truncateWithEllipsis(t,i){const s="&mldr;";if(t.length>i){return t.substring(0,i-1)+s}return t}getPathsItemsList(){return Array.from(this.hostElement.children).map((t=>({text:t.textContent,path:t.href,hasTooltip:false})))}renderMobileBreadcrumb(){const t=this.pathsList[this.pathsList.length-1];return s("nav",{"aria-label":"Breadcrumb",class:{underlined:this.pathStyle===r.UNDERLINED,semibold:this.pathStyle===r.SEMIBOLD}},s("ol",null,this.renderNode(t,true)))}renderHomepageNode(t){return s("li",null,s("a",{class:{"homepage-icon":this.homepageVariant===h.ICON,"homepage-text":this.homepageVariant===h.TEXT},href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t)},this.homepageVariant===h.ICON?s("z-icon",{name:"home",fill:"color-link-primary",height:16,width:16}):"Home"))}renderNode(t,i){return s("li",null,t.hasTooltip&&s("z-popover",{class:"full-path-tooltip","bind-to":this.triggerEllipsis,open:this.popoverEllipsisOpen,position:a.BOTTOM_RIGHT,closable:false,showArrow:true},s("span",{class:"tooltip-content"},this.currentEllipsisText)),s("a",{class:{"missing-path":!t.path,"text-ellipsis":i},ref:t=>this.triggerEllipsis=t,"aria-current":t.path?undefined:"page",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onMouseOver:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=true}},onMouseLeave:()=>{if(t.hasTooltip){this.popoverEllipsisOpen=false}},innerHTML:i?`<z-icon fill="color-link-primary" name="chevron-left"></z-icon>${t.text}`:t.text}))}renderBreadcrumb(){return s("nav",{ref:t=>this.wrapElement=t,"aria-label":"Breadcrumb",class:{underlined:this.pathStyle===r.UNDERLINED,semibold:this.pathStyle===r.SEMIBOLD}},s("ol",null,this.renderHomepageNode(this.homepageNode),this.collapsedElements.length?this.renderOverflowMenu():"",this.pathsList.map((t=>this.renderNode(t,false)))))}togglePopover(){if(!this.collapsedElementsRef.open){this.collapsedElementsRef.open=true}}handlePreventFollowUrl(t,i){if(this.preventFollowUrl){t.preventDefault();this.clickOnNode.emit(i.path)}}handleOverflowMenuAccessibility(t){const i=this.anchorElements.length;if(t.key===l.TAB){t.preventDefault();return}t.stopPropagation();const s=[l.ARROW_DOWN,l.ARROW_UP];if(s.includes(t.key)){t.preventDefault();if(t.key===l.ARROW_DOWN){this.currentIndex=i===this.currentIndex+1?0:this.currentIndex+1}if(t.key===l.ARROW_UP){this.currentIndex=this.currentIndex<=0?i-1:this.currentIndex-1}this.anchorElements[this.currentIndex].focus()}if(t.key===l.ESC){this.triggerButton.focus()}}renderOverflowMenu(){if(this.collapsedElements.length){return s("li",null,s("z-popover",{class:"hidden-paths-popover",ref:t=>this.collapsedElementsRef=t,"bind-to":this.triggerButton,position:a.BOTTOM_RIGHT,closable:true,showArrow:true},s("div",{class:"popover-content"},s("z-list",null,s("z-list-group",{size:p.SMALL},this.collapsedElements.map(((t,i,e)=>s("div",null,s("z-list-element",{clickable:true},s("a",{class:"text-ellipsis",href:t.path,onClick:i=>this.handlePreventFollowUrl(i,t),onKeyDown:t=>this.handleOverflowMenuAccessibility(t)},t.text)),i<e.length-1&&s("z-divider",{color:"color-surface03"})))))))),s("button",{"aria-label":"Mostra più breadcrumb","aria-haspopup":"true",ref:t=>this.triggerButton=t,class:"dots",onClick:()=>{this.togglePopover()},onKeyDown:t=>{d(t,this.togglePopover.bind(this));setTimeout((()=>{this.anchorElements[0].focus()}),100)}},"..."))}}render(){return s(e,{key:"0fdd2556f767ddc969bb26ad157149092c28976f",style:{"--line-clamp-popover":`${this.overflowMenuItemRows}`}},this.viewPortWidth===n.MOBILE?this.renderMobileBreadcrumb():this.renderBreadcrumb())}get hostElement(){return o(this)}static get watchers(){return{maxNodesToShow:["handlePropChange"],viewPortWidth:["handleResizeUp"]}}};m.style=u;export{m as z_breadcrumb};
2
- //# sourceMappingURL=p-34541d7c.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZBreadcrumbStyle0","ZBreadcrumb","this","collapsedElements","currentIndex","truncatePosition","BreadcrumbPathStyle","UNDERLINED","BreadcrumbHomepageVariant","ICON","handleResize","viewPortWidth","getDevice","Device","MOBILE","wrapElement","scrollWidth","clientWidth","hasOverflow","handlePropChange","initializeBreadcrumb","handleResizeUp","newValue","oldValue","TABLET","DESKTOP","DESKTOP_WIDE","componentWillLoad","componentWillRender","checkEllipsisOrOverflowMenu","componentDidRender","collapsedElementsRef","anchorElements","Array","from","hostElement","shadowRoot","querySelectorAll","isMobile","pathsList","getPathsItemsList","filter","item","path","totalLenght","length","homepageNode","shift","pathListCopy","JSON","parse","stringify","maxNodesToShow","splice","i","text","truncateChar","arrayToPush","forEach","push","truncatedString","truncateWithEllipsis","currentEllipsisText","hasTooltip","str","ending","substring","children","map","textContent","href","renderMobileBreadcrumb","lastPath","h","class","underlined","pathStyle","semibold","SEMIBOLD","renderNode","renderHomepageNode","homepageVariant","TEXT","onClick","e","handlePreventFollowUrl","name","fill","height","width","mobile","triggerEllipsis","open","popoverEllipsisOpen","position","PopoverPosition","BOTTOM_RIGHT","closable","showArrow","ref","val","undefined","onMouseOver","onMouseLeave","innerHTML","renderBreadcrumb","renderOverflowMenu","togglePopover","preventFollowUrl","preventDefault","clickOnNode","emit","handleOverflowMenuAccessibility","anchorElementsLenght","key","KeyboardCode","TAB","stopPropagation","arrows","ARROW_DOWN","ARROW_UP","includes","focus","ESC","triggerButton","size","ListSize","SMALL","index","array","clickable","onKeyDown","color","el","handleKeyboardSubmit","bind","setTimeout","render","Host","style","overflowMenuItemRows"],"sources":["src/components/z-breadcrumb/styles.css?tag=z-breadcrumb&encapsulation=shadow","src/components/z-breadcrumb/index.tsx"],"sourcesContent":[":host {\n font-family: var(--font-family-sans);\n font-weight: var(--font-rg);\n\n --line-clamp-popover: 0;\n --line-clamp-mobile: 1;\n}\n\nbutton {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\nnav {\n display: flex;\n height: 30px;\n align-items: center;\n padding-left: calc(var(--space-unit) / 2);\n overflow-x: hidden;\n}\n\nli {\n display: flex;\n align-items: baseline;\n}\n\n:host a:focus,\n:host button:focus {\n box-shadow: var(--shadow-focus-primary);\n outline: 0;\n}\n\n:host a {\n color: var(--color-link-primary);\n font-size: var(--font-size-2);\n text-decoration: none;\n white-space: nowrap;\n}\n\n:host a.homepage-icon {\n display: list-item;\n}\n\n:host a.homepage-text {\n display: initial;\n margin-top: calc(var(--space-unit) / 4);\n margin-right: var(--space-unit);\n}\n\n:host a.missing-path {\n color: var(--color-text01);\n}\n\n:host a.text-ellipsis {\n display: -webkit-box !important;\n overflow: hidden;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--line-clamp-mobile);\n text-overflow: ellipsis;\n white-space: normal;\n}\n\n:host ol {\n display: flex;\n padding: 0;\n margin: 0;\n list-style-type: none;\n}\n\n:host ol > li:not(:first-child, :last-child) {\n margin-right: var(--space-unit);\n}\n\nnav.underlined > ol > li a:not(.missing-path),\nnav.underlined > ol > li button {\n text-decoration: underline;\n}\n\nnav.semibold > ol > li a:not(.missing-path),\nnav.semibold > ol > li button {\n font-weight: var(--font-sb);\n}\n\n:host z-icon {\n margin-right: var(--space-unit);\n\n --z-icon-width: 12px;\n --z-icon-height: 12px;\n}\n\n:host button.dots {\n display: inline-block;\n color: var(--color-link-primary);\n cursor: pointer;\n}\n\n:host .hidden-paths-popover .popover-content {\n max-width: 302px;\n padding: calc(var(--space-unit) / 2) var(--space-unit);\n text-align: left;\n}\n\n:host .hidden-paths-popover .popover-content a {\n font-weight: var(--font-rg);\n text-decoration: none;\n}\n\n:host .hidden-paths-popover {\n --z-popover-theme--surface: var(--color-surface02);\n --z-popover-padding: 0;\n}\n\n:host .hidden-paths-popover::before,\n.full-path-tooltip::before {\n --arrow-edge-offset: calc(100% - (var(--space-unit) * 2.55));\n}\n\n:host .full-path-tooltip {\n --z-popover-theme--surface: var(--color-surface05);\n --z-popover-theme--text: var(--color-text-inverse);\n --z-popover-padding: 0;\n}\n\n:host .tooltip-content {\n padding: 0 var(--space-unit);\n font-size: var(--font-size-2);\n}\n\n@media (min-width: 768px) {\n /* https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/#accessibilityfeatures */\n :host ol > li + li::before {\n display: inline-block;\n width: 10px;\n height: 10px;\n flex: 1;\n margin-right: 2px;\n color: var(--color-disabled03);\n content: \"\\203A\";\n }\n\n :host a.text-ellipsis {\n -webkit-line-clamp: var(--line-clamp-popover);\n }\n}\n","import {Component, Prop, h, State, Host, Listen, Element, Event, Watch, EventEmitter} from \"@stencil/core\";\nimport {\n BreadcrumbHomepageVariant,\n BreadcrumbPath,\n BreadcrumbPathStyle,\n Device,\n KeyboardCode,\n ListSize,\n PopoverPosition,\n} from \"../../beans\";\nimport {getDevice, handleKeyboardSubmit} from \"../../utils/utils\";\n\n@Component({\n tag: \"z-breadcrumb\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZBreadcrumb {\n /* Accessibility references */\n /* Overflow-menu: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ */\n /* Breadcrumb: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/ */\n /* Focus on multiline link: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html */\n\n @Element() hostElement: HTMLZBreadcrumbElement;\n\n /** [optional] Sets the path style */\n @Prop({reflect: true})\n pathStyle?: BreadcrumbPathStyle = BreadcrumbPathStyle.UNDERLINED;\n\n /** [optional] Variant of first node */\n @Prop()\n homepageVariant?: BreadcrumbHomepageVariant = BreadcrumbHomepageVariant.ICON;\n\n /** [optional] Sets max number of element to show */\n @Prop()\n maxNodesToShow? = 5;\n\n /** [optional] Controls the behaviour on <a> tag click/enter */\n @Prop()\n preventFollowUrl? = false;\n\n /** [optional] Sets max number of row for each path inside the popover. Zero equals unlimited */\n @Prop()\n overflowMenuItemRows? = 0;\n\n /** [optional] Sets the maximun number of chars per single node */\n @Prop()\n truncateChar? = 30;\n\n /** Handle mobile */\n @State()\n viewPortWidth: Device;\n\n /** Detect whether the length of the nodes shown exceeds the container length */\n @State()\n hasOverflow = false;\n\n @State()\n popoverEllipsisOpen = false;\n\n /** Emitted when preventFollowUrl=true to handle custom page transition */\n @Event()\n clickOnNode: EventEmitter<BreadcrumbPath[\"path\"]>;\n\n @Listen(\"resize\", {target: \"window\"})\n handleResize(): void {\n this.viewPortWidth = getDevice();\n if (\n this.viewPortWidth !== Device.MOBILE &&\n this.wrapElement &&\n this.wrapElement.scrollWidth > this.wrapElement.clientWidth\n ) {\n this.hasOverflow = true;\n }\n }\n // eslint-disable-next-line lines-between-class-members\n @Watch(\"maxNodesToShow\")\n handlePropChange(): void {\n this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n }\n\n @Watch(\"viewPortWidth\")\n handleResizeUp(newValue: Device, oldValue: Device): void {\n if (\n newValue === Device.MOBILE ||\n (oldValue === Device.MOBILE && newValue === Device.TABLET) ||\n (oldValue === Device.MOBILE && newValue === Device.DESKTOP) ||\n (oldValue === Device.MOBILE && newValue === Device.DESKTOP_WIDE) ||\n (oldValue === Device.TABLET && newValue === Device.DESKTOP) ||\n (oldValue === Device.TABLET && newValue === Device.DESKTOP_WIDE) ||\n (oldValue === Device.DESKTOP && newValue === Device.DESKTOP_WIDE)\n ) {\n this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n }\n }\n\n private pathsList: BreadcrumbPath[];\n\n private pathListCopy: BreadcrumbPath[];\n\n private collapsedElements: BreadcrumbPath[] = [];\n\n private collapsedElementsRef: HTMLZPopoverElement;\n\n private triggerButton: HTMLButtonElement;\n\n private triggerEllipsis: HTMLAnchorElement;\n\n private wrapElement: HTMLElement;\n\n private currentIndex = 0;\n\n private homepageNode: BreadcrumbPath;\n\n private totalLenght: number;\n\n private anchorElements;\n\n private currentEllipsisText: string;\n\n private truncatePosition = null;\n\n componentWillLoad(): void {\n this.viewPortWidth = getDevice();\n this.initializeBreadcrumb(this.viewPortWidth === Device.MOBILE);\n }\n\n componentWillRender(): void {\n if (this.viewPortWidth !== Device.MOBILE && this.hasOverflow) {\n this.checkEllipsisOrOverflowMenu();\n this.hasOverflow = false;\n }\n }\n\n componentDidRender(): void {\n if (this.collapsedElementsRef) {\n this.anchorElements = Array.from(this.hostElement.shadowRoot.querySelectorAll(\"z-list-group a\"));\n }\n\n if (this.viewPortWidth !== Device.MOBILE && this.wrapElement.scrollWidth > this.wrapElement.clientWidth) {\n this.hasOverflow = true;\n }\n }\n\n private initializeBreadcrumb(isMobile: boolean): void {\n if (isMobile) {\n this.pathsList = this.getPathsItemsList().filter((item) => !!item.path);\n } else {\n this.pathsList = this.getPathsItemsList();\n }\n this.totalLenght = this.pathsList.length;\n this.homepageNode = this.pathsList.shift();\n this.pathListCopy = JSON.parse(JSON.stringify(this.pathsList));\n this.collapsedElements = [];\n if (this.totalLenght > this.maxNodesToShow) {\n this.collapsedElements = this.pathsList.splice(0, this.pathsList.length - 2);\n }\n }\n\n private checkEllipsisOrOverflowMenu(): void {\n if (this.pathListCopy.length > 0) {\n for (let i = 0; i < this.pathsList.length; i++) {\n if (this.pathsList[i].text.length > this.truncateChar) {\n if (this.truncatePosition !== null) {\n if (this.truncatePosition > 0) {\n const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition);\n arrayToPush.forEach((item) => {\n this.collapsedElements.push(item);\n });\n this.pathsList.splice(0, this.truncatePosition);\n this.truncatePosition = 0;\n\n return;\n }\n if (this.truncatePosition === 0) {\n const arrayToPush = this.pathListCopy.splice(0, this.truncatePosition + 1);\n this.collapsedElements.push(...arrayToPush);\n this.pathsList.splice(0, this.truncatePosition + 1);\n this.truncatePosition = null;\n\n return;\n }\n }\n if (i !== this.pathsList.length - 1) {\n const truncatedString = this.truncateWithEllipsis(this.pathsList[i].text, this.truncateChar);\n this.currentEllipsisText = this.pathsList[i].text;\n this.pathsList[i].text = truncatedString;\n this.pathsList[i].hasTooltip = true;\n this.truncatePosition = i;\n\n return;\n }\n }\n }\n }\n }\n\n private truncateWithEllipsis(str: string, length: number): string {\n const ending = \"&mldr;\";\n\n if (str.length > length) {\n return str.substring(0, length - 1) + ending;\n }\n\n return str;\n }\n\n private getPathsItemsList(): BreadcrumbPath[] {\n return Array.from(this.hostElement.children).map((item: HTMLAnchorElement) => {\n return {\n text: item.textContent,\n path: item.href,\n hasTooltip: false,\n };\n });\n }\n\n private renderMobileBreadcrumb(): HTMLDivElement {\n const lastPath = this.pathsList[this.pathsList.length - 1];\n\n return (\n <nav\n aria-label=\"Breadcrumb\"\n class={{\n underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n }}\n >\n <ol>{this.renderNode(lastPath, true)}</ol>\n </nav>\n );\n }\n\n private renderHomepageNode(item): HTMLLIElement {\n return (\n <li>\n <a\n class={{\n \"homepage-icon\": this.homepageVariant === BreadcrumbHomepageVariant.ICON,\n \"homepage-text\": this.homepageVariant === BreadcrumbHomepageVariant.TEXT,\n }}\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n >\n {this.homepageVariant === BreadcrumbHomepageVariant.ICON ? (\n <z-icon\n name=\"home\"\n fill=\"color-link-primary\"\n height={16}\n width={16}\n />\n ) : (\n \"Home\"\n )}\n </a>\n </li>\n );\n }\n\n private renderNode(item, mobile): HTMLLIElement {\n return (\n <li>\n {item.hasTooltip && (\n <z-popover\n class=\"full-path-tooltip\"\n bind-to={this.triggerEllipsis}\n open={this.popoverEllipsisOpen}\n position={PopoverPosition.BOTTOM_RIGHT}\n closable={false}\n showArrow\n >\n <span class=\"tooltip-content\">{this.currentEllipsisText}</span>\n </z-popover>\n )}\n <a\n class={{\n \"missing-path\": !item.path,\n \"text-ellipsis\": mobile,\n }}\n ref={(val) => (this.triggerEllipsis = val)}\n aria-current={item.path ? undefined : \"page\"}\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n onMouseOver={() => {\n if (item.hasTooltip) {\n this.popoverEllipsisOpen = true;\n }\n }}\n onMouseLeave={() => {\n if (item.hasTooltip) {\n this.popoverEllipsisOpen = false;\n }\n }}\n innerHTML={mobile ? `<z-icon fill=\"color-link-primary\" name=\"chevron-left\"></z-icon>${item.text}` : item.text}\n />\n </li>\n );\n }\n\n private renderBreadcrumb(): HTMLElement {\n return (\n <nav\n ref={(val) => (this.wrapElement = val)}\n aria-label=\"Breadcrumb\"\n class={{\n underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,\n semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,\n }}\n >\n <ol>\n {this.renderHomepageNode(this.homepageNode)}\n {this.collapsedElements.length ? this.renderOverflowMenu() : \"\"}\n {this.pathsList.map((item) => this.renderNode(item, false))}\n </ol>\n </nav>\n );\n }\n\n private togglePopover(): void {\n if (!this.collapsedElementsRef.open) {\n this.collapsedElementsRef.open = true;\n }\n }\n\n private handlePreventFollowUrl(e: MouseEvent, item): void {\n if (this.preventFollowUrl) {\n e.preventDefault();\n this.clickOnNode.emit(item.path);\n }\n }\n\n private handleOverflowMenuAccessibility(e: KeyboardEvent): void {\n const anchorElementsLenght = this.anchorElements.length;\n if (e.key === KeyboardCode.TAB) {\n e.preventDefault();\n\n return;\n }\n e.stopPropagation();\n const arrows = [KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP];\n if (arrows.includes(e.key as KeyboardCode)) {\n e.preventDefault();\n\n if (e.key === KeyboardCode.ARROW_DOWN) {\n this.currentIndex = anchorElementsLenght === this.currentIndex + 1 ? 0 : this.currentIndex + 1;\n }\n if (e.key === KeyboardCode.ARROW_UP) {\n this.currentIndex = this.currentIndex <= 0 ? anchorElementsLenght - 1 : this.currentIndex - 1;\n }\n\n this.anchorElements[this.currentIndex].focus();\n }\n\n if (e.key === KeyboardCode.ESC) {\n this.triggerButton.focus();\n }\n }\n\n private renderOverflowMenu(): HTMLLIElement {\n if (this.collapsedElements.length) {\n return (\n <li>\n <z-popover\n class=\"hidden-paths-popover\"\n ref={(val) => (this.collapsedElementsRef = val as HTMLZPopoverElement)}\n bind-to={this.triggerButton}\n position={PopoverPosition.BOTTOM_RIGHT}\n closable={true}\n showArrow\n >\n <div class=\"popover-content\">\n <z-list>\n <z-list-group size={ListSize.SMALL}>\n {this.collapsedElements.map((item, index, array) => {\n return (\n <div>\n <z-list-element clickable>\n <a\n class=\"text-ellipsis\"\n href={item.path}\n onClick={(e) => this.handlePreventFollowUrl(e, item)}\n onKeyDown={(e) => this.handleOverflowMenuAccessibility(e)}\n >\n {item.text}\n </a>\n </z-list-element>\n {index < array.length - 1 && <z-divider color=\"color-surface03\"></z-divider>}\n </div>\n );\n })}\n </z-list-group>\n </z-list>\n </div>\n </z-popover>\n <button\n aria-label=\"Mostra più breadcrumb\"\n aria-haspopup=\"true\"\n ref={(el) => (this.triggerButton = el as HTMLButtonElement)}\n class=\"dots\"\n onClick={() => {\n this.togglePopover();\n }}\n onKeyDown={(e) => {\n handleKeyboardSubmit(e, this.togglePopover.bind(this));\n setTimeout(() => {\n this.anchorElements[0].focus();\n }, 100);\n }}\n >\n ...\n </button>\n </li>\n );\n }\n }\n\n render(): HTMLZBreadcrumbElement {\n return (\n <Host style={{\"--line-clamp-popover\": `${this.overflowMenuItemRows}`}}>\n {this.viewPortWidth === Device.MOBILE ? this.renderMobileBreadcrumb() : this.renderBreadcrumb()}\n </Host>\n );\n }\n}\n"],"mappings":"0MAAA,MAAMA,EAAY,4vEAClB,MAAAC,EAAeD,E,MCgBFE,EAAW,M,kEAmFdC,KAAAC,kBAAsC,GAUtCD,KAAAE,aAAe,EAUfF,KAAAG,iBAAmB,K,eA7FOC,EAAoBC,W,qBAIRC,EAA0BC,K,oBAItD,E,sBAIE,M,0BAII,E,kBAIR,G,8CAQF,M,yBAGQ,K,CAOtB,YAAAC,GACER,KAAKS,cAAgBC,IACrB,GACEV,KAAKS,gBAAkBE,EAAOC,QAC9BZ,KAAKa,aACLb,KAAKa,YAAYC,YAAcd,KAAKa,YAAYE,YAChD,CACAf,KAAKgB,YAAc,I,EAKvB,gBAAAC,GACEjB,KAAKkB,qBAAqBlB,KAAKS,gBAAkBE,EAAOC,O,CAI1D,cAAAO,CAAeC,EAAkBC,GAC/B,GACED,IAAaT,EAAOC,QACnBS,IAAaV,EAAOC,QAAUQ,IAAaT,EAAOW,QAClDD,IAAaV,EAAOC,QAAUQ,IAAaT,EAAOY,SAClDF,IAAaV,EAAOC,QAAUQ,IAAaT,EAAOa,cAClDH,IAAaV,EAAOW,QAAUF,IAAaT,EAAOY,SAClDF,IAAaV,EAAOW,QAAUF,IAAaT,EAAOa,cAClDH,IAAaV,EAAOY,SAAWH,IAAaT,EAAOa,aACpD,CACAxB,KAAKkB,qBAAqBlB,KAAKS,gBAAkBE,EAAOC,O,EA8B5D,iBAAAa,GACEzB,KAAKS,cAAgBC,IACrBV,KAAKkB,qBAAqBlB,KAAKS,gBAAkBE,EAAOC,O,CAG1D,mBAAAc,GACE,GAAI1B,KAAKS,gBAAkBE,EAAOC,QAAUZ,KAAKgB,YAAa,CAC5DhB,KAAK2B,8BACL3B,KAAKgB,YAAc,K,EAIvB,kBAAAY,GACE,GAAI5B,KAAK6B,qBAAsB,CAC7B7B,KAAK8B,eAAiBC,MAAMC,KAAKhC,KAAKiC,YAAYC,WAAWC,iBAAiB,kB,CAGhF,GAAInC,KAAKS,gBAAkBE,EAAOC,QAAUZ,KAAKa,YAAYC,YAAcd,KAAKa,YAAYE,YAAa,CACvGf,KAAKgB,YAAc,I,EAIf,oBAAAE,CAAqBkB,GAC3B,GAAIA,EAAU,CACZpC,KAAKqC,UAAYrC,KAAKsC,oBAAoBC,QAAQC,KAAWA,EAAKC,M,KAC7D,CACLzC,KAAKqC,UAAYrC,KAAKsC,mB,CAExBtC,KAAK0C,YAAc1C,KAAKqC,UAAUM,OAClC3C,KAAK4C,aAAe5C,KAAKqC,UAAUQ,QACnC7C,KAAK8C,aAAeC,KAAKC,MAAMD,KAAKE,UAAUjD,KAAKqC,YACnDrC,KAAKC,kBAAoB,GACzB,GAAID,KAAK0C,YAAc1C,KAAKkD,eAAgB,CAC1ClD,KAAKC,kBAAoBD,KAAKqC,UAAUc,OAAO,EAAGnD,KAAKqC,UAAUM,OAAS,E,EAItE,2BAAAhB,GACN,GAAI3B,KAAK8C,aAAaH,OAAS,EAAG,CAChC,IAAK,IAAIS,EAAI,EAAGA,EAAIpD,KAAKqC,UAAUM,OAAQS,IAAK,CAC9C,GAAIpD,KAAKqC,UAAUe,GAAGC,KAAKV,OAAS3C,KAAKsD,aAAc,CACrD,GAAItD,KAAKG,mBAAqB,KAAM,CAClC,GAAIH,KAAKG,iBAAmB,EAAG,CAC7B,MAAMoD,EAAcvD,KAAK8C,aAAaK,OAAO,EAAGnD,KAAKG,kBACrDoD,EAAYC,SAAShB,IACnBxC,KAAKC,kBAAkBwD,KAAKjB,EAAK,IAEnCxC,KAAKqC,UAAUc,OAAO,EAAGnD,KAAKG,kBAC9BH,KAAKG,iBAAmB,EAExB,M,CAEF,GAAIH,KAAKG,mBAAqB,EAAG,CAC/B,MAAMoD,EAAcvD,KAAK8C,aAAaK,OAAO,EAAGnD,KAAKG,iBAAmB,GACxEH,KAAKC,kBAAkBwD,QAAQF,GAC/BvD,KAAKqC,UAAUc,OAAO,EAAGnD,KAAKG,iBAAmB,GACjDH,KAAKG,iBAAmB,KAExB,M,EAGJ,GAAIiD,IAAMpD,KAAKqC,UAAUM,OAAS,EAAG,CACnC,MAAMe,EAAkB1D,KAAK2D,qBAAqB3D,KAAKqC,UAAUe,GAAGC,KAAMrD,KAAKsD,cAC/EtD,KAAK4D,oBAAsB5D,KAAKqC,UAAUe,GAAGC,KAC7CrD,KAAKqC,UAAUe,GAAGC,KAAOK,EACzB1D,KAAKqC,UAAUe,GAAGS,WAAa,KAC/B7D,KAAKG,iBAAmBiD,EAExB,M,KAOF,oBAAAO,CAAqBG,EAAanB,GACxC,MAAMoB,EAAS,SAEf,GAAID,EAAInB,OAASA,EAAQ,CACvB,OAAOmB,EAAIE,UAAU,EAAGrB,EAAS,GAAKoB,C,CAGxC,OAAOD,C,CAGD,iBAAAxB,GACN,OAAOP,MAAMC,KAAKhC,KAAKiC,YAAYgC,UAAUC,KAAK1B,IACzC,CACLa,KAAMb,EAAK2B,YACX1B,KAAMD,EAAK4B,KACXP,WAAY,S,CAKV,sBAAAQ,GACN,MAAMC,EAAWtE,KAAKqC,UAAUrC,KAAKqC,UAAUM,OAAS,GAExD,OACE4B,EAAA,oBACa,aACXC,MAAO,CACLC,WAAYzE,KAAK0E,YAActE,EAAoBC,WACnDsE,SAAU3E,KAAK0E,YAActE,EAAoBwE,WAGnDL,EAAA,UAAKvE,KAAK6E,WAAWP,EAAU,O,CAK7B,kBAAAQ,CAAmBtC,GACzB,OACE+B,EAAA,UACEA,EAAA,KACEC,MAAO,CACL,gBAAiBxE,KAAK+E,kBAAoBzE,EAA0BC,KACpE,gBAAiBP,KAAK+E,kBAAoBzE,EAA0B0E,MAEtEZ,KAAM5B,EAAKC,KACXwC,QAAUC,GAAMlF,KAAKmF,uBAAuBD,EAAG1C,IAE9CxC,KAAK+E,kBAAoBzE,EAA0BC,KAClDgE,EAAA,UACEa,KAAK,OACLC,KAAK,qBACLC,OAAQ,GACRC,MAAO,KACP,Q,CASJ,UAAAV,CAAWrC,EAAMgD,GACvB,OACEjB,EAAA,UACG/B,EAAKqB,YACJU,EAAA,aACEC,MAAM,oBAAmB,UAChBxE,KAAKyF,gBACdC,KAAM1F,KAAK2F,oBACXC,SAAUC,EAAgBC,aAC1BC,SAAU,MACVC,UAAS,MAETzB,EAAA,QAAMC,MAAM,mBAAmBxE,KAAK4D,sBAGxCW,EAAA,KACEC,MAAO,CACL,gBAAiBhC,EAAKC,KACtB,gBAAiB+C,GAEnBS,IAAMC,GAASlG,KAAKyF,gBAAkBS,EAAI,eAC5B1D,EAAKC,KAAO0D,UAAY,OACtC/B,KAAM5B,EAAKC,KACXwC,QAAUC,GAAMlF,KAAKmF,uBAAuBD,EAAG1C,GAC/C4D,YAAa,KACX,GAAI5D,EAAKqB,WAAY,CACnB7D,KAAK2F,oBAAsB,I,GAG/BU,aAAc,KACZ,GAAI7D,EAAKqB,WAAY,CACnB7D,KAAK2F,oBAAsB,K,GAG/BW,UAAWd,EAAS,kEAAkEhD,EAAKa,OAASb,EAAKa,O,CAMzG,gBAAAkD,GACN,OACEhC,EAAA,OACE0B,IAAMC,GAASlG,KAAKa,YAAcqF,EAAI,aAC3B,aACX1B,MAAO,CACLC,WAAYzE,KAAK0E,YAActE,EAAoBC,WACnDsE,SAAU3E,KAAK0E,YAActE,EAAoBwE,WAGnDL,EAAA,UACGvE,KAAK8E,mBAAmB9E,KAAK4C,cAC7B5C,KAAKC,kBAAkB0C,OAAS3C,KAAKwG,qBAAuB,GAC5DxG,KAAKqC,UAAU6B,KAAK1B,GAASxC,KAAK6E,WAAWrC,EAAM,U,CAMpD,aAAAiE,GACN,IAAKzG,KAAK6B,qBAAqB6D,KAAM,CACnC1F,KAAK6B,qBAAqB6D,KAAO,I,EAI7B,sBAAAP,CAAuBD,EAAe1C,GAC5C,GAAIxC,KAAK0G,iBAAkB,CACzBxB,EAAEyB,iBACF3G,KAAK4G,YAAYC,KAAKrE,EAAKC,K,EAIvB,+BAAAqE,CAAgC5B,GACtC,MAAM6B,EAAuB/G,KAAK8B,eAAea,OACjD,GAAIuC,EAAE8B,MAAQC,EAAaC,IAAK,CAC9BhC,EAAEyB,iBAEF,M,CAEFzB,EAAEiC,kBACF,MAAMC,EAAS,CAACH,EAAaI,WAAYJ,EAAaK,UACtD,GAAIF,EAAOG,SAASrC,EAAE8B,KAAsB,CAC1C9B,EAAEyB,iBAEF,GAAIzB,EAAE8B,MAAQC,EAAaI,WAAY,CACrCrH,KAAKE,aAAe6G,IAAyB/G,KAAKE,aAAe,EAAI,EAAIF,KAAKE,aAAe,C,CAE/F,GAAIgF,EAAE8B,MAAQC,EAAaK,SAAU,CACnCtH,KAAKE,aAAeF,KAAKE,cAAgB,EAAI6G,EAAuB,EAAI/G,KAAKE,aAAe,C,CAG9FF,KAAK8B,eAAe9B,KAAKE,cAAcsH,O,CAGzC,GAAItC,EAAE8B,MAAQC,EAAaQ,IAAK,CAC9BzH,KAAK0H,cAAcF,O,EAIf,kBAAAhB,GACN,GAAIxG,KAAKC,kBAAkB0C,OAAQ,CACjC,OACE4B,EAAA,UACEA,EAAA,aACEC,MAAM,uBACNyB,IAAMC,GAASlG,KAAK6B,qBAAuBqE,EAA2B,UAC7DlG,KAAK0H,cACd9B,SAAUC,EAAgBC,aAC1BC,SAAU,KACVC,UAAS,MAETzB,EAAA,OAAKC,MAAM,mBACTD,EAAA,cACEA,EAAA,gBAAcoD,KAAMC,EAASC,OAC1B7H,KAAKC,kBAAkBiE,KAAI,CAAC1B,EAAMsF,EAAOC,IAEtCxD,EAAA,WACEA,EAAA,kBAAgByD,UAAS,MACvBzD,EAAA,KACEC,MAAM,gBACNJ,KAAM5B,EAAKC,KACXwC,QAAUC,GAAMlF,KAAKmF,uBAAuBD,EAAG1C,GAC/CyF,UAAY/C,GAAMlF,KAAK8G,gCAAgC5B,IAEtD1C,EAAKa,OAGTyE,EAAQC,EAAMpF,OAAS,GAAK4B,EAAA,aAAW2D,MAAM,2BAQ5D3D,EAAA,uBACa,wBAAuB,gBACpB,OACd0B,IAAMkC,GAAQnI,KAAK0H,cAAgBS,EACnC3D,MAAM,OACNS,QAAS,KACPjF,KAAKyG,eAAe,EAEtBwB,UAAY/C,IACVkD,EAAqBlD,EAAGlF,KAAKyG,cAAc4B,KAAKrI,OAChDsI,YAAW,KACTtI,KAAK8B,eAAe,GAAG0F,OAAO,GAC7B,IAAI,GACR,O,EASX,MAAAe,GACE,OACEhE,EAACiE,EAAI,CAAAxB,IAAA,2CAACyB,MAAO,CAAC,uBAAwB,GAAGzI,KAAK0I,yBAC3C1I,KAAKS,gBAAkBE,EAAOC,OAASZ,KAAKqE,yBAA2BrE,KAAKuG,mB"}
@@ -1,2 +0,0 @@
1
- import{r as t,h as o}from"./p-10bb4f4b.js";const s=":host{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:0 -1px -1px 0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";const e=s;const r=class{constructor(o){t(this,o)}render(){return o("slot",{key:"9fb05af5cc8c977fc5041b5a5b75d5813caefd82"})}};r.style=e;export{r as z_visually_hidden};
2
- //# sourceMappingURL=p-4c40561d.entry.js.map
@@ -1,2 +0,0 @@
1
- import{r as o,h as n,a}from"./p-10bb4f4b.js";import{B as i}from"./p-025f494e.js";const t="html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;color:inherit;font-weight:inherit;-webkit-line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-surface04);color:var(--color-text01);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out}z-anchor-navigation nav>[current]{border-left-color:var(--color-primary01);color:var(--color-link-primary);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button,z-icon){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}z-anchor-navigation nav z-icon{--z-icon-width:16px;--z-icon-height:16px;display:flex;padding:calc(var(--space-unit) * 1.5);fill:var(--color-icon02)}@media (min-width: 768px){z-anchor-navigation z-button.toggle{display:none !important}z-anchor-navigation nav{display:flex}z-anchor-navigation nav a{outline:none}@media (hover: hover){z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-secondary);background-color:var(--color-hover-surface);color:var(--color-hover-link)}}z-anchor-navigation nav>*:is(:focus,:focus-within),z-anchor-navigation nav :is(z-icon,button):focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation[hide-unselected] nav>*:not([current],:hover,:focus,:focus-within){color:transparent}z-anchor-navigation nav>*:not([current],:hover,:focus,:focus-within)>*:is(z-button,button,z-icon):not(:focus:focus-visible){opacity:0;pointer-events:none}@media (hover: none){z-anchor-navigation:not([hide-unselected]) nav>*>*:is(z-button,button,z-icon){opacity:1;pointer-events:all}}}";const r=t;const e=class{constructor(n){o(this,n);this.hideUnselected=false;this.collapsed=false}setAriaCurrent(){Array.from(this.nav.children).forEach((o=>{const n=o instanceof HTMLAnchorElement?o:o.querySelector("a");const a=window.location.href===n.href;n.setAttribute("aria-current",a.toString());o.toggleAttribute("current",a)}))}toggleCollapsed(){this.collapsed=!this.collapsed}componentDidLoad(){window.addEventListener("hashchange",this.setAriaCurrent.bind(this));this.setAriaCurrent()}disconnectedCallback(){window.removeEventListener("hashchange",this.setAriaCurrent)}render(){return n(a,{key:"2f19d516f4b99e0f76268f025227f94d302273ea",collapsed:this.collapsed},n("z-button",{key:"822dca30f3ea2176f463b35a167fcc4714feeb7f",class:"toggle",variant:i.SECONDARY,icon:this.collapsed?"chevron-up":"chevron-down",onClick:this.toggleCollapsed.bind(this)},"salta a"),n("nav",{key:"218bf9aeb919037ad4725a9593ded46302b9e42a",ref:o=>this.nav=o},n("slot",{key:"0dfb9d2e7642d86b5c3e7da97be6ec04d05db70f"})))}};e.style=r;export{e as z_anchor_navigation};
2
- //# sourceMappingURL=p-acfde9fa.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["stylesCss","ZAnchorNavigationStyle0","ZAnchorNavigation","setAriaCurrent","Array","from","this","nav","children","forEach","item","anchor","HTMLAnchorElement","querySelector","isCurrent","window","location","href","setAttribute","toString","toggleAttribute","toggleCollapsed","collapsed","componentDidLoad","addEventListener","bind","disconnectedCallback","removeEventListener","render","h","Host","key","class","variant","ButtonVariant","SECONDARY","icon","onClick","ref","el"],"sources":["src/components/z-anchor-navigation/styles.css?tag=z-anchor-navigation","src/components/z-anchor-navigation/index.tsx"],"sourcesContent":["html {\n scroll-behavior: smooth;\n}\n\nz-anchor-navigation nav {\n display: none;\n flex-direction: column;\n justify-content: flex-start;\n row-gap: calc(var(--space-unit) / 2);\n}\n\nz-anchor-navigation[collapsed] nav {\n display: flex;\n margin-top: var(--space-unit);\n}\n\nz-anchor-navigation nav a {\n display: -webkit-box;\n overflow: clip;\n width: 100%;\n box-sizing: border-box;\n padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);\n -webkit-box-orient: vertical;\n color: inherit;\n font-weight: inherit;\n -webkit-line-clamp: 2;\n overflow-clip-margin: content-box;\n text-decoration: none;\n}\n\nz-anchor-navigation nav * a:not(:only-child) {\n padding-right: calc(var(--space-unit) * 5);\n}\n\n@supports not (overflow-clip-margin: content-box) {\n z-anchor-navigation nav a {\n display: inline-block;\n overflow: hidden;\n -webkit-line-clamp: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n\nz-anchor-navigation nav > * {\n position: relative;\n border-left: var(--border-size-large) solid var(--color-surface04);\n color: var(--color-text01);\n font-family: var(--font-family-sans);\n transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav > [current] {\n border-left-color: var(--color-primary01);\n color: var(--color-link-primary);\n font-weight: var(--font-sb);\n}\n\nz-anchor-navigation nav > * > *:is(z-button, button, z-icon) {\n position: absolute;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n transition: opacity 0.3s ease-in-out;\n}\n\nz-anchor-navigation nav button {\n padding: 0;\n border: none;\n margin: 0;\n background-color: transparent;\n}\n\nz-anchor-navigation nav z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n\n display: flex;\n padding: calc(var(--space-unit) * 1.5);\n fill: var(--color-icon02);\n}\n\n@media (min-width: 768px) {\n z-anchor-navigation z-button.toggle {\n display: none !important;\n }\n\n z-anchor-navigation nav {\n display: flex;\n }\n\n z-anchor-navigation nav a {\n outline: none;\n }\n\n @media (hover: hover) {\n z-anchor-navigation nav > *:hover {\n border-left-color: var(--color-hover-secondary);\n background-color: var(--color-hover-surface);\n color: var(--color-hover-link);\n }\n }\n\n z-anchor-navigation nav > *:is(:focus, :focus-within),\n z-anchor-navigation nav :is(z-icon, button):focus:focus-visible {\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n }\n\n z-anchor-navigation[hide-unselected] nav > *:not([current], :hover, :focus, :focus-within) {\n color: transparent;\n }\n\n z-anchor-navigation\n nav\n > *:not([current], :hover, :focus, :focus-within)\n > *:is(z-button, button, z-icon):not(:focus:focus-visible) {\n opacity: 0;\n pointer-events: none;\n }\n\n @media (hover: none) {\n z-anchor-navigation:not([hide-unselected]) nav > * > *:is(z-button, button, z-icon) {\n opacity: 1;\n pointer-events: all;\n }\n }\n}\n","import {Component, h, Host, Prop, State} from \"@stencil/core\";\nimport {ButtonVariant} from \"../../beans\";\n\n/**\n * * Anchor navigation component.\n * @slot Main slot. Put some `<a>` tags inside. If you need an action button/icon, wrap it and the <a> inside another tag.\n * @example\n * ```\n * <z-anchor-navigation>\n * <div>\n * <a href=\"#section-id\">Section name</a>\n * <button type=\"button\">\n * <z-icon name=\"share\" />\n * </button>\n * </div>\n * </z-anchor-navigation>\n * ```\n */\n@Component({\n tag: \"z-anchor-navigation\",\n styleUrl: \"styles.css\",\n shadow: false,\n})\nexport class ZAnchorNavigation {\n /**\n * If enabled, the text of each anchor will be hidden unless\n * for the current one or the one the user is hovering.\n */\n @Prop({reflect: true})\n hideUnselected = false;\n\n /**\n * Whether the mobile list is collapsed.\n */\n @State()\n collapsed = false;\n\n /** Reference to the nav element. */\n private nav: HTMLElement;\n\n /**\n * Set aria-current attribute to the anchors and `current` to nav children.\n */\n private setAriaCurrent(): void {\n Array.from(this.nav.children).forEach((item) => {\n const anchor = item instanceof HTMLAnchorElement ? item : item.querySelector(\"a\");\n const isCurrent = window.location.href === anchor.href;\n anchor.setAttribute(\"aria-current\", isCurrent.toString());\n item.toggleAttribute(\"current\", isCurrent);\n });\n }\n\n /**\n * Toggle collapsed state.\n */\n private toggleCollapsed(): void {\n this.collapsed = !this.collapsed;\n }\n\n componentDidLoad(): void {\n window.addEventListener(\"hashchange\", this.setAriaCurrent.bind(this));\n this.setAriaCurrent();\n }\n\n disconnectedCallback(): void {\n window.removeEventListener(\"hashchange\", this.setAriaCurrent);\n }\n\n render(): HTMLZAnchorNavigationElement {\n return (\n <Host collapsed={this.collapsed}>\n <z-button\n class=\"toggle\"\n variant={ButtonVariant.SECONDARY}\n icon={this.collapsed ? \"chevron-up\" : \"chevron-down\"}\n onClick={this.toggleCollapsed.bind(this)}\n >\n salta a\n </z-button>\n <nav ref={(el) => (this.nav = el)}>\n <slot></slot>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"iFAAA,MAAMA,EAAY,k7EAClB,MAAAC,EAAeD,E,MCsBFE,EAAiB,M,6CAMX,M,eAML,K,CAQJ,cAAAC,GACNC,MAAMC,KAAKC,KAAKC,IAAIC,UAAUC,SAASC,IACrC,MAAMC,EAASD,aAAgBE,kBAAoBF,EAAOA,EAAKG,cAAc,KAC7E,MAAMC,EAAYC,OAAOC,SAASC,OAASN,EAAOM,KAClDN,EAAOO,aAAa,eAAgBJ,EAAUK,YAC9CT,EAAKU,gBAAgB,UAAWN,EAAU,G,CAOtC,eAAAO,GACNf,KAAKgB,WAAahB,KAAKgB,S,CAGzB,gBAAAC,GACER,OAAOS,iBAAiB,aAAclB,KAAKH,eAAesB,KAAKnB,OAC/DA,KAAKH,gB,CAGP,oBAAAuB,GACEX,OAAOY,oBAAoB,aAAcrB,KAAKH,e,CAGhD,MAAAyB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACT,UAAWhB,KAAKgB,WACpBO,EAAA,YAAAE,IAAA,2CACEC,MAAM,SACNC,QAASC,EAAcC,UACvBC,KAAM9B,KAAKgB,UAAY,aAAe,eACtCe,QAAS/B,KAAKe,gBAAgBI,KAAKnB,OAAK,WAI1CuB,EAAA,OAAAE,IAAA,2CAAKO,IAAMC,GAAQjC,KAAKC,IAAMgC,GAC5BV,EAAA,QAAAE,IAAA,8C"}