@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/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,11 +1,28 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <datadom>
3
- <slice>
4
- <signin-form>
5
- <form-data>
6
- <username>QWE</username>
7
- <password>ASD</password>
8
- </form-data>
9
- </signin-form>
10
- </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>
11
28
  </datadom>
package/src/custom-element/demo/s.xslt CHANGED
@@ -1,60 +1,97 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
3
- xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
4
- exclude-result-prefixes="exsl">
5
- <xsl:template match="ignore">
6
- <xsl:choose>
7
- <xsl:when test="//attr">
8
- <xsl:value-of select="//attr"/>
9
- </xsl:when>
10
- <xsl:otherwise>
11
- <xsl:value-of select="def"/>
12
- </xsl:otherwise>
13
- </xsl:choose>
14
- <xsl:value-of select="."/>
15
- </xsl:template>
16
- <xsl:template mode="payload" match="attributes">
17
- <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
18
- <u xmlns="" data-dce-id="2">
19
- <dce-text data-dce-id="3">
20
- <xsl:call-template name="slot">
21
- <xsl:with-param name="slotname" select="''"/>
22
- <xsl:with-param name="defaultvalue">
23
- <dce-text xmlns="" data-dce-id="4">is green</dce-text>
24
- </xsl:with-param>
25
- </xsl:call-template>
26
- </dce-text>
27
- </u>
28
- </dce-root>
29
- </xsl:template>
30
- <xsl:template match="/">
31
- <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
32
- </xsl:template>
33
-
34
- <xsl:template match="@*|node()" mode="copy-html">
35
- <xsl:copy><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:copy>
36
- </xsl:template>
37
- <xsl:template match="node()[starts-with(name(),'xhtml:')]" mode="copy-html">
38
- <xsl:element name="{local-name()}"><xsl:apply-templates select="@*|node()" mode="copy-html"/></xsl:element>
39
- </xsl:template>
40
-
41
-
42
- <xsl:template name="slot">
43
- <xsl:param name="slotname"/>
44
- <xsl:param name="defaultvalue"/>
45
- <xsl:choose>
46
- <xsl:when test="//payload/*[@slot=$slotname]">
47
- <xsl:apply-templates mode="copy-html" select="//payload/*[@slot=$slotname]"/>
48
- </xsl:when>
49
- <xsl:otherwise>
50
- <xsl:apply-templates mode="copy-html" select="$defaultvalue"/>
51
- </xsl:otherwise>
52
- </xsl:choose>
53
- </xsl:template>
54
- <xsl:variable name="js-injected-body">
55
- <xsl:call-template name="slot">
56
- <xsl:with-param name="slotname" select="''"/>
57
- <xsl:with-param name="defaultvalue"/>
58
- </xsl:call-template>
59
- </xsl:variable>
1
+ <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
2
+ xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
3
+ exclude-result-prefixes="exsl">
4
+ <xsl:template match="ignore">
5
+ <xsl:choose>
6
+ <xsl:when test="//attr">
7
+ <xsl:value-of select="//attr"/>
8
+ </xsl:when>
9
+ <xsl:otherwise>
10
+ <xsl:value-of select="def"/>
11
+ </xsl:otherwise>
12
+ </xsl:choose>
13
+ <xsl:value-of select="."/>
14
+ </xsl:template>
15
+ <xsl:template mode="payload" match="attributes">
16
+ <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
17
+ <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="methods">
18
+ <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href" data-dce-id="2">
19
+ location.href
20
+ </a>
21
+ <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" data-dce-id="3">
22
+ location.hash
23
+ </a>
24
+ <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign" data-dce-id="4">
25
+ location.assign
26
+ </a>
27
+ </xsl:variable>
28
+ <fieldset xmlns="" data-dce-id="5">
29
+ <legend data-dce-id="6">
30
+ <b data-dce-id="7">set-by</b>
31
+ </legend>
32
+ <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="$methods">
33
+ <p data-dce-id="8">
34
+ <label data-dce-id="9">
35
+ <input type="radio" name="method" value="{.}" data-dce-id="10"/>
36
+ <dce-text data-dce-id="11">
37
+ <xsl:value-of select="."/>
38
+ </dce-text>
39
+ </label>
40
+ <a class="infolink" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
41
+ data-dce-id="12">mdn
42
+ </a>
43
+ </p>
44
+ </xsl:for-each>
45
+ <label data-dce-id="13">
46
+ <input type="radio" name="method" value="location.href" data-dce-id="14"/>
47
+ <dce-text data-dce-id="15">location.href</dce-text>
48
+ </label>
49
+ <label data-dce-id="16">
50
+ <input type="radio" name="method" value="location" data-dce-id="17"/>
51
+ <dce-text data-dce-id="18">location</dce-text>
52
+ </label>
53
+ <label data-dce-id="19">
54
+ <input type="radio" name="method" value="location.replace" data-dce-id="20"/>
55
+ <dce-text data-dce-id="21">location.replace</dce-text>
56
+ </label>
57
+ <label data-dce-id="22">
58
+ <input type="radio" name="method" value="location.assign" data-dce-id="23"/>
59
+ <dce-text data-dce-id="24">location.assign</dce-text>
60
+ </label>
61
+ <label data-dce-id="25">
62
+ <input type="radio" name="method" value="location.hash" data-dce-id="26"/>
63
+ <dce-text data-dce-id="27">location.hash</dce-text>
64
+ </label>
65
+ <label data-dce-id="28">
66
+ <input type="radio" name="method" value="history.pushState" data-dce-id="29"/>
67
+ <dce-text data-dce-id="30">history.pushState</dce-text>
68
+ </label>
69
+ <label data-dce-id="31">
70
+ <input type="radio" name="method" value="history.replaceState" data-dce-id="32"/>
71
+ <dce-text data-dce-id="33">history.replaceState</dce-text>
72
+ </label>
73
+ </fieldset>
74
+ </dce-root>
75
+ </xsl:template>
76
+ <xsl:template match="/">
77
+ <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
78
+ </xsl:template>
79
+ <xsl:template name="slot">
80
+ <xsl:param name="slotname"/>
81
+ <xsl:param name="defaultvalue"/>
82
+ <xsl:choose>
83
+ <xsl:when test="//payload/*[@slot=$slotname]">
84
+ <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
85
+ </xsl:when>
86
+ <xsl:otherwise>
87
+ <xsl:copy-of select="$defaultvalue"/>
88
+ </xsl:otherwise>
89
+ </xsl:choose>
90
+ </xsl:template>
91
+ <xsl:variable name="js-injected-body">
92
+ <xsl:call-template name="slot">
93
+ <xsl:with-param name="slotname" select="''"/>
94
+ <xsl:with-param name="defaultvalue"/>
95
+ </xsl:call-template>
96
+ </xsl:variable>
60
97
  </xsl:stylesheet>
package/src/custom-element/demo/set-url.html ADDED
@@ -0,0 +1,141 @@
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>custom-element Declarative Custom Element implementation demo</title>
7
+ <link rel="icon" href="./wc-square.svg"/>
8
+ <script type="module" src="../location-element.js"></script>
9
+ <script type="module" src="../custom-element.js"></script>
10
+ <style>
11
+ @import "./demo.css";
12
+ input[type="text"]{ min-width: 30rem; }
13
+
14
+ .infolink {
15
+ &:before {
16
+ content: '❔';
17
+ display: inline-block;
18
+ border-radius: 1.2em;
19
+ }
20
+
21
+ &:hover:before {
22
+ background: blue;
23
+ }
24
+ }
25
+ </style>
26
+ </head>
27
+ <body>
28
+ <nav>
29
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
30
+ </nav>
31
+ <main>
32
+ <h3>How to set the page URL by <code>location-element</code>?</h3>
33
+ Answer: by defining following attributes:
34
+ <ol>
35
+ <li><code>method</code> to one of values provided bellow</li>
36
+ <li><code>src</code> with URL </li>
37
+ </ol>
38
+ <p> &lt;location-element&gt; is safe to be used unconditionally as long as `src` is missing or same as page URL.
39
+ Otherwise it can be injected by event driven condition as in sample <a href="#dce3">#3</a> </p>
40
+ </main>
41
+ <html-demo-element legend="1. Set the page URL by location.hash"
42
+ description="click on 'set' button and observe hash value change in url"
43
+ id="dce1">
44
+ <template>
45
+ <custom-element>
46
+ <template>
47
+ <button value="#dce1" slice="set-button" slice-event="click">#dce1</button>
48
+ <button value="#dce2" slice="set-button" slice-event="click">#dce2</button>
49
+ <location-element method="location.href" src="{//set-button/@value}"></location-element>
50
+ </template>
51
+ </custom-element>
52
+ </template>
53
+ </html-demo-element>
54
+
55
+ <html-demo-element legend="2. Set the page URL by method"
56
+ description="click on 'set' button and observe hash value change in url"
57
+ id="dce2">
58
+ <template>
59
+ <custom-element>
60
+ <template>
61
+ <style>
62
+ button{ display: block; width: 100%; }
63
+ </style>
64
+ <button value="location.href" slice="set-button" slice-event="click"> location.href </button>
65
+ <button value="location.hash" slice="set-button" slice-event="click"> location.hash </button>
66
+ <button value="location.assign" slice="set-button" slice-event="click"> location.assign </button>
67
+ <button value="location.replace" slice="set-button" slice-event="click"> location.replace </button>
68
+ <button value="history.pushState" slice="set-button" slice-event="click"> history.pushState </button>
69
+ <button value="history.replaceState" slice="set-button" slice-event="click"> history.replaceState </button>
70
+ <location-element method="{//set-button/@value}" src="#dce2"></location-element>
71
+ </template>
72
+ </custom-element>
73
+ </template>
74
+ </html-demo-element>
75
+
76
+ <html-demo-element legend="3. Set the page URL by location.href in conditionally injected location-element"
77
+ description="click on 'set' button and observe in url #dce3"
78
+ id="dce3">
79
+ <p>Has to produce URL properties</p>
80
+ <template>
81
+ <custom-element>
82
+ <template>
83
+ <button value="#dce3" slice="set-button" slice-event="click">set</button>
84
+ <if test="//set-button/@slice-event">
85
+ <location-element method="location.href" src="#dce3"></location-element>
86
+ look for <b>#dce3</b> in URL which is set by <code>location-element</code>
87
+ </if>
88
+ </template>
89
+ </custom-element>
90
+ </template>
91
+ </html-demo-element>
92
+
93
+ <html-demo-element legend="4. Set page URL methods"
94
+ description="To define the URL, fill input field or click the radio button, then 'set' button. "
95
+ id="dce4">
96
+ <template>
97
+ <custom-element>
98
+ <template>
99
+ <xsl:variable name="methods">
100
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href"
101
+ title="./set-url.html?a=A">location.href</a>
102
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"
103
+ title="#dec4">location.hash</a>
104
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
105
+ title="./set-url.html?assign=1">location.assign</a>
106
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/replace"
107
+ title="./set-url.html?replace=location">location.replace</a>
108
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/pushState"
109
+ title="./set-url.html?history=pushState">history.pushState</a>
110
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState"
111
+ title="./set-url.html?history=replaceState">history.replaceState</a>
112
+ </xsl:variable>
113
+ <form slice="url-form" custom-validity="'invalid'" method="post">
114
+ <fieldset>
115
+ <legend><b>set-by</b></legend>
116
+ <for-each select="exsl:node-set($methods)/*">
117
+ <p><label><input type="radio" name="method" value="{.}"/> {.} </label>
118
+ <a class="infolink" href="{@href}">mdn</a>
119
+ </p>
120
+ </for-each>
121
+ </fieldset>
122
+ <variable name="selected-method" select="//form-data/method/text()"></variable>
123
+ <variable name="selected-url"
124
+ select="exsl:node-set($methods)/*[text() = $selected-method ]/@title"></variable>
125
+
126
+ <label><input name="url" value="{//url ?? $selected-url }" type="text"/></label>
127
+ <button name="submit-btn" value="by-submit" type="submit">set</button>
128
+ <if test="//form-data/url">
129
+ <location-element method="{$selected-method}" src="{//form-data/url}"></location-element>
130
+ {$selected-method} = {//form-data/url}
131
+ </if>
132
+ </form>
133
+ </template>
134
+ </custom-element>
135
+ </template>
136
+ </html-demo-element>
137
+
138
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
139
+
140
+ </body>
141
+ </html>
package/src/custom-element/demo/z.js ADDED
@@ -0,0 +1,9 @@
1
+ import circle from "circle";
2
+ import circle2 from "lib-root/circle.js";
3
+ console.log(circle())
4
+ try{
5
+
6
+ console.log(import.meta.resolve('lib-root/a.js'))
7
+ }catch( err ){
8
+ console.error(err.message)
9
+ }