@epa-wg/custom-element-dist 0.0.25 → 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 (304) hide show
  1. package/.storybook/main.ts +1 -3
  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 +12 -9
  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 +422 -371
  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 +10 -10
  17. package/coverage/src/custom-element/index.html +31 -16
  18. package/coverage/src/custom-element/local-storage.js.html +1 -1
  19. package/coverage/src/custom-element/location-element.js.html +3 -3
  20. package/coverage/src/custom-element/module-url.js/coverage.svg +10 -0
  21. package/coverage/src/custom-element/module-url.js.html +181 -0
  22. package/coverage/src/index.html +1 -1
  23. package/coverage/src/mocks/coverage.svg +1 -1
  24. package/coverage/src/mocks/handlers.ts/coverage.svg +1 -1
  25. package/coverage/src/mocks/handlers.ts.html +36 -12
  26. package/coverage/src/mocks/index.html +19 -19
  27. package/coverage/src/stories/attributes.test.stories.ts.html +6 -9
  28. package/coverage/src/stories/coverage.svg +1 -1
  29. package/coverage/src/stories/css.test.stories.ts.html +1 -1
  30. package/coverage/src/stories/dom-merge.test.stories.ts.html +1 -1
  31. package/coverage/src/stories/external-template.test.stories.ts.html +22 -10
  32. package/coverage/src/stories/form.test.stories.ts.html +1 -1
  33. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  34. package/coverage/src/stories/index.html +34 -19
  35. package/coverage/src/stories/local-storage.test.stories.ts.html +1 -1
  36. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  37. package/coverage/src/stories/module-url.test.stories.ts/coverage.svg +10 -0
  38. package/coverage/src/stories/module-url.test.stories.ts.html +634 -0
  39. package/coverage/src/stories/set-url.test.stories.ts.html +1 -1
  40. package/coverage/src/stories/slice-events.test.stories.ts.html +1 -1
  41. package/coverage/src/stories/slots.test.stories.ts.html +1 -1
  42. package/coverage/src/stories/testStoryBook.ts.html +12 -12
  43. package/coverage/src/stories/version-select.test.stories.ts.html +98 -20
  44. package/coverage/src/sum.ts.html +1 -1
  45. package/dist/confused.svg +1 -0
  46. package/dist/custom-element-CckoVsvO.cjs +53 -0
  47. package/dist/{custom-element-DAe7uvIt.js → custom-element-b7c_7Kz4.js} +175 -167
  48. package/dist/custom-element-bundle.cjs +1 -1
  49. package/dist/custom-element-bundle.js +2 -2
  50. package/dist/demo/a.html +60 -0
  51. package/dist/demo/b.html +13 -0
  52. package/dist/demo/confused.svg +38 -0
  53. package/dist/demo/data-slices.html +216 -0
  54. package/dist/demo/dce-social-preview.png +0 -0
  55. package/dist/demo/demo.css +26 -0
  56. package/dist/demo/dom-merge.html +123 -0
  57. package/dist/demo/embed-1.html +2 -0
  58. package/dist/demo/external-template.html +239 -0
  59. package/dist/demo/form.html +239 -0
  60. package/dist/demo/hex-grid-dce.html +183 -0
  61. package/dist/demo/hex-grid-transform.png +0 -0
  62. package/dist/demo/hex-grid.html +66 -0
  63. package/dist/demo/html-template.html +126 -0
  64. package/dist/demo/html-template.xhtml +45 -0
  65. package/dist/demo/html-template.xml +45 -0
  66. package/dist/demo/http-request.html +143 -0
  67. package/dist/demo/lib-dir/Smiley.svg +24 -0
  68. package/dist/demo/lib-dir/embed-lib.html +34 -0
  69. package/dist/demo/local-storage.html +218 -0
  70. package/dist/demo/location-element.html +168 -0
  71. package/dist/demo/logo.png +0 -0
  72. package/dist/demo/module-url.html +215 -0
  73. package/dist/demo/npm-versions-demo.html +105 -0
  74. package/dist/demo/npm-versions.html +65 -0
  75. package/dist/demo/parameters.html +70 -0
  76. package/dist/demo/s.xml +28 -0
  77. package/dist/demo/s.xslt +97 -0
  78. package/dist/demo/s1.xslt +60 -0
  79. package/dist/demo/scoped-css.html +169 -0
  80. package/dist/demo/set-url.html +141 -0
  81. package/dist/demo/ss.html +57 -0
  82. package/dist/demo/table.xml +25 -0
  83. package/dist/demo/table.xsl +293 -0
  84. package/dist/demo/template.xsl +46 -0
  85. package/dist/demo/tree.xml +25 -0
  86. package/dist/demo/tree.xsl +33 -0
  87. package/dist/demo/wc-square.svg +1 -0
  88. package/dist/demo/xhtml-template.xhtml +45 -0
  89. package/dist/demo/z.html +62 -0
  90. package/dist/demo/z.js +9 -0
  91. package/dist/demo/z.xml +60 -0
  92. package/dist/embed-1.html +1 -2
  93. package/dist/mockServiceWorker.js +1 -1
  94. package/package.json +93 -93
  95. package/public/confused.svg +1 -0
  96. package/public/demo/a.html +60 -0
  97. package/public/demo/b.html +13 -0
  98. package/public/demo/confused.svg +38 -0
  99. package/public/demo/data-slices.html +216 -0
  100. package/public/demo/dce-social-preview.png +0 -0
  101. package/public/demo/demo.css +26 -0
  102. package/public/demo/dom-merge.html +123 -0
  103. package/public/demo/embed-1.html +2 -0
  104. package/public/demo/external-template.html +239 -0
  105. package/public/demo/form.html +239 -0
  106. package/public/demo/hex-grid-dce.html +183 -0
  107. package/public/demo/hex-grid-transform.png +0 -0
  108. package/public/demo/hex-grid.html +66 -0
  109. package/public/demo/html-template.html +126 -0
  110. package/public/demo/html-template.xhtml +45 -0
  111. package/public/demo/html-template.xml +45 -0
  112. package/public/demo/http-request.html +143 -0
  113. package/public/demo/lib-dir/Smiley.svg +24 -0
  114. package/public/demo/lib-dir/embed-lib.html +34 -0
  115. package/public/demo/local-storage.html +218 -0
  116. package/public/demo/location-element.html +168 -0
  117. package/public/demo/logo.png +0 -0
  118. package/public/demo/module-url.html +215 -0
  119. package/public/demo/npm-versions-demo.html +105 -0
  120. package/public/demo/npm-versions.html +65 -0
  121. package/public/demo/parameters.html +70 -0
  122. package/public/demo/s.xml +28 -0
  123. package/public/demo/s.xslt +97 -0
  124. package/public/demo/s1.xslt +60 -0
  125. package/public/demo/scoped-css.html +169 -0
  126. package/public/demo/set-url.html +141 -0
  127. package/public/demo/ss.html +57 -0
  128. package/public/demo/table.xml +25 -0
  129. package/public/demo/table.xsl +293 -0
  130. package/public/demo/template.xsl +46 -0
  131. package/public/demo/tree.xml +25 -0
  132. package/public/demo/tree.xsl +33 -0
  133. package/public/demo/wc-square.svg +1 -0
  134. package/public/demo/xhtml-template.xhtml +45 -0
  135. package/public/demo/z.html +62 -0
  136. package/public/demo/z.js +9 -0
  137. package/public/demo/z.xml +60 -0
  138. package/public/embed-1.html +1 -2
  139. package/public/mockServiceWorker.js +1 -1
  140. package/src/custom-element/custom-element.js +36 -19
  141. package/src/custom-element/demo/confused.svg +1 -0
  142. package/src/custom-element/demo/demo.css +5 -1
  143. package/src/custom-element/demo/embed-1.html +1 -2
  144. package/src/custom-element/demo/external-template.html +122 -62
  145. package/src/custom-element/demo/lib-dir/Smiley.svg +24 -0
  146. package/src/custom-element/demo/lib-dir/embed-lib.html +34 -0
  147. package/src/custom-element/demo/module-url.html +215 -0
  148. package/src/custom-element/demo/npm-versions-demo.html +105 -0
  149. package/src/custom-element/demo/npm-versions.html +65 -0
  150. package/src/custom-element/demo/s.xml +27 -35
  151. package/src/custom-element/demo/s.xslt +96 -96
  152. package/src/custom-element/demo/set-url.html +1 -1
  153. package/src/custom-element/demo/z.js +9 -0
  154. package/src/custom-element/ide/customData-dce.json +215 -181
  155. package/src/custom-element/ide/web-types-dce.json +184 -159
  156. package/src/custom-element/ide/web-types-xsl.json +1 -1
  157. package/src/custom-element/index.html +2 -1
  158. package/src/custom-element/module-url.js +33 -0
  159. package/src/mocks/handlers.ts +10 -1
  160. package/src/mocks/versions.mock.ts +786 -0
  161. package/src/stories/attributes.test.stories.ts +0 -1
  162. package/src/stories/external-template.test.stories.ts +11 -7
  163. package/src/stories/module-url.test.stories.ts +183 -0
  164. package/src/stories/version-select.test.stories.ts +38 -12
  165. package/storybook-static/assets/Color-KGDBMAHA-CH-YyWYq.js +1 -0
  166. package/storybook-static/assets/{Configure-D0qG3gR9.js → Configure-DFL_bm2M.js} +2 -2
  167. package/storybook-static/assets/DocsRenderer-PKQXORMH-Bz-_1hmS.js +2 -0
  168. package/storybook-static/assets/{attributes.test.stories-W34tZdUt.js → attributes.test.stories-DIQXccHc.js} +2 -3
  169. package/storybook-static/assets/{css.test.stories-BZFYx1TQ.js → css.test.stories-BV2hi4CY.js} +1 -1
  170. package/storybook-static/assets/custom-element-wn23PUwN.js +231 -0
  171. package/storybook-static/assets/{dom-merge.test.stories-S-7U5N3h.js → dom-merge.test.stories-Dws0C2-g.js} +1 -1
  172. package/storybook-static/assets/{entry-preview-DrgzXgwT.js → entry-preview-BKQ8UCxI.js} +1 -1
  173. package/storybook-static/assets/{entry-preview-docs-Bxv0qQWs.js → entry-preview-docs-BMKNVQXA.js} +2 -2
  174. package/storybook-static/assets/{external-template.test.stories-QIO3lAFz.js → external-template.test.stories-BHO48b0j.js} +19 -16
  175. package/storybook-static/assets/{form.test.stories-ClYhj9F1.js → form.test.stories-dv9mwp24.js} +1 -1
  176. package/storybook-static/assets/handlers-CaCq2ZPF.js +467 -0
  177. package/storybook-static/assets/http-request.stories-B2ke7LtS.js +281 -0
  178. package/storybook-static/assets/iframe-D4Sos1HO.js +2 -0
  179. package/storybook-static/assets/index-BnXBQqj9.js +605 -0
  180. package/storybook-static/assets/index-C8k3Z-3Y.js +28 -0
  181. package/storybook-static/assets/index-Cpxqn5iQ.js +1 -0
  182. package/storybook-static/assets/{index-DXimoRZY.js → index-D-8MO0q_.js} +1 -1
  183. package/storybook-static/assets/index-DGdNYaqV.js +8 -0
  184. package/storybook-static/assets/index-Dz4OaB2k.js +1 -0
  185. package/storybook-static/assets/index-sm7QlJZE.js +1 -0
  186. package/storybook-static/assets/lit-element-DzhCn-8W.js +19 -0
  187. package/storybook-static/assets/{local-storage.test.stories-BqgYwqr-.js → local-storage.test.stories-BpogLNq-.js} +1 -1
  188. package/storybook-static/assets/{location-element.test.stories-DvH1TWK4.js → location-element.test.stories-BiFvBop7.js} +1 -1
  189. package/storybook-static/assets/module-url.test.stories-BXoM34tX.js +208 -0
  190. package/storybook-static/assets/{preview-BKCN0mOr.js → preview-0Jj89qip.js} +1 -1
  191. package/storybook-static/assets/{preview-TCN6m6T-.js → preview-BJPLiuSt.js} +1 -1
  192. package/storybook-static/assets/{preview-BDY5ThwJ.js → preview-BMWqy4Bi.js} +1 -1
  193. package/storybook-static/assets/preview-BnWGZYux.js +1 -0
  194. package/storybook-static/assets/preview-Cg7hXPRq.js +2 -0
  195. package/storybook-static/assets/{preview-BAz7FMXc.js → preview-DB9FwMii.js} +1 -1
  196. package/storybook-static/assets/preview-Djh1_Tal.js +20 -0
  197. package/storybook-static/assets/{preview-DRnyIGXK.js → preview-oHxXRSIu.js} +15 -15
  198. package/storybook-static/assets/{set-url.test.stories-GlJOh31I.js → set-url.test.stories-Cg5Z0r7x.js} +1 -1
  199. package/storybook-static/assets/{slice-events.test.stories-VoNjuPCX.js → slice-events.test.stories-D_ttGp3g.js} +1 -1
  200. package/storybook-static/assets/{slots.test.stories-Da2j9YuO.js → slots.test.stories-DBNXOm0T.js} +1 -1
  201. package/storybook-static/assets/version-select.test.stories-CgV3UCim.js +109 -0
  202. package/storybook-static/confused.svg +1 -0
  203. package/storybook-static/demo/a.html +60 -0
  204. package/storybook-static/demo/b.html +13 -0
  205. package/storybook-static/demo/confused.svg +38 -0
  206. package/storybook-static/demo/data-slices.html +216 -0
  207. package/storybook-static/demo/dce-social-preview.png +0 -0
  208. package/storybook-static/demo/demo.css +26 -0
  209. package/storybook-static/demo/dom-merge.html +123 -0
  210. package/storybook-static/demo/embed-1.html +2 -0
  211. package/storybook-static/demo/external-template.html +239 -0
  212. package/storybook-static/demo/form.html +239 -0
  213. package/storybook-static/demo/hex-grid-dce.html +183 -0
  214. package/storybook-static/demo/hex-grid-transform.png +0 -0
  215. package/storybook-static/demo/hex-grid.html +66 -0
  216. package/storybook-static/demo/html-template.html +126 -0
  217. package/storybook-static/demo/html-template.xhtml +45 -0
  218. package/storybook-static/demo/html-template.xml +45 -0
  219. package/storybook-static/demo/http-request.html +143 -0
  220. package/storybook-static/demo/lib-dir/Smiley.svg +24 -0
  221. package/storybook-static/demo/lib-dir/embed-lib.html +34 -0
  222. package/storybook-static/demo/local-storage.html +218 -0
  223. package/storybook-static/demo/location-element.html +168 -0
  224. package/storybook-static/demo/logo.png +0 -0
  225. package/storybook-static/demo/module-url.html +215 -0
  226. package/storybook-static/demo/npm-versions-demo.html +105 -0
  227. package/storybook-static/demo/npm-versions.html +65 -0
  228. package/storybook-static/demo/parameters.html +70 -0
  229. package/storybook-static/demo/s.xml +28 -0
  230. package/storybook-static/demo/s.xslt +97 -0
  231. package/storybook-static/demo/s1.xslt +60 -0
  232. package/storybook-static/demo/scoped-css.html +169 -0
  233. package/storybook-static/demo/set-url.html +141 -0
  234. package/storybook-static/demo/ss.html +57 -0
  235. package/storybook-static/demo/table.xml +25 -0
  236. package/storybook-static/demo/table.xsl +293 -0
  237. package/storybook-static/demo/template.xsl +46 -0
  238. package/storybook-static/demo/tree.xml +25 -0
  239. package/storybook-static/demo/tree.xsl +33 -0
  240. package/storybook-static/demo/wc-square.svg +1 -0
  241. package/storybook-static/demo/xhtml-template.xhtml +45 -0
  242. package/storybook-static/demo/z.html +62 -0
  243. package/storybook-static/demo/z.js +9 -0
  244. package/storybook-static/demo/z.xml +60 -0
  245. package/storybook-static/embed-1.html +1 -2
  246. package/storybook-static/favicon.svg +1 -7
  247. package/storybook-static/iframe.html +42 -30
  248. package/storybook-static/index.html +36 -18
  249. package/storybook-static/index.json +1 -1
  250. package/storybook-static/mockServiceWorker.js +1 -1
  251. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  252. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  253. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  254. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  255. package/storybook-static/project.json +1 -1
  256. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +32 -32
  257. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +1 -1
  258. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  259. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +395 -43
  260. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +0 -18
  261. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  262. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +221 -22
  263. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  264. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  265. package/storybook-static/sb-manager/globals-module-info.js +995 -1
  266. package/storybook-static/sb-manager/globals-runtime.js +53525 -1
  267. package/storybook-static/sb-manager/globals.js +48 -1
  268. package/storybook-static/sb-manager/runtime.js +11884 -1
  269. package/storybook-static/sb-preview/globals.js +33 -1
  270. package/storybook-static/sb-preview/runtime.js +9437 -108
  271. package/vite.config.js +2 -1
  272. package/dist/custom-element-DZvvhscI.cjs +0 -53
  273. package/storybook-static/assets/Color-PRSJMWNM-CRSv4C7i.js +0 -1
  274. package/storybook-static/assets/DocsRenderer-K4EAMTCU-CG_P5zRZ.js +0 -2
  275. package/storybook-static/assets/WithTooltip-KJL26V4Q-CUqUi5E8.js +0 -1
  276. package/storybook-static/assets/custom-element-DpIq8E2p.js +0 -219
  277. package/storybook-static/assets/formatter-2WMMO6ZP-C-UiBIma.js +0 -58
  278. package/storybook-static/assets/http-request.stories-DCqY5s2i.js +0 -300
  279. package/storybook-static/assets/iframe-CURpvmVV.js +0 -2
  280. package/storybook-static/assets/index-CKw1EbdP.js +0 -1
  281. package/storybook-static/assets/index-CVRyq5ci.js +0 -27
  282. package/storybook-static/assets/index-Cc7K62zD.js +0 -3
  283. package/storybook-static/assets/index-DYpTqTNu.js +0 -1
  284. package/storybook-static/assets/index-DsWii_Ep.js +0 -548
  285. package/storybook-static/assets/index-DuIEV_9C.js +0 -13
  286. package/storybook-static/assets/lit-element-CenEXOuS.js +0 -19
  287. package/storybook-static/assets/preview-B4GcaC1c.js +0 -1
  288. package/storybook-static/assets/preview-B63p-W8V.js +0 -20
  289. package/storybook-static/assets/preview-DjDbQHPa.js +0 -2
  290. package/storybook-static/assets/syntaxhighlighter-BP7B2CQK-CDpEe51g.js +0 -1
  291. package/storybook-static/assets/version-select.test.stories-DLwf-TPB.js +0 -60
  292. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -3
  293. package/storybook-static/sb-common-assets/fonts.css +0 -31
  294. package/storybook-static/sb-manager/WithTooltip-KJL26V4Q-5LS5AN27.js +0 -1
  295. package/storybook-static/sb-manager/chunk-B3YDJJJH.js +0 -347
  296. package/storybook-static/sb-manager/chunk-BLWCBWKL.js +0 -9
  297. package/storybook-static/sb-manager/chunk-GUVK2GTO.js +0 -6
  298. package/storybook-static/sb-manager/chunk-LFRML3ZV.js +0 -186
  299. package/storybook-static/sb-manager/chunk-MC7RAF2B.js +0 -274
  300. package/storybook-static/sb-manager/chunk-ZR5JZWHI.js +0 -1
  301. package/storybook-static/sb-manager/formatter-2WMMO6ZP-JI7RHVTW.js +0 -58
  302. package/storybook-static/sb-manager/index.js +0 -1
  303. package/storybook-static/sb-manager/syntaxhighlighter-BP7B2CQK-WOJYHKQR.js +0 -1
  304. /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/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/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>
package/src/custom-element/demo/npm-versions-demo.html ADDED
@@ -0,0 +1,105 @@
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
+ dt{ font-weight: bold}
13
+ dd{ padding: 0;}
14
+ h1,h3{ margin: 0;}
15
+ nav{ gap:0; }
16
+ </style>
17
+ </head>
18
+ <body>
19
+
20
+ <nav>
21
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
22
+ <h1><code>npm-version</code> Declarative Custom Element</h1>
23
+
24
+ <dl>
25
+ <dt>Attributes</dt>
26
+ <dd><code>package-name</code> NPM package name</dd>
27
+ <dd><code>current-version</code> version to be initially selected </dd>
28
+ <dd><code>value</code> user selection </dd>
29
+
30
+ <dt>Events</dt>
31
+ <dd><code>change</code> triggered when <code>value</code> attribute changed</dd>
32
+
33
+ <dt>Slots</dt>
34
+ <dd><code>label</code> defaults to <code>{$package-name} version:</code> </dd>
35
+ </dl>
36
+
37
+ </nav>
38
+
39
+
40
+ <html-demo-element legend="1. NPM package version picker"
41
+ description="defaults, last version should be preselected">
42
+ <template>
43
+ <custom-element tag="npm-version" src="./npm-versions.html#npm-version"></custom-element>
44
+ <npm-version package-name="@epa-wg/custom-element-dist"></npm-version>
45
+ </template>
46
+ </html-demo-element>
47
+
48
+ <html-demo-element legend="2. preselected NPM package version picker"
49
+ description="version 22 should be selected">
50
+ <template>
51
+ <custom-element tag="custom-element-version" src="./npm-versions.html#npm-version"></custom-element>
52
+ <custom-element-version current-version="0.0.22" package-name="@epa-wg/custom-element"></custom-element-version>
53
+ </template>
54
+ </html-demo-element>
55
+
56
+
57
+ <html-demo-element legend="3. value attribute changed and propagated to slice"
58
+ description="upon selection change the version should be shown as 'selected-version' slice value">
59
+ <template>
60
+ <custom-element tag="npm-version" src="./npm-versions.html#npm-version"></custom-element>
61
+
62
+ <custom-element >
63
+ <template>
64
+ <npm-version slice="selected-version" package-name="@epa-wg/custom-element"></npm-version>
65
+ <p><code>selected-version</code> slice: {//selected-version/@value}</p>
66
+ </template>
67
+ </custom-element>
68
+
69
+ </template>
70
+ </html-demo-element>
71
+
72
+
73
+ <html-demo-element legend="4. label slot override"
74
+ description="upon selection change the version should be shown as 'selected-version' slice value">
75
+ <template>
76
+ <custom-element tag="npm-version-1" src="./npm-versions.html#npm-version"></custom-element>
77
+
78
+ <custom-element >
79
+ <template>
80
+ <npm-version-1 slice="selected" package-name="@epa-wg/custom-element">
81
+ <i slot="label">select:</i>
82
+ </npm-version-1>
83
+ <p><code>selected-version</code> slice: {//selected}</p>
84
+ </template>
85
+ </custom-element>
86
+
87
+ </template>
88
+ </html-demo-element>
89
+
90
+
91
+ <html-demo-element legend="5. control version in URL"
92
+ description="">
93
+ 1. <button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.26/storybook-static/index.html`">set in page URL</button>
94
+ (can be skipped when run from unpkg.com)<br/>
95
+ 2. switch the package version in select and observe the URL change.
96
+ <template>
97
+ <custom-element src="./npm-versions.html#npm-version-to-url" package-name="custom-element-dist" current-version="0.0.26"></custom-element>
98
+ </template>
99
+ </html-demo-element>
100
+
101
+
102
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js" hidden></script>
103
+
104
+ </body>
105
+ </html>
package/src/custom-element/demo/npm-versions.html ADDED
@@ -0,0 +1,65 @@
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>npm-version template</title>
6
+ <link rel="icon" href="./wc-square.svg"/>
7
+ </head>
8
+ <body>
9
+
10
+ <h1><code>npm-version</code> template</h1>
11
+ <a href="./npm-versions-demo.html">docs</a>
12
+ <template id="npm-version">
13
+ <attribute name="package-name"></attribute>
14
+ <attribute name="current-version"></attribute>
15
+ <attribute name="value" select="//selected-version"></attribute>
16
+
17
+ <http-request
18
+ url="https://registry.npmjs.org/@epa-wg/custom-element-dist"
19
+ method="GET"
20
+ header-accept="application/json"
21
+ slice="versions-ajax"></http-request>
22
+
23
+ <label><slot name="label">{$package-name} version:</slot>
24
+ <xhtml:select slice="selected-version" autocomplete="off" name="version">
25
+ <for-each select="//versions/*">
26
+ <option value="{./@version}">
27
+ <variable name="item-version">{./@version}</variable>
28
+ { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
29
+ </option>
30
+ </for-each>
31
+ <for-each select="//versions/*">
32
+ <if test="./@version = $current-version">
33
+ <option selected value="{./@version}">
34
+ <variable name="item-version">{./@version}</variable>
35
+ { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
36
+ </option>
37
+ </if>
38
+ </for-each>
39
+ </xhtml:select>
40
+ </label>
41
+ </template>
42
+
43
+ <template id="npm-version-to-url">
44
+ <variable name="url" select="//window-location/value/@href"></variable>
45
+ <variable name="current-version" >0{
46
+ substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) - string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
47
+ }</variable>
48
+ <location-element slice="window-location" live>
49
+ <if test=" not(//selected-version = $current-version ) and not(//selected-version = '') ">
50
+ <attribute name="src">{ concat( substring-before($url, $current-version),
51
+ //selected-version,
52
+ substring-after($url, $current-version) ) }</attribute>
53
+ <attribute name="method">location.href</attribute>
54
+ </if>
55
+ </location-element>
56
+ <http-request
57
+ url="https://registry.npmjs.org/@epa-wg/custom-element-dist"
58
+ method="GET"
59
+ header-accept="application/json"
60
+ slice="versions-ajax" ></http-request>
61
+
62
+ <custom-element src="#npm-version" slice="selected-version"></custom-element>
63
+ </template>
64
+ </body>
65
+ </html>
package/src/custom-element/demo/s.xml CHANGED
@@ -1,36 +1,28 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <datadom>
3
- <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
4
- <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
5
- <button xmlns="http://www.w3.org/1999/xhtml" value="#dce4" slice="set-button" slice-event="click" slot="">set
6
- </button>
7
- <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
8
- <xsl:if xmlns="http://www.w3.org/1999/xhtml" test="//form-data/url" slot="">
9
- <location-element method="{$selected-method}" src="{//form-data/url}"></location-element>
10
- {$selected-method} - {//form-data/url}
11
- </xsl:if>
12
- <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
13
- </payload>
14
- <attributes>
15
- <tag>dce-9d95a532-8e54-414a-9077-08799530a637</tag>
16
- </attributes>
17
- <dataset/>
18
- <slice>
19
- <set-button xmlns="" value="#dce4" slice="set-button" slice-event="click" data-dce-id="2" validation-message="">
20
- <event isTrusted="true" sliceProcessed="1" pointerId="1" width="1" height="1" pressure="0" tiltX="0"
21
- tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0"
22
- pointerType="mouse" isPrimary="false" screenX="47" screenY="538" clientX="47" clientY="451"
23
- ctrlKey="false" shiftKey="false" altKey="false" metaKey="false" button="0" buttons="0" pageX="47"
24
- pageY="451" x="47" y="451" offsetX="20" offsetY="8" movementX="0" movementY="0" layerX="47"
25
- layerY="451" detail="1" which="1" type="click" eventPhase="2" bubbles="true" cancelable="true"
26
- defaultPrevented="false" composed="true" timeStamp="11628.100000143051" returnValue="true"
27
- cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
28
- <relatedTarget/>
29
- <fromElement/>
30
- <toElement/>
31
- <sourceCapabilities firesTouchEvents="false"/>
32
- </event>
33
- #dce4
34
- </set-button>
35
- </slice>
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <datadom>
3
+ <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
4
+ <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
5
+ <npm-version xmlns="http://www.w3.org/1999/xhtml" slice="selected-version" package-name="@epa-wg/custom-element"
6
+ slot=""></npm-version>
7
+ <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
8
+ <p xmlns="http://www.w3.org/1999/xhtml" slot="">
9
+ <code>selected-version</code>
10
+ slice: {//selected-version}
11
+ </p>
12
+ <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
13
+ </payload>
14
+ <attributes>
15
+ <tag>dce-bbc8e8b4-575f-40d3-9880-2f1d56d85d80</tag>
16
+ </attributes>
17
+ <dataset/>
18
+ <slice>
19
+ <selected-version xmlns="" slice="selected-version" package-name="@epa-wg/custom-element" data-dce-id="2"
20
+ current-version="" value="0.0.21">
21
+ <event isTrusted="false" sliceProcessed="1" type="change" eventPhase="2" bubbles="true" cancelable="false"
22
+ defaultPrevented="false" composed="false" timeStamp="2225577.4000000954" returnValue="true"
23
+ cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
24
+ <detail package-name="@epa-wg/custom-element"/>
25
+ </event>
26
+ </selected-version>
27
+ </slice>
36
28
  </datadom>