@zanichelli/albe-web-components 2.31.0 → 2.31.1

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 (398) hide show
  1. package/CHANGELOG.md +1161 -1159
  2. package/LICENSE +21 -21
  3. package/dist/cjs/{breakpoints-776c8868.js → breakpoints-88c4fd6c.js} +1 -1
  4. package/dist/cjs/{index-8f7af00e.js → index-8f4b351d.js} +248 -248
  5. package/dist/cjs/index.cjs.js +5 -5
  6. package/dist/cjs/{utils-98538463.js → utils-6d6841cc.js} +63 -63
  7. package/dist/cjs/z-alert_66.cjs.entry.js +3359 -3321
  8. package/dist/cjs/z-app-header.cjs.entry.js +133 -133
  9. package/dist/cjs/z-candybar.cjs.entry.js +8 -8
  10. package/dist/cjs/z-cookiebar.cjs.entry.js +31 -31
  11. package/dist/cjs/z-heading.cjs.entry.js +8 -8
  12. package/dist/cjs/z-messages-pocket.cjs.entry.js +36 -36
  13. package/dist/cjs/z-modal-login.cjs.entry.js +71 -71
  14. package/dist/cjs/z-myz-card-dictionary.cjs.entry.js +25 -25
  15. package/dist/cjs/z-myz-card-footer-sections.cjs.entry.js +8 -8
  16. package/dist/cjs/z-myz-card-info.cjs.entry.js +109 -109
  17. package/dist/cjs/z-myz-topbar.cjs.entry.js +183 -183
  18. package/dist/cjs/z-navigation-tab.cjs.entry.js +34 -34
  19. package/dist/cjs/z-navigation-tabs.cjs.entry.js +90 -90
  20. package/dist/cjs/z-otp.cjs.entry.js +30 -30
  21. package/dist/cjs/z-pocket-message.cjs.entry.js +8 -8
  22. package/dist/cjs/z-pocket_3.cjs.entry.js +102 -102
  23. package/dist/cjs/z-registro-table-footer.cjs.entry.js +12 -12
  24. package/dist/cjs/z-slideshow.cjs.entry.js +101 -101
  25. package/dist/cjs/z-toast-notification-list.cjs.entry.js +45 -45
  26. package/dist/cjs/z-toast-notification.cjs.entry.js +190 -190
  27. package/dist/collection/beans/index.js +249 -249
  28. package/dist/collection/components/buttons/z-button/index.js +219 -219
  29. package/dist/collection/components/buttons/z-button/styles.css +231 -231
  30. package/dist/collection/components/buttons/z-button-filter/index.js +155 -155
  31. package/dist/collection/components/buttons/z-button-filter/styles.css +74 -74
  32. package/dist/collection/components/buttons/z-button-sort/index.js +216 -216
  33. package/dist/collection/components/buttons/z-button-sort/styles.css +101 -101
  34. package/dist/collection/components/buttons/z-chip/index.js +59 -59
  35. package/dist/collection/components/buttons/z-chip/styles.css +17 -17
  36. package/dist/collection/components/buttons/z-toggle-button/index.js +122 -122
  37. package/dist/collection/components/buttons/z-toggle-button/styles.css +62 -62
  38. package/dist/collection/components/footer/z-footer/index.js +286 -286
  39. package/dist/collection/components/footer/z-footer/styles.css +241 -241
  40. package/dist/collection/components/footer/z-footer-link/index.js +37 -37
  41. package/dist/collection/components/footer/z-footer-link/styles.css +33 -33
  42. package/dist/collection/components/footer/z-footer-section/index.js +51 -51
  43. package/dist/collection/components/footer/z-footer-section/styles.css +163 -163
  44. package/dist/collection/components/footer/z-footer-social/index.js +68 -68
  45. package/dist/collection/components/footer/z-footer-social/styles.css +23 -23
  46. package/dist/collection/components/icons/icons.js +473 -435
  47. package/dist/collection/components/icons/z-icon/index.js +110 -110
  48. package/dist/collection/components/icons/z-icon/styles.css +14 -14
  49. package/dist/collection/components/icons/z-icon-package/index.js +20 -20
  50. package/dist/collection/components/icons/z-icon-package/styles.css +16 -16
  51. package/dist/collection/components/indicators/z-stepper/index.js +17 -17
  52. package/dist/collection/components/indicators/z-stepper/styles.css +19 -19
  53. package/dist/collection/components/indicators/z-stepper-item/index.js +93 -93
  54. package/dist/collection/components/indicators/z-stepper-item/styles.css +115 -115
  55. package/dist/collection/components/inputs/z-combobox/index.js +480 -480
  56. package/dist/collection/components/inputs/z-combobox/styles.css +148 -148
  57. package/dist/collection/components/inputs/z-input/index.js +821 -821
  58. package/dist/collection/components/inputs/z-input/styles.css +304 -304
  59. package/dist/collection/components/inputs/z-input-label/index.js +72 -72
  60. package/dist/collection/components/inputs/z-input-label/styles.css +16 -16
  61. package/dist/collection/components/inputs/z-input-message/index.js +64 -64
  62. package/dist/collection/components/inputs/z-input-message/styles.css +33 -33
  63. package/dist/collection/components/inputs/z-select/index.js +647 -647
  64. package/dist/collection/components/inputs/z-select/styles.css +131 -131
  65. package/dist/collection/components/list/z-list/index.js +57 -57
  66. package/dist/collection/components/list/z-list/styles.css +7 -7
  67. package/dist/collection/components/list/z-list-element/index.js +439 -439
  68. package/dist/collection/components/list/z-list-element/styles.css +133 -133
  69. package/dist/collection/components/list/z-list-group/index.js +144 -144
  70. package/dist/collection/components/list/z-list-group/styles.css +22 -22
  71. package/dist/collection/components/list/z-toast-notification-list/index.js +97 -97
  72. package/dist/collection/components/list/z-toast-notification-list/styles.css +107 -107
  73. package/dist/collection/components/logo/z-logo/index.js +128 -128
  74. package/dist/collection/components/logo/z-logo/styles.css +28 -28
  75. package/dist/collection/components/modal/z-modal/index.js +160 -160
  76. package/dist/collection/components/modal/z-modal/styles.css +185 -185
  77. package/dist/collection/components/modal/z-modal-login/index.js +272 -272
  78. package/dist/collection/components/modal/z-modal-login/styles.css +159 -159
  79. package/dist/collection/components/navigation/z-app-header/index.js +267 -267
  80. package/dist/collection/components/navigation/z-app-header/styles.css +445 -445
  81. package/dist/collection/components/navigation/z-app-switcher/index.js +70 -70
  82. package/dist/collection/components/navigation/z-app-switcher/styles.css +35 -35
  83. package/dist/collection/components/navigation/z-app-topbar/index.js +156 -156
  84. package/dist/collection/components/navigation/z-app-topbar/styles.css +71 -71
  85. package/dist/collection/components/navigation/z-link/index.js +309 -309
  86. package/dist/collection/components/navigation/z-link/styles.css +160 -160
  87. package/dist/collection/components/navigation/z-menu/index.js +223 -223
  88. package/dist/collection/components/navigation/z-menu/styles.css +149 -149
  89. package/dist/collection/components/navigation/z-menu-dropdown/index.js +125 -125
  90. package/dist/collection/components/navigation/z-menu-dropdown/styles.css +146 -146
  91. package/dist/collection/components/navigation/z-menu-section/index.js +109 -109
  92. package/dist/collection/components/navigation/z-menu-section/styles.css +91 -91
  93. package/dist/collection/components/navigation/z-navigation-tab/index.js +151 -151
  94. package/dist/collection/components/navigation/z-navigation-tab/styles.css +113 -113
  95. package/dist/collection/components/navigation/z-navigation-tabs/index.js +179 -179
  96. package/dist/collection/components/navigation/z-navigation-tabs/styles.css +117 -117
  97. package/dist/collection/components/navigation/z-user-dropdown/index.js +252 -252
  98. package/dist/collection/components/navigation/z-user-dropdown/styles.css +315 -315
  99. package/dist/collection/components/notification/z-candybar/index.js +18 -18
  100. package/dist/collection/components/notification/z-candybar/styles.css +61 -61
  101. package/dist/collection/components/notification/z-cookiebar/index.js +111 -111
  102. package/dist/collection/components/notification/z-cookiebar/styles.css +109 -109
  103. package/dist/collection/components/notification/z-info-box/index.js +79 -79
  104. package/dist/collection/components/notification/z-info-box/styles.css +23 -23
  105. package/dist/collection/components/notification/z-notification/index.js +171 -171
  106. package/dist/collection/components/notification/z-notification/styles.css +93 -93
  107. package/dist/collection/components/notification/z-toast-notification/index.js +402 -402
  108. package/dist/collection/components/notification/z-toast-notification/styles.css +247 -247
  109. package/dist/collection/components/notification/z-tooltip/index.js +379 -379
  110. package/dist/collection/components/notification/z-tooltip/styles.css +128 -128
  111. package/dist/collection/components/pagination/z-pagination-bar/index.js +278 -278
  112. package/dist/collection/components/pagination/z-pagination-bar/styles.css +23 -23
  113. package/dist/collection/components/pagination/z-pagination-page/index.js +129 -129
  114. package/dist/collection/components/pagination/z-pagination-page/styles.css +57 -57
  115. package/dist/collection/components/panel/z-panel-elem/index.js +193 -193
  116. package/dist/collection/components/panel/z-panel-elem/styles.css +39 -39
  117. package/dist/collection/components/typography/z-body/index.js +66 -66
  118. package/dist/collection/components/typography/z-heading/index.js +66 -66
  119. package/dist/collection/components/typography/z-typography/index.js +84 -84
  120. package/dist/collection/components/typography/z-typography/styles.css +61 -61
  121. package/dist/collection/components/z-avatar/index.js +137 -137
  122. package/dist/collection/components/z-avatar/styles.css +35 -35
  123. package/dist/collection/components/z-card/index.js +153 -153
  124. package/dist/collection/components/z-card/styles.css +188 -188
  125. package/dist/collection/components/z-contextual-menu/index.js +122 -122
  126. package/dist/collection/components/z-contextual-menu/styles.css +45 -45
  127. package/dist/collection/components/z-divider/index.js +89 -89
  128. package/dist/collection/components/z-divider/styles.css +37 -37
  129. package/dist/collection/components/z-ghost-loading/index.js +14 -14
  130. package/dist/collection/components/z-ghost-loading/styles.css +34 -34
  131. package/dist/collection/components/z-popover/index.js +274 -274
  132. package/dist/collection/components/z-popover/styles.css +236 -236
  133. package/dist/collection/components/z-status-tag/index.js +125 -125
  134. package/dist/collection/components/z-status-tag/styles.css +133 -133
  135. package/dist/collection/constants/breakpoints.js +3 -3
  136. package/dist/collection/constants/icons.js +6 -6
  137. package/dist/collection/index.js +5 -5
  138. package/dist/collection/snowflakes/myz/card/z-myz-card/index.js +119 -119
  139. package/dist/collection/snowflakes/myz/card/z-myz-card/styles.css +38 -38
  140. package/dist/collection/snowflakes/myz/card/z-myz-card-alert/index.js +148 -148
  141. package/dist/collection/snowflakes/myz/card/z-myz-card-alert/styles.css +62 -62
  142. package/dist/collection/snowflakes/myz/card/z-myz-card-body/index.js +20 -20
  143. package/dist/collection/snowflakes/myz/card/z-myz-card-body/styles.css +13 -13
  144. package/dist/collection/snowflakes/myz/card/z-myz-card-cover/index.js +87 -87
  145. package/dist/collection/snowflakes/myz/card/z-myz-card-cover/styles.css +11 -11
  146. package/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/index.js +177 -177
  147. package/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/styles.css +85 -85
  148. package/dist/collection/snowflakes/myz/card/z-myz-card-footer/index.js +190 -190
  149. package/dist/collection/snowflakes/myz/card/z-myz-card-footer/styles.css +137 -137
  150. package/dist/collection/snowflakes/myz/card/z-myz-card-footer-sections/index.js +23 -23
  151. package/dist/collection/snowflakes/myz/card/z-myz-card-footer-sections/styles.css +32 -32
  152. package/dist/collection/snowflakes/myz/card/z-myz-card-header/index.js +101 -101
  153. package/dist/collection/snowflakes/myz/card/z-myz-card-header/styles.css +46 -46
  154. package/dist/collection/snowflakes/myz/card/z-myz-card-icon/index.js +74 -74
  155. package/dist/collection/snowflakes/myz/card/z-myz-card-icon/styles.css +70 -70
  156. package/dist/collection/snowflakes/myz/card/z-myz-card-info/index.js +213 -213
  157. package/dist/collection/snowflakes/myz/card/z-myz-card-info/styles.css +124 -124
  158. package/dist/collection/snowflakes/myz/card/z-myz-card-list/index.js +53 -53
  159. package/dist/collection/snowflakes/myz/card/z-myz-card-list/styles.css +41 -41
  160. package/dist/collection/snowflakes/myz/list/z-myz-list/index.js +70 -70
  161. package/dist/collection/snowflakes/myz/list/z-myz-list/styles.css +4 -4
  162. package/dist/collection/snowflakes/myz/list/z-myz-list-item/index.js +188 -188
  163. package/dist/collection/snowflakes/myz/list/z-myz-list-item/styles.css +48 -48
  164. package/dist/collection/snowflakes/myz/pocket/z-messages-pocket/index.js +121 -121
  165. package/dist/collection/snowflakes/myz/pocket/z-messages-pocket/styles.css +106 -106
  166. package/dist/collection/snowflakes/myz/pocket/z-pocket/index.js +181 -181
  167. package/dist/collection/snowflakes/myz/pocket/z-pocket/styles.css +56 -56
  168. package/dist/collection/snowflakes/myz/pocket/z-pocket-body/index.js +77 -77
  169. package/dist/collection/snowflakes/myz/pocket/z-pocket-body/styles.css +49 -49
  170. package/dist/collection/snowflakes/myz/pocket/z-pocket-header/index.js +86 -86
  171. package/dist/collection/snowflakes/myz/pocket/z-pocket-header/styles.css +40 -40
  172. package/dist/collection/snowflakes/myz/pocket/z-pocket-message/index.js +23 -23
  173. package/dist/collection/snowflakes/myz/pocket/z-pocket-message/styles.css +53 -53
  174. package/dist/collection/snowflakes/myz/topbar/index.js +428 -428
  175. package/dist/collection/snowflakes/myz/topbar/styles.css +594 -594
  176. package/dist/collection/snowflakes/myz/z-alert/index.js +42 -42
  177. package/dist/collection/snowflakes/myz/z-alert/styles.css +28 -28
  178. package/dist/collection/snowflakes/myz/z-otp/index.js +114 -114
  179. package/dist/collection/snowflakes/myz/z-otp/styles.css +47 -47
  180. package/dist/collection/snowflakes/myz/z-slideshow/index.js +165 -165
  181. package/dist/collection/snowflakes/myz/z-slideshow/styles.css +128 -128
  182. package/dist/collection/snowflakes/registro-table/z-registro-table/index.js +365 -365
  183. package/dist/collection/snowflakes/registro-table/z-registro-table/styles.css +166 -166
  184. package/dist/collection/snowflakes/registro-table/z-registro-table-body/index.js +19 -19
  185. package/dist/collection/snowflakes/registro-table/z-registro-table-body/styles.css +9 -9
  186. package/dist/collection/snowflakes/registro-table/z-registro-table-cell/index.js +58 -58
  187. package/dist/collection/snowflakes/registro-table/z-registro-table-cell/styles.css +39 -39
  188. package/dist/collection/snowflakes/registro-table/z-registro-table-empty-box/index.js +69 -69
  189. package/dist/collection/snowflakes/registro-table/z-registro-table-empty-box/styles.css +24 -24
  190. package/dist/collection/snowflakes/registro-table/z-registro-table-expanded-row/index.js +36 -36
  191. package/dist/collection/snowflakes/registro-table/z-registro-table-expanded-row/styles.css +16 -16
  192. package/dist/collection/snowflakes/registro-table/z-registro-table-footer/index.js +18 -18
  193. package/dist/collection/snowflakes/registro-table/z-registro-table-footer/styles.css +5 -5
  194. package/dist/collection/snowflakes/registro-table/z-registro-table-head/index.js +18 -18
  195. package/dist/collection/snowflakes/registro-table/z-registro-table-head/styles.css +5 -5
  196. package/dist/collection/snowflakes/registro-table/z-registro-table-header/index.js +240 -240
  197. package/dist/collection/snowflakes/registro-table/z-registro-table-header/styles.css +67 -67
  198. package/dist/collection/snowflakes/registro-table/z-registro-table-header-row/index.js +37 -37
  199. package/dist/collection/snowflakes/registro-table/z-registro-table-header-row/styles.css +13 -13
  200. package/dist/collection/snowflakes/registro-table/z-registro-table-row/index.js +86 -86
  201. package/dist/collection/snowflakes/registro-table/z-registro-table-row/styles.css +54 -54
  202. package/dist/collection/snowflakes/registro-table/z-registro-table-sticky-footer/index.js +17 -17
  203. package/dist/collection/snowflakes/registro-table/z-registro-table-sticky-footer/styles.css +10 -10
  204. package/dist/collection/themes/index.story.js +18 -18
  205. package/dist/collection/utils/utils.js +82 -82
  206. package/dist/esm/{breakpoints-14432d05.js → breakpoints-c386984e.js} +1 -1
  207. package/dist/esm/{index-e9a16abc.js → index-0258069c.js} +248 -248
  208. package/dist/esm/index.js +5 -5
  209. package/dist/esm/polyfills/core-js.js +0 -0
  210. package/dist/esm/polyfills/dom.js +0 -0
  211. package/dist/esm/polyfills/es5-html-element.js +0 -0
  212. package/dist/esm/polyfills/index.js +0 -0
  213. package/dist/esm/polyfills/system.js +0 -0
  214. package/dist/esm/{utils-84f318dc.js → utils-0345e333.js} +63 -63
  215. package/dist/esm/z-alert_66.entry.js +3359 -3321
  216. package/dist/esm/z-app-header.entry.js +133 -133
  217. package/dist/esm/z-candybar.entry.js +8 -8
  218. package/dist/esm/z-cookiebar.entry.js +31 -31
  219. package/dist/esm/z-heading.entry.js +8 -8
  220. package/dist/esm/z-messages-pocket.entry.js +36 -36
  221. package/dist/esm/z-modal-login.entry.js +71 -71
  222. package/dist/esm/z-myz-card-dictionary.entry.js +25 -25
  223. package/dist/esm/z-myz-card-footer-sections.entry.js +8 -8
  224. package/dist/esm/z-myz-card-info.entry.js +109 -109
  225. package/dist/esm/z-myz-topbar.entry.js +183 -183
  226. package/dist/esm/z-navigation-tab.entry.js +34 -34
  227. package/dist/esm/z-navigation-tabs.entry.js +90 -90
  228. package/dist/esm/z-otp.entry.js +30 -30
  229. package/dist/esm/z-pocket-message.entry.js +8 -8
  230. package/dist/esm/z-pocket_3.entry.js +102 -102
  231. package/dist/esm/z-registro-table-footer.entry.js +12 -12
  232. package/dist/esm/z-slideshow.entry.js +101 -101
  233. package/dist/esm/z-toast-notification-list.entry.js +45 -45
  234. package/dist/esm/z-toast-notification.entry.js +190 -190
  235. package/dist/types/beans/index.d.ts +334 -334
  236. package/dist/types/components/buttons/z-button/index.d.ts +29 -29
  237. package/dist/types/components/buttons/z-button-filter/index.d.ts +22 -22
  238. package/dist/types/components/buttons/z-button-sort/index.d.ts +28 -28
  239. package/dist/types/components/buttons/z-chip/index.d.ts +6 -6
  240. package/dist/types/components/buttons/z-toggle-button/index.d.ts +16 -16
  241. package/dist/types/components/footer/z-footer/index.d.ts +46 -46
  242. package/dist/types/components/footer/z-footer-link/index.d.ts +8 -8
  243. package/dist/types/components/footer/z-footer-section/index.d.ts +10 -10
  244. package/dist/types/components/footer/z-footer-social/index.d.ts +9 -9
  245. package/dist/types/components/icons/icons.d.ts +443 -405
  246. package/dist/types/components/icons/z-icon/index.d.ts +14 -14
  247. package/dist/types/components/icons/z-icon-package/index.d.ts +3 -3
  248. package/dist/types/components/indicators/z-stepper/index.d.ts +6 -6
  249. package/dist/types/components/indicators/z-stepper-item/index.d.ts +19 -19
  250. package/dist/types/components/inputs/z-combobox/index.d.ts +62 -62
  251. package/dist/types/components/inputs/z-input/index.d.ts +102 -102
  252. package/dist/types/components/inputs/z-input-label/index.d.ts +9 -9
  253. package/dist/types/components/inputs/z-input-message/index.d.ts +9 -9
  254. package/dist/types/components/inputs/z-select/index.d.ts +73 -73
  255. package/dist/types/components/list/z-list/index.d.ts +11 -11
  256. package/dist/types/components/list/z-list-element/index.d.ts +79 -79
  257. package/dist/types/components/list/z-list-group/index.d.ts +24 -24
  258. package/dist/types/components/list/z-toast-notification-list/index.d.ts +14 -14
  259. package/dist/types/components/logo/z-logo/index.d.ts +15 -15
  260. package/dist/types/components/modal/z-modal/index.d.ts +25 -25
  261. package/dist/types/components/modal/z-modal-login/index.d.ts +42 -42
  262. package/dist/types/components/navigation/z-app-header/index.d.ts +67 -67
  263. package/dist/types/components/navigation/z-app-switcher/index.d.ts +12 -12
  264. package/dist/types/components/navigation/z-app-topbar/index.d.ts +20 -20
  265. package/dist/types/components/navigation/z-link/index.d.ts +41 -41
  266. package/dist/types/components/navigation/z-menu/index.d.ts +52 -52
  267. package/dist/types/components/navigation/z-menu-dropdown/index.d.ts +19 -19
  268. package/dist/types/components/navigation/z-menu-section/index.d.ts +24 -24
  269. package/dist/types/components/navigation/z-navigation-tab/index.d.ts +16 -16
  270. package/dist/types/components/navigation/z-navigation-tabs/index.d.ts +32 -32
  271. package/dist/types/components/navigation/z-user-dropdown/index.d.ts +39 -39
  272. package/dist/types/components/notification/z-candybar/index.d.ts +6 -6
  273. package/dist/types/components/notification/z-cookiebar/index.d.ts +16 -16
  274. package/dist/types/components/notification/z-info-box/index.d.ts +14 -14
  275. package/dist/types/components/notification/z-notification/index.d.ts +24 -24
  276. package/dist/types/components/notification/z-toast-notification/index.d.ts +56 -56
  277. package/dist/types/components/notification/z-tooltip/index.d.ts +41 -41
  278. package/dist/types/components/pagination/z-pagination-bar/index.d.ts +42 -42
  279. package/dist/types/components/pagination/z-pagination-page/index.d.ts +15 -15
  280. package/dist/types/components/panel/z-panel-elem/index.d.ts +25 -25
  281. package/dist/types/components/typography/z-body/index.d.ts +6 -6
  282. package/dist/types/components/typography/z-heading/index.d.ts +6 -6
  283. package/dist/types/components/typography/z-typography/index.d.ts +8 -8
  284. package/dist/types/components/z-avatar/index.d.ts +16 -16
  285. package/dist/types/components/z-card/index.d.ts +29 -29
  286. package/dist/types/components/z-contextual-menu/index.d.ts +22 -22
  287. package/dist/types/components/z-divider/index.d.ts +10 -10
  288. package/dist/types/components/z-ghost-loading/index.d.ts +3 -3
  289. package/dist/types/components/z-popover/index.d.ts +29 -29
  290. package/dist/types/components/z-status-tag/index.d.ts +15 -15
  291. package/dist/types/constants/breakpoints.d.ts +3 -3
  292. package/dist/types/constants/icons.d.ts +6 -6
  293. package/dist/types/index.d.ts +5 -5
  294. package/dist/types/snowflakes/myz/card/z-myz-card/index.d.ts +16 -16
  295. package/dist/types/snowflakes/myz/card/z-myz-card-alert/index.d.ts +20 -20
  296. package/dist/types/snowflakes/myz/card/z-myz-card-body/index.d.ts +7 -7
  297. package/dist/types/snowflakes/myz/card/z-myz-card-cover/index.d.ts +12 -12
  298. package/dist/types/snowflakes/myz/card/z-myz-card-dictionary/index.d.ts +24 -24
  299. package/dist/types/snowflakes/myz/card/z-myz-card-footer/index.d.ts +34 -34
  300. package/dist/types/snowflakes/myz/card/z-myz-card-footer-sections/index.d.ts +7 -7
  301. package/dist/types/snowflakes/myz/card/z-myz-card-header/index.d.ts +23 -23
  302. package/dist/types/snowflakes/myz/card/z-myz-card-icon/index.d.ts +9 -9
  303. package/dist/types/snowflakes/myz/card/z-myz-card-info/index.d.ts +36 -36
  304. package/dist/types/snowflakes/myz/card/z-myz-card-list/index.d.ts +10 -10
  305. package/dist/types/snowflakes/myz/list/z-myz-list/index.d.ts +11 -11
  306. package/dist/types/snowflakes/myz/list/z-myz-list-item/index.d.ts +25 -25
  307. package/dist/types/snowflakes/myz/pocket/z-messages-pocket/index.d.ts +16 -16
  308. package/dist/types/snowflakes/myz/pocket/z-pocket/index.d.ts +25 -25
  309. package/dist/types/snowflakes/myz/pocket/z-pocket-body/index.d.ts +12 -12
  310. package/dist/types/snowflakes/myz/pocket/z-pocket-header/index.d.ts +18 -18
  311. package/dist/types/snowflakes/myz/pocket/z-pocket-message/index.d.ts +7 -7
  312. package/dist/types/snowflakes/myz/topbar/index.d.ts +61 -61
  313. package/dist/types/snowflakes/myz/z-alert/index.d.ts +9 -9
  314. package/dist/types/snowflakes/myz/z-otp/index.d.ts +13 -13
  315. package/dist/types/snowflakes/myz/z-slideshow/index.d.ts +30 -30
  316. package/dist/types/snowflakes/registro-table/z-registro-table/index.d.ts +48 -48
  317. package/dist/types/snowflakes/registro-table/z-registro-table-body/index.d.ts +5 -5
  318. package/dist/types/snowflakes/registro-table/z-registro-table-cell/index.d.ts +9 -9
  319. package/dist/types/snowflakes/registro-table/z-registro-table-empty-box/index.d.ts +12 -12
  320. package/dist/types/snowflakes/registro-table/z-registro-table-expanded-row/index.d.ts +5 -5
  321. package/dist/types/snowflakes/registro-table/z-registro-table-footer/index.d.ts +5 -5
  322. package/dist/types/snowflakes/registro-table/z-registro-table-head/index.d.ts +5 -5
  323. package/dist/types/snowflakes/registro-table/z-registro-table-header/index.d.ts +27 -27
  324. package/dist/types/snowflakes/registro-table/z-registro-table-header-row/index.d.ts +5 -5
  325. package/dist/types/snowflakes/registro-table/z-registro-table-row/index.d.ts +11 -11
  326. package/dist/types/snowflakes/registro-table/z-registro-table-sticky-footer/index.d.ts +6 -6
  327. package/dist/types/utils/utils.d.ts +11 -11
  328. package/dist/web-components-library/index.esm.js +1 -1
  329. package/dist/web-components-library/{p-fc133dd1.entry.js → p-02e55441.entry.js} +1 -1
  330. package/{www/build/p-35b2df47.entry.js → dist/web-components-library/p-1442c0b2.entry.js} +1 -1
  331. package/dist/web-components-library/{p-609908af.entry.js → p-18f6f866.entry.js} +1 -1
  332. package/dist/web-components-library/{p-aa7c40c3.entry.js → p-231e7797.entry.js} +1 -1
  333. package/dist/web-components-library/{p-8c6cba93.entry.js → p-2f354863.entry.js} +1 -1
  334. package/dist/web-components-library/{p-21ffb0b5.entry.js → p-35b1f338.entry.js} +1 -1
  335. package/dist/web-components-library/{p-91f5e2f8.entry.js → p-3cdefa38.entry.js} +1 -1
  336. package/dist/web-components-library/{p-a75b3177.entry.js → p-4a6ec3df.entry.js} +1 -1
  337. package/dist/web-components-library/{p-a54ab38c.entry.js → p-5cdcaa8c.entry.js} +1 -1
  338. package/dist/web-components-library/{p-e8b36609.entry.js → p-b80081c9.entry.js} +1 -1
  339. package/dist/web-components-library/{p-d3279fd6.entry.js → p-d4830f32.entry.js} +1 -1
  340. package/dist/web-components-library/{p-acdb443b.js → p-d63b9ed3.js} +0 -0
  341. package/dist/web-components-library/{p-e35d3552.js → p-d69e14fb.js} +0 -0
  342. package/dist/web-components-library/{p-f53af59a.js → p-e7304c42.js} +1 -1
  343. package/dist/web-components-library/p-f43d8b59.entry.js +7 -0
  344. package/{www/build/p-cdb9067a.entry.js → dist/web-components-library/p-f83347fd.entry.js} +1 -1
  345. package/dist/web-components-library/{p-45940723.entry.js → p-ff6b02d1.entry.js} +1 -1
  346. package/dist/web-components-library/web-components-library.css +1 -1
  347. package/dist/web-components-library/web-components-library.esm.js +1 -1
  348. package/package.json +90 -90
  349. package/react/components.d.ts +89 -89
  350. package/react/components.js +95 -95
  351. package/react/index.d.ts +1 -1
  352. package/react/index.js +13 -13
  353. package/react/react-component-lib/createComponent.d.ts +10 -10
  354. package/react/react-component-lib/createComponent.js +65 -65
  355. package/react/react-component-lib/createOverlayComponent.d.ts +20 -20
  356. package/react/react-component-lib/createOverlayComponent.js +95 -95
  357. package/react/react-component-lib/index.d.ts +2 -2
  358. package/react/react-component-lib/index.js +7 -7
  359. package/react/react-component-lib/interfaces.d.ts +29 -29
  360. package/react/react-component-lib/interfaces.js +2 -2
  361. package/react/react-component-lib/utils/attachProps.d.ts +12 -12
  362. package/react/react-component-lib/utils/attachProps.js +102 -102
  363. package/react/react-component-lib/utils/case.d.ts +2 -2
  364. package/react/react-component-lib/utils/case.js +11 -11
  365. package/react/react-component-lib/utils/dev.d.ts +2 -2
  366. package/react/react-component-lib/utils/dev.js +17 -17
  367. package/react/react-component-lib/utils/index.d.ts +7 -7
  368. package/react/react-component-lib/utils/index.js +38 -38
  369. package/readme.md +236 -236
  370. package/src-react/index.ts +1 -0
  371. package/www/build/index.esm.js +1 -1
  372. package/www/build/{p-fc133dd1.entry.js → p-02e55441.entry.js} +1 -1
  373. package/{dist/web-components-library/p-35b2df47.entry.js → www/build/p-1442c0b2.entry.js} +1 -1
  374. package/www/build/{p-609908af.entry.js → p-18f6f866.entry.js} +1 -1
  375. package/www/build/{p-aa7c40c3.entry.js → p-231e7797.entry.js} +1 -1
  376. package/www/build/{p-8c6cba93.entry.js → p-2f354863.entry.js} +1 -1
  377. package/www/build/{p-21ffb0b5.entry.js → p-35b1f338.entry.js} +1 -1
  378. package/www/build/{p-91f5e2f8.entry.js → p-3cdefa38.entry.js} +1 -1
  379. package/www/build/{p-a75b3177.entry.js → p-4a6ec3df.entry.js} +1 -1
  380. package/www/build/{p-a54ab38c.entry.js → p-5cdcaa8c.entry.js} +1 -1
  381. package/www/build/p-6ba3b440.css +792 -0
  382. package/www/build/{p-e8b36609.entry.js → p-b80081c9.entry.js} +1 -1
  383. package/www/build/{p-d3279fd6.entry.js → p-d4830f32.entry.js} +1 -1
  384. package/www/build/{p-acdb443b.js → p-d63b9ed3.js} +0 -0
  385. package/www/build/{p-e35d3552.js → p-d69e14fb.js} +0 -0
  386. package/www/build/{p-f53af59a.js → p-e7304c42.js} +1 -1
  387. package/www/build/p-f43d8b59.entry.js +7 -0
  388. package/{dist/web-components-library/p-cdb9067a.entry.js → www/build/p-f83347fd.entry.js} +1 -1
  389. package/www/build/p-f9b40a11.js +122 -0
  390. package/www/build/{p-45940723.entry.js → p-ff6b02d1.entry.js} +1 -1
  391. package/www/build/web-components-library.css +1 -1
  392. package/www/build/web-components-library.esm.js +1 -1
  393. package/www/index.html +1 -1
  394. package/www/pages/notification.html +244 -244
  395. package/dist/web-components-library/p-8afd98e0.entry.js +0 -7
  396. package/www/build/p-2e3d31b3.js +0 -1
  397. package/www/build/p-8afd98e0.entry.js +0 -7
  398. package/www/build/p-ea943cbd.css +0 -1
package/readme.md CHANGED
@@ -1,236 +1,236 @@
1
- ![Zanichelli logo](https://www.zanichelli.it/static/zanichelli/templates/zanichelli/_template_style/images/logo-print.png)
2
-
3
- # Zanichelli - Web Components Library
4
-
5
- Zanichelli's design system is widely documented on Zeroheight at this [link](https://zeroheight.com/485b31545).
6
-
7
- ## Install
8
-
9
- ```bash
10
- yarn add @zanichelli/albe-web-components
11
- ```
12
-
13
- ## Start Library Development Server
14
- ```
15
- yarn start
16
- ```
17
-
18
- ---
19
-
20
- ## Create a component:
21
-
22
- ```
23
- yarn generate component my-component
24
- ```
25
-
26
- ##### NB: component name must have a dash (`-`)
27
-
28
- ----
29
-
30
- ## Symlink Local Development
31
-
32
- #### Run
33
-
34
- ```
35
- yarn link
36
- ```
37
-
38
- #### In the destination project folder run
39
-
40
- ```
41
- yarn link @zanichelli/albe-web-components
42
- ```
43
-
44
- ----
45
-
46
- ## Tests
47
-
48
- #### Run all tests
49
-
50
- ```
51
- yarn test
52
- ```
53
-
54
- #### Run single test
55
-
56
- ```
57
- yarn test --spec {componentPath}
58
- ```
59
-
60
- #### Run e2e tests
61
-
62
- ```
63
- yarn test.e2e
64
- ```
65
-
66
- ----
67
-
68
- ## Release
69
-
70
- In this repository we follow the [Conventional Commits Specification](https://www.conventionalcommits.org/) and we use [standard-version](https://github.com/conventional-changelog/standard-version) to update the [CHANGELOG.md](./CHANGELOG.md) when publishing a new version of the package to NPM.
71
-
72
- Standard-version automatically detects the type of the update (patch, minor or major) following the [Semantic Versioning](https://semver.org/) specification.
73
-
74
- **Publish a new version on NPM registry**
75
-
76
- * Make sure you are logged in NPM
77
- * Run standard-version:
78
-
79
- ```
80
- yarn release
81
- ```
82
-
83
- **Specify a version**
84
-
85
- If you want to select a version or the update type, you can use the `--release-as` flag:
86
-
87
- ```
88
- yarn release --release-as path
89
- yarn release --release-as 1.1.0
90
- ```
91
-
92
- In general, you can pass any flag supported by standard-version, please refer to their [CLI usage](https://github.com/conventional-changelog/standard-version#cli-usage) documentation.
93
-
94
- **Publish the new release on GitHub**
95
-
96
- You need to [manually create the GitHub release](https://github.com/ZanichelliEditore/design-system/releases/new) in order to update the Storybook documentation.
97
-
98
- ----
99
-
100
- ## Documentation
101
-
102
- In order to correctly import Stencil Components into the Storybook, we need to build the library first. Stencil will generate properties documentation and it will store them in the `custom-elements.json` which is loaded by Storybook. At the moment, everytime you edit the library sources, you need to rebuild them to get the Storybook updated.
103
-
104
- #### Plugins
105
-
106
- * [@storybook/addon-a11y](https://www.npmjs.com/package/@storybook/addon-a11y)
107
- * [@storybook/addon-docs](https://www.npmjs.com/package/@storybook/addon-docs)
108
- * [@storybook/addon-knobs](https://www.npmjs.com/package/@storybook/addon-knobs)
109
- * [@storybook/addon-viewport](https://www.npmjs.com/package/@storybook/addon-viewport)
110
- * [storybook-addons-abstract](https://www.npmjs.com/package/storybook-addons-abstract)
111
-
112
- #### Start Storybook:
113
-
114
- ```sh
115
- # Build the library
116
- yarn build
117
- # Start the Storybook
118
- yarn start-storybook
119
- ```
120
-
121
- #### Build Storybook:
122
-
123
- ```sh
124
- # Build the library
125
- yarn build
126
- # Build the Storybook
127
- yarn build-storybook
128
- ```
129
-
130
- #### Developing with Storybook:
131
-
132
- Start the Stencil dev server:
133
- ```sh
134
- yarn start
135
- ```
136
-
137
- and, in a separate terminal window, run the Storybook:
138
-
139
- ```sh
140
- yarn start-storybook
141
- ```
142
-
143
- ----
144
-
145
- ## Build Library package
146
- ```
147
- yarn build
148
- ```
149
-
150
- # Environment Support
151
-
152
- - Modern browsers
153
- - Chromium Edge and Safari 10 with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)
154
-
155
- | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
156
- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
157
- | > 16.16 | > 48 | > 69 | > 10.0 |
158
-
159
- ## Usage
160
-
161
- ### CSS Custom Properties
162
-
163
- The library provides a global css variables export. You can import the styles by ES6 import:
164
-
165
- ```javascript
166
- import '@zanichelli/albe-web-components/www/build/web-components-library.css';
167
- ```
168
- or via link tag:
169
-
170
- ```html
171
- <link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css" />
172
- ```
173
-
174
-
175
- ### Custom Elements
176
-
177
- You can use the library by importing the custom elements from npm package:
178
-
179
- ```javascript
180
- import { defineCustomElements, applyPolyfills } from '@zanichelli/albe-web-components/loader';
181
-
182
- applyPolyfills().then(() => {
183
- defineCustomElements(window);
184
- });
185
- ```
186
-
187
- or via a script tag:
188
-
189
- ```html
190
- <script src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>
191
- ```
192
-
193
- Then use the relative tag as a usual component in your markup.
194
-
195
- ```html
196
- <section>
197
- <z-button label="button" type="primary">Click me!</z-button>
198
- </section>
199
- ```
200
-
201
- ### Using React bindings
202
-
203
- Albe's Web Components come with automatically generated React bindings. This means that you can use Web Components in a React application without the need to wrap component references, with full intellisense support thanks to TypeScript definition files for bindings.
204
-
205
- You still need to import and run polyfills, then you can import Component references from the React submodule:
206
-
207
- ```javascript
208
- import React from 'react';
209
- import ReactDOM from 'react-dom';
210
- import '@zanichelli/albe-web-components/www/build/web-components-library.css';
211
- import { defineCustomElements, applyPolyfills } from '@zanichelli/albe-web-components/loader';
212
- import { ZButton } from '@zanichelli/albe-web-components/react';
213
-
214
- applyPolyfills().then(() => {
215
- defineCustomElements(window);
216
- });
217
-
218
- ReactDOM.render(<ZButton>Click me</ZButton>, document.getElementById('root'));
219
- ```
220
-
221
- ## Component definition
222
-
223
- Each component is structured as follows:
224
-
225
- | File name | Description |
226
- | --------------- | ------------------------------ |
227
- | `index-ts` | Component markup and UI logics |
228
- | `styles.css` | Component styles |
229
- | `index.spec.ts` | Component tests |
230
- | `index.stories.mdx` | Component storybook file |
231
- | `README.md` | Stencil documentation |
232
-
233
- ## Roadmap
234
-
235
- - 12 6 2020: Publishing repo v 1.0.0
236
-
1
+ ![Zanichelli logo](https://www.zanichelli.it/static/zanichelli/templates/zanichelli/_template_style/images/logo-print.png)
2
+
3
+ # Zanichelli - Web Components Library
4
+
5
+ Zanichelli's design system is widely documented on Zeroheight at this [link](https://zeroheight.com/485b31545).
6
+
7
+ ## Install
8
+
9
+ ```bash
10
+ yarn add @zanichelli/albe-web-components
11
+ ```
12
+
13
+ ## Start Library Development Server
14
+ ```
15
+ yarn start
16
+ ```
17
+
18
+ ---
19
+
20
+ ## Create a component:
21
+
22
+ ```
23
+ yarn generate component my-component
24
+ ```
25
+
26
+ ##### NB: component name must have a dash (`-`)
27
+
28
+ ----
29
+
30
+ ## Symlink Local Development
31
+
32
+ #### Run
33
+
34
+ ```
35
+ yarn link
36
+ ```
37
+
38
+ #### In the destination project folder run
39
+
40
+ ```
41
+ yarn link @zanichelli/albe-web-components
42
+ ```
43
+
44
+ ----
45
+
46
+ ## Tests
47
+
48
+ #### Run all tests
49
+
50
+ ```
51
+ yarn test
52
+ ```
53
+
54
+ #### Run single test
55
+
56
+ ```
57
+ yarn test --spec {componentPath}
58
+ ```
59
+
60
+ #### Run e2e tests
61
+
62
+ ```
63
+ yarn test.e2e
64
+ ```
65
+
66
+ ----
67
+
68
+ ## Release
69
+
70
+ In this repository we follow the [Conventional Commits Specification](https://www.conventionalcommits.org/) and we use [standard-version](https://github.com/conventional-changelog/standard-version) to update the [CHANGELOG.md](./CHANGELOG.md) when publishing a new version of the package to NPM.
71
+
72
+ Standard-version automatically detects the type of the update (patch, minor or major) following the [Semantic Versioning](https://semver.org/) specification.
73
+
74
+ **Publish a new version on NPM registry**
75
+
76
+ * Make sure you are logged in NPM
77
+ * Run standard-version:
78
+
79
+ ```
80
+ yarn release
81
+ ```
82
+
83
+ **Specify a version**
84
+
85
+ If you want to select a version or the update type, you can use the `--release-as` flag:
86
+
87
+ ```
88
+ yarn release --release-as path
89
+ yarn release --release-as 1.1.0
90
+ ```
91
+
92
+ In general, you can pass any flag supported by standard-version, please refer to their [CLI usage](https://github.com/conventional-changelog/standard-version#cli-usage) documentation.
93
+
94
+ **Publish the new release on GitHub**
95
+
96
+ You need to [manually create the GitHub release](https://github.com/ZanichelliEditore/design-system/releases/new) in order to update the Storybook documentation.
97
+
98
+ ----
99
+
100
+ ## Documentation
101
+
102
+ In order to correctly import Stencil Components into the Storybook, we need to build the library first. Stencil will generate properties documentation and it will store them in the `custom-elements.json` which is loaded by Storybook. At the moment, everytime you edit the library sources, you need to rebuild them to get the Storybook updated.
103
+
104
+ #### Plugins
105
+
106
+ * [@storybook/addon-a11y](https://www.npmjs.com/package/@storybook/addon-a11y)
107
+ * [@storybook/addon-docs](https://www.npmjs.com/package/@storybook/addon-docs)
108
+ * [@storybook/addon-knobs](https://www.npmjs.com/package/@storybook/addon-knobs)
109
+ * [@storybook/addon-viewport](https://www.npmjs.com/package/@storybook/addon-viewport)
110
+ * [storybook-addons-abstract](https://www.npmjs.com/package/storybook-addons-abstract)
111
+
112
+ #### Start Storybook:
113
+
114
+ ```sh
115
+ # Build the library
116
+ yarn build
117
+ # Start the Storybook
118
+ yarn start-storybook
119
+ ```
120
+
121
+ #### Build Storybook:
122
+
123
+ ```sh
124
+ # Build the library
125
+ yarn build
126
+ # Build the Storybook
127
+ yarn build-storybook
128
+ ```
129
+
130
+ #### Developing with Storybook:
131
+
132
+ Start the Stencil dev server:
133
+ ```sh
134
+ yarn start
135
+ ```
136
+
137
+ and, in a separate terminal window, run the Storybook:
138
+
139
+ ```sh
140
+ yarn start-storybook
141
+ ```
142
+
143
+ ----
144
+
145
+ ## Build Library package
146
+ ```
147
+ yarn build
148
+ ```
149
+
150
+ # Environment Support
151
+
152
+ - Modern browsers
153
+ - Chromium Edge and Safari 10 with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)
154
+
155
+ | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br> Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari |
156
+ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
157
+ | > 16.16 | > 48 | > 69 | > 10.0 |
158
+
159
+ ## Usage
160
+
161
+ ### CSS Custom Properties
162
+
163
+ The library provides a global css variables export. You can import the styles by ES6 import:
164
+
165
+ ```javascript
166
+ import '@zanichelli/albe-web-components/www/build/web-components-library.css';
167
+ ```
168
+ or via link tag:
169
+
170
+ ```html
171
+ <link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css" />
172
+ ```
173
+
174
+
175
+ ### Custom Elements
176
+
177
+ You can use the library by importing the custom elements from npm package:
178
+
179
+ ```javascript
180
+ import { defineCustomElements, applyPolyfills } from '@zanichelli/albe-web-components/loader';
181
+
182
+ applyPolyfills().then(() => {
183
+ defineCustomElements(window);
184
+ });
185
+ ```
186
+
187
+ or via a script tag:
188
+
189
+ ```html
190
+ <script src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>
191
+ ```
192
+
193
+ Then use the relative tag as a usual component in your markup.
194
+
195
+ ```html
196
+ <section>
197
+ <z-button label="button" type="primary">Click me!</z-button>
198
+ </section>
199
+ ```
200
+
201
+ ### Using React bindings
202
+
203
+ Albe's Web Components come with automatically generated React bindings. This means that you can use Web Components in a React application without the need to wrap component references, with full intellisense support thanks to TypeScript definition files for bindings.
204
+
205
+ You still need to import and run polyfills, then you can import Component references from the React submodule:
206
+
207
+ ```javascript
208
+ import React from 'react';
209
+ import ReactDOM from 'react-dom';
210
+ import '@zanichelli/albe-web-components/www/build/web-components-library.css';
211
+ import { defineCustomElements, applyPolyfills } from '@zanichelli/albe-web-components/loader';
212
+ import { ZButton } from '@zanichelli/albe-web-components/react';
213
+
214
+ applyPolyfills().then(() => {
215
+ defineCustomElements(window);
216
+ });
217
+
218
+ ReactDOM.render(<ZButton>Click me</ZButton>, document.getElementById('root'));
219
+ ```
220
+
221
+ ## Component definition
222
+
223
+ Each component is structured as follows:
224
+
225
+ | File name | Description |
226
+ | --------------- | ------------------------------ |
227
+ | `index-ts` | Component markup and UI logics |
228
+ | `styles.css` | Component styles |
229
+ | `index.spec.ts` | Component tests |
230
+ | `index.stories.mdx` | Component storybook file |
231
+ | `README.md` | Stencil documentation |
232
+
233
+ ## Roadmap
234
+
235
+ - 12 6 2020: Publishing repo v 1.0.0
236
+
@@ -0,0 +1 @@
1
+ export * from './components';
@@ -1 +1 @@
1
- import{c as o}from"./p-f53af59a.js";import"./p-acdb443b.js";import"./p-e35d3552.js";const p={colorFromId:o};export{p as Utils}
1
+ import{c as o}from"./p-e7304c42.js";import"./p-d63b9ed3.js";import"./p-d69e14fb.js";const p={colorFromId:o};export{p as Utils}
@@ -1 +1 @@
1
- import{r as t,c as n,h as i}from"./p-904a85e4.js";import{b as e}from"./p-acdb443b.js";const a=class{constructor(i){t(this,i),this.accept=n(this,"accept",7)}emitAccept(t){this.accept.emit({ev:t})}handleOkButtonClick(t){this.emitAccept(t),"function"==typeof this.callback&&this.callback()}handleOkButtonKeyUp(t){this.emitAccept(t),"Enter"===t.code&&void 0!==this.callback&&"function"==typeof this.callback&&this.callback()}renderContentSlot(){return i("div",{class:"content",slot:"content"},i("div",null,i("h2",null,"Su questo sito usiamo i cookie."),i("div",null,i("p",null,"Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai  ",i("a",{href:this.cookiepolicyurl,target:"_blank"},"cookie"),"."))),i("z-button",{variant:e.primary,onClick:t=>this.handleOkButtonClick(t),onKeyUp:t=>this.handleOkButtonKeyUp(t)},"ACCETTA"))}render(){return i("z-candybar",{class:this.hide?"hidden":""},this.renderContentSlot())}};a.style=":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}z-candybar.hidden{display:none}.content{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:space-between;color:var(--text-grey-800);border-radius:calc(var(--space-unit) * .5);font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}.content>div>h2{margin:0;padding:0;color:var(--text-grey-800);border-radius:0px;font-size:18px;font-weight:var(--font-sb);letter-spacing:0px}.content>div>div{padding:calc(var(--space-unit) * 3) 0;font-size:14px;letter-spacing:0.16px;line-height:20px}.content>div>div>p{margin:0}.content>div>div>p>a{cursor:pointer;font-weight:var(--font-sb);color:var(--text-grey-800);text-decoration:underline;height:14px;display:inline-flex}.content>div>div>p>a:visited{color:var(--text-grey-800);cursor:pointer;z-index:1000}.content>z-button{margin:0;width:100%}@media only screen and (min-width: 768px){.content{width:100%;flex-direction:row;align-items:center;font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 3)}.content>div{width:560px}.content>div>h2{height:calc(var(--space-unit) * 3.5)}.content>div>div{padding:0}.content>z-button{margin:0;width:initial}}@media only screen and (min-width: 1152px){.content>div{width:935px}}@media only screen and (min-width: 1366px){.content{padding-left:calc(var(--space-unit) * 4);padding-right:calc(var(--space-unit) * 4)}}";export{a as z_cookiebar}
1
+ import{r as t,c as n,h as i}from"./p-904a85e4.js";import{b as e}from"./p-d63b9ed3.js";const a=class{constructor(i){t(this,i),this.accept=n(this,"accept",7)}emitAccept(t){this.accept.emit({ev:t})}handleOkButtonClick(t){this.emitAccept(t),"function"==typeof this.callback&&this.callback()}handleOkButtonKeyUp(t){this.emitAccept(t),"Enter"===t.code&&void 0!==this.callback&&"function"==typeof this.callback&&this.callback()}renderContentSlot(){return i("div",{class:"content",slot:"content"},i("div",null,i("h2",null,"Su questo sito usiamo i cookie."),i("div",null,i("p",null,"Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai  ",i("a",{href:this.cookiepolicyurl,target:"_blank"},"cookie"),"."))),i("z-button",{variant:e.primary,onClick:t=>this.handleOkButtonClick(t),onKeyUp:t=>this.handleOkButtonKeyUp(t)},"ACCETTA"))}render(){return i("z-candybar",{class:this.hide?"hidden":""},this.renderContentSlot())}};a.style=":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}z-candybar.hidden{display:none}.content{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:space-between;color:var(--text-grey-800);border-radius:calc(var(--space-unit) * .5);font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}.content>div>h2{margin:0;padding:0;color:var(--text-grey-800);border-radius:0px;font-size:18px;font-weight:var(--font-sb);letter-spacing:0px}.content>div>div{padding:calc(var(--space-unit) * 3) 0;font-size:14px;letter-spacing:0.16px;line-height:20px}.content>div>div>p{margin:0}.content>div>div>p>a{cursor:pointer;font-weight:var(--font-sb);color:var(--text-grey-800);text-decoration:underline;height:14px;display:inline-flex}.content>div>div>p>a:visited{color:var(--text-grey-800);cursor:pointer;z-index:1000}.content>z-button{margin:0;width:100%}@media only screen and (min-width: 768px){.content{width:100%;flex-direction:row;align-items:center;font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 3)}.content>div{width:560px}.content>div>h2{height:calc(var(--space-unit) * 3.5)}.content>div>div{padding:0}.content>z-button{margin:0;width:initial}}@media only screen and (min-width: 1152px){.content>div{width:935px}}@media only screen and (min-width: 1366px){.content{padding-left:calc(var(--space-unit) * 4);padding-right:calc(var(--space-unit) * 4)}}";export{a as z_cookiebar}
@@ -1 +1 @@
1
- import{r as e,h as t,H as a,g as r}from"./p-904a85e4.js";const i="undefined"!=typeof IntersectionObserver,n=class{constructor(t){e(this,t),this.stuck=!1,this.overlay=!1,this.flow="auto",this.drawerOpen=!1,this.stucked=!1,this.observer=i&&new IntersectionObserver((([e])=>{this.stucked=!e.isIntersecting}),{threshold:.5}),this.openDrawer=this.openDrawer.bind(this),this.closeDrawer=this.closeDrawer.bind(this),this.setStuckPosition=this.setStuckPosition.bind(this)}componentDidLoad(){this.collectMenuElements(),this.onStuckMode(),this.setStuckPosition()}get title(){const e=this.hostElement.querySelector('[slot="title"]');return e?e.textContent.trim():""}get scrollParent(){const e=this.hostElement.offsetParent;return e===document.body||e===document.documentElement?window:e}collectMenuElements(){const e=this.menuElements=this.hostElement.querySelectorAll('[slot="menu"]');this.menuLength=e.length,this.setMenuFloatingMode()}setStuckPosition(){const e=this.hostElement.ownerDocument.querySelector("z-app-topbar");this.hostElement.style.setProperty("--app-header-top-offset",`${e?e.clientHeight:0}px`)}onStuckMode(){this.stuck?this.enableStuckObserver():this.disableStuckMode()}enableStuckObserver(){this.observer&&this.observer.observe(this.container)}disableStuckMode(){this.stucked=!1,this.observer&&this.observer.unobserve(this.container)}onStucked(){const e=this.scrollParent;e&&(this.stucked?(this.setStuckPosition(),e.addEventListener("scroll",this.setStuckPosition)):e.removeEventListener("scroll",this.setStuckPosition))}setMenuFloatingMode(){if(!this.menuElements)return;const e=this.menuElements;for(let t=0,a=e.length;t<a;t++)e[t].open=!1,e[t].floating=!this.drawerOpen}render(){return t(a,{"menu-length":this.menuLength},t("div",{class:"heading-panel",ref:e=>this.container=e},t("div",{class:"hero-container"},t("slot",{name:"hero"},this.hero&&t("img",{alt:"",src:this.hero}))),t("div",{class:"heading-container"},t("div",{class:"heading-title"},this.menuLength>0&&t("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},t("z-icon",{name:"burger-menu"})),t("slot",{name:"title"})),t("div",{class:"heading-subtitle"},t("slot",{name:"subtitle"}))),t("div",{class:"menu-container"},!this.drawerOpen&&"offcanvas"!==this.flow&&t("slot",{name:"menu",onSlotchange:()=>this.collectMenuElements()}))),t("div",{class:"drawer-container"},t("div",{class:"drawer-overlay",onClick:this.closeDrawer}),t("div",{class:"drawer-panel"},t("button",{class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer},t("z-icon",{name:"close"})),t("div",{class:"drawer-content"},this.drawerOpen&&t("slot",{name:"menu",onSlotchange:()=>this.collectMenuElements()})))),this.stucked&&t("div",{class:"heading-stucked"},this.menuLength>0&&t("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},t("z-icon",{name:"burger-menu"})),t("div",{class:"heading-title"},t("slot",{name:"stucked-title"},this.title))))}openDrawer(){this.drawerOpen=!0}closeDrawer(){this.drawerOpen=!1}get hostElement(){return r(this)}static get watchers(){return{stuck:["onStuckMode"],stucked:["onStucked"],drawerOpen:["setMenuFloatingMode"]}}};n.style=":host{--app-header-height:auto;--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-top-offset:var(var(--app-header-top-offset), 0);--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-white);--app-header-stucked-bg:var(--color-white);--app-header-text-color:var(--gray800);--app-header-stucked-text-color:var(--gray800);display:block;color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:baseline;flex-shrink:0;flex-grow:0;width:100%;height:var(--app-header-height);padding:calc(var(--space-unit) * 2) var(--grid-mobile-margin);background:var(--app-header-bg)}:host(:empty) .heading-panel{padding:0}.heading-title{display:flex;flex-direction:row;align-items:center;max-width:100%}:host(:not([menu-length='0'])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5))}.heading-stucked{position:fixed;top:var(--app-header-top-offset);left:0;z-index:5;display:flex;flex-direction:row;width:100%;max-width:100%;color:var(--app-header-stucked-text-color);padding:var(--space-unit) var(--grid-mobile-margin);background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);animation:slideStuckedHeadingIn 250ms ease-out}.heading-stucked .heading-title,.heading-stucked .heading-title>*,.heading-stucked .heading-title ::slotted([slot='stucked-title']){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.heading-stucked .heading-title>*,::slotted([slot='title']),::slotted([slot='stucked-title']){margin:0;font-weight:700;font-family:'IBM Plex Serif', serif;font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking)}::slotted([slot='title']){line-height:1}::slotted([slot='subtitle']){margin:var(--space-unit) 0 0;font-family:var(--font-family-sans);font-style:italic;font-weight:500;font-size:20px;line-height:1.2}.heading-container{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;max-width:100%;margin-right:auto}.menu-container{display:none;flex-direction:row;flex-wrap:wrap;align-items:baseline}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted(*:not(:last-of-type)){margin-right:calc(var(--space-unit) * 4.5)}.drawer-trigger{margin:0 calc(var(--space-unit) * 1.5) 0 0;padding:0;background:none;border:0;border-radius:0;color:inherit;appearance:none;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentColor}.drawer-container{position:fixed;top:var(--app-header-top-offset);left:0;width:100%;height:100%;z-index:100;pointer-events:none}.drawer-container .drawer-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;display:block;background:var(--gray900);opacity:0;transition:opacity 400ms ease-out;pointer-events:none}.drawer-panel{position:absolute;top:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;width:375px;max-width:100%;height:100%;padding:calc(var(--space-unit) * 2) var(--space-unit);background:var(--color-white);color:var(--gray800);transform:translate3d(-100%, 0, 0);transition:transform 400ms ease-out;pointer-events:none}.drawer-content{display:flex;flex-direction:column;flex:1 auto;width:100%;padding:calc(var(--space-unit) * 0.5) var(--space-unit);overflow:auto}.drawer-content::-webkit-scrollbar{background:linear-gradient(\r\n to right,\r\n transparent 0 3px,\r\n var(--gray200) 3px 7px,\r\n transparent 7px 10px\r\n );width:10px;border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-track{background-color:transparent}.drawer-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.drawer-content ::slotted(z-menu){width:100%}.drawer-content ::slotted(z-menu:not(:last-of-type)){margin-bottom:calc(var(--space-unit) * 2.5)}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);margin:0 0 calc(var(--space-unit) * 2.5) var(--space-unit);padding:0;font-size:inherit;background:transparent;color:inherit;fill:currentColor;border:0;border-radius:0;appearance:none;cursor:pointer;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}:host([drawer-open]) .drawer-container .drawer-overlay{opacity:0.7;pointer-events:all}:host([drawer-open]) .drawer-container .drawer-panel{transform:none;pointer-events:all}.hero-container{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu:not([open])){--color-surface05:var(--color-white)}:host([overlay]) .hero-container::after{content:'';position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background:var(--color-black);opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media only screen and (min-width: 768px){.heading-panel{padding:calc(var(--space-unit) * 3) var(--grid-tablet-margin)}.heading-stucked{padding-left:var(--grid-tablet-margin);padding-right:var(--grid-tablet-margin)}:host(:not([flow='offcanvas'])) .heading-subtitle{padding-left:0}:host(:not([flow='offcanvas'])) .menu-container{display:flex}:host(:not([flow='offcanvas'])) .heading-container .drawer-trigger{display:none}:host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 3)}::slotted([slot='title']){font-size:var(--app-header-typography-6-size);letter-spacing:var(--app-header-typography-6-tracking)}::slotted([slot='subtitle']){margin-top:calc(var(--space-unit) * 1.5)}}@media only screen and (min-width: 1152px){.heading-panel,.heading-stucked{padding-left:var(--grid-desktop-margin);padding-right:var(--grid-desktop-margin)}:host(:not([flow='stack'])) .heading-panel{flex-direction:row;flex-wrap:wrap}::slotted([slot='title']){font-size:var(--app-header-typography-7-size);letter-spacing:var(--app-header-typography-7-tracking);margin-right:var(--grid-desktop-gutter)}:host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 2)}.menu-container{margin-top:var(--space-unit)}}@media only screen and (min-width: 1366px){.heading-panel,.heading-stucked{padding-left:var(--grid-wide-margin);padding-right:var(--grid-wide-margin)}::slotted([slot='title']){font-size:var(--app-header-typography-9-size);letter-spacing:var(--app-header-typography-9-tracking);margin-right:var(--grid-wide-gutter)}:host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child){margin-bottom:0}}@keyframes slideStuckedHeadingIn{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";export{n as z_app_header}
1
+ import{r as e,h as t,H as a,g as r}from"./p-904a85e4.js";const i="undefined"!=typeof IntersectionObserver,n=class{constructor(t){e(this,t),this.stuck=!1,this.overlay=!1,this.flow="auto",this.drawerOpen=!1,this.stucked=!1,this.observer=i&&new IntersectionObserver((([e])=>{this.stucked=!e.isIntersecting}),{threshold:.5}),this.openDrawer=this.openDrawer.bind(this),this.closeDrawer=this.closeDrawer.bind(this),this.setStuckPosition=this.setStuckPosition.bind(this)}componentDidLoad(){this.collectMenuElements(),this.onStuckMode(),this.setStuckPosition()}get title(){const e=this.hostElement.querySelector('[slot="title"]');return e?e.textContent.trim():""}get scrollParent(){const e=this.hostElement.offsetParent;return e===document.body||e===document.documentElement?window:e}collectMenuElements(){const e=this.menuElements=this.hostElement.querySelectorAll('[slot="menu"]');this.menuLength=e.length,this.setMenuFloatingMode()}setStuckPosition(){const e=this.hostElement.ownerDocument.querySelector("z-app-topbar");this.hostElement.style.setProperty("--app-header-top-offset",`${e?e.clientHeight:0}px`)}onStuckMode(){this.stuck?this.enableStuckObserver():this.disableStuckMode()}enableStuckObserver(){this.observer&&this.observer.observe(this.container)}disableStuckMode(){this.stucked=!1,this.observer&&this.observer.unobserve(this.container)}onStucked(){const e=this.scrollParent;e&&(this.stucked?(this.setStuckPosition(),e.addEventListener("scroll",this.setStuckPosition)):e.removeEventListener("scroll",this.setStuckPosition))}setMenuFloatingMode(){if(!this.menuElements)return;const e=this.menuElements;for(let t=0,a=e.length;t<a;t++)e[t].open=!1,e[t].floating=!this.drawerOpen}render(){return t(a,{"menu-length":this.menuLength},t("div",{class:"heading-panel",ref:e=>this.container=e},t("div",{class:"hero-container"},t("slot",{name:"hero"},this.hero&&t("img",{alt:"",src:this.hero}))),t("div",{class:"heading-container"},t("div",{class:"heading-title"},this.menuLength>0&&t("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},t("z-icon",{name:"burger-menu"})),t("slot",{name:"title"})),t("div",{class:"heading-subtitle"},t("slot",{name:"subtitle"}))),t("div",{class:"menu-container"},!this.drawerOpen&&"offcanvas"!==this.flow&&t("slot",{name:"menu",onSlotchange:()=>this.collectMenuElements()}))),t("div",{class:"drawer-container"},t("div",{class:"drawer-overlay",onClick:this.closeDrawer}),t("div",{class:"drawer-panel"},t("button",{class:"drawer-close","aria-label":"Chiudi menu",onClick:this.closeDrawer},t("z-icon",{name:"close"})),t("div",{class:"drawer-content"},this.drawerOpen&&t("slot",{name:"menu",onSlotchange:()=>this.collectMenuElements()})))),this.stucked&&t("div",{class:"heading-stucked"},this.menuLength>0&&t("button",{class:"drawer-trigger","aria-label":"Apri menu",onClick:this.openDrawer},t("z-icon",{name:"burger-menu"})),t("div",{class:"heading-title"},t("slot",{name:"stucked-title"},this.title))))}openDrawer(){this.drawerOpen=!0}closeDrawer(){this.drawerOpen=!1}get hostElement(){return r(this)}static get watchers(){return{stuck:["onStuckMode"],stucked:["onStucked"],drawerOpen:["setMenuFloatingMode"]}}};n.style=":host{--app-header-height:auto;--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-top-offset:var(var(--app-header-top-offset), 0);--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-white);--app-header-stucked-bg:var(--color-white);--app-header-text-color:var(--gray800);--app-header-stucked-text-color:var(--gray800);display:block;color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:baseline;flex-shrink:0;flex-grow:0;width:100%;height:var(--app-header-height);padding:calc(var(--space-unit) * 2) var(--grid-mobile-margin);background:var(--app-header-bg)}:host(:empty) .heading-panel{padding:0}.heading-title{display:flex;flex-direction:row;align-items:center;max-width:100%}:host(:not([menu-length='0'])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 1.5))}.heading-stucked{position:fixed;top:var(--app-header-top-offset);left:0;z-index:5;display:flex;flex-direction:row;width:100%;max-width:100%;color:var(--app-header-stucked-text-color);padding:var(--space-unit) var(--grid-mobile-margin);background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);animation:slideStuckedHeadingIn 250ms ease-out}.heading-stucked .heading-title,.heading-stucked .heading-title>*,.heading-stucked .heading-title ::slotted([slot='stucked-title']){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}.heading-stucked .heading-title>*,::slotted([slot='title']),::slotted([slot='stucked-title']){margin:0;font-weight:700;font-family:'IBM Plex Serif', serif;font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking)}::slotted([slot='title']){line-height:1}::slotted([slot='subtitle']){margin:var(--space-unit) 0 0;font-family:var(--font-family-sans);font-style:italic;font-weight:500;font-size:20px;line-height:1.2}.heading-container{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;max-width:100%;margin-right:auto}.menu-container{display:none;flex-direction:row;flex-wrap:wrap;align-items:baseline}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted(*:not(:last-of-type)){margin-right:calc(var(--space-unit) * 4.5)}.drawer-trigger{margin:0 calc(var(--space-unit) * 1.5) 0 0;padding:0;background:none;border:0;border-radius:0;color:inherit;appearance:none;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentColor}.drawer-container{position:fixed;top:var(--app-header-top-offset);left:0;width:100%;height:100%;z-index:100;pointer-events:none}.drawer-container .drawer-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;display:block;background:var(--gray900);opacity:0;transition:opacity 400ms ease-out;pointer-events:none}.drawer-panel{position:absolute;top:0;left:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;width:375px;max-width:100%;height:100%;padding:calc(var(--space-unit) * 2) var(--space-unit);background:var(--color-white);color:var(--gray800);transform:translate3d(-100%, 0, 0);transition:transform 400ms ease-out;pointer-events:none}.drawer-content{display:flex;flex-direction:column;flex:1 auto;width:100%;padding:calc(var(--space-unit) * 0.5) var(--space-unit);overflow:auto}.drawer-content::-webkit-scrollbar{background:linear-gradient(\n to right,\n transparent 0 3px,\n var(--gray200) 3px 7px,\n transparent 7px 10px\n );width:10px;border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-track{background-color:transparent}.drawer-content::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}.drawer-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.drawer-content ::slotted(z-menu){width:100%}.drawer-content ::slotted(z-menu:not(:last-of-type)){margin-bottom:calc(var(--space-unit) * 2.5)}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);margin:0 0 calc(var(--space-unit) * 2.5) var(--space-unit);padding:0;font-size:inherit;background:transparent;color:inherit;fill:currentColor;border:0;border-radius:0;appearance:none;cursor:pointer;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}:host([drawer-open]) .drawer-container .drawer-overlay{opacity:0.7;pointer-events:all}:host([drawer-open]) .drawer-container .drawer-panel{transform:none;pointer-events:all}.hero-container{position:absolute;top:0;left:0;z-index:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu:not([open])){--color-surface05:var(--color-white)}:host([overlay]) .hero-container::after{content:'';position:absolute;top:0;left:0;z-index:0;width:100%;height:100%;background:var(--color-black);opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media only screen and (min-width: 768px){.heading-panel{padding:calc(var(--space-unit) * 3) var(--grid-tablet-margin)}.heading-stucked{padding-left:var(--grid-tablet-margin);padding-right:var(--grid-tablet-margin)}:host(:not([flow='offcanvas'])) .heading-subtitle{padding-left:0}:host(:not([flow='offcanvas'])) .menu-container{display:flex}:host(:not([flow='offcanvas'])) .heading-container .drawer-trigger{display:none}:host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 3)}::slotted([slot='title']){font-size:var(--app-header-typography-6-size);letter-spacing:var(--app-header-typography-6-tracking)}::slotted([slot='subtitle']){margin-top:calc(var(--space-unit) * 1.5)}}@media only screen and (min-width: 1152px){.heading-panel,.heading-stucked{padding-left:var(--grid-desktop-margin);padding-right:var(--grid-desktop-margin)}:host(:not([flow='stack'])) .heading-panel{flex-direction:row;flex-wrap:wrap}::slotted([slot='title']){font-size:var(--app-header-typography-7-size);letter-spacing:var(--app-header-typography-7-tracking);margin-right:var(--grid-desktop-gutter)}:host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child){margin-bottom:calc(var(--space-unit) * 2)}.menu-container{margin-top:var(--space-unit)}}@media only screen and (min-width: 1366px){.heading-panel,.heading-stucked{padding-left:var(--grid-wide-margin);padding-right:var(--grid-wide-margin)}::slotted([slot='title']){font-size:var(--app-header-typography-9-size);letter-spacing:var(--app-header-typography-9-tracking);margin-right:var(--grid-wide-gutter)}:host(:not([flow='offcanvas']):not([menu-length='0'])) .heading-container:not(:last-child){margin-bottom:0}}@keyframes slideStuckedHeadingIn{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";export{n as z_app_header}
@@ -1 +1 @@
1
- import{r as t,c as i,h as e,g as s}from"./p-904a85e4.js";import{p as o}from"./p-acdb443b.js";import{h as a}from"./p-f53af59a.js";import{h as r}from"./p-9912e411.js";import"./p-e35d3552.js";const n=class{constructor(e){t(this,e),this.pocketToggle=i(this,"pocketToggle",7),this.status=o.preview}async open(){this.status=o.open}async close(){this.status=o.closed}emitPocketToggle(t,i){this.pocketToggle.emit({id:t,status:i})}handlePocketHeaderClick(t){if(t.detail.id&&t.detail.id===this.pocketid)switch(this.status){case o.preview:case o.closed:this.status=o.open;break;case o.open:this.status=o.closed}}handlePocketHeaderPan(t){t.detail.id&&t.detail.id===this.pocketid&&("up"===t.detail.direction?this.status=o.open:"down"===t.detail.direction&&(this.status=o.closed))}watchStatusHandler(t){this.emitPocketToggle(this.pocketid,t)}componentWillLoad(){this.emitPocketToggle(this.pocketid,this.status)}handleBackgroundClick(t){"pocketBackground"==t.target.dataset.action&&this.close()}render(){return e("div",null,e("div",{"data-action":"pocketBackground","data-pocket":this.pocketid,class:`background ${this.status}`,onClick:t=>this.handleBackgroundClick(t)}),e("div",{id:this.pocketid,class:"contentWrapper"},e("div",null,e("slot",null))))}get hostElement(){return s(this)}static get watchers(){return{status:["watchStatusHandler"]}}};n.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);width:inherit;height:100%;margin:inherit}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;left:0;right:0;top:0;bottom:0;z-index:998;width:0;height:0}:host>div>div.background.open{height:100%;width:100%}:host>div>div.contentWrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.contentWrapper>div{border-radius:var(--space-unit) var(--space-unit) 0px 0px;box-shadow:0px -2px calc(var(--space-unit) * 0.5) 0px rgba(66, 69, 72, 0.4);margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5)}";const h=class{constructor(i){t(this,i),this.status=o.preview}handlePocketToggle(t){t.detail.id&&t.detail.id===this.pocketid&&(this.status=t.detail.status)}render(){return e("main",{class:this.status},e("slot",null))}};h.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:100%;box-sizing:border-box}:host>main{background:var(--color-surface01);border-left:var(--border-size-small) solid var(--color-surface03);border-right:var(--border-size-small) solid var(--color-surface03);overflow:auto;scrollbar-width:none}:host>main.preview{max-height:225px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.closed{height:0px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";const c=class{constructor(e){t(this,e),this.pocketHeaderClick=i(this,"pocketHeaderClick",7),this.pocketHeaderPan=i(this,"pocketHeaderPan",7),this.emitPocketHeaderClick=this.emitPocketHeaderClick.bind(this)}emitPocketHeaderClick(){this.pocketHeaderClick.emit({id:this.pocketid})}emitPocketHeaderPan(t){this.pocketHeaderPan.emit({id:this.pocketid,direction:t})}componentDidLoad(){const t=new r(this.swipeWrap);t.get("pan").set({direction:r.DIRECTION_VERTICAL}),t.on("panup",(()=>this.emitPocketHeaderPan("up"))),t.on("pandown",(()=>this.emitPocketHeaderPan("down")))}render(){return e("header",{role:"button",tabindex:0,onClick:()=>this.emitPocketHeaderClick(),onKeyPress:t=>a(t,this.emitPocketHeaderClick),ref:t=>this.swipeWrap=t},e("slot",null))}};c.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:100%;box-sizing:border-box}:host>header{background:var(--color-surface01);border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--space-unit) var(--space-unit) 0px 0px;height:36px;cursor:pointer;display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:center;align-items:center}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";export{n as z_pocket,h as z_pocket_body,c as z_pocket_header}
1
+ import{r as t,c as i,h as e,g as s}from"./p-904a85e4.js";import{p as o}from"./p-d63b9ed3.js";import{h as a}from"./p-e7304c42.js";import{h as r}from"./p-9912e411.js";import"./p-d69e14fb.js";const n=class{constructor(e){t(this,e),this.pocketToggle=i(this,"pocketToggle",7),this.status=o.preview}async open(){this.status=o.open}async close(){this.status=o.closed}emitPocketToggle(t,i){this.pocketToggle.emit({id:t,status:i})}handlePocketHeaderClick(t){if(t.detail.id&&t.detail.id===this.pocketid)switch(this.status){case o.preview:case o.closed:this.status=o.open;break;case o.open:this.status=o.closed}}handlePocketHeaderPan(t){t.detail.id&&t.detail.id===this.pocketid&&("up"===t.detail.direction?this.status=o.open:"down"===t.detail.direction&&(this.status=o.closed))}watchStatusHandler(t){this.emitPocketToggle(this.pocketid,t)}componentWillLoad(){this.emitPocketToggle(this.pocketid,this.status)}handleBackgroundClick(t){"pocketBackground"==t.target.dataset.action&&this.close()}render(){return e("div",null,e("div",{"data-action":"pocketBackground","data-pocket":this.pocketid,class:`background ${this.status}`,onClick:t=>this.handleBackgroundClick(t)}),e("div",{id:this.pocketid,class:"contentWrapper"},e("div",null,e("slot",null))))}get hostElement(){return s(this)}static get watchers(){return{status:["watchStatusHandler"]}}};n.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);width:inherit;height:100%;margin:inherit}:host>div{width:inherit;height:100%;margin:inherit}:host>div>div.background{position:fixed;left:0;right:0;top:0;bottom:0;z-index:998;width:0;height:0}:host>div>div.background.open{height:100%;width:100%}:host>div>div.contentWrapper{position:fixed;z-index:999;bottom:0;left:0;width:inherit;margin:inherit}:host>div>div.contentWrapper>div{border-radius:var(--space-unit) var(--space-unit) 0px 0px;box-shadow:0px -2px calc(var(--space-unit) * 0.5) 0px rgba(66, 69, 72, 0.4);margin:calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 0.5) 0 calc(var(--space-unit) * 0.5)}";const h=class{constructor(i){t(this,i),this.status=o.preview}handlePocketToggle(t){t.detail.id&&t.detail.id===this.pocketid&&(this.status=t.detail.status)}render(){return e("main",{class:this.status},e("slot",null))}};h.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:100%;box-sizing:border-box}:host>main{background:var(--color-surface01);border-left:var(--border-size-small) solid var(--color-surface03);border-right:var(--border-size-small) solid var(--color-surface03);overflow:auto;scrollbar-width:none}:host>main.preview{max-height:225px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.open{max-height:calc(100vh - 48px);transition:all 200ms ease-in-out, top 200ms ease-in-out}:host>main.closed{height:0px;transition:all 200ms ease-in-out, top 200ms ease-in-out}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>main.preview{max-height:157px}}";const c=class{constructor(e){t(this,e),this.pocketHeaderClick=i(this,"pocketHeaderClick",7),this.pocketHeaderPan=i(this,"pocketHeaderPan",7),this.emitPocketHeaderClick=this.emitPocketHeaderClick.bind(this)}emitPocketHeaderClick(){this.pocketHeaderClick.emit({id:this.pocketid})}emitPocketHeaderPan(t){this.pocketHeaderPan.emit({id:this.pocketid,direction:t})}componentDidLoad(){const t=new r(this.swipeWrap);t.get("pan").set({direction:r.DIRECTION_VERTICAL}),t.on("panup",(()=>this.emitPocketHeaderPan("up"))),t.on("pandown",(()=>this.emitPocketHeaderPan("down")))}render(){return e("header",{role:"button",tabindex:0,onClick:()=>this.emitPocketHeaderClick(),onKeyPress:t=>a(t,this.emitPocketHeaderClick),ref:t=>this.swipeWrap=t},e("slot",null))}};c.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:block;width:100%;box-sizing:border-box}:host>header{background:var(--color-surface01);border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--space-unit) var(--space-unit) 0px 0px;height:36px;cursor:pointer;display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:center;align-items:center}:host>header:focus{outline:none}:host>header::-moz-focus-inner{border:0}";export{n as z_pocket,h as z_pocket_body,c as z_pocket_header}
@@ -1 +1 @@
1
- import{r as t,c as i,h as s}from"./p-904a85e4.js";import{b as o}from"./p-acdb443b.js";const e=class{constructor(s){t(this,s),this.cardFlipped=i(this,"cardFlipped",7),this.disabled=!1,this.flipped=!1,this.flipbuttonlabel="INFO",this.hideinfobtn=!1}handleFlipCard(t){this.flipCard(t.detail)}flipCard(t=!0){this.flipped=t,this.cardFlipped.emit(t)}render(){return s("div",null,s("z-myz-card",null,s("z-myz-card-header",{titolo:this.name}),s("div",{class:"content "+(this.flipped?"flipped":"")},s("div",{class:"front"},s("z-myz-card-body",null,s("z-myz-card-cover",{slot:"cover",titolo:this.name,img:this.cover,faded:this.disabled})),s("z-button",{class:this.hideinfobtn?"hideInfo":"",variant:o.secondary,icon:"informationsource",issmall:!0,onClick:()=>this.flipCard(!0),disabled:this.flipped},this.flipbuttonlabel)),s("div",{class:"back"},s("slot",{name:"info"}))),s("slot",null)))}};e.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;height:522px;width:100%;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content{position:relative;height:522px;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out;z-index:2}:host>div .content.flipped{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);margin-top:-2px}:host>div .front,:host>div .back{position:absolute;height:100%;width:100%;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));z-index:1;top:0;left:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);display:flex;justify-content:center}.hideInfo{display:none}";export{e as z_myz_card_dictionary}
1
+ import{r as t,c as i,h as s}from"./p-904a85e4.js";import{b as o}from"./p-d63b9ed3.js";const e=class{constructor(s){t(this,s),this.cardFlipped=i(this,"cardFlipped",7),this.disabled=!1,this.flipped=!1,this.flipbuttonlabel="INFO",this.hideinfobtn=!1}handleFlipCard(t){this.flipCard(t.detail)}flipCard(t=!0){this.flipped=t,this.cardFlipped.emit(t)}render(){return s("div",null,s("z-myz-card",null,s("z-myz-card-header",{titolo:this.name}),s("div",{class:"content "+(this.flipped?"flipped":"")},s("div",{class:"front"},s("z-myz-card-body",null,s("z-myz-card-cover",{slot:"cover",titolo:this.name,img:this.cover,faded:this.disabled})),s("z-button",{class:this.hideinfobtn?"hideInfo":"",variant:o.secondary,icon:"informationsource",issmall:!0,onClick:()=>this.flipCard(!0),disabled:this.flipped},this.flipbuttonlabel)),s("div",{class:"back"},s("slot",{name:"info"}))),s("slot",null)))}};e.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>div{position:relative;height:522px;width:100%;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content{position:relative;height:522px;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out;z-index:2}:host>div .content.flipped{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);margin-top:-2px}:host>div .front,:host>div .back{position:absolute;height:100%;width:100%;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));z-index:1;top:0;left:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);display:flex;justify-content:center}.hideInfo{display:none}";export{e as z_myz_card_dictionary}
@@ -1 +1 @@
1
- import{r as t,h as o,H as s,g as e}from"./p-904a85e4.js";import{t as i}from"./p-acdb443b.js";const n=class{constructor(o){t(this,o),this.newestontop=!0,this.slotChangeHandler=()=>{const t=Array.from(this.hostElement.children).filter((t=>!this.notificationArray.includes(t)));t&&t.forEach((t=>{this.notificationArray.push(t);const o=t;t.remove(),this.hostElement.prepend(o)}))}}watchPropNewestontop(t){this.hostElement.append(...this.notificationArray.reverse()),t?this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler):this.hostElement.shadowRoot.removeEventListener("slotchange",this.slotChangeHandler)}componentWillLoad(){this.newestontop&&this.handleNewestOnTop()}handleNewestOnTop(){this.notificationArray=Array.from(this.hostElement.children),this.hostElement.append(...this.notificationArray.reverse()),this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler)}render(){return o(s,{class:this.position?this.position:i.topRight},o("slot",{name:"toasts"}))}get hostElement(){return e(this)}static get watchers(){return{newestontop:["watchPropNewestontop"]}}};n.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);position:fixed;display:flex;flex-direction:column;flex-wrap:nowrap;z-index:10000;margin-bottom:calc(var(--space-unit) * 2);margin-top:calc(var(--space-unit) * 2)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host(.bottom-centre),:host(.bottom-right),:host(.bottom-left){justify-content:flex-end;align-items:flex-end;bottom:0}:host(.top-left),:host(.top-right),:host(.top-centre){justify-content:flex-start;align-items:flex-start;top:0}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host(.top-centre){justify-content:flex-start;align-items:center;top:0;left:50%;transform:translateX(-50%)}:host(.top-left){justify-content:flex-start;align-items:flex-start;top:0;left:0}:host(.top-right){justify-content:flex-start;align-items:flex-end;top:0;right:0}:host(.bottom-centre){justify-content:flex-end;align-items:center;bottom:0;left:50%;transform:translateX(-50%)}:host(.bottom-right){justify-content:flex-end;align-items:flex-end;bottom:0;right:0}:host(.bottom-left){justify-content:flex-end;align-items:flex-start;bottom:0;left:0}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";export{n as z_toast_notification_list}
1
+ import{r as t,h as o,H as s,g as e}from"./p-904a85e4.js";import{t as i}from"./p-d63b9ed3.js";const n=class{constructor(o){t(this,o),this.newestontop=!0,this.slotChangeHandler=()=>{const t=Array.from(this.hostElement.children).filter((t=>!this.notificationArray.includes(t)));t&&t.forEach((t=>{this.notificationArray.push(t);const o=t;t.remove(),this.hostElement.prepend(o)}))}}watchPropNewestontop(t){this.hostElement.append(...this.notificationArray.reverse()),t?this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler):this.hostElement.shadowRoot.removeEventListener("slotchange",this.slotChangeHandler)}componentWillLoad(){this.newestontop&&this.handleNewestOnTop()}handleNewestOnTop(){this.notificationArray=Array.from(this.hostElement.children),this.hostElement.append(...this.notificationArray.reverse()),this.hostElement.shadowRoot.addEventListener("slotchange",this.slotChangeHandler)}render(){return o(s,{class:this.position?this.position:i.topRight},o("slot",{name:"toasts"}))}get hostElement(){return e(this)}static get watchers(){return{newestontop:["watchPropNewestontop"]}}};n.style=":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);position:fixed;display:flex;flex-direction:column;flex-wrap:nowrap;z-index:10000;margin-bottom:calc(var(--space-unit) * 2);margin-top:calc(var(--space-unit) * 2)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host(.bottom-centre),:host(.bottom-right),:host(.bottom-left){justify-content:flex-end;align-items:flex-end;bottom:0}:host(.top-left),:host(.top-right),:host(.top-centre){justify-content:flex-start;align-items:flex-start;top:0}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host(.top-centre){justify-content:flex-start;align-items:center;top:0;left:50%;transform:translateX(-50%)}:host(.top-left){justify-content:flex-start;align-items:flex-start;top:0;left:0}:host(.top-right){justify-content:flex-start;align-items:flex-end;top:0;right:0}:host(.bottom-centre){justify-content:flex-end;align-items:center;bottom:0;left:50%;transform:translateX(-50%)}:host(.bottom-right){justify-content:flex-end;align-items:flex-end;bottom:0;right:0}:host(.bottom-left){justify-content:flex-end;align-items:flex-start;bottom:0;left:0}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";export{n as z_toast_notification_list}