@epa-wg/custom-element-dist 0.0.25 β†’ 0.0.27

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 (332) hide show
  1. package/.idea/custom-element-dist.iml +1 -5
  2. package/.storybook/main.ts +1 -3
  3. package/.storybook/preview-head.html +8 -0
  4. package/.storybook/preview.ts +13 -5
  5. package/README.md +4 -4
  6. package/bin/postinstall.sh +3 -2
  7. package/bin/vitest/vitest-browser-importmaps.mjs +20 -0
  8. package/coverage/coverage-final.json +14 -11
  9. package/coverage/index.html +51 -36
  10. package/coverage/src/custom-element/coverage.svg +1 -1
  11. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  12. package/coverage/src/custom-element/custom-element.js.html +596 -386
  13. package/coverage/src/custom-element/demo/coverage.svg +10 -0
  14. package/coverage/src/custom-element/demo/index.html +116 -0
  15. package/coverage/src/custom-element/demo/z.js/coverage.svg +10 -0
  16. package/coverage/src/custom-element/demo/z.js.html +112 -0
  17. package/coverage/src/custom-element/http-request.js.html +12 -12
  18. package/coverage/src/custom-element/index.html +33 -18
  19. package/coverage/src/custom-element/local-storage.js.html +56 -41
  20. package/coverage/src/custom-element/location-element.js.html +4 -4
  21. package/coverage/src/custom-element/module-url.js/coverage.svg +10 -0
  22. package/coverage/src/custom-element/module-url.js.html +187 -0
  23. package/coverage/src/index.html +1 -1
  24. package/coverage/src/mocks/coverage.svg +1 -1
  25. package/coverage/src/mocks/handlers.ts/coverage.svg +1 -1
  26. package/coverage/src/mocks/handlers.ts.html +36 -12
  27. package/coverage/src/mocks/index.html +19 -19
  28. package/coverage/src/stories/attributes.test.stories.ts.html +9 -15
  29. package/coverage/src/stories/coverage.svg +1 -1
  30. package/coverage/src/stories/css.test.stories.ts.html +1 -1
  31. package/coverage/src/stories/dom-merge.test.stories.ts.html +15 -9
  32. package/coverage/src/stories/external-template.test.stories.ts.html +27 -18
  33. package/coverage/src/stories/form.test.stories.ts.html +1 -1
  34. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  35. package/coverage/src/stories/index.html +48 -33
  36. package/coverage/src/stories/local-storage.test.stories.ts/coverage.svg +1 -1
  37. package/coverage/src/stories/local-storage.test.stories.ts.html +87 -63
  38. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  39. package/coverage/src/stories/module-url.test.stories.ts/coverage.svg +10 -0
  40. package/coverage/src/stories/module-url.test.stories.ts.html +634 -0
  41. package/coverage/src/stories/set-url.test.stories.ts.html +1 -1
  42. package/coverage/src/stories/slice-events.test.stories.ts.html +1 -1
  43. package/coverage/src/stories/slots.test.stories.ts.html +1 -1
  44. package/coverage/src/stories/testStoryBook.ts.html +12 -12
  45. package/coverage/src/stories/version-select.test.stories.ts.html +98 -20
  46. package/coverage/src/sum.ts.html +1 -1
  47. package/dist/confused.svg +1 -0
  48. package/dist/custom-element-BMMsP1Dy.js +533 -0
  49. package/dist/custom-element-CPSk7s0j.cjs +87 -0
  50. package/dist/custom-element-bundle.cjs +1 -1
  51. package/dist/custom-element-bundle.js +28 -25
  52. package/dist/demo/a.html +60 -0
  53. package/dist/demo/a.svg +27 -0
  54. package/dist/demo/b.html +13 -0
  55. package/dist/demo/confused.svg +38 -0
  56. package/dist/demo/data-slices.html +216 -0
  57. package/dist/demo/dce-social-preview.png +0 -0
  58. package/dist/demo/demo.css +25 -0
  59. package/dist/demo/dom-merge.html +123 -0
  60. package/dist/demo/embed-1.html +2 -0
  61. package/dist/demo/external-template.html +239 -0
  62. package/dist/demo/form.html +239 -0
  63. package/dist/demo/hex-grid-dce.html +183 -0
  64. package/dist/demo/hex-grid-transform.png +0 -0
  65. package/dist/demo/hex-grid.html +66 -0
  66. package/dist/demo/html-template.html +126 -0
  67. package/dist/demo/html-template.xhtml +45 -0
  68. package/dist/demo/html-template.xml +45 -0
  69. package/dist/demo/http-request.html +143 -0
  70. package/dist/demo/lib-dir/Smiley.svg +24 -0
  71. package/dist/demo/lib-dir/embed-lib.html +34 -0
  72. package/dist/demo/local-storage.html +218 -0
  73. package/dist/demo/location-element.html +168 -0
  74. package/dist/demo/logo.png +0 -0
  75. package/dist/demo/module-url.html +215 -0
  76. package/dist/demo/npm-versions-demo.html +118 -0
  77. package/dist/demo/npm-versions.html +94 -0
  78. package/dist/demo/parameters.html +70 -0
  79. package/dist/demo/s.xml +3 -0
  80. package/dist/demo/s.xslt +56 -0
  81. package/dist/demo/s1.xslt +60 -0
  82. package/dist/demo/scoped-css.html +169 -0
  83. package/dist/demo/set-url.html +141 -0
  84. package/dist/demo/ss.html +57 -0
  85. package/dist/demo/table.xml +25 -0
  86. package/dist/demo/table.xsl +293 -0
  87. package/dist/demo/template.xsl +46 -0
  88. package/dist/demo/tree.xml +25 -0
  89. package/dist/demo/tree.xsl +33 -0
  90. package/dist/demo/wc-square.svg +1 -0
  91. package/dist/demo/xhtml-template.xhtml +45 -0
  92. package/dist/demo/z.html +33 -0
  93. package/dist/demo/z.js +9 -0
  94. package/dist/demo/z.xml +60 -0
  95. package/dist/demo/z1.html +34 -0
  96. package/dist/embed-1.html +1 -2
  97. package/dist/local-storage-78EivJ_B.cjs +1 -0
  98. package/dist/local-storage-DzmNKzgN.js +66 -0
  99. package/dist/mockServiceWorker.js +1 -1
  100. package/package.json +95 -93
  101. package/public/confused.svg +1 -0
  102. package/public/demo/a.html +60 -0
  103. package/public/demo/a.svg +27 -0
  104. package/public/demo/b.html +13 -0
  105. package/public/demo/confused.svg +38 -0
  106. package/public/demo/data-slices.html +216 -0
  107. package/public/demo/dce-social-preview.png +0 -0
  108. package/public/demo/demo.css +25 -0
  109. package/public/demo/dom-merge.html +123 -0
  110. package/public/demo/embed-1.html +2 -0
  111. package/public/demo/external-template.html +239 -0
  112. package/public/demo/form.html +239 -0
  113. package/public/demo/hex-grid-dce.html +183 -0
  114. package/public/demo/hex-grid-transform.png +0 -0
  115. package/public/demo/hex-grid.html +66 -0
  116. package/public/demo/html-template.html +126 -0
  117. package/public/demo/html-template.xhtml +45 -0
  118. package/public/demo/html-template.xml +45 -0
  119. package/public/demo/http-request.html +143 -0
  120. package/public/demo/lib-dir/Smiley.svg +24 -0
  121. package/public/demo/lib-dir/embed-lib.html +34 -0
  122. package/public/demo/local-storage.html +218 -0
  123. package/public/demo/location-element.html +168 -0
  124. package/public/demo/logo.png +0 -0
  125. package/public/demo/module-url.html +215 -0
  126. package/public/demo/npm-versions-demo.html +118 -0
  127. package/public/demo/npm-versions.html +94 -0
  128. package/public/demo/parameters.html +70 -0
  129. package/public/demo/s.xml +3 -0
  130. package/public/demo/s.xslt +56 -0
  131. package/public/demo/s1.xslt +60 -0
  132. package/public/demo/scoped-css.html +169 -0
  133. package/public/demo/set-url.html +141 -0
  134. package/public/demo/ss.html +57 -0
  135. package/public/demo/table.xml +25 -0
  136. package/public/demo/table.xsl +293 -0
  137. package/public/demo/template.xsl +46 -0
  138. package/public/demo/tree.xml +25 -0
  139. package/public/demo/tree.xsl +33 -0
  140. package/public/demo/wc-square.svg +1 -0
  141. package/public/demo/xhtml-template.xhtml +45 -0
  142. package/public/demo/z.html +33 -0
  143. package/public/demo/z.js +9 -0
  144. package/public/demo/z.xml +60 -0
  145. package/public/demo/z1.html +34 -0
  146. package/public/embed-1.html +1 -2
  147. package/public/mockServiceWorker.js +1 -1
  148. package/src/custom-element/custom-element.js +103 -33
  149. package/src/custom-element/demo/a.svg +27 -0
  150. package/src/custom-element/demo/confused.svg +1 -0
  151. package/src/custom-element/demo/demo.css +11 -8
  152. package/src/custom-element/demo/embed-1.html +1 -2
  153. package/src/custom-element/demo/external-template.html +122 -62
  154. package/src/custom-element/demo/lib-dir/Smiley.svg +24 -0
  155. package/src/custom-element/demo/lib-dir/embed-lib.html +34 -0
  156. package/src/custom-element/demo/module-url.html +215 -0
  157. package/src/custom-element/demo/npm-versions-demo.html +118 -0
  158. package/src/custom-element/demo/npm-versions.html +94 -0
  159. package/src/custom-element/demo/s.xml +3 -36
  160. package/src/custom-element/demo/s.xslt +55 -96
  161. package/src/custom-element/demo/set-url.html +1 -1
  162. package/src/custom-element/demo/z.html +32 -61
  163. package/src/custom-element/demo/z.js +9 -0
  164. package/src/custom-element/demo/z1.html +34 -0
  165. package/src/custom-element/ide/customData-dce.json +215 -181
  166. package/src/custom-element/ide/web-types-dce.json +184 -159
  167. package/src/custom-element/ide/web-types-xsl.json +1 -1
  168. package/src/custom-element/index.html +21 -3
  169. package/src/custom-element/local-storage.js +19 -14
  170. package/src/custom-element/module-url.js +34 -0
  171. package/src/mocks/handlers.ts +10 -1
  172. package/src/mocks/versions.mock.ts +786 -0
  173. package/src/stories/__screenshots__/http-request.test.ts/http-request-url-change-1.png +0 -0
  174. package/src/stories/attributes.test.stories.ts +3 -5
  175. package/src/stories/dom-merge.test.stories.ts +9 -7
  176. package/src/stories/external-template.test.stories.ts +13 -10
  177. package/src/stories/local-storage.test.stories.ts +61 -53
  178. package/src/stories/module-url.test.stories.ts +183 -0
  179. package/src/stories/version-select.test.stories.ts +38 -12
  180. package/src/sum.test.ts +5 -5
  181. package/src/sum.ts +3 -3
  182. package/storybook-static/assets/Color-KGDBMAHA-CJo5gHY3.js +1 -0
  183. package/storybook-static/assets/{Configure-D0qG3gR9.js β†’ Configure-DdXbGKhY.js} +2 -2
  184. package/storybook-static/assets/DocsRenderer-PKQXORMH-DLnpL5hE.js +2 -0
  185. package/storybook-static/assets/{attributes.test.stories-W34tZdUt.js β†’ attributes.test.stories-Bt5V18qO.js} +10 -12
  186. package/storybook-static/assets/{css.test.stories-BZFYx1TQ.js β†’ css.test.stories-CGYy2daE.js} +1 -1
  187. package/storybook-static/assets/custom-element-D8hcDZHh.js +265 -0
  188. package/storybook-static/assets/{dom-merge.test.stories-S-7U5N3h.js β†’ dom-merge.test.stories-XlsZ0UvX.js} +22 -20
  189. package/storybook-static/assets/{entry-preview-DrgzXgwT.js β†’ entry-preview-BKQ8UCxI.js} +1 -1
  190. package/storybook-static/assets/{entry-preview-docs-Bxv0qQWs.js β†’ entry-preview-docs-BMKNVQXA.js} +2 -2
  191. package/storybook-static/assets/{external-template.test.stories-QIO3lAFz.js β†’ external-template.test.stories-Bt_Pflu8.js} +23 -21
  192. package/storybook-static/assets/{form.test.stories-ClYhj9F1.js β†’ form.test.stories-B0NoI8wm.js} +1 -1
  193. package/storybook-static/assets/handlers-B5969HUu.js +467 -0
  194. package/storybook-static/assets/http-request.stories-B2skuTFV.js +281 -0
  195. package/storybook-static/assets/iframe-Dfrt81rk.js +2 -0
  196. package/storybook-static/assets/index-Ay195x2L.js +605 -0
  197. package/storybook-static/assets/index-C3ChPTMh.js +1 -0
  198. package/storybook-static/assets/index-C7lvoJNv.js +1 -0
  199. package/storybook-static/assets/index-C8k3Z-3Y.js +28 -0
  200. package/storybook-static/assets/{index-DXimoRZY.js β†’ index-D-8MO0q_.js} +1 -1
  201. package/storybook-static/assets/index-DGdNYaqV.js +8 -0
  202. package/storybook-static/assets/index-Gpdhz4ab.js +1 -0
  203. package/storybook-static/assets/lit-element-DzhCn-8W.js +19 -0
  204. package/storybook-static/assets/local-storage.test.stories-DfY6feqG.js +420 -0
  205. package/storybook-static/assets/{location-element.test.stories-DvH1TWK4.js β†’ location-element.test.stories-944AotIJ.js} +1 -1
  206. package/storybook-static/assets/module-url.test.stories-DSKcwApl.js +208 -0
  207. package/storybook-static/assets/{preview-BKCN0mOr.js β†’ preview-0Jj89qip.js} +1 -1
  208. package/storybook-static/assets/preview-AJR7rVPD.js +52 -0
  209. package/storybook-static/assets/{preview-TCN6m6T-.js β†’ preview-BJPLiuSt.js} +1 -1
  210. package/storybook-static/assets/{preview-BDY5ThwJ.js β†’ preview-BMWqy4Bi.js} +1 -1
  211. package/storybook-static/assets/preview-BnWGZYux.js +1 -0
  212. package/storybook-static/assets/preview-CadgX-4y.js +2 -0
  213. package/storybook-static/assets/{preview-BAz7FMXc.js β†’ preview-DB9FwMii.js} +1 -1
  214. package/storybook-static/assets/preview-Djh1_Tal.js +20 -0
  215. package/storybook-static/assets/{set-url.test.stories-GlJOh31I.js β†’ set-url.test.stories-DjLHKkEh.js} +1 -1
  216. package/storybook-static/assets/{slice-events.test.stories-VoNjuPCX.js β†’ slice-events.test.stories-8I_BrHd6.js} +1 -1
  217. package/storybook-static/assets/{slots.test.stories-Da2j9YuO.js β†’ slots.test.stories-CvZz4jyP.js} +1 -1
  218. package/storybook-static/assets/version-select.test.stories-DSxmJylI.js +109 -0
  219. package/storybook-static/confused.svg +1 -0
  220. package/storybook-static/demo/a.html +60 -0
  221. package/storybook-static/demo/a.svg +27 -0
  222. package/storybook-static/demo/b.html +13 -0
  223. package/storybook-static/demo/confused.svg +38 -0
  224. package/storybook-static/demo/data-slices.html +216 -0
  225. package/storybook-static/demo/dce-social-preview.png +0 -0
  226. package/storybook-static/demo/demo.css +25 -0
  227. package/storybook-static/demo/dom-merge.html +123 -0
  228. package/storybook-static/demo/embed-1.html +2 -0
  229. package/storybook-static/demo/external-template.html +239 -0
  230. package/storybook-static/demo/form.html +239 -0
  231. package/storybook-static/demo/hex-grid-dce.html +183 -0
  232. package/storybook-static/demo/hex-grid-transform.png +0 -0
  233. package/storybook-static/demo/hex-grid.html +66 -0
  234. package/storybook-static/demo/html-template.html +126 -0
  235. package/storybook-static/demo/html-template.xhtml +45 -0
  236. package/storybook-static/demo/html-template.xml +45 -0
  237. package/storybook-static/demo/http-request.html +143 -0
  238. package/storybook-static/demo/lib-dir/Smiley.svg +24 -0
  239. package/storybook-static/demo/lib-dir/embed-lib.html +34 -0
  240. package/storybook-static/demo/local-storage.html +218 -0
  241. package/storybook-static/demo/location-element.html +168 -0
  242. package/storybook-static/demo/logo.png +0 -0
  243. package/storybook-static/demo/module-url.html +215 -0
  244. package/storybook-static/demo/npm-versions-demo.html +118 -0
  245. package/storybook-static/demo/npm-versions.html +94 -0
  246. package/storybook-static/demo/parameters.html +70 -0
  247. package/storybook-static/demo/s.xml +3 -0
  248. package/storybook-static/demo/s.xslt +56 -0
  249. package/storybook-static/demo/s1.xslt +60 -0
  250. package/storybook-static/demo/scoped-css.html +169 -0
  251. package/storybook-static/demo/set-url.html +141 -0
  252. package/storybook-static/demo/ss.html +57 -0
  253. package/storybook-static/demo/table.xml +25 -0
  254. package/storybook-static/demo/table.xsl +293 -0
  255. package/storybook-static/demo/template.xsl +46 -0
  256. package/storybook-static/demo/tree.xml +25 -0
  257. package/storybook-static/demo/tree.xsl +33 -0
  258. package/storybook-static/demo/wc-square.svg +1 -0
  259. package/storybook-static/demo/xhtml-template.xhtml +45 -0
  260. package/storybook-static/demo/z.html +33 -0
  261. package/storybook-static/demo/z.js +9 -0
  262. package/storybook-static/demo/z.xml +60 -0
  263. package/storybook-static/demo/z1.html +34 -0
  264. package/storybook-static/embed-1.html +1 -2
  265. package/storybook-static/favicon.svg +1 -7
  266. package/storybook-static/iframe.html +42 -30
  267. package/storybook-static/index.html +36 -18
  268. package/storybook-static/index.json +1 -1
  269. package/storybook-static/mockServiceWorker.js +1 -1
  270. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  271. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  272. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  273. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  274. package/storybook-static/project.json +1 -1
  275. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +39 -36
  276. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +38 -1
  277. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  278. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +395 -43
  279. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +0 -18
  280. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  281. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +221 -22
  282. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  283. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  284. package/storybook-static/sb-manager/globals-module-info.js +995 -1
  285. package/storybook-static/sb-manager/globals-runtime.js +53525 -1
  286. package/storybook-static/sb-manager/globals.js +48 -1
  287. package/storybook-static/sb-manager/runtime.js +11884 -1
  288. package/storybook-static/sb-preview/globals.js +33 -1
  289. package/storybook-static/sb-preview/runtime.js +9437 -108
  290. package/vite.config.js +2 -1
  291. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  292. package/.idea/compiler.xml +0 -6
  293. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  294. package/.vscode/settings.json +0 -24
  295. package/dist/custom-element-DAe7uvIt.js +0 -477
  296. package/dist/custom-element-DZvvhscI.cjs +0 -53
  297. package/dist/local-storage-Boafngui.cjs +0 -1
  298. package/dist/local-storage-BqDEu2kF.js +0 -59
  299. package/storybook-static/assets/Color-PRSJMWNM-CRSv4C7i.js +0 -1
  300. package/storybook-static/assets/DocsRenderer-K4EAMTCU-CG_P5zRZ.js +0 -2
  301. package/storybook-static/assets/WithTooltip-KJL26V4Q-CUqUi5E8.js +0 -1
  302. package/storybook-static/assets/custom-element-DpIq8E2p.js +0 -219
  303. package/storybook-static/assets/formatter-2WMMO6ZP-C-UiBIma.js +0 -58
  304. package/storybook-static/assets/http-request.stories-DCqY5s2i.js +0 -300
  305. package/storybook-static/assets/iframe-CURpvmVV.js +0 -2
  306. package/storybook-static/assets/index-CKw1EbdP.js +0 -1
  307. package/storybook-static/assets/index-CVRyq5ci.js +0 -27
  308. package/storybook-static/assets/index-Cc7K62zD.js +0 -3
  309. package/storybook-static/assets/index-DYpTqTNu.js +0 -1
  310. package/storybook-static/assets/index-DsWii_Ep.js +0 -548
  311. package/storybook-static/assets/index-DuIEV_9C.js +0 -13
  312. package/storybook-static/assets/lit-element-CenEXOuS.js +0 -19
  313. package/storybook-static/assets/local-storage.test.stories-BqgYwqr-.js +0 -419
  314. package/storybook-static/assets/preview-B4GcaC1c.js +0 -1
  315. package/storybook-static/assets/preview-B63p-W8V.js +0 -20
  316. package/storybook-static/assets/preview-DRnyIGXK.js +0 -48
  317. package/storybook-static/assets/preview-DjDbQHPa.js +0 -2
  318. package/storybook-static/assets/syntaxhighlighter-BP7B2CQK-CDpEe51g.js +0 -1
  319. package/storybook-static/assets/version-select.test.stories-DLwf-TPB.js +0 -60
  320. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -3
  321. package/storybook-static/sb-common-assets/fonts.css +0 -31
  322. package/storybook-static/sb-manager/WithTooltip-KJL26V4Q-5LS5AN27.js +0 -1
  323. package/storybook-static/sb-manager/chunk-B3YDJJJH.js +0 -347
  324. package/storybook-static/sb-manager/chunk-BLWCBWKL.js +0 -9
  325. package/storybook-static/sb-manager/chunk-GUVK2GTO.js +0 -6
  326. package/storybook-static/sb-manager/chunk-LFRML3ZV.js +0 -186
  327. package/storybook-static/sb-manager/chunk-MC7RAF2B.js +0 -274
  328. package/storybook-static/sb-manager/chunk-ZR5JZWHI.js +0 -1
  329. package/storybook-static/sb-manager/formatter-2WMMO6ZP-JI7RHVTW.js +0 -58
  330. package/storybook-static/sb-manager/index.js +0 -1
  331. package/storybook-static/sb-manager/syntaxhighlighter-BP7B2CQK-WOJYHKQR.js +0 -1
  332. /package/storybook-static/sb-addons/{storybook-core-server-presets-0 β†’ storybook-core-core-server-presets-0}/common-manager-bundle.js.LEGAL.txt +0 -0
package/public/demo/html-template.xhtml ADDED
@@ -0,0 +1,45 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <title>template based on HTML file</title>
6
+ </head>
7
+ <body>
8
+ <b id="wave">πŸ‘‹</b>
9
+ <b id="ok">πŸ‘Œ</b>
10
+ <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>
11
+ <xsl:stylesheet
12
+ id="embedded-xsl"
13
+ version="1.0"
14
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
15
+ <xsl:output
16
+ method="html"
17
+ omit-xml-declaration="yes"
18
+ standalone="yes"
19
+ indent="yes"
20
+ />
21
+
22
+ <xsl:template match="/">
23
+ <xsl:apply-templates select="*"/>
24
+ </xsl:template>
25
+ <xsl:template match="*">
26
+ <details style="padding:0 1rem" open="open">
27
+ <summary>
28
+ <b style="color:green"><xsl:value-of select="name()"/></b>
29
+ <xsl:apply-templates select="@*"/>
30
+ </summary>
31
+ <xsl:value-of select="./text()"/>
32
+ <xsl:apply-templates select="*"/>
33
+ </details>
34
+ </xsl:template>
35
+ <xsl:template match="@*">
36
+ <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
37
+ </xsl:template>
38
+ <xsl:template match="text()">
39
+ <p>
40
+ <xsl:value-of select="."/>
41
+ </p>
42
+ </xsl:template>
43
+ </xsl:stylesheet>
44
+ </body>
45
+ </html>
package/public/demo/html-template.xml ADDED
@@ -0,0 +1,45 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <title>template based on HTML file</title>
6
+ </head>
7
+ <body>
8
+ <b id="wave">πŸ‘‹</b>
9
+ <b id="ok">πŸ‘Œ</b>
10
+ <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>
11
+ <xsl:stylesheet
12
+ id="embedded-xsl"
13
+ version="1.0"
14
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
15
+ <xsl:output
16
+ method="html"
17
+ omit-xml-declaration="yes"
18
+ standalone="yes"
19
+ indent="yes"
20
+ />
21
+
22
+ <xsl:template match="/">
23
+ <xsl:apply-templates select="*"/>
24
+ </xsl:template>
25
+ <xsl:template match="*">
26
+ <details style="padding:0 1rem" open="open">
27
+ <summary>
28
+ <b style="color:green"><xsl:value-of select="name()"/></b>
29
+ <xsl:apply-templates select="@*"/>
30
+ </summary>
31
+ <xsl:value-of select="./text()"/>
32
+ <xsl:apply-templates select="*"/>
33
+ </details>
34
+ </xsl:template>
35
+ <xsl:template match="@*">
36
+ <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
37
+ </xsl:template>
38
+ <xsl:template match="text()">
39
+ <p>
40
+ <xsl:value-of select="."/>
41
+ </p>
42
+ </xsl:template>
43
+ </xsl:stylesheet>
44
+ </body>
45
+ </html>
package/public/demo/http-request.html ADDED
@@ -0,0 +1,143 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>http-request Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg" />
7
+
8
+ <script type="module" src="../http-request.js"></script>
9
+ <script type="module" src="../custom-element.js"></script>
10
+ <style>
11
+ @import "./demo.css";
12
+
13
+ button
14
+ { display: inline-flex; flex-direction: column; align-items: center; flex: auto;
15
+ box-shadow: inset silver 0px 0px 1rem; min-width: 12rem; padding: 1rem;
16
+ color: coral; text-shadow: 1px 1px silver; font-weight: bolder;
17
+ }
18
+ button img{ max-height: 10vw; min-height: 4rem;}
19
+ table{ min-width: 16rem; }
20
+ td{ border-bottom: 1px solid silver; }
21
+ tfoot td{ border-bottom: none; }
22
+ td,th{text-align: right; }
23
+ caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
24
+ dce-1{ padding: 0; display: flex; flex-wrap: wrap;}
25
+ code{ text-align: right; min-width: 3rem;}
26
+ </style>
27
+ </head>
28
+ <body>
29
+
30
+ <nav>
31
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
32
+ </nav>
33
+
34
+
35
+ <html-demo-element legend="0. url from text to http-request "
36
+ description="read data from arbitrary URL">
37
+ <template>
38
+ <custom-element>
39
+ <template>
40
+
41
+ <button slice="url-string" slice-value="''" slice-event="click">⬇️set blank</button>
42
+ <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=6</button>
43
+ <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=3'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=3</button>
44
+ <input slice="url-string" value="{ //url-string ?? '' }" style="width:100%"/>
45
+ <button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
46
+ <http-request
47
+ url="{//fetch-url}"
48
+ slice="request_slice"
49
+ type="text"
50
+ mode="cors"
51
+ ></http-request>
52
+ <code>//fetch-url</code> from <code>{//fetch-url}</code><br/>
53
+ <ul><for-each select="//results">
54
+ <li>{@name}</li>
55
+ </for-each></ul>
56
+ </template>
57
+ </custom-element>
58
+ </template>
59
+ </html-demo-element>
60
+
61
+ <html-demo-element legend="1. http-request simplest"
62
+ description="load the list of pokemons">
63
+ <p>Should display 6 image buttons with pokemon name </p>
64
+ <template>
65
+ <custom-element>
66
+ <template><!-- wrapping into template to prevent images loading within DCE declaration -->
67
+ <p>Pokemon buttons from API</p>
68
+ <http-request
69
+ url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
70
+ slice="page"
71
+ method="GET"
72
+ header-accept="application/json"
73
+ ></http-request>
74
+ <variable name="slides-url"
75
+ >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</variable>
76
+ <for-each select="//results">
77
+ <variable name="pokeid"
78
+ select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
79
+ ></variable>
80
+ <button>
81
+ <img src="{$slides-url}/{$pokeid}.svg"
82
+ alt="{@name}"/>
83
+ {@name}
84
+ </button>
85
+ </for-each>
86
+ </template>
87
+ </custom-element>
88
+ </template>
89
+ </html-demo-element>
90
+
91
+ <html-demo-element legend="2. http-request response and headers"
92
+ description="request and response headers access demo">
93
+
94
+ <template>
95
+ <custom-element url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6">
96
+ <template> <!-- IMPORTANT! to wrap DCE payload into template to avoid
97
+ http-request initializing out of instance -->
98
+ <attribute name="url"></attribute>
99
+ <http-request
100
+ url="{url}"
101
+ slice="request_slice"
102
+ type="text"
103
+ mode="cors"
104
+ header-x-test="testing"
105
+ ></http-request>
106
+ Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
107
+ from <code>${url}</code>
108
+
109
+ <h3>Samples</h3>
110
+ <table>
111
+ <tr><th> //slice/request_slice/value/request/@mode </th>
112
+ <td>{ //slice/request_slice/value/request/@mode }</td></tr>
113
+ <tr><th> //slice/request_slice/value/response/headers/@content-type </th>
114
+ <td>{ //slice/request_slice/value/response/headers/@content-type }</td></tr>
115
+ <tr><th> //slice/request_slice/value/response/@status </th>
116
+ <td>{ //slice/request_slice/value/response/@status }</td></tr>
117
+ </table>
118
+ <apply-templates mode="display" select="//slice/request_slice/value/*"></apply-templates>
119
+ <xsl:template mode="display" match="*">
120
+ <fieldset>
121
+ <legend> {local-name(.)} </legend>
122
+ <ul>
123
+ <for-each select="@*">
124
+ <li>
125
+ <var data-testid="section-attribute">@{local-name(.)}</var>
126
+ =
127
+ <code><value-of select='.'/></code>
128
+ </li>
129
+ </for-each>
130
+ </ul>
131
+ <apply-templates mode="display" select="*"></apply-templates>
132
+ </fieldset>
133
+ </xsl:template>
134
+ </template>
135
+ </custom-element>
136
+ </template>
137
+ </html-demo-element>
138
+
139
+
140
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
141
+
142
+ </body>
143
+ </html>
package/public/demo/lib-dir/Smiley.svg ADDED
@@ -0,0 +1,24 @@
1
+ <?xml version="1.0" standalone="no"?>
2
+ <!DOCTYPE svg>
3
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" baseProfile="full" viewBox="-21 -21 42 42">
4
+ <defs>
5
+ <radialGradient id="b" cx=".2" cy=".2" r=".5" fx=".2" fy=".2">
6
+ <stop offset="0" stop-color="#fff" stop-opacity=".7"/>
7
+ <stop offset="1" stop-color="#fff" stop-opacity="0"/>
8
+ </radialGradient>
9
+ <radialGradient id="a" cx=".5" cy=".5" r=".5">
10
+ <stop offset="0" stop-color="#ff0"/>
11
+ <stop offset=".75" stop-color="#ff0"/>
12
+ <stop offset=".95" stop-color="#ee0"/>
13
+ <stop offset="1" stop-color="#e8e800"/>
14
+ </radialGradient>
15
+ </defs>
16
+ <circle r="20" fill="url(#a)" stroke="#000" stroke-width=".15"/>
17
+ <circle r="20" fill="url(#b)"/>
18
+ <g id="c">
19
+ <ellipse cx="-6" cy="-7" rx="2.5" ry="4"/>
20
+ <path fill="none" stroke="#000" stroke-linecap="round" stroke-width=".5" d="M10.6 2.7a4 4 0 0 0 4 3"/>
21
+ </g>
22
+ <use xlink:href="#c" transform="scale(-1 1)"/>
23
+ <path fill="none" stroke="#000" stroke-width=".75" d="M-12 5a13.5 13.5 0 0 0 24 0 13 13 0 0 1-24 0"/>
24
+ </svg>
package/public/demo/lib-dir/embed-lib.html ADDED
@@ -0,0 +1,34 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>templates for embedded and external DCE lib dependencies</title>
6
+ </head>
7
+ <body>
8
+ <h1>templates for embedded and external DCE lib dependencies</h1>
9
+
10
+ <template id="embed-lib-component">
11
+ πŸ‘‹ from embed-lib-component
12
+ </template>
13
+
14
+ <template id="embed-relative-hash">
15
+ πŸ‘Œ from embed-relative-hash invoking
16
+ <module-url slice="full-url" src="./embed-lib.html"></module-url>
17
+ <a href="{//full-url}#embed-lib-component">
18
+ <img src="{//full-url}/../Smiley.svg"/>
19
+ #embed-lib-component
20
+ </a>:
21
+ <custom-element src="#embed-lib-component"></custom-element>
22
+ </template>
23
+
24
+ <template id="embed-relative-file">
25
+ πŸ‘ from embed-relative-file invoking
26
+ <module-url slice="up-url" src="../embed-1.html"></module-url>
27
+ <a href="{//up-url}">../embed-1.html</a>:
28
+ <custom-element src="../embed-1.html">
29
+ loading from ../embed-1.html ...
30
+ </custom-element>
31
+ </template>
32
+
33
+ </body>
34
+ </html>
package/public/demo/local-storage.html ADDED
@@ -0,0 +1,218 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>custom-element Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg" />
7
+ <script type="module" src="../local-storage.js"></script>
8
+ <script type="module" src="../custom-element.js"></script>
9
+ <style>
10
+ @import "./demo.css";
11
+
12
+ button{ background: forestgreen; }
13
+ table{ min-width: 16rem; }
14
+ td{ border-bottom: 1px solid silver; }
15
+ tfoot td{ border-bottom: none; }
16
+ td,th{text-align: right; }
17
+ caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
18
+ </style>
19
+
20
+ <script>
21
+ window.JsonSample = {a:1,b:'B'};
22
+ </script>
23
+ </head>
24
+ <body>
25
+
26
+ <nav>
27
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
28
+ </nav>
29
+ <main>
30
+ <code>local-storage</code> allows to read and write its value to the key in <code>localStorage</code>.
31
+ The <code>type</code> attribute allows to place the validation constrains to the value: when the value does not
32
+ match the expected type, it would not be assigned, keeping empty <code>value</code> instead.
33
+ </main>
34
+ <html-demo-element legend="0. read localStorage text value"
35
+ description="click should set text-key slice via localStorage change.">
36
+ <template>
37
+ <custom-element>
38
+ <template>
39
+ <local-storage key="textKey" slice="text-key" type="text" live="live"></local-storage>
40
+ <button onclick="localStorage.setItem('textKey','text value')">text value</button>
41
+ <button onclick="localStorage.setItem('textKey','another value')">another value</button>
42
+ //text-key: <code>{//text-key}</code>
43
+ </template>
44
+ </custom-element>
45
+ </template>
46
+ </html-demo-element>
47
+
48
+ <html-demo-element legend="1. always override "
49
+ description="value in localStorage[] should be always reset to ABC. click should set text-key slice via localStorage change.">
50
+ <template>
51
+ <custom-element>
52
+ <template>
53
+ <!-- always reset -->
54
+ <local-storage slice="override-key" key="overrideKey" type="text" value="ABC"></local-storage>
55
+ <button onclick="localStorage.setItem( 'overrideKey','text value')">text value</button>
56
+ <button onclick="localStorage.removeItem('overrideKey' )">clear key</button>
57
+ //override-key: <code>{ //override-key }</code>
58
+ </template>
59
+ </custom-element>
60
+ </template>
61
+ </html-demo-element>
62
+
63
+ <html-demo-element legend="2. from storage with default "
64
+ description="default overridden by button, refresh should preserve updated value">
65
+ <template>
66
+ <custom-element>
67
+ <template>
68
+ <!-- initially set value to DEF and update by button. On reload the value picked from localStorage -->
69
+ <local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF'"></local-storage>
70
+ <button onclick="localStorage.clear()">clear localStorage</button>
71
+ <button onclick="localStorage.removeItem('attr2Key')">clear key</button>
72
+ <button onclick="localStorage.setItem('attr2Key','text value')">updated value</button>
73
+ //attr2-key: <code>{//attr2-key}</code>
74
+ </template>
75
+ </custom-element>
76
+ </template>
77
+ </html-demo-element>
78
+
79
+ <html-demo-element legend="3. localStorage type"
80
+ description="type validation happy path. Invalid for type value in storage would be treated as null">
81
+ <template>
82
+ <custom-element>
83
+ <template>
84
+ <local-storage key="dateKey" slice="date-key" type="date" live="live"></local-storage>
85
+ <local-storage key="timeKey" slice="time-key" type="time" live="live"></local-storage>
86
+ <local-storage key="localDateTimeKey" slice="local-date-time" type="datetime-local" live="live"></local-storage>
87
+ <local-storage key="numberKey" slice="number-key" type="number" live="live"></local-storage>
88
+ <local-storage key="jsonKey" slice="json-key" type="json" live="live"></local-storage>
89
+ <input id="typesinput" placeholder="set value" /><button onclick="
90
+ 'dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
91
+ .map( k=> localStorage.setItem(k, typesinput.value) )
92
+ "> set to all</button><br/>
93
+ <hr/>
94
+ date-key:
95
+ <button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')" >2024-04-21T03:58:42.131Z </button>
96
+ <button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())" >now </button>
97
+ <button onclick="localStorage.setItem('dateKey', 'ABC' )" >date ABC - invalid </button>
98
+ <code>{//date-key }</code><br/>
99
+ time-key:
100
+ <button onclick="localStorage.setItem('timeKey', '13:30')" >13:30 </button>
101
+ <code>{//time-key }</code><br/>
102
+ local-date-time:
103
+ <button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')" >21977-04-01T14:00:30 - local </button>
104
+ <code>{//local-date-time}</code><br/>
105
+ number-key:
106
+ <button onclick="localStorage.setItem('numberKey', '2024' )" >2024 - number </button>
107
+ <button onclick="localStorage.setItem('numberKey', '24' )" >24 - number </button>
108
+ <button onclick="localStorage.setItem('numberKey', '1.23456e+5' )" >1.23456e+5 </button>
109
+ <button onclick="localStorage.setItem('numberKey', '0001' )" >0001 </button>
110
+ <button onclick="localStorage.setItem('numberKey', '000' )" >000 </button>
111
+ <button onclick="localStorage.setItem('numberKey', '0' )" >0 </button>
112
+ <button onclick="localStorage.setItem('numberKey', 'ABC' )" >ABC - invalid, NaN </button>
113
+ <code>{//number-key }</code> <br/>
114
+ <fieldset>
115
+ <legend>json-key: </legend>
116
+
117
+ <button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))" >'ABC' - string </button>
118
+ <button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))" >12.345 - number </button>
119
+ <button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )" >a:1,b:'B' -json </button>
120
+ <button onclick="localStorage.setItem('jsonKey', 'ABC' )" >ABC - invalid </button><br/>
121
+ json-key:<code><xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"></xsl:apply-templates></code>
122
+ </fieldset>
123
+ <xsl:template mode="json" match="*|@*">
124
+ <div>{name()} : {.}</div>
125
+ </xsl:template>
126
+ </template>
127
+ </custom-element>
128
+ </template>
129
+ </html-demo-element>
130
+
131
+ <html-demo-element legend="3. localStorage simplest"
132
+ description="local-storage read only during initial and only render, does not track the changes.">
133
+ <p>Has to produce 12πŸ’</p>
134
+ <template>
135
+ <custom-element tag="dce-1" hidden>
136
+ {//slice/fruits/text()}
137
+ <slot>πŸ€”</slot>
138
+ <local-storage key="cherries" slice="fruits"></local-storage>
139
+ </custom-element>
140
+ <dce-1>πŸ’</dce-1>
141
+ </template>
142
+ </html-demo-element>
143
+
144
+ <html-demo-element legend="2. localStorage basket JSON "
145
+ description="local-storage tracks changes">
146
+ <p>Click the fruits button to add into cart </p>
147
+ <template>
148
+ <custom-element tag="dce-2" hidden>
149
+ <template>
150
+ <local-storage key="basket" slice="basket" live type="json"></local-storage>
151
+ <xhtml:table xmlns:xhtml="http://www.w3.org/1999/xhtml" >
152
+ <xhtml:tbody>
153
+ <for-each select="//basket/value/@*">
154
+ <xhtml:tr>
155
+ <xhtml:th> {name()} </xhtml:th>
156
+ <xhtml:td> {.} </xhtml:td>
157
+ </xhtml:tr>
158
+ </for-each>
159
+ </xhtml:tbody>
160
+ <xhtml:tfoot>
161
+ <xhtml:tr>
162
+ <xhtml:td><slot>πŸ€”</slot></xhtml:td>
163
+ <xhtml:th> {sum(//slice/basket/value/@*)} </xhtml:th>
164
+ </xhtml:tr>
165
+ </xhtml:tfoot>
166
+ </xhtml:table>
167
+ </template>
168
+ </custom-element>
169
+ <dce-2>πŸ›’total</dce-2>
170
+ </template>
171
+ </html-demo-element>
172
+
173
+ <fieldset>
174
+ <legend>localStorage content</legend>
175
+ <p>The demo should display count 1πŸ‹ and 12πŸ’ initially.
176
+ The value in <code>localStorage</code> is incremented
177
+ when clicked on matching button
178
+ </p>
179
+ <button name="lemons" value="1" >πŸ‹</button>
180
+ <button name="cherries" value="12" >πŸ’</button>
181
+ <button name="apple" >🍏</button>
182
+ <button name="banana" >🍌</button>
183
+ <table>
184
+ <caption> Click to add the localStorage value </caption>
185
+ <thead><tr><th>key</th><th>value</th></tr></thead>
186
+ <tbody id="local-storage-values"></tbody>
187
+ </table>
188
+ </fieldset>
189
+ <script type="module">
190
+ import { localStorageSetItem } from '../local-storage.js';
191
+ import $ from 'https://unpkg.com/css-chain@1/CssChain.js';
192
+
193
+ const basket = {cherries: 12, lemons:1 };
194
+ localStorageSetItem( 'basket', JSON.stringify(basket) );
195
+
196
+ $('button[name]')
197
+ .forEach( b=> localStorage.setItem( b.name, b.value ) )
198
+ .addEventListener( 'click', e =>
199
+ { const k = e.target.name;
200
+ basket[k] || (basket[k] = 1);
201
+ localStorageSetItem( k, basket[k] = 1+1*localStorage[k] )
202
+ localStorageSetItem( 'basket', JSON.stringify(basket) );
203
+ renderStorage();
204
+ } );
205
+
206
+ const renderStorage = () =>
207
+ window[ 'local-storage-values' ].innerHTML = [...Array(localStorage.length).keys()]
208
+ .map( k => `<tr><th>${ localStorage.key(k) }</th><td>${ localStorage.getItem( localStorage.key(k) ) }</td>` ).join( '\n' );
209
+
210
+ window.addEventListener( 'storage', renderStorage );
211
+ window.addEventListener( 'local-storage', renderStorage );
212
+ renderStorage();
213
+ </script>
214
+
215
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
216
+
217
+ </body>
218
+ </html>