@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/src/custom-element/demo/external-template.html CHANGED
@@ -3,26 +3,61 @@
3
3
  <head>
4
4
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
5
  <title>http-request Declarative Custom Element implementation demo</title>
6
- <link rel="icon" href="./wc-square.svg" />
6
+ <link rel="icon" href="./wc-square.svg"/>
7
7
 
8
8
  <script type="module" src="../http-request.js"></script>
9
9
  <script type="module" src="../custom-element.js"></script>
10
10
  <style>
11
11
  @import "./demo.css";
12
12
 
13
- button
14
- { display: inline-flex; flex-direction: column; align-items: center; flex: auto;
15
- box-shadow: inset silver 0 0 1rem; min-width: 12rem; padding: 1rem;
16
- color: coral; text-shadow: 1px 1px silver; font-weight: bolder;
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;
17
60
  }
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
- code{ text-align: right; min-width: 3rem;}
25
- svg{ max-height: 3rem;}
26
61
  </style>
27
62
  </head>
28
63
  <body>
@@ -35,15 +70,16 @@
35
70
  <html-demo-element legend="1. reference the template in page DOM"
36
71
  description="should render hand wave with '👋 World!' and 'Hello World!'">
37
72
  <template>
38
- <template id="template1">
39
- <slot> Hello </slot> World!
40
- </template>
73
+ <template id="template1">
74
+ <slot> Hello</slot>
75
+ World!
76
+ </template>
41
77
 
42
- <custom-element tag="dce-internal" src="#template1"></custom-element>
43
- <!-- no need for loading fallback as the template exists -->
78
+ <custom-element tag="dce-internal" src="#template1"></custom-element>
79
+ <!-- no need for loading fallback as the template exists -->
44
80
 
45
- <dce-internal>👋</dce-internal>
46
- <dce-internal></dce-internal>
81
+ <dce-internal>👋</dce-internal>
82
+ <dce-internal></dce-internal>
47
83
  </template>
48
84
  </html-demo-element>
49
85
 
@@ -51,67 +87,67 @@
51
87
  <html-demo-element legend="2. without TAG, inline instantiation"
52
88
  description="hash value in SRC references template by ID. Should output 'construction' 2 times">
53
89
  <template>
54
- <template id="template2">
55
- 🏗️ construction
56
- </template>
90
+ <template id="template2">
91
+ 🏗️ construction
92
+ </template>
57
93
 
58
- <custom-element src="#template2"></custom-element>
59
- <custom-element src="#template2"></custom-element>
94
+ <custom-element src="#template2"></custom-element>
95
+ <custom-element src="#template2"></custom-element>
60
96
  </template>
61
97
  </html-demo-element>
62
98
 
63
- <html-demo-element legend="3. external SVG file" >
99
+ <html-demo-element legend="3. external SVG file">
64
100
  <template>
65
- <custom-element tag="dce-external" src="confused.svg" >
66
- <template><i>loading from SVG ...</i></template>
67
- </custom-element>
68
- <dce-external></dce-external>
69
- <custom-element src="confused.svg" >
70
- <i>inline DCE loading from SVG ...</i>
71
- </custom-element>
72
- <custom-element src="no.svg" >
73
- <i>fallback for missing image</i>
74
- </custom-element>
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>
75
111
  </template>
76
112
  </html-demo-element>
77
113
 
78
114
  <html-demo-element legend="4. external XSLT file"
79
115
  description="This external templates generated the tree for DCE data set"
80
- >
116
+ >
81
117
  <a href="tree.xsl">tree.xsl</a>
82
118
  <template>
83
- <custom-element tag="dce-external-4" src="tree.xsl" >
84
- <template><i>loading from XSLT ...</i></template>
85
- </custom-element>
86
- <dce-external-4 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-4>
87
- <custom-element src="tree.xsl" data-smile="👼" data-basket="🍒">
88
- <i>inline DCE loading from XSLT ...</i>
89
- </custom-element>
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>
90
126
  </template>
91
127
  </html-demo-element>
92
128
 
93
129
  <html-demo-element legend="5. external HTML template" description="Should render 👋👌, svg, formula">
94
130
  <template>
95
- <custom-element tag="dce-external-5" src="html-template.html" >
96
- <template><i>loading from HTML file ...</i></template>
97
- </custom-element>
98
- <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
99
- <custom-element src="html-template.html" data-smile="👼" data-basket="🍒">
100
- <i>inline DCE loading from HTML file ...</i>
101
- </custom-element>
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>
102
138
  </template>
103
139
  </html-demo-element>
104
140
 
105
141
  <html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg, formula">
106
142
  <a href="html-template.html">html-template.html</a>
107
143
  <template>
108
- <custom-element src="html-template.html#wave" >
144
+ <custom-element src="html-template.html#wave">
109
145
  <template><i>loading HTML from templates file ...</i></template>
110
146
  </custom-element>
111
- <custom-element src="html-template.html#dwc-logo" >
112
- <template><i>loading SVG from templates file ...</i></template>
147
+ <custom-element src="html-template.html#dwc-logo">
148
+ <template><i>loading SVG from templates file ...</i></template>
113
149
  </custom-element>
114
- <custom-element src="html-template.html#sophomores-dream" >
150
+ <custom-element src="html-template.html#sophomores-dream">
115
151
  <template><i>loading MathML from HTML file ...</i></template>
116
152
  </custom-element>
117
153
  </template>
@@ -119,10 +155,10 @@
119
155
  <html-demo-element legend="7. XSLT by ID within external file" description="Should render tree, and fallback">
120
156
  <a href="html-template.html">html-template.html</a>
121
157
  <template>
122
- <custom-element src="html-template.xhtml#embedded-xsl" >
123
- <template>whole XSLT is embedded into HTML body</template>
158
+ <custom-element src="html-template.xhtml#embedded-xsl">
159
+ <template>whole XSLT is embedded into HTML body</template>
124
160
  </custom-element>
125
- <custom-element src="html-template.html#none" >
161
+ <custom-element src="html-template.html#none">
126
162
  <template><i>element with id=none is missing in template</i></template>
127
163
  </custom-element>
128
164
  </template>
@@ -132,13 +168,37 @@
132
168
  description="Should render Vulcan Salute 🖖"
133
169
  >
134
170
  <template>
135
- <custom-element src="embed-1.html" >
136
- loading from embed-1.html ...
137
- </custom-element>
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>
138
185
  </template>
139
186
  </html-demo-element>
140
- <html-demo-element legend="embed-1.html external file " src="embed-1.html">
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>
141
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>
142
202
  <!--
143
203
  <html-demo-element legend="9. deep external files, complex rendering" >
144
204
  <template>
package/src/custom-element/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/src/custom-element/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/src/custom-element/demo/location-element.html CHANGED
@@ -22,7 +22,19 @@
22
22
  <nav>
23
23
  <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
24
24
  </nav>
25
- <html-demo-element legend="Change window URL">
25
+ <main>
26
+ <h3>How to get the page URL by location-element?</h3>
27
+ Answer: by defining following attributes:
28
+ <ol>
29
+ <li><code>slice</code> to one of values provided bellow</li>
30
+ <li><code>src</code> optionally with URL, If omitted, it would match the <code>window.location.href</code> </li>
31
+ </ol>
32
+ URL properties would be a part of slice data.
33
+ <p><a href="./set-url.html">Set page URL demo</a> </p>
34
+ </main>
35
+ <html-demo-element legend="Change window URL"
36
+ description="use browser URL bar or those controls to change the page URL"
37
+ >
26
38
  <template>
27
39
  <a href="#dce2">#dce2</a>
28
40
  <form method="get">
@@ -40,7 +52,8 @@
40
52
 
41
53
 
42
54
  <html-demo-element legend="1. window.location live update"
43
- description="In the page beginning change the window URL via link or by history change"
55
+ description="Change the window URL via link or history change by controls in #1.
56
+ Observe the changes detected by location-element slice."
44
57
  id="dce2"
45
58
  >
46
59
  <p>Has to produce URL properties</p>
@@ -48,7 +61,7 @@
48
61
  <custom-element tag="dce-2" hidden>
49
62
  <template>
50
63
 
51
- <location-element slice="window-url" live></location-element>
64
+ <location-element slice="window-url" live method="" src=""></location-element>
52
65
 
53
66
  <xhtml:table>
54
67
  <xhtml:tbody>
@@ -121,7 +134,7 @@
121
134
  <custom-element tag="dce-3" hidden>
122
135
  <template>
123
136
 
124
- <location-element slice="href-url" href="https://my.example?a=1&b=2#3"></location-element>
137
+ <location-element slice="href-url" href="https://my.example?a=1&b=2#3" ></location-element>
125
138
 
126
139
  <xhtml:table>
127
140
  <xhtml:tbody>
package/src/custom-element/demo/module-url.html ADDED
@@ -0,0 +1,215 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
3
+ xmlns:xhtml="http://www.w3.org/1999/xhtml">
4
+ <head>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6
+ <title>importmap custom-element Declarative Custom Element implementation demo</title>
7
+ <link rel="icon" href="./wc-square.svg"/>
8
+ <script type="importmap">
9
+ {
10
+ "imports": {
11
+ "lib-root/": "./lib-dir/",
12
+ "embed-lib": "./lib-dir/embed-lib.html"
13
+ }
14
+ }
15
+ </script>
16
+ <script type="module" src="../location-element.js"></script>
17
+ <script type="module" src="../module-url.js"></script>
18
+ <script type="module" src="../custom-element.js"></script>
19
+
20
+ <style>
21
+ @import "./demo.css";
22
+
23
+ dce-root {
24
+ box-shadow: 0 0 0.5rem lime;
25
+ padding: 1rem;
26
+ display: inline-block;
27
+ }
28
+ main {
29
+ display: flex;
30
+ flex-wrap: wrap;
31
+ &>section{
32
+ flex:1 20rem;
33
+ }
34
+ }
35
+ </style>
36
+
37
+ </head>
38
+ <body>
39
+
40
+ <nav>
41
+ <h3><a href="../index.html"><code>custom-element</code> demo</a>, <code>importmap</code></h3>
42
+ </nav>
43
+ <main>
44
+ <section>
45
+ <h3>How to get the module URL for <code>custom-element</code>?</h3>
46
+ Answer: by defining following attributes in <code>module-url</code>:
47
+ <ol>
48
+ <li><code>src</code> with path to module resource, If omitted, it would match the
49
+ <code>window.location.href</code></li>
50
+ <li><code>slice</code> to read the URL</li>
51
+ </ol>
52
+ URL properties would be a part of slice data, the value would be a full URL.
53
+ </section><section>
54
+ <h3>Where to use <code>module-url</code>?</h3>
55
+ Answer: to inject the library resources URL into generated HTML.
56
+ <p><a
57
+ href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps"
58
+ >Import maps </a> are used for defining the dependencies location on the web page level.
59
+ This way dependencies could reside on different CDN path or even domains while in the code would be
60
+ referenced
61
+ by symbolic package name.
62
+ See the CDN example bellow.</p>
63
+ <br/>
64
+ <p>The resolving of import maps is done by
65
+ <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta/resolve">import.meta.resolve(path)</a>
66
+ </p>
67
+ </section><section>
68
+ <h3>Where NOT to use <code>module-url</code>?</h3>
69
+ Answer:
70
+ <ol>
71
+ <li> in <code>scr</code> attribute of &lt;custom-element &gt;<br/>
72
+ - It uses the same module resolving mechanism
73
+ </li>
74
+ <li> for getting/setting the page URL,<br/>
75
+ - see <a href="./set-url.html">How to set page URL in <code>custom-element</code>?</a>
76
+
77
+ </li>
78
+ </ol>
79
+
80
+ <h3>See also</h3>
81
+ <p><a href="./external-template.html">How to use external templates?</a></p>
82
+ </section>
83
+ <section>
84
+ <html-demo-element legend="this page import maps"
85
+ >
86
+ <template>
87
+ {
88
+ "imports": {
89
+ "lib-root": "./lib-dir/",
90
+ "embed-lib": "./lib-dir/embed-lib.html"
91
+ }
92
+ }
93
+ </template>
94
+ </html-demo-element>
95
+ </section>
96
+ </main>
97
+
98
+
99
+ <html-demo-element legend="1. relative to page path"
100
+ description="Should render Vulcan Salute 🖖 with link to embed-1.html, link should open the page"
101
+ >
102
+ <template>
103
+ <custom-element>
104
+ <a href="./embed-1.html">
105
+ <custom-element src="./embed-1.html"></custom-element>
106
+ </a>
107
+ </custom-element>
108
+ </template>
109
+ </html-demo-element>
110
+
111
+ <html-demo-element legend="2. module by symbolic name"
112
+ description="should render '👋 from embed-lib-component' as link to 'demo-lib/embed-lib.html', link should open the page "
113
+ >
114
+ <p><code>embed-lib</code> resolved to <code>./lib-dir/embed-lib.html</code> by page <i>importmap</i></p>
115
+ <template>
116
+ <custom-element>
117
+ <template>
118
+ <module-url slice="lib-url" src="embed-lib"></module-url>
119
+ <if test="//lib-url/@error">
120
+ <p>error: <b>{//lib-url/@error}</b></p>
121
+ </if>
122
+ check the link:
123
+ <a href="{//lib-url}">
124
+ <custom-element src="embed-lib#embed-lib-component">
125
+ failed to load
126
+ </custom-element>
127
+ </a>
128
+ </template>
129
+ </custom-element>
130
+
131
+ </template>
132
+ </html-demo-element>
133
+
134
+ <html-demo-element legend="3. module by symbolic name with missing importmap entry"
135
+ description="should render error message and `failed to load` broken link "
136
+ >
137
+ <p>As <code>fakedemo-lib</code> is not in importmaps, the symbolic name is not resolved and renders the error</p>
138
+
139
+ <template>
140
+ <custom-element>
141
+ <template>
142
+ <module-url slice="lib-url" src="fakedemo-lib/embed-lib.html"></module-url>
143
+ <if test="//lib-url/@error">
144
+ <p>error: <b>{//lib-url/@error}</b></p>
145
+ </if>
146
+ the link is broken:
147
+ <a href="{//lib-url}">
148
+ <custom-element src="fakedemo-lib/embed-lib.html#embed-lib-component">
149
+ failed to load
150
+ </custom-element>
151
+ </a>
152
+ </template>
153
+ </custom-element>
154
+ </template>
155
+ </html-demo-element>
156
+
157
+
158
+ <html-demo-element legend="4. module path by symbolic name"
159
+ description="should render two smiley images and links should open matching page"
160
+ >
161
+ <p><code>lib-root</code> resolved to <code>lib-dir</code> by page <i>importmap</i></p>
162
+ <template>
163
+ <custom-element>
164
+ <template>
165
+ <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-hash"></module-url>
166
+ <module-url slice="img-url" src="lib-root/Smiley.svg"></module-url>
167
+ <if test="//lib-url/@error">
168
+ <p>error: <b>{//lib-url/@error}</b></p>
169
+ </if>
170
+ check the link:
171
+ <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-hash <img src="{//img-url}" alt=""/></a>
172
+ <custom-element src="lib-root/embed-lib.html#embed-relative-hash">
173
+ failed to load
174
+ </custom-element>
175
+
176
+ </template>
177
+ </custom-element>
178
+
179
+ </template>
180
+ </html-demo-element>
181
+
182
+ <html-demo-element legend="5. module path by symbolic name to internal link within lib"
183
+ description="should render '👍 from embed-relative-file' and Vulcan Salute 🖖. Links should open matching page "
184
+ >
185
+ <template>
186
+ <custom-element>
187
+ <template>
188
+ <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-file"></module-url>
189
+ <if test="//lib-url/@error">
190
+ <p>error: <b>{//lib-url/@error}</b></p>
191
+ </if>
192
+ check the link:
193
+ <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-file </a>
194
+ <custom-element src="lib-root/embed-lib.html#embed-relative-file">
195
+ failed to load
196
+ </custom-element>
197
+
198
+ </template>
199
+ </custom-element>
200
+
201
+ </template>
202
+ </html-demo-element>
203
+
204
+
205
+ <html-demo-element src="./lib-dir/embed-lib.html"
206
+ legend="./lib-dir/embed-lib.html"
207
+ description="resides within ./lib-dir and serves a sample of module with multiple templates"
208
+ >
209
+
210
+ </html-demo-element>
211
+
212
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
213
+
214
+ </body>
215
+ </html>