@zanichelli/albe-web-components 2.33.4 → 2.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (276) hide show
  1. package/CHANGELOG.md +1229 -0
  2. package/dist/cjs/_commonjsHelpers-119ffc74.js +17 -0
  3. package/dist/cjs/{hammer-6e321f0b.js → hammer-54230951.js} +2 -15
  4. package/dist/cjs/icons-74891aae.js +477 -0
  5. package/dist/cjs/index-9651dba8.js +60 -0
  6. package/dist/cjs/{index-11a8a536.js → index-de6c491e.js} +8 -8
  7. package/dist/cjs/index.cjs.js +2 -2
  8. package/dist/cjs/loader.cjs.js +1 -1
  9. package/dist/cjs/{utils-00e14fba.js → utils-12053886.js} +1 -1
  10. package/dist/cjs/web-components-library.cjs.js +1 -1
  11. package/dist/cjs/z-alert.cjs.entry.js +19 -0
  12. package/dist/cjs/z-app-switcher.cjs.entry.js +29 -0
  13. package/dist/cjs/z-app-topbar.cjs.entry.js +41 -0
  14. package/dist/cjs/z-aria-alert.cjs.entry.js +1 -1
  15. package/dist/cjs/z-avatar.cjs.entry.js +43 -0
  16. package/dist/cjs/z-body_14.cjs.entry.js +513 -0
  17. package/dist/cjs/z-button-filter_5.cjs.entry.js +620 -0
  18. package/dist/cjs/z-button-sort.cjs.entry.js +54 -0
  19. package/dist/cjs/z-card.cjs.entry.js +58 -0
  20. package/dist/cjs/z-chip.cjs.entry.js +24 -0
  21. package/dist/cjs/z-combobox.cjs.entry.js +170 -0
  22. package/dist/cjs/z-contextual-menu.cjs.entry.js +40 -0
  23. package/dist/cjs/z-cookiebar.cjs.entry.js +1 -1
  24. package/dist/cjs/z-divider.cjs.entry.js +26 -0
  25. package/dist/cjs/z-footer-link_3.cjs.entry.js +49 -0
  26. package/dist/cjs/z-footer.cjs.entry.js +102 -0
  27. package/dist/cjs/z-ghost-loading.cjs.entry.js +19 -0
  28. package/dist/cjs/z-icon-package.cjs.entry.js +23 -0
  29. package/dist/cjs/z-info-box.cjs.entry.js +25 -0
  30. package/dist/cjs/z-link.cjs.entry.js +71 -0
  31. package/dist/cjs/z-list_3.cjs.entry.js +226 -0
  32. package/dist/cjs/z-logo.cjs.entry.js +28 -0
  33. package/dist/cjs/z-menu-dropdown_2.cjs.entry.js +89 -0
  34. package/dist/cjs/z-menu-section.cjs.entry.js +46 -0
  35. package/dist/cjs/z-menu.cjs.entry.js +110 -0
  36. package/dist/cjs/z-messages-pocket.cjs.entry.js +1 -1
  37. package/dist/cjs/z-modal-login.cjs.entry.js +1 -1
  38. package/dist/cjs/z-modal.cjs.entry.js +36 -0
  39. package/dist/cjs/z-myz-card-alert.cjs.entry.js +63 -0
  40. package/dist/cjs/z-myz-card-dictionary.cjs.entry.js +1 -1
  41. package/dist/cjs/z-myz-card-footer.cjs.entry.js +52 -0
  42. package/dist/cjs/z-myz-card-icon.cjs.entry.js +21 -0
  43. package/dist/cjs/z-myz-card-info.cjs.entry.js +2 -2
  44. package/dist/cjs/z-myz-card-list.cjs.entry.js +37 -0
  45. package/dist/cjs/z-myz-card_4.cjs.entry.js +101 -0
  46. package/dist/cjs/z-myz-list-item.cjs.entry.js +37 -0
  47. package/dist/cjs/z-myz-topbar.cjs.entry.js +1 -1
  48. package/dist/cjs/z-navigation-tabs.cjs.entry.js +1 -1
  49. package/dist/cjs/z-notification.cjs.entry.js +42 -0
  50. package/dist/cjs/z-otp.cjs.entry.js +1 -1
  51. package/dist/cjs/z-pagination-bar.cjs.entry.js +128 -0
  52. package/dist/cjs/z-pagination-page.cjs.entry.js +25 -0
  53. package/dist/cjs/z-panel-elem.cjs.entry.js +30 -0
  54. package/dist/cjs/z-pocket_3.cjs.entry.js +4 -3
  55. package/dist/cjs/z-registro-table-expanded-row.cjs.entry.js +19 -0
  56. package/dist/cjs/z-slideshow.cjs.entry.js +2 -2
  57. package/dist/cjs/z-status-tag.cjs.entry.js +29 -0
  58. package/dist/cjs/z-stepper-item.cjs.entry.js +22 -0
  59. package/dist/cjs/z-stepper.cjs.entry.js +19 -0
  60. package/dist/cjs/z-toast-notification-list.cjs.entry.js +1 -1
  61. package/dist/cjs/z-toast-notification.cjs.entry.js +3 -2
  62. package/dist/cjs/z-toggle-button.cjs.entry.js +36 -0
  63. package/dist/cjs/z-tooltip.cjs.entry.js +274 -0
  64. package/dist/cjs/z-user-dropdown.cjs.entry.js +95 -0
  65. package/dist/collection/beans/index.js +8 -8
  66. package/dist/collection/snowflakes/registro-table/z-registro-table-cell/index.js +26 -1
  67. package/dist/collection/snowflakes/registro-table/z-registro-table-cell/styles.css +19 -1
  68. package/dist/collection/snowflakes/registro-table/z-registro-table-header/index.js +22 -18
  69. package/dist/collection/snowflakes/registro-table/z-registro-table-header/styles.css +9 -13
  70. package/dist/esm/_commonjsHelpers-8b28c6fa.js +15 -0
  71. package/dist/esm/{hammer-c807d0b5.js → hammer-501342a9.js} +2 -14
  72. package/dist/esm/icons-9a191d79.js +475 -0
  73. package/dist/esm/{index-4952bfe3.js → index-09b57d95.js} +9 -9
  74. package/dist/esm/index-aa3a4feb.js +58 -0
  75. package/dist/esm/index.js +2 -2
  76. package/dist/esm/loader.js +1 -1
  77. package/dist/esm/{utils-889efe17.js → utils-f0067254.js} +2 -2
  78. package/dist/esm/web-components-library.js +1 -1
  79. package/dist/esm/z-alert.entry.js +15 -0
  80. package/dist/esm/z-app-switcher.entry.js +25 -0
  81. package/dist/esm/z-app-topbar.entry.js +37 -0
  82. package/dist/esm/z-aria-alert.entry.js +1 -1
  83. package/dist/esm/z-avatar.entry.js +39 -0
  84. package/dist/esm/z-body_14.entry.js +496 -0
  85. package/dist/esm/z-button-filter_5.entry.js +612 -0
  86. package/dist/esm/z-button-sort.entry.js +50 -0
  87. package/dist/esm/z-card.entry.js +54 -0
  88. package/dist/esm/z-chip.entry.js +20 -0
  89. package/dist/esm/z-combobox.entry.js +166 -0
  90. package/dist/esm/z-contextual-menu.entry.js +36 -0
  91. package/dist/esm/z-cookiebar.entry.js +1 -1
  92. package/dist/esm/z-divider.entry.js +22 -0
  93. package/dist/esm/z-footer-link_3.entry.js +43 -0
  94. package/dist/esm/z-footer.entry.js +98 -0
  95. package/dist/esm/z-ghost-loading.entry.js +15 -0
  96. package/dist/esm/z-icon-package.entry.js +19 -0
  97. package/dist/esm/z-info-box.entry.js +21 -0
  98. package/dist/esm/z-link.entry.js +67 -0
  99. package/dist/esm/z-list_3.entry.js +220 -0
  100. package/dist/esm/z-logo.entry.js +24 -0
  101. package/dist/esm/z-menu-dropdown_2.entry.js +84 -0
  102. package/dist/esm/z-menu-section.entry.js +42 -0
  103. package/dist/esm/z-menu.entry.js +106 -0
  104. package/dist/esm/z-messages-pocket.entry.js +1 -1
  105. package/dist/esm/z-modal-login.entry.js +1 -1
  106. package/dist/esm/z-modal.entry.js +32 -0
  107. package/dist/esm/z-myz-card-alert.entry.js +59 -0
  108. package/dist/esm/z-myz-card-dictionary.entry.js +1 -1
  109. package/dist/esm/z-myz-card-footer.entry.js +48 -0
  110. package/dist/esm/z-myz-card-icon.entry.js +17 -0
  111. package/dist/esm/z-myz-card-info.entry.js +2 -2
  112. package/dist/esm/z-myz-card-list.entry.js +33 -0
  113. package/dist/esm/z-myz-card_4.entry.js +94 -0
  114. package/dist/esm/z-myz-list-item.entry.js +33 -0
  115. package/dist/esm/z-myz-topbar.entry.js +1 -1
  116. package/dist/esm/z-navigation-tabs.entry.js +1 -1
  117. package/dist/esm/z-notification.entry.js +38 -0
  118. package/dist/esm/z-otp.entry.js +1 -1
  119. package/dist/esm/z-pagination-bar.entry.js +124 -0
  120. package/dist/esm/z-pagination-page.entry.js +21 -0
  121. package/dist/esm/z-panel-elem.entry.js +26 -0
  122. package/dist/esm/z-pocket_3.entry.js +4 -3
  123. package/dist/esm/z-registro-table-expanded-row.entry.js +15 -0
  124. package/dist/esm/z-slideshow.entry.js +2 -2
  125. package/dist/esm/z-status-tag.entry.js +25 -0
  126. package/dist/esm/z-stepper-item.entry.js +18 -0
  127. package/dist/esm/z-stepper.entry.js +15 -0
  128. package/dist/esm/z-toast-notification-list.entry.js +1 -1
  129. package/dist/esm/z-toast-notification.entry.js +3 -2
  130. package/dist/esm/z-toggle-button.entry.js +32 -0
  131. package/dist/esm/z-tooltip.entry.js +270 -0
  132. package/dist/esm/z-user-dropdown.entry.js +91 -0
  133. package/dist/types/beans/index.d.ts +7 -7
  134. package/dist/types/components.d.ts +17 -9
  135. package/dist/types/snowflakes/registro-table/z-registro-table-cell/index.d.ts +3 -0
  136. package/dist/types/snowflakes/registro-table/z-registro-table-header/index.d.ts +3 -3
  137. package/dist/web-components-library/index.esm.js +1 -1
  138. package/dist/web-components-library/p-01d11ec3.entry.js +1 -0
  139. package/dist/web-components-library/p-0455dc43.entry.js +1 -0
  140. package/dist/web-components-library/{p-fcf19092.entry.js → p-05f4fa42.entry.js} +1 -1
  141. package/dist/web-components-library/p-08158e57.entry.js +1 -0
  142. package/dist/web-components-library/p-0ce6293a.entry.js +1 -0
  143. package/dist/web-components-library/{p-65c08b33.js → p-0e6906af.js} +1 -1
  144. package/dist/web-components-library/p-0fe60379.entry.js +1 -0
  145. package/dist/web-components-library/p-10ad64bc.entry.js +1 -0
  146. package/dist/web-components-library/p-166a212e.entry.js +1 -0
  147. package/dist/web-components-library/p-18705ae9.entry.js +1 -0
  148. package/{www/build/p-9912e411.js → dist/web-components-library/p-1d371408.js} +2 -2
  149. package/dist/web-components-library/p-250926fe.entry.js +1 -0
  150. package/dist/web-components-library/p-255c9150.entry.js +1 -0
  151. package/dist/web-components-library/p-3247dee9.js +7 -0
  152. package/dist/web-components-library/{p-40972dfd.entry.js → p-34f4e805.entry.js} +1 -1
  153. package/dist/web-components-library/p-35fd465c.entry.js +1 -0
  154. package/dist/web-components-library/{p-d1fed95b.entry.js → p-400e26c7.entry.js} +1 -1
  155. package/dist/web-components-library/p-4a414eb2.entry.js +1 -0
  156. package/dist/web-components-library/p-4ce8c176.entry.js +1 -0
  157. package/dist/web-components-library/p-4f66fee4.js +1 -0
  158. package/dist/web-components-library/p-5bbbc979.entry.js +1 -0
  159. package/dist/web-components-library/{p-e64c06a4.entry.js → p-5e2762e6.entry.js} +1 -1
  160. package/dist/web-components-library/p-5fa8dc13.entry.js +1 -0
  161. package/dist/web-components-library/p-60e40371.entry.js +1 -0
  162. package/dist/web-components-library/p-6583cbec.entry.js +1 -0
  163. package/dist/web-components-library/p-71cc7ed0.entry.js +1 -0
  164. package/dist/web-components-library/p-74fb3d69.entry.js +1 -0
  165. package/dist/web-components-library/p-7e926220.entry.js +1 -0
  166. package/dist/web-components-library/p-80589729.entry.js +1 -0
  167. package/dist/web-components-library/p-82a59ded.entry.js +1 -0
  168. package/dist/web-components-library/p-880a50a6.entry.js +1 -0
  169. package/dist/web-components-library/p-94814f44.entry.js +1 -0
  170. package/dist/web-components-library/{p-8c24ac2e.entry.js → p-957f298f.entry.js} +1 -1
  171. package/dist/web-components-library/{p-d430b1aa.entry.js → p-9959e453.entry.js} +1 -1
  172. package/dist/web-components-library/p-9d9dc98f.entry.js +1 -0
  173. package/dist/web-components-library/p-a15f8b52.entry.js +1 -0
  174. package/dist/web-components-library/p-a7733104.entry.js +1 -0
  175. package/dist/web-components-library/{p-3ea97390.entry.js → p-a82c9a77.entry.js} +1 -1
  176. package/dist/web-components-library/p-aa0f7169.entry.js +1 -0
  177. package/dist/web-components-library/p-ac3bc4c2.entry.js +1 -0
  178. package/dist/web-components-library/p-b13d5b98.entry.js +1 -0
  179. package/dist/web-components-library/{p-6e8f444c.entry.js → p-b630127d.entry.js} +1 -1
  180. package/dist/web-components-library/p-b68038b5.js +1 -0
  181. package/dist/web-components-library/p-b78fb152.entry.js +1 -0
  182. package/dist/web-components-library/p-c92c3f20.entry.js +1 -0
  183. package/dist/web-components-library/p-cc6363b9.entry.js +1 -0
  184. package/dist/web-components-library/p-cf914ea7.entry.js +1 -0
  185. package/dist/web-components-library/p-cfebc80e.entry.js +1 -0
  186. package/dist/web-components-library/{p-0bf8988b.entry.js → p-d227a145.entry.js} +1 -1
  187. package/dist/web-components-library/p-d83eee10.entry.js +1 -0
  188. package/dist/web-components-library/p-db5863cf.entry.js +1 -0
  189. package/dist/web-components-library/p-e1f1f39e.entry.js +1 -0
  190. package/dist/web-components-library/{p-798d5c2f.entry.js → p-e29fe790.entry.js} +1 -1
  191. package/dist/web-components-library/p-ebcad010.entry.js +1 -0
  192. package/dist/web-components-library/p-f3354152.entry.js +1 -0
  193. package/dist/web-components-library/p-f77f6f60.entry.js +1 -0
  194. package/dist/web-components-library/p-f8446b1e.entry.js +1 -0
  195. package/dist/web-components-library/p-f90dd488.js +1 -0
  196. package/dist/web-components-library/p-fc47897e.entry.js +1 -0
  197. package/dist/web-components-library/p-fce08912.entry.js +1 -0
  198. package/dist/web-components-library/web-components-library.esm.js +1 -1
  199. package/package.json +1 -1
  200. package/www/build/index.esm.js +1 -1
  201. package/www/build/p-01d11ec3.entry.js +1 -0
  202. package/www/build/p-0455dc43.entry.js +1 -0
  203. package/www/build/{p-fcf19092.entry.js → p-05f4fa42.entry.js} +1 -1
  204. package/www/build/p-08158e57.entry.js +1 -0
  205. package/www/build/p-0ce6293a.entry.js +1 -0
  206. package/www/build/{p-65c08b33.js → p-0e6906af.js} +1 -1
  207. package/www/build/p-0fe60379.entry.js +1 -0
  208. package/www/build/p-10ad64bc.entry.js +1 -0
  209. package/www/build/p-166a212e.entry.js +1 -0
  210. package/www/build/p-18705ae9.entry.js +1 -0
  211. package/{dist/web-components-library/p-9912e411.js → www/build/p-1d371408.js} +2 -2
  212. package/www/build/p-250926fe.entry.js +1 -0
  213. package/www/build/p-255c9150.entry.js +1 -0
  214. package/www/build/p-3247dee9.js +7 -0
  215. package/www/build/{p-40972dfd.entry.js → p-34f4e805.entry.js} +1 -1
  216. package/www/build/p-35fd465c.entry.js +1 -0
  217. package/www/build/{p-d1fed95b.entry.js → p-400e26c7.entry.js} +1 -1
  218. package/www/build/p-4a414eb2.entry.js +1 -0
  219. package/www/build/p-4ce8c176.entry.js +1 -0
  220. package/www/build/p-4f66fee4.js +1 -0
  221. package/www/build/p-5bbbc979.entry.js +1 -0
  222. package/www/build/{p-e64c06a4.entry.js → p-5e2762e6.entry.js} +1 -1
  223. package/www/build/p-5fa8dc13.entry.js +1 -0
  224. package/www/build/p-60e40371.entry.js +1 -0
  225. package/www/build/p-6583cbec.entry.js +1 -0
  226. package/www/build/p-71cc7ed0.entry.js +1 -0
  227. package/www/build/p-74fb3d69.entry.js +1 -0
  228. package/www/build/p-7e926220.entry.js +1 -0
  229. package/www/build/p-80589729.entry.js +1 -0
  230. package/www/build/p-82a59ded.entry.js +1 -0
  231. package/www/build/p-880a50a6.entry.js +1 -0
  232. package/www/build/p-94814f44.entry.js +1 -0
  233. package/www/build/{p-8c24ac2e.entry.js → p-957f298f.entry.js} +1 -1
  234. package/www/build/{p-d430b1aa.entry.js → p-9959e453.entry.js} +1 -1
  235. package/www/build/p-9d9dc98f.entry.js +1 -0
  236. package/www/build/p-a15f8b52.entry.js +1 -0
  237. package/www/build/p-a7733104.entry.js +1 -0
  238. package/www/build/{p-3ea97390.entry.js → p-a82c9a77.entry.js} +1 -1
  239. package/www/build/p-aa0f7169.entry.js +1 -0
  240. package/www/build/p-ac3bc4c2.entry.js +1 -0
  241. package/www/build/p-b13d5b98.entry.js +1 -0
  242. package/www/build/{p-6e8f444c.entry.js → p-b630127d.entry.js} +1 -1
  243. package/www/build/p-b68038b5.js +1 -0
  244. package/www/build/p-b78fb152.entry.js +1 -0
  245. package/www/build/p-c92c3f20.entry.js +1 -0
  246. package/www/build/p-cc6363b9.entry.js +1 -0
  247. package/www/build/p-cf914ea7.entry.js +1 -0
  248. package/www/build/p-cfebc80e.entry.js +1 -0
  249. package/www/build/{p-0bf8988b.entry.js → p-d227a145.entry.js} +1 -1
  250. package/www/build/p-d83eee10.entry.js +1 -0
  251. package/www/build/p-db5863cf.entry.js +1 -0
  252. package/www/build/p-e1f1f39e.entry.js +1 -0
  253. package/www/build/{p-798d5c2f.entry.js → p-e29fe790.entry.js} +1 -1
  254. package/www/build/p-eaf64f7c.js +1 -0
  255. package/www/build/p-ebcad010.entry.js +1 -0
  256. package/www/build/p-f3354152.entry.js +1 -0
  257. package/www/build/p-f77f6f60.entry.js +1 -0
  258. package/www/build/p-f8446b1e.entry.js +1 -0
  259. package/www/build/p-f90dd488.js +1 -0
  260. package/www/build/p-fc47897e.entry.js +1 -0
  261. package/www/build/p-fce08912.entry.js +1 -0
  262. package/www/build/web-components-library.esm.js +1 -1
  263. package/www/index.html +2 -454
  264. package/dist/cjs/z-alert_66.cjs.entry.js +0 -3735
  265. package/dist/esm/z-alert_66.entry.js +0 -3666
  266. package/dist/web-components-library/p-04c73ec1.entry.js +0 -1
  267. package/dist/web-components-library/p-43d00d2f.entry.js +0 -1
  268. package/dist/web-components-library/p-57ceab75.entry.js +0 -7
  269. package/dist/web-components-library/p-881b4877.js +0 -1
  270. package/dist/web-components-library/p-b4420ba3.entry.js +0 -1
  271. package/www/build/p-002ed333.js +0 -1
  272. package/www/build/p-04c73ec1.entry.js +0 -1
  273. package/www/build/p-43d00d2f.entry.js +0 -1
  274. package/www/build/p-57ceab75.entry.js +0 -7
  275. package/www/build/p-881b4877.js +0 -1
  276. package/www/build/p-b4420ba3.entry.js +0 -1
@@ -0,0 +1,220 @@
1
+ import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-fa9e549c.js';
2
+ import { r as ListSize, E as ExpandableListButtonAlign, s as ListDividerType, t as DividerSize, u as ExpandableListStyle, K as KeyboardKeys } from './index-09b57d95.js';
3
+
4
+ const stylesCss$2 = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);display:flex;flex-direction:column}";
5
+
6
+ const ZList = class {
7
+ constructor(hostRef) {
8
+ registerInstance(this, hostRef);
9
+ /**
10
+ * [optional] Sets size of inside elements.
11
+ */
12
+ this.size = ListSize.medium;
13
+ }
14
+ setChildrenSizeType() {
15
+ const children = this.host.children;
16
+ for (let i = 0; i < children.length - 1; i++) {
17
+ children[i].setAttribute("size", this.size);
18
+ }
19
+ }
20
+ componentDidLoad() {
21
+ this.setChildrenSizeType();
22
+ }
23
+ render() {
24
+ return (h(Host, { role: "list" }, h("slot", null)));
25
+ }
26
+ get host() { return getElement(this); }
27
+ };
28
+ ZList.style = stylesCss$2;
29
+
30
+ const stylesCss$1 = ":host{outline:none}:host>.container,:host>.container-contextual-menu{--background-color-list-element:var(--bg-white);--background-hover-color-list-element:var(--color-surface02);--background-active-color-list-element:var(--color-surface02);font-family:var(--font-family-sans);font-weight:var(--font-rg);outline:none;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}:host([size=\"small\"])>.container{padding:calc(var(--space-unit) / 2) 0;min-height:calc(var(--space-unit) * 4)}:host([size=\"medium\"])>.container{padding:var(--space-unit) 0;min-height:calc(var(--space-unit) * 5)}:host([size=\"large\"])>.container{padding:calc(var(--space-unit) * 2) 0;min-height:calc(var(--space-unit) * 7)}:host([size=\"x-large\"])>.container{padding:calc(var(--space-unit) * 3) 0;min-height:calc(var(--space-unit) * 9)}:host([expandable])>.container,:host([expandable])>.container-contextual-menu,:host([clickable])>.container,:host([clickable])>.container-contextual-menu{cursor:pointer}:host([expandable]:hover)>.container,:host([expandable]:hover)>.container-contextual-menu,:host([clickable]:hover)>.container,:host([clickable]:hover)>.container-contextual-menu{background-color:var(--background-hover-color-list-element)}:host([expandable]:focus:focus-visible)>.container,:host([expandable]:focus:focus-visible)>.container-contextual-menu,:host([clickable]:focus:focus-visible)>.container,:host([clickable]:focus:focus-visible)>.container-contextual-menu{box-shadow:var(--shadow-focus-primary)}:host([expandable]:active)>.container,:host([expandable]:active)>.container-contextual-menu,:host([clickable]:active)>.container,:host([clickable]:active)>.container-contextual-menu{background-color:var(--background-active-color-list-element)}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container{display:flex;flex-direction:row-reverse;justify-content:space-between}:host([align-button=\"left\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"left\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-right:var(--space-unit)}:host([align-button=\"right\"][expandable])>.container>.z-list-element-container>z-icon,:host([align-button=\"right\"][expandable])>.container-contextual-menu>.z-list-element-container>z-icon{margin-left:var(--space-unit)}:host>.container>.z-list-element-inner-container,:host>.container-contextual-menu>.z-list-element-inner-container{display:none}:host>.container>.z-list-element-inner-container.expanded,:host>.container-contextual-menu>.z-list-element-inner-container.expanded{display:block}:host([clickable]:hover)>.container-contextual-menu{background-color:var(--color-surface03)}.container-contextual-menu:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}";
31
+
32
+ const ZListElement = class {
33
+ /**
34
+ * Constructor.
35
+ */
36
+ constructor(hostRef) {
37
+ registerInstance(this, hostRef);
38
+ this.accessibleFocus = createEvent(this, "accessibleFocus", 7);
39
+ this.clickItem = createEvent(this, "clickItem", 7);
40
+ /**
41
+ * [optional] Align expandable button left or right.
42
+ */
43
+ this.alignButton = ExpandableListButtonAlign.left;
44
+ /**
45
+ * [optional] Sets element clickable.
46
+ */
47
+ this.clickable = false;
48
+ /**
49
+ * [optional] Sets the divider color.
50
+ */
51
+ this.dividerColor = "color-surface03";
52
+ /**
53
+ * [optional] Sets the position where to insert the divider.
54
+ */
55
+ this.dividerType = ListDividerType.none;
56
+ /**
57
+ * [optional] Sets the divider size.
58
+ */
59
+ this.dividerSize = DividerSize.small;
60
+ /**
61
+ * [optional] Sets element as expandable.
62
+ */
63
+ this.expandable = false;
64
+ /**
65
+ * [optional] Sets expandable style to element.
66
+ */
67
+ this.expandableStyle = ExpandableListStyle.accordion;
68
+ /**
69
+ * [optional] Sets size of inside elements.
70
+ */
71
+ this.size = ListSize.medium;
72
+ /**
73
+ * [optional] Sets text color of the element.
74
+ */
75
+ this.color = "none";
76
+ /**
77
+ * [optional] Sets disabled style of the element.
78
+ */
79
+ this.disabled = false;
80
+ /**
81
+ * [optional] If is used in ZContextualMenu component
82
+ */
83
+ this.isContextualMenu = false;
84
+ this.showInnerContent = false;
85
+ this.openElementConfig = {
86
+ accordion: {
87
+ open: "minus-circled",
88
+ close: "plus-circled",
89
+ },
90
+ menu: {
91
+ open: "chevron-up",
92
+ close: "chevron-down",
93
+ },
94
+ };
95
+ this.handleClick = this.handleClick.bind(this);
96
+ this.handleKeyDown = this.handleKeyDown.bind(this);
97
+ }
98
+ accessibleFocusHandler(e) {
99
+ if (this.listElementId === e.detail) {
100
+ const toFocus = this.host.shadowRoot.getElementById(`z-list-element-id-${e.detail}`);
101
+ toFocus.focus();
102
+ }
103
+ }
104
+ /**
105
+ * Handler for click on element. If element is expandable, change state.
106
+ * @returns void
107
+ */
108
+ handleClick() {
109
+ this.clickItem.emit(this.listElementId);
110
+ if (!this.expandable) {
111
+ return;
112
+ }
113
+ this.showInnerContent = !this.showInnerContent;
114
+ }
115
+ calculateClass() {
116
+ if (this.isContextualMenu) {
117
+ return "container-contextual-menu";
118
+ }
119
+ return "container";
120
+ }
121
+ handleKeyDown(event) {
122
+ const expandByKey = event.code === KeyboardKeys.ENTER;
123
+ switch (event.code) {
124
+ case KeyboardKeys.ARROW_DOWN:
125
+ event.preventDefault();
126
+ this.accessibleFocus.emit(this.listElementId + 1);
127
+ break;
128
+ case KeyboardKeys.ARROW_UP:
129
+ event.preventDefault();
130
+ this.accessibleFocus.emit(this.listElementId - 1);
131
+ break;
132
+ case KeyboardKeys.ENTER:
133
+ event.preventDefault();
134
+ this.clickItem.emit(this.listElementId);
135
+ break;
136
+ }
137
+ if (!this.expandable || !expandByKey) {
138
+ return;
139
+ }
140
+ this.showInnerContent = !this.showInnerContent;
141
+ }
142
+ /**
143
+ * Renders button to expand element.
144
+ * @returns expadable button
145
+ */
146
+ renderExpandableButton() {
147
+ if (!this.expandable) {
148
+ return null;
149
+ }
150
+ return (h("z-icon", { name: this.showInnerContent
151
+ ? this.openElementConfig[this.expandableStyle].open
152
+ : this.openElementConfig[this.expandableStyle].close }));
153
+ }
154
+ /**
155
+ * Renders expanded content if element is expandable.
156
+ * @returns expanded content
157
+ */
158
+ renderExpandedContent() {
159
+ if (!this.expandable) {
160
+ return null;
161
+ }
162
+ return (h("div", { class: {
163
+ "z-list-element-inner-container": true,
164
+ expanded: this.showInnerContent,
165
+ } }, h("slot", { name: "inner-content" })));
166
+ }
167
+ render() {
168
+ return (h(Host, { role: "listitem", "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: !this.isContextualMenu ? "0" : null }, h("div", { class: `${this.calculateClass()}`, style: { color: `var(--${this.color})` }, tabindex: this.isContextualMenu ? "0" : "-1", id: `z-list-element-id-${this.listElementId}` }, h("div", { class: "z-list-element-container" }, this.renderExpandableButton(), h("slot", null)), this.renderExpandedContent()), this.dividerType === ListDividerType.element && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))));
169
+ }
170
+ get host() { return getElement(this); }
171
+ };
172
+ ZListElement.style = stylesCss$1;
173
+
174
+ const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.z-list-group-header-container{color:var(--gray700);font-size:var(--font-size-2);font-weight:var(--font-sb) !important;line-height:1.4;letter-spacing:0.16px}:host>.z-list-group-header-container.has-header{padding-top:var(--space-unit);padding-bottom:var(--space-unit)}:host>.z-list-group-header-container.has-header>z-divider{margin-top:var(--space-unit)}";
175
+
176
+ const ZListGroup = class {
177
+ constructor(hostRef) {
178
+ registerInstance(this, hostRef);
179
+ /**
180
+ * [optional] Sets size of inside elements.
181
+ */
182
+ this.size = ListSize.medium;
183
+ /**
184
+ * [optional] Sets the position where to insert the divider.
185
+ */
186
+ this.dividerType = ListDividerType.none;
187
+ /**
188
+ * [optional] Sets the divider size.
189
+ */
190
+ this.dividerSize = DividerSize.small;
191
+ /**
192
+ * [optional] Sets the divider color.
193
+ */
194
+ this.dividerColor = "gray200";
195
+ }
196
+ componentDidLoad() {
197
+ const children = this.host.children;
198
+ for (let i = 0; i < children.length; i++) {
199
+ if (children.length - 1 > i) {
200
+ children[i].setAttribute("divider-type", this.dividerType);
201
+ children[i].setAttribute("divider-size", this.dividerSize);
202
+ children[i].setAttribute("divider-color", this.dividerColor);
203
+ }
204
+ children[i].setAttribute("size", this.size);
205
+ }
206
+ }
207
+ componentWillLoad() {
208
+ this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
209
+ }
210
+ render() {
211
+ return (h(Host, { role: "group" }, h("div", { class: {
212
+ "z-list-group-header-container": true,
213
+ "has-header": this.hasHeader,
214
+ } }, h("slot", { name: "header-title" }), this.dividerType === ListDividerType.header && (h("z-divider", { color: this.dividerColor, size: this.dividerSize }))), h("slot", null)));
215
+ }
216
+ get host() { return getElement(this); }
217
+ };
218
+ ZListGroup.style = stylesCss;
219
+
220
+ export { ZList as z_list, ZListElement as z_list_element, ZListGroup as z_list_group };
@@ -0,0 +1,24 @@
1
+ import { r as registerInstance, h, H as Host } from './index-fa9e549c.js';
2
+
3
+ const stylesCss = ":host{display:inline-block;vertical-align:top;width:255px;height:64px}img{display:block;margin:auto;width:100%;height:100%;content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255px' height='64px' viewBox='0 0 255 64'%3E%3Cg id='Logo/Zanichelli/Centered-(reworked)' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group'%3E%3Cpolygon id='Background' fill='%23E2001A' points='1.70530257e-13 64 254.39 64 254.39 0 1.70530257e-13 0'%3E%3C/polygon%3E%3Cpath d='M233.36,51.3553859 L242.390252,51.3553859 L242.390252,12.6427292 L233.36,12.6427292 L233.36,51.3553859 Z M211.120346,51.3553859 L230.477617,51.3553859 L230.477617,44.5040053 L220.685891,44.5040053 L220.685891,12.6427292 L211.120346,12.6427292 L211.120346,51.3553859 Z M188.880124,51.3553859 L208.23551,51.3553859 L208.23551,44.5040053 L198.445669,44.5040053 L198.445669,12.6427292 L188.880124,12.6427292 L188.880124,51.3553859 Z M165.354444,12.6427292 L165.354444,51.3553859 L185.999058,51.3553859 L185.999058,44.5021204 L175.027425,44.5021204 L175.027425,35.1778343 L185.377062,35.1778343 L185.377062,28.2699086 L175.027425,28.2699086 L175.027425,19.4978796 L185.999058,19.4978796 L185.999058,12.6427292 L165.354444,12.6427292 Z M136.666196,51.3553859 L146.239281,51.3553859 L146.239281,35.1778343 L152.902178,35.1778343 L152.902178,51.3553859 L162.473377,51.3553859 L162.473377,12.6427292 L152.902178,12.6427292 L152.902178,28.2717934 L146.239281,28.2717934 L146.239281,12.6427292 L136.666196,12.6427292 L136.666196,51.3553859 Z M96.064744,51.3553859 L105.098765,51.3553859 L105.098765,12.6427292 L96.064744,12.6427292 L96.064744,51.3553859 Z M53.2364527,36.5160682 L50.6824993,19.7429083 L48.0757704,36.5160682 L53.2364527,36.5160682 Z M65.4935444,51.3553859 L56.2710395,51.3553859 L54.9441146,42.5286966 L47.7101121,42.5286966 L46.3304118,51.3553859 L37.1060221,51.3553859 L45.0053718,12.6427292 L57.5960795,12.6427292 L65.4935444,51.3553859 Z M85.0468382,37.7581755 L76.7969089,12.6427292 L67.3764961,12.6427292 L67.3764961,51.3553859 L75.4040147,51.3553859 L75.4040147,26.132504 L83.5955141,51.3553859 L93.1855622,51.3553859 L93.1855622,12.6427292 L85.0468382,12.6427292 L85.0468382,37.7581755 Z M107.977948,32 C107.977948,34.5200264 107.977948,36.7893695 108.187165,39.1246819 C108.396382,41.4713034 108.818585,43.6878711 109.678071,45.6009801 C111.423429,49.487513 114.932995,52 121.708982,52 C129.508435,52 133.787014,48.4753558 133.787014,38.0220526 L133.787014,37.5640373 L124.937707,37.5640373 L124.922628,38.0050891 C124.894356,38.7571388 124.884931,39.6185091 124.826501,40.4855339 C124.769956,41.3431345 124.66629,42.1875412 124.460843,42.9301668 C124.048064,44.3965696 123.279051,45.3559514 121.708982,45.3559514 C117.743286,45.3559514 117.057205,42.0574875 117.057205,32 C117.057205,21.9425125 117.743286,18.6440486 121.708982,18.6440486 C123.605127,18.6440486 124.547546,20.0030157 124.547546,25.1806616 L124.547546,25.6424465 L133.344077,25.6424465 L133.361041,25.1995099 C133.689003,16.7855998 130.235982,12 121.708982,12 C114.934879,12 111.427199,14.4823297 109.678071,18.3594383 C108.818585,20.265008 108.396382,22.4778061 108.187165,24.830082 C107.977948,27.1710489 107.977948,29.4554707 107.977948,32 L107.977948,32 Z M34.9007634,12.6446141 L34.9007634,20.3196683 L21.6051268,44.5040053 L35.2268401,44.5040053 L35.2268401,51.3553859 L12,51.3553859 L12,43.7915371 L25.2975214,19.4997644 L13.683159,19.4997644 L13.683159,12.6446141 L34.9007634,12.6446141 Z' id='Logotipo-(reworked)' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}a{display:block;width:100%;height:100%}:host(.mobile){width:31px;height:40px}:host(.mobile) img{content:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31px' height='40px' viewBox='0 0 31 40'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Topbar/Mobile/Logged' transform='translate(-16.000000, -4.000000)'%3E%3Cg id='Group' transform='translate(16.000000, 4.000000)'%3E%3Cpolygon id='Fill-1' fill='%23E2001A' points='0 40 30.625 40 30.625 0 0 0'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' fill='%23FEFEFE' points='8.17111587 6.20689655 23.4311708 6.20689655 23.4311708 11.671267 13.8691261 28.9163861 23.6647727 28.9163861 23.6647727 33.7931034 6.96022727 33.7931034 6.96022727 28.408218 16.522272 11.0831673 8.17111587 11.0831673'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")}";
4
+
5
+ const ZLogo = class {
6
+ constructor(hostRef) {
7
+ registerInstance(this, hostRef);
8
+ }
9
+ render() {
10
+ const style = {};
11
+ if (this.width) {
12
+ style["width"] = style["max-width"] = `${this.width}px`;
13
+ }
14
+ if (this.height) {
15
+ style["height"] = style["max-height"] = `${this.height}px`;
16
+ }
17
+ return (h(Host, { style: style, class: { "mobile": !!this.mobileLogo } }, this.link ?
18
+ h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt })) :
19
+ h("img", { alt: this.imageAlt })));
20
+ }
21
+ };
22
+ ZLogo.style = stylesCss;
23
+
24
+ export { ZLogo as z_logo };
@@ -0,0 +1,84 @@
1
+ import { r as registerInstance, h } from './index-fa9e549c.js';
2
+ import { k as keybordKeyCodeEnum } from './index-09b57d95.js';
3
+ import { g as getElementTree, h as handleKeyboardSubmit, d as getClickedElement } from './utils-f0067254.js';
4
+ import './breakpoints-c386984e.js';
5
+
6
+ const stylesCss$1 = ":host{font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:12px;height:32px;width:inherit;letter-spacing:0.17px}a,a:visited,a:active{color:inherit;text-decoration:none}:host>a{display:block;background:var(--bg-grey-050);color:var(--text-grey-800);border-radius:var(--border-radius);border:var(--border-size-small) solid transparent;outline:none}:host>a::-moz-focus-inner{border:0}:host>a:hover,:host>a.menu-opened:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host>a:focus{color:var(--myz-blue);fill:var(--myz-blue);border:var(--border-size-small) solid var(--myz-blue);box-shadow:0px 0px 2px 2px var(--myz-blue-light)}:host>a:active{color:var(--myz-blue-light);fill:var(--myz-blue-light);border:var(--border-size-small) solid var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}div.container{display:flex;align-items:center;justify-content:space-between;height:32px;position:relative;padding:0 var(--basex1)}div.container>span.user-wrapper{display:flex}div.container>span.user-wrapper>span.user{padding:0 var(--basex1);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;cursor:pointer;width:30px}div.container>span.arrow{display:flex;justify-content:center;align-items:center}div.container>span.arrow>z-icon{transform:rotate(360deg);transition:all 200ms linear}ul{list-style:none;padding:0 calc(var(--space-unit) * 2);margin:0px}li{height:var(--basex3);display:flex;align-items:center;padding:calc(var(--space-unit) / 4) 0;width:max-content}.menu-opened{padding-bottom:calc(var(--space-unit) * 2);width:auto !important;min-width:147px;position:inherit}.menu-opened a,.menu-opened a:active,.menu-opened a:visited{color:var(--myz-blue);fill:var(--myz-blue)}.menu-opened a:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}.menu-opened>div.container{margin-bottom:var(--basex1)}.menu-opened>div.container>span.user-wrapper>span.user{width:auto}.menu-opened>div.container>span.arrow>z-icon{transform:rotate(180deg);transition:all 200ms linear}@media only screen and (min-width: 1152px){:host>a{width:147px;padding:0 calc(var(--space-unit) / 4)}:host>a.menu-opened{width:147px;padding-bottom:calc(var(--space-unit) * 2)}div.container>span.user-wrapper>span.user{width:80px}}";
7
+
8
+ const ZMenuDropdown = class {
9
+ constructor(hostRef) {
10
+ registerInstance(this, hostRef);
11
+ this.ismenuopen = false;
12
+ this.handleToggle = this.handleToggle.bind(this);
13
+ this.handleFocus = this.handleFocus.bind(this);
14
+ }
15
+ componentWillRender() {
16
+ this.linkarray =
17
+ typeof this.menucontent === "string"
18
+ ? JSON.parse(this.menucontent)
19
+ : this.menucontent;
20
+ }
21
+ renderMenuOpen() {
22
+ if (this.ismenuopen) {
23
+ return (h("ul", null, this.linkarray.map(bean => (h("li", null, h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
24
+ }
25
+ }
26
+ renderButtonMenu() {
27
+ return (h("span", { class: "arrow" }, h("z-icon", { name: "caret-down", width: 14, height: 14 })));
28
+ }
29
+ retriveMenuClass() {
30
+ if (this.ismenuopen)
31
+ return "menu-opened";
32
+ }
33
+ handleToggle() {
34
+ this.ismenuopen = !this.ismenuopen;
35
+ }
36
+ handleFocus(e) {
37
+ if (e instanceof KeyboardEvent && e.keyCode !== keybordKeyCodeEnum.TAB)
38
+ return;
39
+ const tree = getElementTree(getClickedElement());
40
+ const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-menu-dropdown");
41
+ if (!menuParent) {
42
+ document.removeEventListener("click", this.handleFocus);
43
+ document.removeEventListener("keyup", this.handleFocus);
44
+ this.ismenuopen = false;
45
+ }
46
+ }
47
+ render() {
48
+ return (h("a", { class: this.retriveMenuClass(), role: "button", tabindex: "0", onFocus: () => {
49
+ document.addEventListener("click", this.handleFocus);
50
+ document.addEventListener("keyup", this.handleFocus);
51
+ }, onKeyUp: (e) => handleKeyboardSubmit(e, this.handleToggle) }, h("div", { class: "container", onClick: () => this.handleToggle() }, h("span", { class: "user-wrapper" }, h("z-icon", { name: "user-avatar", width: 14, height: 14 }), h("span", { class: "user" }, this.nomeutente)), this.renderButtonMenu()), this.renderMenuOpen()));
52
+ }
53
+ };
54
+ ZMenuDropdown.style = stylesCss$1;
55
+
56
+ const stylesCss = "ul{margin:0;padding:0}";
57
+
58
+ const ZMyzList = class {
59
+ constructor(hostRef) {
60
+ registerInstance(this, hostRef);
61
+ }
62
+ componentWillLoad() {
63
+ if (this.inputrawdata) {
64
+ this.parseinputrawdata(this.inputrawdata);
65
+ }
66
+ }
67
+ parseinputrawdata(inputrawdata) {
68
+ this.list = [...JSON.parse(inputrawdata)];
69
+ }
70
+ oninputrawdataChange(newValue) {
71
+ this.parseinputrawdata(newValue);
72
+ }
73
+ render() {
74
+ const lastElem = this.list ? this.list.length - 1 : -1;
75
+ return (h("ul", null, this.list &&
76
+ this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
77
+ }
78
+ static get watchers() { return {
79
+ "inputrawdata": ["oninputrawdataChange"]
80
+ }; }
81
+ };
82
+ ZMyzList.style = stylesCss;
83
+
84
+ export { ZMenuDropdown as z_menu_dropdown, ZMyzList as z_myz_list };
@@ -0,0 +1,42 @@
1
+ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-fa9e549c.js';
2
+
3
+ const stylesCss = ":host{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:0;font-family:var(--font-family-sans)}:host,::slotted(*),*{box-sizing:border-box}::slotted(a){text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg);color:var(--color-text01)}:host([active]) .label,:host([open]) .label,.label:hover{border-color:var(--color-secondary01)}.label{display:flex;align-items:center;width:100%;margin:0;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);text-align:left;background:transparent;border-radius:0;border:0;border-bottom:var(--border-size-small) solid var(--color-surface05);cursor:pointer}.label ::slotted(*){width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25}.label:focus:focus-visible{outline:none;box-shadow:var(--shadow-focus-primary)}.label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentColor}.items{display:flex;flex-direction:column;width:100%;padding:calc(var(--space-unit) * 0.5);padding-bottom:calc(var(--space-unit) * 2)}.items>::slotted([slot='item']){display:inline-flex;margin:0;padding:calc(var(--space-unit) * 0.5);font-size:var(--font-size-2);line-height:1.4;outline:none}.items>::slotted([slot='item']:last-child){padding-bottom:0}.items>::slotted([slot='item']:focus:focus-visible){box-shadow:var(--shadow-focus-primary);color:var(--color-secondary01)}.items>::slotted([slot='item']:hover){color:var(--color-secondary01)}";
4
+
5
+ const ZMenuSection = class {
6
+ constructor(hostRef) {
7
+ registerInstance(this, hostRef);
8
+ this.opened = createEvent(this, "opened", 7);
9
+ this.closed = createEvent(this, "closed", 7);
10
+ }
11
+ toggle() {
12
+ if (!this.hasContent) {
13
+ return;
14
+ }
15
+ this.open = !this.open;
16
+ this.open ? this.opened.emit() : this.closed.emit();
17
+ }
18
+ /** Close the list when a click is performed outside of this Element. */
19
+ handleClick(ev) {
20
+ if (!this.open || this.hostElement.contains(ev.target)) {
21
+ return;
22
+ }
23
+ this.open = false;
24
+ this.closed.emit();
25
+ }
26
+ /**
27
+ * Check if some content slot is set.
28
+ */
29
+ checkContent() {
30
+ this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length;
31
+ }
32
+ componentWillLoad() {
33
+ this.checkContent();
34
+ }
35
+ render() {
36
+ return h(Host, { role: "menu", open: this.open }, h("button", { class: "label", "aria-pressed": this.open ? 'true' : 'false', onClick: this.toggle.bind(this) }, h("slot", null), this.hasContent && h("z-icon", { name: this.open ? 'chevron-up' : 'chevron-down' })), this.open && h("div", { class: "items" }, h("slot", { name: "item", onSlotchange: this.checkContent.bind(this) })));
37
+ }
38
+ get hostElement() { return getElement(this); }
39
+ };
40
+ ZMenuSection.style = stylesCss;
41
+
42
+ export { ZMenuSection as z_menu_section };
@@ -0,0 +1,106 @@
1
+ import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fa9e549c.js';
2
+
3
+ const stylesCss = ":host,::slotted(*),*{box-sizing:border-box}:host{display:inline-flex;flex-direction:column;position:relative}::slotted(a){color:var(--color-text01);text-decoration:none}::slotted(*){font-family:var(--font-family-sans);font-weight:var(--font-rg)}.menu-label{margin:0;padding:0;color:inherit;background:transparent;border:0;border-radius:0;outline:none;text-align:left}button.menu-label{cursor:pointer}.menu-label:focus-within{z-index:1;box-shadow:var(--shadow-focus-primary);margin-right:calc(var(--space-unit) * -0.5);margin-left:calc(var(--space-unit) * -0.5);padding-right:calc(var(--space-unit) * 0.5);padding-left:calc(var(--space-unit) * 0.5)}.menu-label .menu-label-content{display:flex;align-items:center;padding:var(--space-unit) 0;border-bottom:var(--border-size-large) solid var(--color-surface05)}:host([active]) .menu-label-content,:host([open]) .menu-label-content,.menu-label:hover .menu-label-content,.menu-label:focus-within .menu-label-content{border-color:var(--color-secondary01)}.menu-label ::slotted(*){width:100%;margin:0;appearance:none;font-size:var(--font-size-5);line-height:1.2;outline:none}.menu-label z-icon{margin-left:calc(var(--space-unit) * 4);fill:currentColor}.content{background:var(--color-surface01)}.content[hidden]{display:none}:host([floating]) .content{width:375px;max-width:100vw;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host(:not([floating])) .content{width:100%}:host([floating]) .content{position:absolute;top:100%;left:0;box-shadow:var(--shadow-2);min-width:100%}.header{display:flex;align-items:center;padding:var(--space-unit) 0 calc(var(--space-unit) * 2)}.header ::slotted(img[slot='header']){width:calc(var(--space-unit) * 11.25);object-fit:contain;height:auto}.header ::slotted([slot='header']:not(:first-child)){margin:auto 0;margin-left:calc(var(--space-unit) * 2.5);font-weight:var(--font-sb);font-size:var(--font-size-3);line-height:1.5}.items{display:flex;flex-direction:column;align-items:flex-start;background:inherit}.items>::slotted([slot='item']){display:inline-flex;width:100%;margin:0;font-size:var(--font-size-3);line-height:1.25;outline:none}.items>::slotted([slot='item']:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}.items>::slotted([slot='item']:not(z-menu-section)){padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--color-surface05)}.items>::slotted([slot='item']:hover),.items>::slotted([slot='item']:active){border-color:var(--color-secondary01)}";
4
+
5
+ const ZMenu = class {
6
+ constructor(hostRef) {
7
+ registerInstance(this, hostRef);
8
+ this.opened = createEvent(this, "opened", 7);
9
+ this.closed = createEvent(this, "closed", 7);
10
+ /**
11
+ * Flag to set the display mode of the list.
12
+ * If true, the list will be absolutely positioned under the menu label,
13
+ * stacked beneath it otherwise.
14
+ * @default false
15
+ */
16
+ this.floating = false;
17
+ /**
18
+ * The opening state of the menu.
19
+ * @default false
20
+ */
21
+ this.open = false;
22
+ this.toggle = this.toggle.bind(this);
23
+ this.checkContent = this.checkContent.bind(this);
24
+ this.onItemsChange = this.onItemsChange.bind(this);
25
+ }
26
+ toggle() {
27
+ if (!this.hasContent) {
28
+ return;
29
+ }
30
+ this.open = !this.open;
31
+ this.open ? this.opened.emit() : this.closed.emit();
32
+ }
33
+ /** Close the floating list when a click is performed outside of this Element. */
34
+ handleClick(ev) {
35
+ if (!this.floating ||
36
+ !this.open ||
37
+ this.hostElement.contains(ev.target)) {
38
+ return;
39
+ }
40
+ this.reflow();
41
+ this.open = false;
42
+ this.closed.emit();
43
+ }
44
+ onOpenChanged() {
45
+ if (this.open) {
46
+ this.reflow(true);
47
+ }
48
+ else {
49
+ cancelAnimationFrame(this.raf);
50
+ }
51
+ }
52
+ componentWillLoad() {
53
+ this.checkContent();
54
+ }
55
+ /**
56
+ * Correctly set position of the floating menu in order to prevent overflow.
57
+ * @param live Should run the method on every refresh frame.
58
+ */
59
+ reflow(live = false) {
60
+ if (this.content) {
61
+ const { style } = this.content;
62
+ const { left } = this.hostElement.getBoundingClientRect();
63
+ const widthPx = getComputedStyle(this.content).width;
64
+ const width = widthPx ? parseFloat(widthPx.replace('px', '')) : 375;
65
+ const safeScrollbarSpace = 30;
66
+ style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
67
+ }
68
+ if (live) {
69
+ this.raf = requestAnimationFrame(this.reflow.bind(this, live));
70
+ }
71
+ }
72
+ /**
73
+ * Check if some content slot is set.
74
+ */
75
+ checkContent() {
76
+ this.hasHeader = !!this.hostElement.querySelectorAll('[slot="header"]').length;
77
+ this.hasContent = !!this.hostElement.querySelectorAll('[slot="item"]').length || this.hasHeader;
78
+ }
79
+ /**
80
+ * Set `menuitem` role to all menu items.
81
+ */
82
+ onItemsChange() {
83
+ this.checkContent();
84
+ const items = this.hostElement.querySelectorAll('[slot="item"]');
85
+ items === null || items === void 0 ? void 0 : items.forEach((item) => item.setAttribute('role', 'menuitem'));
86
+ }
87
+ renderMenuLabel() {
88
+ if (this.hasContent) {
89
+ return h("button", { class: "menu-label", "aria-expanded": this.open ? 'true' : 'false', "aria-label": this.open ? 'Chiudi menù' : 'Apri menù', onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", null), h("z-icon", { name: this.open ? 'chevron-up' : 'chevron-down' })));
90
+ }
91
+ return h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", null)));
92
+ }
93
+ render() {
94
+ return [
95
+ this.renderMenuLabel(),
96
+ h("div", { class: "content", ref: (el) => { this.content = el; }, hidden: !this.open }, this.hasHeader && h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent })), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange })))
97
+ ];
98
+ }
99
+ get hostElement() { return getElement(this); }
100
+ static get watchers() { return {
101
+ "open": ["onOpenChanged"]
102
+ }; }
103
+ };
104
+ ZMenu.style = stylesCss;
105
+
106
+ export { ZMenu as z_menu };
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, h } from './index-fa9e549c.js';
2
- import { q as PocketStatusEnum } from './index-4952bfe3.js';
2
+ import { h as PocketStatusEnum } from './index-09b57d95.js';
3
3
 
4
4
  const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{font-size:12px;font-weight:var(--font-sb);color:var(--color-primary01);fill:var(--color-primary01)}:host>z-pocket>z-pocket-header span.badge{background:var(--color-secondary02);color:var(--color-surface01);border-radius:50%;padding:0 calc(var(--space-unit)* 0.5);display:inline-block;margin-left:var(--space-unit)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;margin:0 var(--space-unit);padding:var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{background-image:linear-gradient(rgba(255, 0, 0, 0), white);position:absolute;top:0;left:0;right:0;bottom:0}:host>z-pocket.open>z-pocket-body>div.body{max-height:calc(100vh - 166px);overflow:auto;scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-width:thin;scrollbar-color:var(--color-primary01) var(--color-surface03)}:host ::-webkit-scrollbar{background:linear-gradient(\n 90deg,\n var(--color-surface01) 2px,\n var(--color-surface03) 4px,\n var(--color-surface01) 8px\n );border-radius:var(--radius-base);width:10px}:host ::-webkit-scrollbar-thumb{background-color:var(--color-primary01);border-radius:var(--radius-base);width:var(--space-unit)}}";
5
5
 
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fa9e549c.js';
2
- import { m as InputStatusEnum, b as ButtonVariantEnum } from './index-4952bfe3.js';
2
+ import { i as InputStatusEnum, a as ButtonVariantEnum } from './index-09b57d95.js';
3
3
 
4
4
  const stylesCss = ".sc-z-modal-login-h{font-family:var(--dashboard-font);font-weight:var(--font-rg)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{color:var(--text-grey-800);padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 2)\n calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch}z-button.sc-z-modal-login,z-input.sc-z-modal-login,.sc-z-modal-login-s>z-button,.sc-z-modal-login-s>z-input{display:inline-block;width:100%}z-link.sc-z-modal-login,.sc-z-modal-login-s>z-link{font-size:12px}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch}div.wrapper>form>div.username.sc-z-modal-login-s>z-input,div.wrapper>form>div.password.sc-z-modal-login-s>z-input,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.username.sc-z-modal-login z-input.sc-z-modal-login,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.password.sc-z-modal-login z-input.sc-z-modal-login{margin-bottom:var(--space-unit)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>z-link.forget.sc-z-modal-login{font-size:12px;align-self:flex-end}div.wrapper>form>div.login.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.login.sc-z-modal-login z-button.sc-z-modal-login{margin:calc(var(--space-unit) * 3) 0;align-self:flex-start}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>hr.sc-z-modal-login{width:100%;margin-bottom:calc(var(--space-unit) * 3);border:none;border-top:var(--border-size-medium) solid var(--bg-grey-200);margin-block-start:unset}div.wrapper>div.signup.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.signup.sc-z-modal-login z-button.sc-z-modal-login{display:inline-block;margin:calc(var(--space-unit) * 2) 0}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:calc(var(--space-unit) * 2) 0px}slot-fb[name=\"provider\"].sc-z-modal-login{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;gap:calc(var(--space-unit) * 2) 0px}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{padding-top:calc(var(--space-unit) * 2)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;align-content:center}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login>svg.sc-z-modal-login{margin-right:var(--space-unit)}@media only screen and (min-width: 768px){z-button.sc-z-modal-login,.sc-z-modal-login-s>z-button{width:initial}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:396px;padding:calc(var(--space-unit) * 3)}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:var(--space-unit);justify-content:center;align-items:center}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{grid-column-start:1;grid-column-end:3;padding-bottom:var(--space-unit)}.sc-z-modal-login-s>[slot=\"provider\"]{width:100%}slot-fb[name=\"provider\"].sc-z-modal-login{grid-column-start:1;grid-column-end:3;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:var(--space-unit);justify-content:center;align-items:center}slot-fb[name=\"provider\"].sc-z-modal-login>*.sc-z-modal-login{width:100%}}@media only screen and (min-width: 1366px){.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:477px;padding:calc(var(--space-unit) * 4)}}";
5
5
 
@@ -0,0 +1,32 @@
1
+ import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
2
+
3
+ const stylesCss = ":host{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;display:flex;flex-direction:row;justify-content:center;width:100%;height:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--gray900);opacity:0.7}.modal-container{display:flex;flex-direction:column;z-index:1010;width:100%;height:100vh;overflow:-moz-scrollbars-none;overflow:hidden}.modal-container>header{display:flex;flex-wrap:nowrap;flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);background:var(--color-surface02)}.modal-container>header button{margin:0;padding:0;border:none;background:transparent;cursor:pointer;margin-left:auto}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 2.5);--z-icon-height:calc(var(--space-unit) * 2.5);display:flex;fill:var(--color-icon01)}.modal-container>header>div{display:flex;flex-direction:column;width:100%;margin-right:calc(var(--space-unit) * 2)}.modal-container>header h1,.modal-container>header h2{margin:0;padding:0;font-weight:var(--font-rg);color:var(--color-text01)}.modal-container>header h1{font-size:var(--font-size-5);line-height:1.4;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-3);line-height:1.5;letter-spacing:0}.modal-container>header>div *:empty{display:none}.modal-container>header h1+h2{margin-top:calc(var(--space-unit) * 0.5)}.modal-container>.modal-content{flex:1 auto;background:var(--color-surface01);overflow:auto;overflow-x:hidden}.modal-container .modal-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)}.modal-container .modal-content::-webkit-scrollbar-track{background-color:transparent}.modal-container .modal-content::-webkit-scrollbar-thumb{background-color:var(--color-primary01);border-radius:var(--border-radius);width:10px}.modal-container .modal-content::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}.modal-container .modal-content{scrollbar-color:var(--color-primary01) transparent}@media only screen and (min-width: 768px){.modal-container{position:fixed;top:calc(var(--space-unit) * 6);left:50%;transform:translateX(-50%);width:auto;height:auto;min-width:calc(var(--space-unit) * 40);min-height:calc(var(--space-unit) * 40);max-height:calc(100vh - calc(var(--space-unit) * 6 * 2));border-radius:var(--border-radius)}.modal-container>header z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3)}}@media only screen and (min-width: 768px) and (max-width: 1151px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3)}}@media only screen and (min-width: 1152px){.modal-container>header{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 4)}.modal-container>header h1{font-size:var(--font-size-6);line-height:1.33;letter-spacing:0}.modal-container>header h2{font-size:var(--font-size-4);line-height:1.5;letter-spacing:0}.modal-container>header h1+h2{margin-top:0}}";
4
+
5
+ const ZModal = class {
6
+ constructor(hostRef) {
7
+ registerInstance(this, hostRef);
8
+ this.modalClose = createEvent(this, "modalClose", 7);
9
+ this.modalHeaderActive = createEvent(this, "modalHeaderActive", 7);
10
+ this.modalBackgroundClick = createEvent(this, "modalBackgroundClick", 7);
11
+ /** aria-label for close button (optional) */
12
+ this.closeButtonLabel = "close modal";
13
+ }
14
+ emitModalClose() {
15
+ this.modalClose.emit({ modalid: this.modalid });
16
+ }
17
+ emitModalHeaderActive() {
18
+ this.modalHeaderActive.emit({ modalid: this.modalid });
19
+ }
20
+ emitBackgroundClick() {
21
+ this.modalBackgroundClick.emit({ modalid: this.modalid });
22
+ }
23
+ render() {
24
+ return [
25
+ h("div", { class: "modal-container", id: this.modalid, role: "dialog" }, h("header", { onClick: this.emitModalHeaderActive.bind(this) }, h("div", null, this.modaltitle && h("h1", null, this.modaltitle), this.modalsubtitle && h("h2", null, this.modalsubtitle)), h("slot", { name: "modalCloseButton" }, h("button", { "aria-label": this.closeButtonLabel, onClick: this.emitModalClose.bind(this) }, h("z-icon", { name: "multiply-circle-filled" })))), h("div", { class: "modal-content" }, h("slot", { name: "modalContent" }))),
26
+ h("div", { class: "modal-background", "data-action": "modalBackground", "data-modal": this.modalid, onClick: this.emitBackgroundClick.bind(this) })
27
+ ];
28
+ }
29
+ };
30
+ ZModal.style = stylesCss;
31
+
32
+ export { ZModal as z_modal };
@@ -0,0 +1,59 @@
1
+ import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
2
+ import { j as AlertTypesEnum } from './index-09b57d95.js';
3
+
4
+ const stylesCss = ":host{position:absolute;font-family:var(--font-family-sans);font-weight:var(--font-rg);width:100%;top:0px;left:0px;z-index:2}:host>z-alert{height:calc(var(--space-unit) * 6)}.relativeContainer{position:relative;display:grid;grid-template-columns:18px auto 46px;grid-template-rows:1fr;grid-column-gap:var(--space-unit);align-items:center;padding:0;outline:none}.relativeContainer::-moz-focus-inner{border:0}.alert-external-wrapper.removeAlert{border:var(--border-size-medium) solid var(--color-surface02);border-top:none}:host div.addAlert{background:var(--color-success-inverse)}:host div.removeAlert{background:var(--color-warning-inverse)}:host div>.contentText{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.contentAction{color:var(--color-primary01);font-size:12px;font-weight:var(--font-sb);height:20px;letter-spacing:0.32px;line-height:20px;cursor:pointer}:host div>z-icon{justify-self:center}";
5
+
6
+ const ZMyzCardAlert = class {
7
+ constructor(hostRef) {
8
+ registerInstance(this, hostRef);
9
+ this.undoAction = createEvent(this, "undoAction", 7);
10
+ }
11
+ emitUndoAction() {
12
+ this.undoAction.emit({ actionType: this.type });
13
+ }
14
+ handleSpaceKeyPress(e) {
15
+ if (e.keyCode == 32 || e.keyCode == 13) {
16
+ e.preventDefault();
17
+ this.emitUndoAction();
18
+ }
19
+ }
20
+ handleActionButtonClick(e) {
21
+ e.preventDefault();
22
+ this.emitUndoAction();
23
+ }
24
+ retrieveClass() {
25
+ let className = "";
26
+ switch (this.type) {
27
+ case "add":
28
+ className = "addAlert";
29
+ break;
30
+ case "remove":
31
+ className = "removeAlert";
32
+ break;
33
+ default:
34
+ className = "";
35
+ break;
36
+ }
37
+ return className;
38
+ }
39
+ getAlertType() {
40
+ switch (this.type) {
41
+ case "add":
42
+ return AlertTypesEnum.success;
43
+ case "remove":
44
+ return AlertTypesEnum.warning;
45
+ default:
46
+ return null;
47
+ }
48
+ }
49
+ render() {
50
+ return (h("div", { class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { type: this.getAlertType() }, h("div", { class: "relativeContainer" }, h("z-icon", { name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { class: "contentText" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "contentAction", onClick: (e) => {
51
+ this.handleActionButtonClick(e);
52
+ }, onKeyPress: (e) => {
53
+ this.handleSpaceKeyPress(e);
54
+ } }, this.actiontext))))));
55
+ }
56
+ };
57
+ ZMyzCardAlert.style = stylesCss;
58
+
59
+ export { ZMyzCardAlert as z_myz_card_alert };
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-fa9e549c.js';
2
- import { b as ButtonVariantEnum } from './index-4952bfe3.js';
2
+ import { a as ButtonVariantEnum } from './index-09b57d95.js';
3
3
 
4
4
  const stylesCss = ":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}";
5
5