@epa-wg/custom-element-dist 0.0.24 → 0.0.26

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 (317) hide show
  1. package/.storybook/main.ts +19 -21
  2. package/.storybook/preview-head.html +8 -0
  3. package/.storybook/preview.ts +13 -5
  4. package/README.md +4 -4
  5. package/bin/postinstall.sh +3 -2
  6. package/bin/vitest/vitest-browser-importmaps.mjs +20 -0
  7. package/coverage/coverage-final.json +13 -8
  8. package/coverage/index.html +51 -36
  9. package/coverage/src/custom-element/coverage.svg +1 -1
  10. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  11. package/coverage/src/custom-element/custom-element.js.html +493 -406
  12. package/coverage/src/custom-element/demo/coverage.svg +10 -0
  13. package/coverage/src/custom-element/demo/index.html +116 -0
  14. package/coverage/src/custom-element/demo/z.js/coverage.svg +10 -0
  15. package/coverage/src/custom-element/demo/z.js.html +112 -0
  16. package/coverage/src/custom-element/http-request.js.html +12 -12
  17. package/coverage/src/custom-element/index.html +37 -22
  18. package/coverage/src/custom-element/local-storage.js.html +1 -1
  19. package/coverage/src/custom-element/location-element.js/coverage.svg +1 -1
  20. package/coverage/src/custom-element/location-element.js.html +116 -47
  21. package/coverage/src/custom-element/module-url.js/coverage.svg +10 -0
  22. package/coverage/src/custom-element/module-url.js.html +181 -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 +6 -9
  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 +1 -1
  32. package/coverage/src/stories/external-template.test.stories.ts.html +22 -10
  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 +58 -13
  36. package/coverage/src/stories/local-storage.test.stories.ts.html +1 -1
  37. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  38. package/coverage/src/stories/module-url.test.stories.ts/coverage.svg +10 -0
  39. package/coverage/src/stories/module-url.test.stories.ts.html +634 -0
  40. package/coverage/src/stories/set-url.test.stories.ts/coverage.svg +10 -0
  41. package/coverage/src/stories/set-url.test.stories.ts.html +427 -0
  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/coverage.svg +10 -0
  46. package/coverage/src/stories/version-select.test.stories.ts.html +391 -0
  47. package/coverage/src/sum.ts.html +1 -1
  48. package/dist/confused.svg +1 -0
  49. package/dist/custom-element-CckoVsvO.cjs +53 -0
  50. package/dist/custom-element-b7c_7Kz4.js +485 -0
  51. package/dist/custom-element-bundle.cjs +1 -1
  52. package/dist/custom-element-bundle.js +3 -3
  53. package/dist/demo/a.html +60 -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 +26 -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 +105 -0
  77. package/dist/demo/npm-versions.html +65 -0
  78. package/dist/demo/parameters.html +70 -0
  79. package/dist/demo/s.xml +28 -0
  80. package/dist/demo/s.xslt +97 -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 +62 -0
  93. package/dist/demo/z.js +9 -0
  94. package/dist/demo/z.xml +60 -0
  95. package/dist/embed-1.html +1 -2
  96. package/dist/location-element-DRB7hCwA.cjs +1 -0
  97. package/dist/location-element-FJlONi2n.js +65 -0
  98. package/dist/mockServiceWorker.js +1 -1
  99. package/package.json +93 -93
  100. package/public/confused.svg +1 -0
  101. package/public/demo/a.html +60 -0
  102. package/public/demo/b.html +13 -0
  103. package/public/demo/confused.svg +38 -0
  104. package/public/demo/data-slices.html +216 -0
  105. package/public/demo/dce-social-preview.png +0 -0
  106. package/public/demo/demo.css +26 -0
  107. package/public/demo/dom-merge.html +123 -0
  108. package/public/demo/embed-1.html +2 -0
  109. package/public/demo/external-template.html +239 -0
  110. package/public/demo/form.html +239 -0
  111. package/public/demo/hex-grid-dce.html +183 -0
  112. package/public/demo/hex-grid-transform.png +0 -0
  113. package/public/demo/hex-grid.html +66 -0
  114. package/public/demo/html-template.html +126 -0
  115. package/public/demo/html-template.xhtml +45 -0
  116. package/public/demo/html-template.xml +45 -0
  117. package/public/demo/http-request.html +143 -0
  118. package/public/demo/lib-dir/Smiley.svg +24 -0
  119. package/public/demo/lib-dir/embed-lib.html +34 -0
  120. package/public/demo/local-storage.html +218 -0
  121. package/public/demo/location-element.html +168 -0
  122. package/public/demo/logo.png +0 -0
  123. package/public/demo/module-url.html +215 -0
  124. package/public/demo/npm-versions-demo.html +105 -0
  125. package/public/demo/npm-versions.html +65 -0
  126. package/public/demo/parameters.html +70 -0
  127. package/public/demo/s.xml +28 -0
  128. package/public/demo/s.xslt +97 -0
  129. package/public/demo/s1.xslt +60 -0
  130. package/public/demo/scoped-css.html +169 -0
  131. package/public/demo/set-url.html +141 -0
  132. package/public/demo/ss.html +57 -0
  133. package/public/demo/table.xml +25 -0
  134. package/public/demo/table.xsl +293 -0
  135. package/public/demo/template.xsl +46 -0
  136. package/public/demo/tree.xml +25 -0
  137. package/public/demo/tree.xsl +33 -0
  138. package/public/demo/wc-square.svg +1 -0
  139. package/public/demo/xhtml-template.xhtml +45 -0
  140. package/public/demo/z.html +62 -0
  141. package/public/demo/z.js +9 -0
  142. package/public/demo/z.xml +60 -0
  143. package/public/embed-1.html +1 -2
  144. package/public/mockServiceWorker.js +1 -1
  145. package/src/custom-element/custom-element.js +52 -23
  146. package/src/custom-element/demo/confused.svg +1 -0
  147. package/src/custom-element/demo/demo.css +5 -1
  148. package/src/custom-element/demo/embed-1.html +1 -2
  149. package/src/custom-element/demo/external-template.html +122 -62
  150. package/src/custom-element/demo/lib-dir/Smiley.svg +24 -0
  151. package/src/custom-element/demo/lib-dir/embed-lib.html +34 -0
  152. package/src/custom-element/demo/location-element.html +17 -4
  153. package/src/custom-element/demo/module-url.html +215 -0
  154. package/src/custom-element/demo/npm-versions-demo.html +105 -0
  155. package/src/custom-element/demo/npm-versions.html +65 -0
  156. package/src/custom-element/demo/s.xml +27 -10
  157. package/src/custom-element/demo/s.xslt +96 -59
  158. package/src/custom-element/demo/set-url.html +141 -0
  159. package/src/custom-element/demo/z.js +9 -0
  160. package/src/custom-element/ide/customData-dce.json +215 -125
  161. package/src/custom-element/ide/web-types-dce.json +184 -116
  162. package/src/custom-element/ide/web-types-xsl.json +1 -1
  163. package/src/custom-element/index.html +3 -1
  164. package/src/custom-element/location-element.js +25 -2
  165. package/src/custom-element/module-url.js +33 -0
  166. package/src/custom-element.test.ts +26 -26
  167. package/src/mocks/handlers.ts +10 -1
  168. package/src/mocks/versions.mock.ts +786 -0
  169. package/src/stories/attributes.test.stories.ts +0 -1
  170. package/src/stories/external-template.test.stories.ts +11 -7
  171. package/src/stories/module-url.test.stories.ts +183 -0
  172. package/src/stories/set-url.test.stories.ts +114 -0
  173. package/src/stories/version-select.test.stories.ts +102 -0
  174. package/storybook-static/assets/Color-KGDBMAHA-CH-YyWYq.js +1 -0
  175. package/storybook-static/assets/{Configure-CyLVkwlf.js → Configure-DFL_bm2M.js} +2 -2
  176. package/storybook-static/assets/DocsRenderer-PKQXORMH-Bz-_1hmS.js +2 -0
  177. package/storybook-static/assets/{attributes.test.stories-BckCcyrF.js → attributes.test.stories-DIQXccHc.js} +2 -3
  178. package/storybook-static/assets/{css.test.stories-B-QcObCF.js → css.test.stories-BV2hi4CY.js} +1 -1
  179. package/storybook-static/assets/custom-element-wn23PUwN.js +231 -0
  180. package/storybook-static/assets/{dom-merge.test.stories-CjXhjTQY.js → dom-merge.test.stories-Dws0C2-g.js} +1 -1
  181. package/storybook-static/assets/{entry-preview-DrgzXgwT.js → entry-preview-BKQ8UCxI.js} +1 -1
  182. package/storybook-static/assets/{entry-preview-docs-Bxv0qQWs.js → entry-preview-docs-BMKNVQXA.js} +2 -2
  183. package/storybook-static/assets/{external-template.test.stories-BBqyi0az.js → external-template.test.stories-BHO48b0j.js} +19 -16
  184. package/storybook-static/assets/{form.test.stories-DsIo1B4n.js → form.test.stories-dv9mwp24.js} +1 -1
  185. package/storybook-static/assets/handlers-CaCq2ZPF.js +467 -0
  186. package/storybook-static/assets/http-request-DNq59pnj.js +1 -0
  187. package/storybook-static/assets/http-request.stories-B2ke7LtS.js +281 -0
  188. package/storybook-static/assets/iframe-D4Sos1HO.js +2 -0
  189. package/storybook-static/assets/index-BnXBQqj9.js +605 -0
  190. package/storybook-static/assets/index-C8k3Z-3Y.js +28 -0
  191. package/storybook-static/assets/index-Cpxqn5iQ.js +1 -0
  192. package/storybook-static/assets/{index-DXimoRZY.js → index-D-8MO0q_.js} +1 -1
  193. package/storybook-static/assets/index-DGdNYaqV.js +8 -0
  194. package/storybook-static/assets/index-Dz4OaB2k.js +1 -0
  195. package/storybook-static/assets/index-sm7QlJZE.js +1 -0
  196. package/storybook-static/assets/lit-element-DzhCn-8W.js +19 -0
  197. package/storybook-static/assets/{local-storage.test.stories-Cs2v3QTS.js → local-storage.test.stories-BpogLNq-.js} +1 -1
  198. package/storybook-static/assets/location-element-hKpcXCdn.js +1 -0
  199. package/storybook-static/assets/{location-element.test.stories-WkrQDzJJ.js → location-element.test.stories-BiFvBop7.js} +9 -9
  200. package/storybook-static/assets/module-url.test.stories-BXoM34tX.js +208 -0
  201. package/storybook-static/assets/{preview-BKCN0mOr.js → preview-0Jj89qip.js} +1 -1
  202. package/storybook-static/assets/{preview-TCN6m6T-.js → preview-BJPLiuSt.js} +1 -1
  203. package/storybook-static/assets/{preview-BDY5ThwJ.js → preview-BMWqy4Bi.js} +1 -1
  204. package/storybook-static/assets/preview-BnWGZYux.js +1 -0
  205. package/storybook-static/assets/preview-Cg7hXPRq.js +2 -0
  206. package/storybook-static/assets/{preview-BAz7FMXc.js → preview-DB9FwMii.js} +1 -1
  207. package/storybook-static/assets/preview-Djh1_Tal.js +20 -0
  208. package/storybook-static/assets/{preview-DRnyIGXK.js → preview-oHxXRSIu.js} +15 -15
  209. package/storybook-static/assets/set-url.test.stories-Cg5Z0r7x.js +81 -0
  210. package/storybook-static/assets/{slice-events.test.stories-BRBBc0JT.js → slice-events.test.stories-D_ttGp3g.js} +1 -1
  211. package/storybook-static/assets/{slots.test.stories-r-i91k3y.js → slots.test.stories-DBNXOm0T.js} +1 -1
  212. package/storybook-static/assets/version-select.test.stories-CgV3UCim.js +109 -0
  213. package/storybook-static/confused.svg +1 -0
  214. package/storybook-static/demo/a.html +60 -0
  215. package/storybook-static/demo/b.html +13 -0
  216. package/storybook-static/demo/confused.svg +38 -0
  217. package/storybook-static/demo/data-slices.html +216 -0
  218. package/storybook-static/demo/dce-social-preview.png +0 -0
  219. package/storybook-static/demo/demo.css +26 -0
  220. package/storybook-static/demo/dom-merge.html +123 -0
  221. package/storybook-static/demo/embed-1.html +2 -0
  222. package/storybook-static/demo/external-template.html +239 -0
  223. package/storybook-static/demo/form.html +239 -0
  224. package/storybook-static/demo/hex-grid-dce.html +183 -0
  225. package/storybook-static/demo/hex-grid-transform.png +0 -0
  226. package/storybook-static/demo/hex-grid.html +66 -0
  227. package/storybook-static/demo/html-template.html +126 -0
  228. package/storybook-static/demo/html-template.xhtml +45 -0
  229. package/storybook-static/demo/html-template.xml +45 -0
  230. package/storybook-static/demo/http-request.html +143 -0
  231. package/storybook-static/demo/lib-dir/Smiley.svg +24 -0
  232. package/storybook-static/demo/lib-dir/embed-lib.html +34 -0
  233. package/storybook-static/demo/local-storage.html +218 -0
  234. package/storybook-static/demo/location-element.html +168 -0
  235. package/storybook-static/demo/logo.png +0 -0
  236. package/storybook-static/demo/module-url.html +215 -0
  237. package/storybook-static/demo/npm-versions-demo.html +105 -0
  238. package/storybook-static/demo/npm-versions.html +65 -0
  239. package/storybook-static/demo/parameters.html +70 -0
  240. package/storybook-static/demo/s.xml +28 -0
  241. package/storybook-static/demo/s.xslt +97 -0
  242. package/storybook-static/demo/s1.xslt +60 -0
  243. package/storybook-static/demo/scoped-css.html +169 -0
  244. package/storybook-static/demo/set-url.html +141 -0
  245. package/storybook-static/demo/ss.html +57 -0
  246. package/storybook-static/demo/table.xml +25 -0
  247. package/storybook-static/demo/table.xsl +293 -0
  248. package/storybook-static/demo/template.xsl +46 -0
  249. package/storybook-static/demo/tree.xml +25 -0
  250. package/storybook-static/demo/tree.xsl +33 -0
  251. package/storybook-static/demo/wc-square.svg +1 -0
  252. package/storybook-static/demo/xhtml-template.xhtml +45 -0
  253. package/storybook-static/demo/z.html +62 -0
  254. package/storybook-static/demo/z.js +9 -0
  255. package/storybook-static/demo/z.xml +60 -0
  256. package/storybook-static/embed-1.html +1 -2
  257. package/storybook-static/favicon.svg +1 -7
  258. package/storybook-static/iframe.html +42 -30
  259. package/storybook-static/index.html +36 -18
  260. package/storybook-static/index.json +1 -1
  261. package/storybook-static/mockServiceWorker.js +1 -1
  262. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  263. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  264. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  265. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  266. package/storybook-static/project.json +1 -1
  267. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +32 -32
  268. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +1 -1
  269. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  270. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +395 -43
  271. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +0 -18
  272. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  273. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +221 -22
  274. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  275. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  276. package/storybook-static/sb-manager/globals-module-info.js +995 -1
  277. package/storybook-static/sb-manager/globals-runtime.js +53525 -1
  278. package/storybook-static/sb-manager/globals.js +48 -1
  279. package/storybook-static/sb-manager/runtime.js +11884 -1
  280. package/storybook-static/sb-preview/globals.js +33 -1
  281. package/storybook-static/sb-preview/runtime.js +9437 -108
  282. package/vite.config.js +2 -1
  283. package/dist/custom-element-BDK7dcJN.cjs +0 -53
  284. package/dist/custom-element-DqtzLkTG.js +0 -471
  285. package/dist/location-element-2m0gWq_d.cjs +0 -1
  286. package/dist/location-element-nA_wsqBt.js +0 -49
  287. package/storybook-static/assets/Color-PRSJMWNM-y4ZsI1hY.js +0 -1
  288. package/storybook-static/assets/DocsRenderer-K4EAMTCU-VRGUwRrq.js +0 -2
  289. package/storybook-static/assets/WithTooltip-KJL26V4Q-xdXH9Ztt.js +0 -1
  290. package/storybook-static/assets/custom-element-BIxkVg7K.js +0 -219
  291. package/storybook-static/assets/formatter-2WMMO6ZP-CThVcQxM.js +0 -58
  292. package/storybook-static/assets/http-request.stories-sXA_Y-VM.js +0 -300
  293. package/storybook-static/assets/iframe-DcDTQOmA.js +0 -2
  294. package/storybook-static/assets/index-CUFHd5VD.js +0 -1
  295. package/storybook-static/assets/index-CVRyq5ci.js +0 -27
  296. package/storybook-static/assets/index-Cc7K62zD.js +0 -3
  297. package/storybook-static/assets/index-DPPi9iZu.js +0 -548
  298. package/storybook-static/assets/index-DuIEV_9C.js +0 -13
  299. package/storybook-static/assets/index-VWixWKZ7.js +0 -1
  300. package/storybook-static/assets/lit-element-CenEXOuS.js +0 -19
  301. package/storybook-static/assets/preview-B4GcaC1c.js +0 -1
  302. package/storybook-static/assets/preview-B63p-W8V.js +0 -20
  303. package/storybook-static/assets/preview-p-Bwze-K.js +0 -2
  304. package/storybook-static/assets/syntaxhighlighter-BP7B2CQK-OnioRcs9.js +0 -1
  305. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -3
  306. package/storybook-static/sb-common-assets/fonts.css +0 -31
  307. package/storybook-static/sb-manager/WithTooltip-KJL26V4Q-5LS5AN27.js +0 -1
  308. package/storybook-static/sb-manager/chunk-B3YDJJJH.js +0 -347
  309. package/storybook-static/sb-manager/chunk-BLWCBWKL.js +0 -9
  310. package/storybook-static/sb-manager/chunk-GUVK2GTO.js +0 -6
  311. package/storybook-static/sb-manager/chunk-LFRML3ZV.js +0 -186
  312. package/storybook-static/sb-manager/chunk-MC7RAF2B.js +0 -274
  313. package/storybook-static/sb-manager/chunk-ZR5JZWHI.js +0 -1
  314. package/storybook-static/sb-manager/formatter-2WMMO6ZP-JI7RHVTW.js +0 -58
  315. package/storybook-static/sb-manager/index.js +0 -1
  316. package/storybook-static/sb-manager/syntaxhighlighter-BP7B2CQK-WOJYHKQR.js +0 -1
  317. /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/dist/demo/data-slices.html ADDED
@@ -0,0 +1,216 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>Data slices - 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
+ </style>
13
+ </head>
14
+ <body>
15
+
16
+ <nav>
17
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
18
+ <h3>Data slices propagation by events.</h3>
19
+ </nav>
20
+
21
+ <html-demo-element legend="A. slice initialization, change on event"
22
+ description="initial value should be 0; + and - should change the number in input field">
23
+ <template>
24
+ <custom-element>
25
+ <template>
26
+ <button slice="clickcount"
27
+ slice-event="click"
28
+ slice-value="//clickcount + 1" >
29
+ +
30
+ </button>
31
+ <button slice="clickcount"
32
+ slice-event="click"
33
+ slice-value="//clickcount - 1" >
34
+ -
35
+ </button>
36
+ <input slice="clickcount" type="number" value="{//clickcount ?? 0}" />
37
+ {//clickcount}
38
+ </template>
39
+ </custom-element>
40
+ </template>
41
+ </html-demo-element>
42
+
43
+ <html-demo-element legend="B. slice event data."
44
+ description="move the mouse over TEXTAREA and click to see slice and slice event changed">
45
+ <template>
46
+ <custom-element>
47
+ <template>
48
+ <textarea slice="s" slice-value="concat('x:', //@pageX)"
49
+ slice-event="mousemove click"
50
+ style="width:16rem;height:16rem;box-shadow: inset {//@offsetX}px {//@offsetY}px gold;" ></textarea><br/>
51
+ //slice/s : {//slice/s} <br/>
52
+ //slice/s/event/@offsetY: {//slice/s/event/@offsetY} <br/>
53
+ event type:{//slice/s/event/@type}
54
+ </template>
55
+ </custom-element>
56
+ </template>
57
+ </html-demo-element>
58
+
59
+ <html-demo-element legend="1. slice change on event. 1:1 slice⮂value"
60
+ description="initial value blank; type and unfocus to see slice changed">
61
+ <template>
62
+
63
+ <custom-element>
64
+ <input slice="typed" /> //slice/typed : {//slice/typed}
65
+ </custom-element>
66
+ </template>
67
+ </html-demo-element>
68
+
69
+
70
+ <html-demo-element legend="2. initial slice value, slice change on event. slice⮂value, w/ initial"
71
+ description="initial value from input; type and unfocus to see slice changed">
72
+ <template>
73
+ <custom-element>
74
+ <input slice="s" value="{//s ?? 'B'}" /> //slice/s : {//slice/s}
75
+ </custom-element>
76
+ </template>
77
+ </html-demo-element>
78
+
79
+ <html-demo-element legend="3. initial slice value, slice change on event. slice⮂value, w/ initial"
80
+ description="initial value from input; type to see slice changed">
81
+ <template>
82
+ <custom-element>
83
+ <input slice="s" value="{//s ?? 'B'}" slice-event="input"/> //slice/s : {//slice/s}
84
+ </custom-element>
85
+ </template>
86
+ </html-demo-element>
87
+
88
+ <html-demo-element legend="4. initial slice value from attribute, slice change on event."
89
+ description="initial value from input; type to see slice changed">
90
+ <template>
91
+ <custom-element tag="dce-1">
92
+ <template>
93
+ <attribute name="a" >😁</attribute>
94
+ <input slice="s" value="{//s ?? $a}" slice-event="keyup" />
95
+ attribute 'a' : {$a}
96
+ //slice/s : {//slice/s}
97
+ </template>
98
+ </custom-element>
99
+ <dce-1></dce-1>
100
+ <dce-1 a="🤗"></dce-1>
101
+ </template>
102
+ </html-demo-element>
103
+
104
+ <html-demo-element legend="5. initial slice value from attribute, slice change on event."
105
+ description="initial value from input as 'xB'; type and unfocus to see slice changed">
106
+ <template>
107
+ <custom-element>
108
+ <template>
109
+ <input slice="s" value="{substring(//s, 2) ?? 'B'}" slice-value="concat('x', @value )" />
110
+ //slice/s : {//slice/s}
111
+ </template>
112
+ </custom-element>
113
+ </template>
114
+ </html-demo-element>
115
+
116
+
117
+ <html-demo-element legend="6. initial slice value from input, button ignored till change on click."
118
+ description="initial value from input as 'anonymous'; on button click change to 'broccoli'">
119
+ <template>
120
+ <custom-element>
121
+ <template>
122
+ <input slice="nickname" value="anonymous" />
123
+ <button slice="nickname" slice-value="'broccoli'" slice-event="click">🥦</button>
124
+ {//nickname}
125
+ </template>
126
+ </custom-element>
127
+ </template>
128
+ </html-demo-element>
129
+
130
+ <html-demo-element legend="7. initial slice value from SLICE element, button ignored till change on click."
131
+ description="synthetic SLICE element serves as initial value holder">
132
+ <template>
133
+ <custom-element>
134
+ <template>
135
+ <button slice="clickcount" slice-event="click tap" slice-value="//clickcount + 1">
136
+ <slice slice="clickcount" value="0" ></slice>
137
+ click/tap
138
+ </button>
139
+ //clickcount : {//clickcount}
140
+ </template>
141
+ </custom-element>
142
+ </template>
143
+ </html-demo-element>
144
+
145
+ <html-demo-element legend="8. multiple slices by SLICE element, button ignored till change on click."
146
+ description="synthetic SLICE elements serve as initial value holder">
147
+ <template>
148
+ <custom-element>
149
+ <template>
150
+ <button>
151
+ <slice slice="clicked" value="{0}" ></slice>
152
+ <slice slice="focused" value="{0}" ></slice>
153
+ <slice slice-event="click tap" slice="clicked" slice-value="//clicked+1" ></slice>
154
+ <slice slice-event="focus" slice="focused" slice-value="1" ></slice>
155
+ <slice slice-event="blur" slice="focused" slice-value="0" ></slice>
156
+ click/tap, focus/blur
157
+ </button> <br/>
158
+ //clicked : {//clicked} <br/>
159
+ //focused : {//focused}
160
+ </template>
161
+ </custom-element>
162
+ </template>
163
+ </html-demo-element>
164
+
165
+
166
+ <html-demo-element legend="9. slice in attribute"
167
+ description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
168
+ <template>
169
+ <custom-element tag="emotional-element">
170
+ <template>
171
+ <attribute name="emotion" select="//emotion ?? '😃'"></attribute>
172
+ <input slice="/datadom/attributes/emotion"/>
173
+ Type and unfocus to update emotion attribute: {emotion}
174
+ </template>
175
+ </custom-element>
176
+ <emotional-element emotion=":)"></emotional-element>
177
+ <emotional-element></emotional-element>
178
+ </template>
179
+ </html-demo-element>
180
+
181
+
182
+ <html-demo-element legend="10. multiple slices by same field"
183
+ description="same element value sets s1 and s2 slice">
184
+ <template>
185
+ <custom-element>
186
+ <template>
187
+ <input slice="s1|s2"
188
+ slice-event="input"
189
+ data-testid="f1"
190
+ /><br/>
191
+ Type to update s1 and s2 slices <br/>
192
+ slice <code>s1: {//slice/s1}</code><br/>
193
+ slice <code>s2: {//slice/s2}</code><br/>
194
+ </template>
195
+ </custom-element>
196
+ </template>
197
+ </html-demo-element>
198
+
199
+ <html-demo-element legend="11. slices and attribute"
200
+ description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
201
+ <template>
202
+ <custom-element>
203
+ <template>
204
+ <attribute name="emotion">😃</attribute>
205
+ <input slice="/datadom/attributes/emotion | s1"/>
206
+ Type and unfocus to update emotion attribute: {emotion}
207
+ and slice: {//slice/s1}
208
+ </template>
209
+ </custom-element>
210
+ </template>
211
+ </html-demo-element>
212
+
213
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
214
+
215
+ </body>
216
+ </html>
package/dist/demo/dce-social-preview.png ADDED
Binary file
package/dist/demo/demo.css ADDED
@@ -0,0 +1,26 @@
1
+ html
2
+ { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
3
+ font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased;
4
+ }
5
+ body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
6
+ body>*{flex: auto;}
7
+ nav{ flex-direction: column;}
8
+ custom-element+*,
9
+ custom-element+*+*,
10
+ custom-element:not([tag]),
11
+ dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile,
12
+ dce-1,dce-2,dce-3,dce-4,dce-internal,dce-hash
13
+ { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block; flex:1; }
14
+ script{ display:none !important; }
15
+ dd{ padding: 1rem;}
16
+ p{ margin: 0;}
17
+ code{ font-weight: bold; color: green; text-wrap: nowrap; }
18
+ *{
19
+ gap: 1rem;
20
+ }
21
+
22
+ html-demo-element h3
23
+ { text-shadow: 0 0 0.25em white;
24
+ letter-spacing: 0.1rem;
25
+ }
26
+ *[slot="demo"]{ display: flex; gap: 1rem; flex-wrap: wrap; }
package/dist/demo/dom-merge.html ADDED
@@ -0,0 +1,123 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>DOM merge - 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;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ flex: auto;
18
+ box-shadow: inset silver 0 0 1rem;
19
+ min-width: 12rem;
20
+ padding: 1rem;
21
+ color: coral;
22
+ text-shadow: 1px 1px silver;
23
+ font-weight: bolder;
24
+ }
25
+
26
+ button img {
27
+ max-height: 10vw;
28
+ min-height: 4rem;
29
+ }
30
+
31
+ table {
32
+ min-width: 16rem;
33
+ }
34
+
35
+ td {
36
+ border-bottom: 1px solid silver;
37
+ }
38
+
39
+ tfoot td {
40
+ border-bottom: none;
41
+ }
42
+
43
+ td, th {
44
+ text-align: right;
45
+ }
46
+
47
+ caption {
48
+ padding: 1rem;
49
+ font-weight: bolder;
50
+ font-family: sans-serif;
51
+ }
52
+
53
+ code {
54
+ text-align: right;
55
+ min-width: 3rem;
56
+ }
57
+
58
+ svg {
59
+ max-height: 3rem;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+
65
+ <nav>
66
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
67
+ <h3>DOM merge. DCE dynamic update with focus preservation.</h3>
68
+ </nav>
69
+
70
+ <html-demo-element legend="1. Word count in textarea"
71
+ description="Counter update happens on change event(focus change).
72
+ The update should not interfere with the input">
73
+ <template>
74
+ <custom-element>
75
+ <form>
76
+ <label>
77
+ <textarea slice="text-container" >Hello world!</textarea>
78
+ <span> Word count:
79
+ {string-length(//slice/text-container/text())}
80
+ </span>
81
+ </label>
82
+ </form>
83
+ </custom-element>
84
+ </template>
85
+ </html-demo-element>
86
+ <hr/>
87
+
88
+ <html-demo-element legend="2. Word count in HTML input field"
89
+ description="Counter update happens on keyup event.
90
+ The update should not interfere with the input">
91
+ <template>
92
+ <custom-element>
93
+ <form>
94
+ <label>
95
+ <input type="text"
96
+ value="{//txt ?? 'Type time update'}"
97
+ slice="txt"
98
+ slice-event="init input"/>
99
+
100
+ <span> Character count:
101
+ <b> {string-length(//slice/txt)} </b>
102
+ </span>
103
+ <span> Word count:
104
+ <b> {string-length(normalize-space(//slice/txt)) -
105
+ string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1} </b>
106
+ <!-- The expression first normalizes the string by removing leading and trailing whitespace and
107
+ collapsing internal whitespace into a single space. It then subtracts the length of the string
108
+ with all spaces removed from the length of the original string,
109
+ and adds 1 to account for the last word.
110
+ -->
111
+ </span>
112
+
113
+ </label>
114
+ <p><b>txt</b> slice:</p> <blockquote> {//slice/txt} </blockquote>
115
+ </form>
116
+ </custom-element>
117
+ </template>
118
+ </html-demo-element>
119
+
120
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
121
+
122
+ </body>
123
+ </html>
package/dist/demo/embed-1.html ADDED
@@ -0,0 +1,2 @@
1
+ <h4>embed-1.html</h4>
2
+ <custom-element><template>🖖</template></custom-element>
package/dist/demo/external-template.html ADDED
@@ -0,0 +1,239 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ flex: auto;
18
+ box-shadow: inset silver 0 0 1rem;
19
+ min-width: 12rem;
20
+ padding: 1rem;
21
+ color: coral;
22
+ text-shadow: 1px 1px silver;
23
+ font-weight: bolder;
24
+ }
25
+
26
+ button img {
27
+ max-height: 10vw;
28
+ min-height: 4rem;
29
+ }
30
+
31
+ table {
32
+ min-width: 16rem;
33
+ }
34
+
35
+ td {
36
+ border-bottom: 1px solid silver;
37
+ }
38
+
39
+ tfoot td {
40
+ border-bottom: none;
41
+ }
42
+
43
+ td, th {
44
+ text-align: right;
45
+ }
46
+
47
+ caption {
48
+ padding: 1rem;
49
+ font-weight: bolder;
50
+ font-family: sans-serif;
51
+ }
52
+
53
+ code {
54
+ text-align: right;
55
+ min-width: 3rem;
56
+ }
57
+
58
+ svg {
59
+ max-height: 3rem;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+
65
+ <nav>
66
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
67
+ <h3>Loading DCE template by SRC attribute</h3>
68
+ </nav>
69
+
70
+ <html-demo-element legend="1. reference the template in page DOM"
71
+ description="should render hand wave with '👋 World!' and 'Hello World!'">
72
+ <template>
73
+ <template id="template1">
74
+ <slot> Hello</slot>
75
+ World!
76
+ </template>
77
+
78
+ <custom-element tag="dce-internal" src="#template1"></custom-element>
79
+ <!-- no need for loading fallback as the template exists -->
80
+
81
+ <dce-internal>👋</dce-internal>
82
+ <dce-internal></dce-internal>
83
+ </template>
84
+ </html-demo-element>
85
+
86
+
87
+ <html-demo-element legend="2. without TAG, inline instantiation"
88
+ description="hash value in SRC references template by ID. Should output 'construction' 2 times">
89
+ <template>
90
+ <template id="template2">
91
+ 🏗️ construction
92
+ </template>
93
+
94
+ <custom-element src="#template2"></custom-element>
95
+ <custom-element src="#template2"></custom-element>
96
+ </template>
97
+ </html-demo-element>
98
+
99
+ <html-demo-element legend="3. external SVG file">
100
+ <template>
101
+ <custom-element tag="dce-external" src="confused.svg">
102
+ <template><i>loading from SVG ...</i></template>
103
+ </custom-element>
104
+ <dce-external></dce-external>
105
+ <custom-element src="confused.svg">
106
+ <i>inline DCE loading from SVG ...</i>
107
+ </custom-element>
108
+ <custom-element src="no.svg">
109
+ <i>fallback for missing image</i>
110
+ </custom-element>
111
+ </template>
112
+ </html-demo-element>
113
+
114
+ <html-demo-element legend="4. external XSLT file"
115
+ description="This external templates generated the tree for DCE data set"
116
+ >
117
+ <a href="tree.xsl">tree.xsl</a>
118
+ <template>
119
+ <custom-element tag="dce-external-4" src="tree.xsl">
120
+ <template><i>loading from XSLT ...</i></template>
121
+ </custom-element>
122
+ <dce-external-4 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-4>
123
+ <custom-element src="tree.xsl" data-smile="👼" data-basket="🍒">
124
+ <i>inline DCE loading from XSLT ...</i>
125
+ </custom-element>
126
+ </template>
127
+ </html-demo-element>
128
+
129
+ <html-demo-element legend="5. external HTML template" description="Should render 👋👌, svg, formula">
130
+ <template>
131
+ <custom-element tag="dce-external-5" src="html-template.html">
132
+ <template><i>loading from HTML file ...</i></template>
133
+ </custom-element>
134
+ <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
135
+ <custom-element src="html-template.html" data-smile="👼" data-basket="🍒">
136
+ <i>inline DCE loading from HTML file ...</i>
137
+ </custom-element>
138
+ </template>
139
+ </html-demo-element>
140
+
141
+ <html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg, formula">
142
+ <a href="html-template.html">html-template.html</a>
143
+ <template>
144
+ <custom-element src="html-template.html#wave">
145
+ <template><i>loading HTML from templates file ...</i></template>
146
+ </custom-element>
147
+ <custom-element src="html-template.html#dwc-logo">
148
+ <template><i>loading SVG from templates file ...</i></template>
149
+ </custom-element>
150
+ <custom-element src="html-template.html#sophomores-dream">
151
+ <template><i>loading MathML from HTML file ...</i></template>
152
+ </custom-element>
153
+ </template>
154
+ </html-demo-element>
155
+ <html-demo-element legend="7. XSLT by ID within external file" description="Should render tree, and fallback">
156
+ <a href="html-template.html">html-template.html</a>
157
+ <template>
158
+ <custom-element src="html-template.xhtml#embedded-xsl">
159
+ <template>whole XSLT is embedded into HTML body</template>
160
+ </custom-element>
161
+ <custom-element src="html-template.html#none">
162
+ <template><i>element with id=none is missing in template</i></template>
163
+ </custom-element>
164
+ </template>
165
+ </html-demo-element>
166
+
167
+ <html-demo-element legend="8. external file with embedding of another external DCE"
168
+ description="Should render Vulcan Salute 🖖"
169
+ >
170
+ <template>
171
+ <custom-element src="embed-1.html">
172
+ loading from embed-1.html ...
173
+ </custom-element>
174
+ </template>
175
+ </html-demo-element>
176
+
177
+
178
+ <html-demo-element legend="9. external file with invoking of relative template as hash by enclosed custom-element"
179
+ description="Should render Vulcan Salute 🖖"
180
+ >
181
+ <template>
182
+ <custom-element src="./lib-dir/embed-lib.html#embed-relative-hash">
183
+ loading from embed-1.html ...
184
+ </custom-element>
185
+ </template>
186
+ </html-demo-element>
187
+
188
+ <html-demo-element
189
+ legend="10. external file with invoking of template in another relative path file by enclosed custom-element"
190
+ description="Should render Vulcan Salute 🖖"
191
+ >
192
+ <template>
193
+ <custom-element src="./lib-dir/embed-lib.html#embed-relative-file">
194
+ loading from ./lib-dir/embed-lib.html ...
195
+ </custom-element>
196
+ </template>
197
+ </html-demo-element>
198
+
199
+
200
+ <html-demo-element legend="embed-1.html external file" src="embed-1.html"></html-demo-element>
201
+ <html-demo-element legend="embed-lib.html with multiple templates" src="embed-lib.html"></html-demo-element>
202
+ <!--
203
+ <html-demo-element legend="9. deep external files, complex rendering" >
204
+ <template>
205
+ <custom-element src="../index.html#shared-template" hidden>
206
+ loading by hash from ../index.html#shared-template ...
207
+ </custom-element>
208
+ </template>
209
+ </html-demo-element>
210
+
211
+ <html-demo-element legend="9. own import maps" >
212
+ <template>
213
+ <custom-element src="../index.html#shared-template" hidden>
214
+ loading by hash from ../index.html#shared-template ...
215
+ </custom-element>
216
+ </template>
217
+ </html-demo-element>
218
+
219
+ <html-demo-element legend="10. deep external files with own import maps" >
220
+ <template>
221
+ <custom-element src="../index.html#shared-template" hidden>
222
+ loading by hash from ../index.html#shared-template ...
223
+ </custom-element>
224
+ </template>
225
+ </html-demo-element>
226
+
227
+ <html-demo-element legend="11. local template as a 'loading...' or fallback for remote, error handling" >
228
+ <template>
229
+ <custom-element src="../index.html#shared-template" hidden>
230
+ loading by hash from ../index.html#shared-template ...
231
+ </custom-element>
232
+ </template>
233
+ </html-demo-element>
234
+
235
+ -->
236
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
237
+
238
+ </body>
239
+ </html>