@zanichelli/albe-web-components 2.45.0 → 2.46.2

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 (254) hide show
  1. package/dist/cjs/{_commonjsHelpers-119ffc74.js → _commonjsHelpers-537d719a.js} +3 -0
  2. package/dist/cjs/{hammer-54230951.js → hammer-4f20813e.js} +1 -1
  3. package/dist/cjs/{icons-05eba7ee.js → icons-30810e62.js} +5 -1
  4. package/dist/cjs/{index-93c4c577.js → index-155b2ec5.js} +27 -10
  5. package/dist/cjs/{index-9651dba8.js → index-1fda0714.js} +1 -1
  6. package/dist/cjs/index.cjs.js +2 -2
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/cjs/{utils-23a6dee4.js → utils-4bbd782c.js} +1 -1
  9. package/dist/cjs/web-components-library.cjs.js +1 -1
  10. package/dist/cjs/z-app-switcher_11.cjs.entry.js +4 -4
  11. package/dist/cjs/z-aria-alert.cjs.entry.js +1 -1
  12. package/dist/cjs/z-avatar.cjs.entry.js +1 -1
  13. package/dist/cjs/z-button-filter_5.cjs.entry.js +2 -2
  14. package/dist/cjs/z-chip.cjs.entry.js +1 -1
  15. package/dist/cjs/z-combobox.cjs.entry.js +2 -2
  16. package/dist/cjs/z-contextual-menu.cjs.entry.js +1 -1
  17. package/dist/cjs/z-cookiebar.cjs.entry.js +1 -1
  18. package/dist/cjs/z-date-picker.cjs.entry.js +3004 -0
  19. package/dist/cjs/z-file-upload.cjs.entry.js +2 -2
  20. package/dist/cjs/z-file.cjs.entry.js +2 -2
  21. package/dist/cjs/z-footer.cjs.entry.js +1 -1
  22. package/dist/cjs/z-icon-package.cjs.entry.js +1 -1
  23. package/dist/cjs/z-list_3.cjs.entry.js +1 -1
  24. package/dist/cjs/z-menu-dropdown_2.cjs.entry.js +2 -2
  25. package/dist/cjs/z-messages-pocket.cjs.entry.js +1 -1
  26. package/dist/cjs/z-modal-login.cjs.entry.js +1 -1
  27. package/dist/cjs/z-myz-card-alert.cjs.entry.js +1 -1
  28. package/dist/cjs/z-myz-card-dictionary.cjs.entry.js +1 -1
  29. package/dist/cjs/z-myz-card-footer.cjs.entry.js +1 -1
  30. package/dist/cjs/z-myz-card-info.cjs.entry.js +2 -2
  31. package/dist/cjs/z-myz-card_4.cjs.entry.js +1 -1
  32. package/dist/cjs/z-myz-list-item.cjs.entry.js +2 -2
  33. package/dist/cjs/z-myz-topbar.cjs.entry.js +1 -1
  34. package/dist/cjs/z-navigation-tab-link.cjs.entry.js +70 -0
  35. package/dist/cjs/z-navigation-tab.cjs.entry.js +35 -8
  36. package/dist/cjs/z-navigation-tabs.cjs.entry.js +76 -48
  37. package/dist/cjs/z-otp.cjs.entry.js +1 -1
  38. package/dist/cjs/z-pagination-bar.cjs.entry.js +4 -4
  39. package/dist/cjs/z-pocket_3.cjs.entry.js +4 -4
  40. package/dist/cjs/z-popover.cjs.entry.js +4 -4
  41. package/dist/cjs/z-section-title.cjs.entry.js +1 -1
  42. package/dist/cjs/z-slideshow.cjs.entry.js +2 -2
  43. package/dist/cjs/z-status-tag.cjs.entry.js +3 -3
  44. package/dist/cjs/z-table-cell.cjs.entry.js +3 -3
  45. package/dist/cjs/z-table-empty-box.cjs.entry.js +2 -2
  46. package/dist/cjs/z-table-header.cjs.entry.js +4 -4
  47. package/dist/cjs/z-table-row.cjs.entry.js +1 -1
  48. package/dist/cjs/z-table.cjs.entry.js +1 -1
  49. package/dist/cjs/z-toast-notification-list.cjs.entry.js +1 -1
  50. package/dist/cjs/z-toast-notification.cjs.entry.js +3 -3
  51. package/dist/cjs/z-toggle-switch.cjs.entry.js +2 -2
  52. package/dist/cjs/z-tooltip.cjs.entry.js +1 -1
  53. package/dist/collection/beans/index.js +27 -10
  54. package/dist/collection/collection-manifest.json +4 -2
  55. package/dist/collection/components/icons/icons.js +5 -1
  56. package/dist/collection/components/navigation/{z-navigation-tab/styles.css → tabs/navigation-tab.css} +35 -34
  57. package/dist/collection/components/navigation/tabs/z-navigation-tab/index.js +239 -0
  58. package/dist/collection/components/navigation/tabs/z-navigation-tab-link/index.js +271 -0
  59. package/dist/collection/components/navigation/tabs/z-navigation-tabs/index.js +207 -0
  60. package/dist/collection/components/navigation/{z-navigation-tabs → tabs/z-navigation-tabs}/styles.css +11 -10
  61. package/dist/collection/components/z-date-picker/index.js +143 -0
  62. package/dist/collection/components/z-date-picker/styles.css +515 -0
  63. package/dist/esm/{_commonjsHelpers-8b28c6fa.js → _commonjsHelpers-9943807e.js} +3 -1
  64. package/dist/esm/{hammer-501342a9.js → hammer-c3266b17.js} +1 -1
  65. package/dist/esm/{icons-bceeb196.js → icons-d8a127bf.js} +5 -1
  66. package/dist/esm/{index-023c206a.js → index-22f4a844.js} +28 -11
  67. package/dist/esm/{index-aa3a4feb.js → index-abb47b30.js} +1 -1
  68. package/dist/esm/index.js +2 -2
  69. package/dist/esm/loader.js +1 -1
  70. package/dist/esm/{utils-05b6c600.js → utils-259e2dd9.js} +1 -1
  71. package/dist/esm/web-components-library.js +1 -1
  72. package/dist/esm/z-app-switcher_11.entry.js +4 -4
  73. package/dist/esm/z-aria-alert.entry.js +1 -1
  74. package/dist/esm/z-avatar.entry.js +1 -1
  75. package/dist/esm/z-button-filter_5.entry.js +2 -2
  76. package/dist/esm/z-chip.entry.js +1 -1
  77. package/dist/esm/z-combobox.entry.js +2 -2
  78. package/dist/esm/z-contextual-menu.entry.js +1 -1
  79. package/dist/esm/z-cookiebar.entry.js +1 -1
  80. package/dist/esm/z-date-picker.entry.js +3000 -0
  81. package/dist/esm/z-file-upload.entry.js +2 -2
  82. package/dist/esm/z-file.entry.js +2 -2
  83. package/dist/esm/z-footer.entry.js +1 -1
  84. package/dist/esm/z-icon-package.entry.js +1 -1
  85. package/dist/esm/z-list_3.entry.js +1 -1
  86. package/dist/esm/z-menu-dropdown_2.entry.js +2 -2
  87. package/dist/esm/z-messages-pocket.entry.js +1 -1
  88. package/dist/esm/z-modal-login.entry.js +1 -1
  89. package/dist/esm/z-myz-card-alert.entry.js +1 -1
  90. package/dist/esm/z-myz-card-dictionary.entry.js +1 -1
  91. package/dist/esm/z-myz-card-footer.entry.js +1 -1
  92. package/dist/esm/z-myz-card-info.entry.js +2 -2
  93. package/dist/esm/z-myz-card_4.entry.js +1 -1
  94. package/dist/esm/z-myz-list-item.entry.js +2 -2
  95. package/dist/esm/z-myz-topbar.entry.js +1 -1
  96. package/dist/esm/z-navigation-tab-link.entry.js +66 -0
  97. package/dist/esm/z-navigation-tab.entry.js +35 -8
  98. package/dist/esm/z-navigation-tabs.entry.js +76 -48
  99. package/dist/esm/z-otp.entry.js +1 -1
  100. package/dist/esm/z-pagination-bar.entry.js +4 -4
  101. package/dist/esm/z-pocket_3.entry.js +4 -4
  102. package/dist/esm/z-popover.entry.js +4 -4
  103. package/dist/esm/z-section-title.entry.js +1 -1
  104. package/dist/esm/z-slideshow.entry.js +2 -2
  105. package/dist/esm/z-status-tag.entry.js +3 -3
  106. package/dist/esm/z-table-cell.entry.js +3 -3
  107. package/dist/esm/z-table-empty-box.entry.js +2 -2
  108. package/dist/esm/z-table-header.entry.js +4 -4
  109. package/dist/esm/z-table-row.entry.js +1 -1
  110. package/dist/esm/z-table.entry.js +1 -1
  111. package/dist/esm/z-toast-notification-list.entry.js +1 -1
  112. package/dist/esm/z-toast-notification.entry.js +3 -3
  113. package/dist/esm/z-toggle-switch.entry.js +2 -2
  114. package/dist/esm/z-tooltip.entry.js +1 -1
  115. package/dist/types/beans/index.d.ts +18 -4
  116. package/dist/types/components/icons/icons.d.ts +4 -0
  117. package/dist/types/components/navigation/tabs/z-navigation-tab/index.d.ts +48 -0
  118. package/dist/types/components/navigation/tabs/z-navigation-tab-link/index.d.ts +56 -0
  119. package/dist/types/components/navigation/tabs/z-navigation-tabs/index.d.ts +68 -0
  120. package/dist/types/components/z-date-picker/index.d.ts +20 -0
  121. package/dist/types/components.d.ts +180 -13
  122. package/dist/web-components-library/index.esm.js +1 -1
  123. package/dist/web-components-library/{p-2536d492.entry.js → p-0177caf2.entry.js} +1 -1
  124. package/dist/web-components-library/{p-a9a24ffd.entry.js → p-01a23d8c.entry.js} +1 -1
  125. package/dist/web-components-library/{p-5d429427.entry.js → p-02145727.entry.js} +1 -1
  126. package/{www/build/p-98cd95f3.entry.js → dist/web-components-library/p-0b0a358a.entry.js} +1 -1
  127. package/dist/web-components-library/{p-a8ba7c76.entry.js → p-10a2a9fe.entry.js} +1 -1
  128. package/dist/web-components-library/p-112455b1.js +1 -0
  129. package/dist/web-components-library/{p-ee229819.entry.js → p-157885b1.entry.js} +1 -1
  130. package/dist/web-components-library/{p-6b70aaa3.entry.js → p-240561e7.entry.js} +1 -1
  131. package/dist/web-components-library/{p-3247dee9.js → p-286363e2.js} +1 -1
  132. package/dist/web-components-library/p-298d324a.entry.js +1 -0
  133. package/dist/web-components-library/p-2d325b9b.entry.js +1 -0
  134. package/dist/web-components-library/{p-5651167f.entry.js → p-2de00f19.entry.js} +1 -1
  135. package/dist/web-components-library/{p-6deeeeff.entry.js → p-30c0f3f2.entry.js} +1 -1
  136. package/dist/web-components-library/{p-189c9cd3.entry.js → p-35c4d277.entry.js} +1 -1
  137. package/dist/web-components-library/{p-091b489d.entry.js → p-3bc3f32e.entry.js} +1 -1
  138. package/dist/web-components-library/{p-800e9669.entry.js → p-4a360730.entry.js} +1 -1
  139. package/dist/web-components-library/{p-04f7a407.entry.js → p-4c7250a9.entry.js} +1 -1
  140. package/dist/web-components-library/p-4e270984.entry.js +16 -0
  141. package/{www/build/p-26410b9b.entry.js → dist/web-components-library/p-4ef4c8ef.entry.js} +1 -1
  142. package/dist/web-components-library/p-4f64af13.entry.js +1 -0
  143. package/{www/build/p-82048c15.js → dist/web-components-library/p-571e9db9.js} +1 -1
  144. package/dist/web-components-library/{p-ead40844.entry.js → p-58091e1c.entry.js} +1 -1
  145. package/dist/web-components-library/{p-cd0cafe6.entry.js → p-5b2d0ccb.entry.js} +1 -1
  146. package/dist/web-components-library/{p-7bb69f45.entry.js → p-61ba9cc7.entry.js} +1 -1
  147. package/dist/web-components-library/{p-2c8e542b.entry.js → p-64b2b415.entry.js} +1 -1
  148. package/dist/web-components-library/{p-2b551b66.entry.js → p-782d01c1.entry.js} +1 -1
  149. package/dist/web-components-library/{p-bc168412.entry.js → p-7efeb668.entry.js} +1 -1
  150. package/{www/build/p-c3bd10ad.entry.js → dist/web-components-library/p-814d6b43.entry.js} +1 -1
  151. package/dist/web-components-library/{p-3b47835a.entry.js → p-88bc3cf2.entry.js} +1 -1
  152. package/dist/web-components-library/p-904375ec.entry.js +1 -0
  153. package/{www/build/p-3ade3fa4.entry.js → dist/web-components-library/p-9777ec0b.entry.js} +1 -1
  154. package/dist/web-components-library/{p-00265234.entry.js → p-9d279248.entry.js} +1 -1
  155. package/dist/web-components-library/{p-fae6d22e.entry.js → p-a6c68018.entry.js} +1 -1
  156. package/dist/web-components-library/{p-e305e1f8.entry.js → p-b260e143.entry.js} +1 -1
  157. package/dist/web-components-library/{p-94919e28.entry.js → p-c196c340.entry.js} +1 -1
  158. package/dist/web-components-library/{p-329633be.entry.js → p-c3771cc7.entry.js} +1 -1
  159. package/dist/web-components-library/{p-f938f1b0.entry.js → p-c5d6450e.entry.js} +1 -1
  160. package/dist/web-components-library/p-c87e0230.entry.js +1 -0
  161. package/dist/web-components-library/p-d1f9c813.entry.js +1 -0
  162. package/dist/web-components-library/p-d2da11f4.js +1 -0
  163. package/dist/web-components-library/{p-26572e05.js → p-d34e101f.js} +1 -1
  164. package/dist/web-components-library/{p-9207c9ca.entry.js → p-d4440420.entry.js} +1 -1
  165. package/{www/build/p-33dc73f1.entry.js → dist/web-components-library/p-d502063b.entry.js} +1 -1
  166. package/dist/web-components-library/{p-1d371408.js → p-e43e61ac.js} +1 -1
  167. package/dist/web-components-library/{p-e6f63644.entry.js → p-e4dce41a.entry.js} +1 -1
  168. package/dist/web-components-library/{p-4e7c54ac.entry.js → p-eafa01a1.entry.js} +1 -1
  169. package/dist/web-components-library/p-ec361ccf.entry.js +1 -0
  170. package/{www/build/p-3b383e1b.entry.js → dist/web-components-library/p-ef22d940.entry.js} +1 -1
  171. package/dist/web-components-library/{p-92f0664e.entry.js → p-feb6ee16.entry.js} +1 -1
  172. package/dist/web-components-library/web-components-library.esm.js +1 -1
  173. package/package.json +9 -8
  174. package/react/components.d.ts +2 -0
  175. package/react/components.js +4 -2
  176. package/react/components.js.map +1 -1
  177. package/www/build/index.esm.js +1 -1
  178. package/www/build/{p-2536d492.entry.js → p-0177caf2.entry.js} +1 -1
  179. package/www/build/{p-a9a24ffd.entry.js → p-01a23d8c.entry.js} +1 -1
  180. package/www/build/{p-5d429427.entry.js → p-02145727.entry.js} +1 -1
  181. package/{dist/web-components-library/p-98cd95f3.entry.js → www/build/p-0b0a358a.entry.js} +1 -1
  182. package/www/build/{p-a8ba7c76.entry.js → p-10a2a9fe.entry.js} +1 -1
  183. package/www/build/p-112455b1.js +1 -0
  184. package/www/build/{p-ee229819.entry.js → p-157885b1.entry.js} +1 -1
  185. package/www/build/{p-6b70aaa3.entry.js → p-240561e7.entry.js} +1 -1
  186. package/www/build/{p-3247dee9.js → p-286363e2.js} +1 -1
  187. package/www/build/p-298d324a.entry.js +1 -0
  188. package/www/build/p-2d325b9b.entry.js +1 -0
  189. package/www/build/{p-5651167f.entry.js → p-2de00f19.entry.js} +1 -1
  190. package/www/build/{p-6deeeeff.entry.js → p-30c0f3f2.entry.js} +1 -1
  191. package/www/build/{p-189c9cd3.entry.js → p-35c4d277.entry.js} +1 -1
  192. package/www/build/{p-091b489d.entry.js → p-3bc3f32e.entry.js} +1 -1
  193. package/www/build/{p-800e9669.entry.js → p-4a360730.entry.js} +1 -1
  194. package/www/build/{p-04f7a407.entry.js → p-4c7250a9.entry.js} +1 -1
  195. package/www/build/p-4e270984.entry.js +16 -0
  196. package/{dist/web-components-library/p-26410b9b.entry.js → www/build/p-4ef4c8ef.entry.js} +1 -1
  197. package/www/build/p-4f64af13.entry.js +1 -0
  198. package/{dist/web-components-library/p-82048c15.js → www/build/p-571e9db9.js} +1 -1
  199. package/www/build/{p-ead40844.entry.js → p-58091e1c.entry.js} +1 -1
  200. package/www/build/p-5a96aa0c.js +1 -0
  201. package/www/build/{p-cd0cafe6.entry.js → p-5b2d0ccb.entry.js} +1 -1
  202. package/www/build/{p-7bb69f45.entry.js → p-61ba9cc7.entry.js} +1 -1
  203. package/www/build/{p-2c8e542b.entry.js → p-64b2b415.entry.js} +1 -1
  204. package/www/build/{p-2b551b66.entry.js → p-782d01c1.entry.js} +1 -1
  205. package/www/build/{p-bc168412.entry.js → p-7efeb668.entry.js} +1 -1
  206. package/{dist/web-components-library/p-c3bd10ad.entry.js → www/build/p-814d6b43.entry.js} +1 -1
  207. package/www/build/p-88b56b6e.css +1 -0
  208. package/www/build/{p-3b47835a.entry.js → p-88bc3cf2.entry.js} +1 -1
  209. package/www/build/p-904375ec.entry.js +1 -0
  210. package/{dist/web-components-library/p-3ade3fa4.entry.js → www/build/p-9777ec0b.entry.js} +1 -1
  211. package/www/build/{p-00265234.entry.js → p-9d279248.entry.js} +1 -1
  212. package/www/build/{p-fae6d22e.entry.js → p-a6c68018.entry.js} +1 -1
  213. package/www/build/{p-e305e1f8.entry.js → p-b260e143.entry.js} +1 -1
  214. package/www/build/{p-94919e28.entry.js → p-c196c340.entry.js} +1 -1
  215. package/www/build/{p-329633be.entry.js → p-c3771cc7.entry.js} +1 -1
  216. package/www/build/{p-f938f1b0.entry.js → p-c5d6450e.entry.js} +1 -1
  217. package/www/build/p-c87e0230.entry.js +1 -0
  218. package/www/build/p-d1f9c813.entry.js +1 -0
  219. package/www/build/p-d2da11f4.js +1 -0
  220. package/www/build/{p-26572e05.js → p-d34e101f.js} +1 -1
  221. package/www/build/{p-9207c9ca.entry.js → p-d4440420.entry.js} +1 -1
  222. package/{dist/web-components-library/p-33dc73f1.entry.js → www/build/p-d502063b.entry.js} +1 -1
  223. package/www/build/{p-1d371408.js → p-e43e61ac.js} +1 -1
  224. package/www/build/{p-e6f63644.entry.js → p-e4dce41a.entry.js} +1 -1
  225. package/www/build/{p-4e7c54ac.entry.js → p-eafa01a1.entry.js} +1 -1
  226. package/www/build/p-ec361ccf.entry.js +1 -0
  227. package/{dist/web-components-library/p-3b383e1b.entry.js → www/build/p-ef22d940.entry.js} +1 -1
  228. package/www/build/{p-92f0664e.entry.js → p-feb6ee16.entry.js} +1 -1
  229. package/www/build/web-components-library.esm.js +1 -1
  230. package/www/index.html +61 -40
  231. package/CHANGELOG.md +0 -1494
  232. package/dist/collection/components/navigation/z-navigation-tab/index.js +0 -151
  233. package/dist/collection/components/navigation/z-navigation-tabs/index.js +0 -179
  234. package/dist/types/components/navigation/z-navigation-tab/index.d.ts +0 -16
  235. package/dist/types/components/navigation/z-navigation-tabs/index.d.ts +0 -32
  236. package/dist/web-components-library/p-1242e682.entry.js +0 -1
  237. package/dist/web-components-library/p-3d99e2b1.entry.js +0 -1
  238. package/dist/web-components-library/p-5300e675.entry.js +0 -1
  239. package/dist/web-components-library/p-5b5d269c.js +0 -1
  240. package/dist/web-components-library/p-5e41c6c2.entry.js +0 -1
  241. package/dist/web-components-library/p-99e53bd5.entry.js +0 -1
  242. package/dist/web-components-library/p-b68038b5.js +0 -1
  243. package/dist/web-components-library/p-e98bb01e.entry.js +0 -1
  244. package/src-react/index.ts +0 -1
  245. package/www/build/p-1242e682.entry.js +0 -1
  246. package/www/build/p-3d99e2b1.entry.js +0 -1
  247. package/www/build/p-5300e675.entry.js +0 -1
  248. package/www/build/p-5b5d269c.js +0 -1
  249. package/www/build/p-5e41c6c2.entry.js +0 -1
  250. package/www/build/p-9234a78a.js +0 -129
  251. package/www/build/p-99e53bd5.entry.js +0 -1
  252. package/www/build/p-b68038b5.js +0 -1
  253. package/www/build/p-e98bb01e.entry.js +0 -1
  254. package/www/build/p-fcff1237.css +0 -812
package/www/index.html CHANGED
@@ -1,54 +1,75 @@
1
- <!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="stylesheet" type="text/css" href="/build/p-fcff1237.css"> <link rel="modulepreload" href="/build/p-9234a78a.js"><script type="module" src="/build/p-9234a78a.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body style="width: 100%; margin: 0; background-color: #f9f9f9;"> <header> <z-app-topbar show-app-switcher="true" topbar-content="[{&quot;label&quot;: &quot;Assistenza&quot;, &quot;link&quot;: &quot;./pages/notification.html&quot;, &quot;icon&quot;: &quot;support&quot;}, {&quot;label&quot;: &quot;Contattaci&quot;, &quot;link&quot;: &quot;./pages/notification.html&quot;, &quot;icon&quot;: &quot;question-mark-circle&quot;}, {&quot;label&quot;: &quot;Carrello&quot;, &quot;link&quot;: &quot;./pages/notification.html&quot;, &quot;icon&quot;: &quot;shopping-cart&quot;}]" content-max-width="800"> <z-app-switcher id="myappswitcher" slot="login"></z-app-switcher></z-app-topbar> </header> <div class="body" style="display: flex; height: calc(100vh - 48px);"> <z-offcanvas id="mycanvas" transitiondirection="right" variant="overlay"> <div slot="canvasContent"> <div> <z-button id="canvas-button">chiudi</z-button> </div> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue.
2
- Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam
3
- eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna,
4
- ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque
5
- dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum
6
- leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat
7
- tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut
8
- suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra.
9
- Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.
10
- Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora
11
- torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis
12
- tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales
13
- leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse
14
- platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris
15
- vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra
16
- tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc
17
- tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.
18
- Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis
19
- purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada
20
- fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus
21
- nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin
22
- aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque.
23
- Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton
24
- Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet
25
- sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare
26
- turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce
27
- suscipit ante pellentesque felis facilisis tincidunt. </span> </div> </z-offcanvas> <div class="content" style="height: 100%; overflow-y: scroll; flex: 1;"> <section> <h4>z-card default variant</h4> <div class="z-cards"> <z-card clickable=""> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" cover-icon="play-filled"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" showshadow="" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>z-card border variant</h4> <div class="z-cards"> <z-card clickable="" variant="border"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="border" cover-icon="play-filled" showshadow=""> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="border" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action" fill="color-text-inverse"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>z-card shadow variant</h4> <div class="z-cards"> <z-card clickable="" variant="shadow"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="shadow" cover-icon="play-filled"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="shadow" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>z-card overlay variant</h4> <div class="z-cards"> <z-card clickable="" variant="overlay"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="overlay" showshadow="" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.Some description for the content
28
- of
29
- the card.Some description for the content of the card.Some description for the content of the card.Some
30
- description for the content of the card.Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>Text</h4> <div class="z-cards"> <z-card variant="text" showshadow="" style="--z-card--text-background: var(--color-secondary02); color: white;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-surface01"></z-icon> <z-icon name="delete" slot="action" fill="color-surface01"></z-icon> </z-card> <z-card clickable="" id="mycard" variant="text" style="--z-card--text-background: var(--color-primary01); color: white; --z-card--text-border-radius: 4px;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-surface01"></z-icon> <z-icon name="delete" slot="action" fill="color-surface01"></z-icon> </z-card> <z-card clickable="" variant="text" style="--z-card--text-border: 2px solid black; --z-card--text-border-radius: 4px;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-primary01"></z-icon> <z-icon name="delete" slot="action" fill="color-primary01"></z-icon> </z-card> <z-card clickable="" variant="text" showshadow="" style="--z-card--text-border: 1px solid black;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-primary01"></z-icon> <z-icon name="delete" slot="action" fill="color-primary01"></z-icon> </z-card> </div> <div class="z-cards"> <z-card clickable="" variant="text" style="--z-card--text-border: 1px solid var(--z-card--border-color); --z-card--text-border-radius: 4px;"> <h3 slot="title">Aula di lettere</h3> <p class="body-3" slot="text">Descrizione breve dell'applicazione </p> <z-icon name="chevron-right-filled" slot="action" fill="color-primary01"></z-icon> </z-card> </div> </section> </div> </div> <div style="width: 800px; border: 2px solid black; padding: 20px; margin: 50px;"> <z-carousel isloading="true" style="--z-carousel-gutter: 24px;"> <li> <div style="width: 200px; height: 200px; background-color: red;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: yellow;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: blue;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: green;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: purple;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: orange;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: grey;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: black;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: pink;"></div> </li> </z-carousel> </div> <script>
31
-
1
+ <!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="stylesheet" type="text/css" href="/build/p-88b56b6e.css"> <link rel="modulepreload" href="/build/p-5a96aa0c.js"><script type="module" src="/build/p-5a96aa0c.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"><title>Stencil Component Starter</title><link rel="stylesheet" type="text/css" href="/build/p-88b56b6e.css"><script type="module" src="/build/web-components-library.esm.js"></script><script nomodule="" src="/build/web-components-library.js"></script></head> <body style="width: 100%; margin: 0; background-color: #f9f9f9;"> <header> <z-app-topbar show-app-switcher="true" topbar-content="[{&quot;label&quot;: &quot;Assistenza&quot;, &quot;link&quot;: &quot;./pages/notification.html&quot;, &quot;icon&quot;: &quot;support&quot;}, {&quot;label&quot;: &quot;Contattaci&quot;, &quot;link&quot;: &quot;./pages/notification.html&quot;, &quot;icon&quot;: &quot;question-mark-circle&quot;}, {&quot;label&quot;: &quot;Carrello&quot;, &quot;link&quot;: &quot;./pages/notification.html&quot;, &quot;icon&quot;: &quot;shopping-cart&quot;}]" content-max-width="800"> <z-app-switcher id="myappswitcher" slot="login"></z-app-switcher></z-app-topbar> </header> <div class="body" style="display: flex; height: calc(100vh - 48px);"> <z-offcanvas id="mycanvas" transitiondirection="right" variant="overlay"> <div slot="canvasContent"> <div> <z-button id="canvas-button">chiudi</z-button> </div> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non
2
+ urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum
3
+ ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla
4
+ metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida,
5
+ tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis
6
+ orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet,
7
+ scelerisque eget velit. Quisque dignissim non dolor iaculis
8
+ scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna,
9
+ sed interdum leo condimentum et. Sed vitae consectetur leo, vel
10
+ placerat turpis. Donec sagittis rutrum felis, eu consequat tortor
11
+ efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie
12
+ eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem
13
+ hendrerit imperdiet. Integer maximus quam non ligula lacinia
14
+ pharetra. Mauris ullamcorper ligula nec elit pellentesque, a
15
+ pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare
16
+ tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad
17
+ litora torquent per conubia nostra, per inceptos himenaeos. Fusce
18
+ feugiat egestas mollis. In eleifend neque quis tellus bibendum
19
+ sodales. Curabitur mattis, magna maximus volutpat dapibus, velit
20
+ nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet
21
+ lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac
22
+ habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus,
23
+ nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus
24
+ sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget
25
+ risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse
26
+ interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc
27
+ tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper
28
+ mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor
29
+ sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam
30
+ convallis purus a sem varius tincidunt ut in dui. Pellentesque
31
+ habitant morbi tristique senectus et netus et malesuada fames ac
32
+ turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi
33
+ mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida
34
+ non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis
35
+ purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet
36
+ augue, facilisis ultricies magna tellus sed neque. Suspendisse quis
37
+ tristique lorem. Pellentesque diam urna, congue et massa in, laoreet
38
+ aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida.
39
+ Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet
40
+ sapien, viverra condimentum tortor ante et est. Vivamus ex urna,
41
+ gravida a enim auctor, ultrices ornare turpis. Quisque at lacus
42
+ massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit
43
+ amet sem. Fusce suscipit ante pellentesque felis facilisis
44
+ tincidunt. </span> </div> </z-offcanvas> <div class="content" style="height: 100%; overflow-y: scroll; flex: 1;"> <section> <h4>z-card default variant</h4> <div class="z-cards"> <z-card clickable=""> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" cover-icon="play-filled"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" showshadow="" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>z-card border variant</h4> <div class="z-cards"> <z-card clickable="" variant="border"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="border" cover-icon="play-filled" showshadow=""> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="border" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-text-inverse"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>z-card shadow variant</h4> <div class="z-cards"> <z-card clickable="" variant="shadow"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="shadow" cover-icon="play-filled"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="shadow" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>z-card overlay variant</h4> <div class="z-cards"> <z-card clickable="" variant="overlay"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="overlay" showshadow="" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card.Some description
45
+ for the content of the card.Some description for the content of
46
+ the card.Some description for the content of the card.Some
47
+ description for the content of the card.Some description for the
48
+ content of the card. </p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>Text</h4> <div class="z-cards"> <z-card variant="text" showshadow="" style="--z-card--text-background: var(--color-secondary02); color: white;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-surface01"></z-icon> <z-icon name="delete" slot="action" fill="color-surface01"></z-icon> </z-card> <z-card clickable="" id="mycard" variant="text" style="--z-card--text-background: var(--color-primary01); color: white; --z-card--text-border-radius: 4px;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-surface01"></z-icon> <z-icon name="delete" slot="action" fill="color-surface01"></z-icon> </z-card> <z-card clickable="" variant="text" style="--z-card--text-border: 2px solid black; --z-card--text-border-radius: 4px;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-primary01"></z-icon> <z-icon name="delete" slot="action" fill="color-primary01"></z-icon> </z-card> <z-card clickable="" variant="text" showshadow="" style="--z-card--text-border: 1px solid black;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text"> Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-primary01"></z-icon> <z-icon name="delete" slot="action" fill="color-primary01"></z-icon> </z-card> </div> <div class="z-cards"> <z-card clickable="" variant="text" style="--z-card--text-border: 1px solid var(--z-card--border-color); --z-card--text-border-radius: 4px;"> <h3 slot="title">Aula di lettere</h3> <p class="body-3" slot="text"> Descrizione breve dell'applicazione </p> <z-icon name="chevron-right-filled" slot="action" fill="color-primary01"></z-icon> </z-card> </div> </section> </div> </div> <div style="width: 800px; border: 2px solid black; padding: 20px; margin: 50px;"> <z-carousel isloading="true" style="--z-carousel-gutter: 24px;"> <li> <div style="width: 200px; height: 200px; background-color: red;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: yellow;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: blue;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: green;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: purple;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: orange;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: grey;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: black;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: pink;"></div> </li> </z-carousel> </div> <script>
32
49
  const mycard = document.getElementById("mycard");
33
- console.log(mycard)
50
+ console.log(mycard);
34
51
  mycard.addEventListener("cardClicked", () =>
35
52
  console.log("mycard was clicked ")
36
53
  );
37
54
 
38
55
  const canvasbutton = document.getElementById("canvas-button");
39
56
  canvasbutton.addEventListener("click", () => {
40
- console.log("canvasbutton button clicked ")
41
- const canvas = document.getElementById("mycanvas")
42
- canvas.removeAttribute("open")
57
+ console.log("canvasbutton button clicked ");
58
+ const canvas = document.getElementById("mycanvas");
59
+ canvas.removeAttribute("open");
43
60
  });
44
61
 
45
62
  window.addEventListener("appButtonClick", () => {
46
- console.log("appswitcher button clicked ")
47
- const canvas = document.getElementById("mycanvas")
48
- canvas.setAttribute("open", "")
63
+ console.log("appswitcher button clicked ");
64
+ const canvas = document.getElementById("mycanvas");
65
+ canvas.setAttribute("open", "");
49
66
  });
50
67
 
51
-
68
+ function dateselect(e) {
69
+ console.log(e.detail);
70
+ }
71
+ const picker = document.getElementById("dp1");
72
+ picker.addEventListener("dateSelect", (e) => dateselect(e));
52
73
  </script> <style>.z-cards {
53
74
  display: flex;
54
75
  padding: 24px;
@@ -58,7 +79,7 @@
58
79
  width: 263px;
59
80
  }
60
81
 
61
- .z-cards z-card+z-card {
82
+ .z-cards z-card + z-card {
62
83
  margin-left: 24px;
63
84
  }
64
85