@epa-wg/custom-element-dist 0.0.25 → 0.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (332) hide show
  1. package/.idea/custom-element-dist.iml +1 -5
  2. package/.storybook/main.ts +1 -3
  3. package/.storybook/preview-head.html +8 -0
  4. package/.storybook/preview.ts +13 -5
  5. package/README.md +4 -4
  6. package/bin/postinstall.sh +3 -2
  7. package/bin/vitest/vitest-browser-importmaps.mjs +20 -0
  8. package/coverage/coverage-final.json +14 -11
  9. package/coverage/index.html +51 -36
  10. package/coverage/src/custom-element/coverage.svg +1 -1
  11. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  12. package/coverage/src/custom-element/custom-element.js.html +596 -386
  13. package/coverage/src/custom-element/demo/coverage.svg +10 -0
  14. package/coverage/src/custom-element/demo/index.html +116 -0
  15. package/coverage/src/custom-element/demo/z.js/coverage.svg +10 -0
  16. package/coverage/src/custom-element/demo/z.js.html +112 -0
  17. package/coverage/src/custom-element/http-request.js.html +12 -12
  18. package/coverage/src/custom-element/index.html +33 -18
  19. package/coverage/src/custom-element/local-storage.js.html +56 -41
  20. package/coverage/src/custom-element/location-element.js.html +4 -4
  21. package/coverage/src/custom-element/module-url.js/coverage.svg +10 -0
  22. package/coverage/src/custom-element/module-url.js.html +187 -0
  23. package/coverage/src/index.html +1 -1
  24. package/coverage/src/mocks/coverage.svg +1 -1
  25. package/coverage/src/mocks/handlers.ts/coverage.svg +1 -1
  26. package/coverage/src/mocks/handlers.ts.html +36 -12
  27. package/coverage/src/mocks/index.html +19 -19
  28. package/coverage/src/stories/attributes.test.stories.ts.html +9 -15
  29. package/coverage/src/stories/coverage.svg +1 -1
  30. package/coverage/src/stories/css.test.stories.ts.html +1 -1
  31. package/coverage/src/stories/dom-merge.test.stories.ts.html +15 -9
  32. package/coverage/src/stories/external-template.test.stories.ts.html +27 -18
  33. package/coverage/src/stories/form.test.stories.ts.html +1 -1
  34. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  35. package/coverage/src/stories/index.html +48 -33
  36. package/coverage/src/stories/local-storage.test.stories.ts/coverage.svg +1 -1
  37. package/coverage/src/stories/local-storage.test.stories.ts.html +87 -63
  38. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  39. package/coverage/src/stories/module-url.test.stories.ts/coverage.svg +10 -0
  40. package/coverage/src/stories/module-url.test.stories.ts.html +634 -0
  41. package/coverage/src/stories/set-url.test.stories.ts.html +1 -1
  42. package/coverage/src/stories/slice-events.test.stories.ts.html +1 -1
  43. package/coverage/src/stories/slots.test.stories.ts.html +1 -1
  44. package/coverage/src/stories/testStoryBook.ts.html +12 -12
  45. package/coverage/src/stories/version-select.test.stories.ts.html +98 -20
  46. package/coverage/src/sum.ts.html +1 -1
  47. package/dist/confused.svg +1 -0
  48. package/dist/custom-element-BMMsP1Dy.js +533 -0
  49. package/dist/custom-element-CPSk7s0j.cjs +87 -0
  50. package/dist/custom-element-bundle.cjs +1 -1
  51. package/dist/custom-element-bundle.js +28 -25
  52. package/dist/demo/a.html +60 -0
  53. package/dist/demo/a.svg +27 -0
  54. package/dist/demo/b.html +13 -0
  55. package/dist/demo/confused.svg +38 -0
  56. package/dist/demo/data-slices.html +216 -0
  57. package/dist/demo/dce-social-preview.png +0 -0
  58. package/dist/demo/demo.css +25 -0
  59. package/dist/demo/dom-merge.html +123 -0
  60. package/dist/demo/embed-1.html +2 -0
  61. package/dist/demo/external-template.html +239 -0
  62. package/dist/demo/form.html +239 -0
  63. package/dist/demo/hex-grid-dce.html +183 -0
  64. package/dist/demo/hex-grid-transform.png +0 -0
  65. package/dist/demo/hex-grid.html +66 -0
  66. package/dist/demo/html-template.html +126 -0
  67. package/dist/demo/html-template.xhtml +45 -0
  68. package/dist/demo/html-template.xml +45 -0
  69. package/dist/demo/http-request.html +143 -0
  70. package/dist/demo/lib-dir/Smiley.svg +24 -0
  71. package/dist/demo/lib-dir/embed-lib.html +34 -0
  72. package/dist/demo/local-storage.html +218 -0
  73. package/dist/demo/location-element.html +168 -0
  74. package/dist/demo/logo.png +0 -0
  75. package/dist/demo/module-url.html +215 -0
  76. package/dist/demo/npm-versions-demo.html +118 -0
  77. package/dist/demo/npm-versions.html +94 -0
  78. package/dist/demo/parameters.html +70 -0
  79. package/dist/demo/s.xml +3 -0
  80. package/dist/demo/s.xslt +56 -0
  81. package/dist/demo/s1.xslt +60 -0
  82. package/dist/demo/scoped-css.html +169 -0
  83. package/dist/demo/set-url.html +141 -0
  84. package/dist/demo/ss.html +57 -0
  85. package/dist/demo/table.xml +25 -0
  86. package/dist/demo/table.xsl +293 -0
  87. package/dist/demo/template.xsl +46 -0
  88. package/dist/demo/tree.xml +25 -0
  89. package/dist/demo/tree.xsl +33 -0
  90. package/dist/demo/wc-square.svg +1 -0
  91. package/dist/demo/xhtml-template.xhtml +45 -0
  92. package/dist/demo/z.html +33 -0
  93. package/dist/demo/z.js +9 -0
  94. package/dist/demo/z.xml +60 -0
  95. package/dist/demo/z1.html +34 -0
  96. package/dist/embed-1.html +1 -2
  97. package/dist/local-storage-78EivJ_B.cjs +1 -0
  98. package/dist/local-storage-DzmNKzgN.js +66 -0
  99. package/dist/mockServiceWorker.js +1 -1
  100. package/package.json +95 -93
  101. package/public/confused.svg +1 -0
  102. package/public/demo/a.html +60 -0
  103. package/public/demo/a.svg +27 -0
  104. package/public/demo/b.html +13 -0
  105. package/public/demo/confused.svg +38 -0
  106. package/public/demo/data-slices.html +216 -0
  107. package/public/demo/dce-social-preview.png +0 -0
  108. package/public/demo/demo.css +25 -0
  109. package/public/demo/dom-merge.html +123 -0
  110. package/public/demo/embed-1.html +2 -0
  111. package/public/demo/external-template.html +239 -0
  112. package/public/demo/form.html +239 -0
  113. package/public/demo/hex-grid-dce.html +183 -0
  114. package/public/demo/hex-grid-transform.png +0 -0
  115. package/public/demo/hex-grid.html +66 -0
  116. package/public/demo/html-template.html +126 -0
  117. package/public/demo/html-template.xhtml +45 -0
  118. package/public/demo/html-template.xml +45 -0
  119. package/public/demo/http-request.html +143 -0
  120. package/public/demo/lib-dir/Smiley.svg +24 -0
  121. package/public/demo/lib-dir/embed-lib.html +34 -0
  122. package/public/demo/local-storage.html +218 -0
  123. package/public/demo/location-element.html +168 -0
  124. package/public/demo/logo.png +0 -0
  125. package/public/demo/module-url.html +215 -0
  126. package/public/demo/npm-versions-demo.html +118 -0
  127. package/public/demo/npm-versions.html +94 -0
  128. package/public/demo/parameters.html +70 -0
  129. package/public/demo/s.xml +3 -0
  130. package/public/demo/s.xslt +56 -0
  131. package/public/demo/s1.xslt +60 -0
  132. package/public/demo/scoped-css.html +169 -0
  133. package/public/demo/set-url.html +141 -0
  134. package/public/demo/ss.html +57 -0
  135. package/public/demo/table.xml +25 -0
  136. package/public/demo/table.xsl +293 -0
  137. package/public/demo/template.xsl +46 -0
  138. package/public/demo/tree.xml +25 -0
  139. package/public/demo/tree.xsl +33 -0
  140. package/public/demo/wc-square.svg +1 -0
  141. package/public/demo/xhtml-template.xhtml +45 -0
  142. package/public/demo/z.html +33 -0
  143. package/public/demo/z.js +9 -0
  144. package/public/demo/z.xml +60 -0
  145. package/public/demo/z1.html +34 -0
  146. package/public/embed-1.html +1 -2
  147. package/public/mockServiceWorker.js +1 -1
  148. package/src/custom-element/custom-element.js +103 -33
  149. package/src/custom-element/demo/a.svg +27 -0
  150. package/src/custom-element/demo/confused.svg +1 -0
  151. package/src/custom-element/demo/demo.css +11 -8
  152. package/src/custom-element/demo/embed-1.html +1 -2
  153. package/src/custom-element/demo/external-template.html +122 -62
  154. package/src/custom-element/demo/lib-dir/Smiley.svg +24 -0
  155. package/src/custom-element/demo/lib-dir/embed-lib.html +34 -0
  156. package/src/custom-element/demo/module-url.html +215 -0
  157. package/src/custom-element/demo/npm-versions-demo.html +118 -0
  158. package/src/custom-element/demo/npm-versions.html +94 -0
  159. package/src/custom-element/demo/s.xml +3 -36
  160. package/src/custom-element/demo/s.xslt +55 -96
  161. package/src/custom-element/demo/set-url.html +1 -1
  162. package/src/custom-element/demo/z.html +32 -61
  163. package/src/custom-element/demo/z.js +9 -0
  164. package/src/custom-element/demo/z1.html +34 -0
  165. package/src/custom-element/ide/customData-dce.json +215 -181
  166. package/src/custom-element/ide/web-types-dce.json +184 -159
  167. package/src/custom-element/ide/web-types-xsl.json +1 -1
  168. package/src/custom-element/index.html +21 -3
  169. package/src/custom-element/local-storage.js +19 -14
  170. package/src/custom-element/module-url.js +34 -0
  171. package/src/mocks/handlers.ts +10 -1
  172. package/src/mocks/versions.mock.ts +786 -0
  173. package/src/stories/__screenshots__/http-request.test.ts/http-request-url-change-1.png +0 -0
  174. package/src/stories/attributes.test.stories.ts +3 -5
  175. package/src/stories/dom-merge.test.stories.ts +9 -7
  176. package/src/stories/external-template.test.stories.ts +13 -10
  177. package/src/stories/local-storage.test.stories.ts +61 -53
  178. package/src/stories/module-url.test.stories.ts +183 -0
  179. package/src/stories/version-select.test.stories.ts +38 -12
  180. package/src/sum.test.ts +5 -5
  181. package/src/sum.ts +3 -3
  182. package/storybook-static/assets/Color-KGDBMAHA-CJo5gHY3.js +1 -0
  183. package/storybook-static/assets/{Configure-D0qG3gR9.js → Configure-DdXbGKhY.js} +2 -2
  184. package/storybook-static/assets/DocsRenderer-PKQXORMH-DLnpL5hE.js +2 -0
  185. package/storybook-static/assets/{attributes.test.stories-W34tZdUt.js → attributes.test.stories-Bt5V18qO.js} +10 -12
  186. package/storybook-static/assets/{css.test.stories-BZFYx1TQ.js → css.test.stories-CGYy2daE.js} +1 -1
  187. package/storybook-static/assets/custom-element-D8hcDZHh.js +265 -0
  188. package/storybook-static/assets/{dom-merge.test.stories-S-7U5N3h.js → dom-merge.test.stories-XlsZ0UvX.js} +22 -20
  189. package/storybook-static/assets/{entry-preview-DrgzXgwT.js → entry-preview-BKQ8UCxI.js} +1 -1
  190. package/storybook-static/assets/{entry-preview-docs-Bxv0qQWs.js → entry-preview-docs-BMKNVQXA.js} +2 -2
  191. package/storybook-static/assets/{external-template.test.stories-QIO3lAFz.js → external-template.test.stories-Bt_Pflu8.js} +23 -21
  192. package/storybook-static/assets/{form.test.stories-ClYhj9F1.js → form.test.stories-B0NoI8wm.js} +1 -1
  193. package/storybook-static/assets/handlers-B5969HUu.js +467 -0
  194. package/storybook-static/assets/http-request.stories-B2skuTFV.js +281 -0
  195. package/storybook-static/assets/iframe-Dfrt81rk.js +2 -0
  196. package/storybook-static/assets/index-Ay195x2L.js +605 -0
  197. package/storybook-static/assets/index-C3ChPTMh.js +1 -0
  198. package/storybook-static/assets/index-C7lvoJNv.js +1 -0
  199. package/storybook-static/assets/index-C8k3Z-3Y.js +28 -0
  200. package/storybook-static/assets/{index-DXimoRZY.js → index-D-8MO0q_.js} +1 -1
  201. package/storybook-static/assets/index-DGdNYaqV.js +8 -0
  202. package/storybook-static/assets/index-Gpdhz4ab.js +1 -0
  203. package/storybook-static/assets/lit-element-DzhCn-8W.js +19 -0
  204. package/storybook-static/assets/local-storage.test.stories-DfY6feqG.js +420 -0
  205. package/storybook-static/assets/{location-element.test.stories-DvH1TWK4.js → location-element.test.stories-944AotIJ.js} +1 -1
  206. package/storybook-static/assets/module-url.test.stories-DSKcwApl.js +208 -0
  207. package/storybook-static/assets/{preview-BKCN0mOr.js → preview-0Jj89qip.js} +1 -1
  208. package/storybook-static/assets/preview-AJR7rVPD.js +52 -0
  209. package/storybook-static/assets/{preview-TCN6m6T-.js → preview-BJPLiuSt.js} +1 -1
  210. package/storybook-static/assets/{preview-BDY5ThwJ.js → preview-BMWqy4Bi.js} +1 -1
  211. package/storybook-static/assets/preview-BnWGZYux.js +1 -0
  212. package/storybook-static/assets/preview-CadgX-4y.js +2 -0
  213. package/storybook-static/assets/{preview-BAz7FMXc.js → preview-DB9FwMii.js} +1 -1
  214. package/storybook-static/assets/preview-Djh1_Tal.js +20 -0
  215. package/storybook-static/assets/{set-url.test.stories-GlJOh31I.js → set-url.test.stories-DjLHKkEh.js} +1 -1
  216. package/storybook-static/assets/{slice-events.test.stories-VoNjuPCX.js → slice-events.test.stories-8I_BrHd6.js} +1 -1
  217. package/storybook-static/assets/{slots.test.stories-Da2j9YuO.js → slots.test.stories-CvZz4jyP.js} +1 -1
  218. package/storybook-static/assets/version-select.test.stories-DSxmJylI.js +109 -0
  219. package/storybook-static/confused.svg +1 -0
  220. package/storybook-static/demo/a.html +60 -0
  221. package/storybook-static/demo/a.svg +27 -0
  222. package/storybook-static/demo/b.html +13 -0
  223. package/storybook-static/demo/confused.svg +38 -0
  224. package/storybook-static/demo/data-slices.html +216 -0
  225. package/storybook-static/demo/dce-social-preview.png +0 -0
  226. package/storybook-static/demo/demo.css +25 -0
  227. package/storybook-static/demo/dom-merge.html +123 -0
  228. package/storybook-static/demo/embed-1.html +2 -0
  229. package/storybook-static/demo/external-template.html +239 -0
  230. package/storybook-static/demo/form.html +239 -0
  231. package/storybook-static/demo/hex-grid-dce.html +183 -0
  232. package/storybook-static/demo/hex-grid-transform.png +0 -0
  233. package/storybook-static/demo/hex-grid.html +66 -0
  234. package/storybook-static/demo/html-template.html +126 -0
  235. package/storybook-static/demo/html-template.xhtml +45 -0
  236. package/storybook-static/demo/html-template.xml +45 -0
  237. package/storybook-static/demo/http-request.html +143 -0
  238. package/storybook-static/demo/lib-dir/Smiley.svg +24 -0
  239. package/storybook-static/demo/lib-dir/embed-lib.html +34 -0
  240. package/storybook-static/demo/local-storage.html +218 -0
  241. package/storybook-static/demo/location-element.html +168 -0
  242. package/storybook-static/demo/logo.png +0 -0
  243. package/storybook-static/demo/module-url.html +215 -0
  244. package/storybook-static/demo/npm-versions-demo.html +118 -0
  245. package/storybook-static/demo/npm-versions.html +94 -0
  246. package/storybook-static/demo/parameters.html +70 -0
  247. package/storybook-static/demo/s.xml +3 -0
  248. package/storybook-static/demo/s.xslt +56 -0
  249. package/storybook-static/demo/s1.xslt +60 -0
  250. package/storybook-static/demo/scoped-css.html +169 -0
  251. package/storybook-static/demo/set-url.html +141 -0
  252. package/storybook-static/demo/ss.html +57 -0
  253. package/storybook-static/demo/table.xml +25 -0
  254. package/storybook-static/demo/table.xsl +293 -0
  255. package/storybook-static/demo/template.xsl +46 -0
  256. package/storybook-static/demo/tree.xml +25 -0
  257. package/storybook-static/demo/tree.xsl +33 -0
  258. package/storybook-static/demo/wc-square.svg +1 -0
  259. package/storybook-static/demo/xhtml-template.xhtml +45 -0
  260. package/storybook-static/demo/z.html +33 -0
  261. package/storybook-static/demo/z.js +9 -0
  262. package/storybook-static/demo/z.xml +60 -0
  263. package/storybook-static/demo/z1.html +34 -0
  264. package/storybook-static/embed-1.html +1 -2
  265. package/storybook-static/favicon.svg +1 -7
  266. package/storybook-static/iframe.html +42 -30
  267. package/storybook-static/index.html +36 -18
  268. package/storybook-static/index.json +1 -1
  269. package/storybook-static/mockServiceWorker.js +1 -1
  270. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  271. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  272. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  273. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  274. package/storybook-static/project.json +1 -1
  275. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +39 -36
  276. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +38 -1
  277. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  278. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +395 -43
  279. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +0 -18
  280. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  281. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +221 -22
  282. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  283. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  284. package/storybook-static/sb-manager/globals-module-info.js +995 -1
  285. package/storybook-static/sb-manager/globals-runtime.js +53525 -1
  286. package/storybook-static/sb-manager/globals.js +48 -1
  287. package/storybook-static/sb-manager/runtime.js +11884 -1
  288. package/storybook-static/sb-preview/globals.js +33 -1
  289. package/storybook-static/sb-preview/runtime.js +9437 -108
  290. package/vite.config.js +2 -1
  291. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  292. package/.idea/compiler.xml +0 -6
  293. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  294. package/.vscode/settings.json +0 -24
  295. package/dist/custom-element-DAe7uvIt.js +0 -477
  296. package/dist/custom-element-DZvvhscI.cjs +0 -53
  297. package/dist/local-storage-Boafngui.cjs +0 -1
  298. package/dist/local-storage-BqDEu2kF.js +0 -59
  299. package/storybook-static/assets/Color-PRSJMWNM-CRSv4C7i.js +0 -1
  300. package/storybook-static/assets/DocsRenderer-K4EAMTCU-CG_P5zRZ.js +0 -2
  301. package/storybook-static/assets/WithTooltip-KJL26V4Q-CUqUi5E8.js +0 -1
  302. package/storybook-static/assets/custom-element-DpIq8E2p.js +0 -219
  303. package/storybook-static/assets/formatter-2WMMO6ZP-C-UiBIma.js +0 -58
  304. package/storybook-static/assets/http-request.stories-DCqY5s2i.js +0 -300
  305. package/storybook-static/assets/iframe-CURpvmVV.js +0 -2
  306. package/storybook-static/assets/index-CKw1EbdP.js +0 -1
  307. package/storybook-static/assets/index-CVRyq5ci.js +0 -27
  308. package/storybook-static/assets/index-Cc7K62zD.js +0 -3
  309. package/storybook-static/assets/index-DYpTqTNu.js +0 -1
  310. package/storybook-static/assets/index-DsWii_Ep.js +0 -548
  311. package/storybook-static/assets/index-DuIEV_9C.js +0 -13
  312. package/storybook-static/assets/lit-element-CenEXOuS.js +0 -19
  313. package/storybook-static/assets/local-storage.test.stories-BqgYwqr-.js +0 -419
  314. package/storybook-static/assets/preview-B4GcaC1c.js +0 -1
  315. package/storybook-static/assets/preview-B63p-W8V.js +0 -20
  316. package/storybook-static/assets/preview-DRnyIGXK.js +0 -48
  317. package/storybook-static/assets/preview-DjDbQHPa.js +0 -2
  318. package/storybook-static/assets/syntaxhighlighter-BP7B2CQK-CDpEe51g.js +0 -1
  319. package/storybook-static/assets/version-select.test.stories-DLwf-TPB.js +0 -60
  320. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -3
  321. package/storybook-static/sb-common-assets/fonts.css +0 -31
  322. package/storybook-static/sb-manager/WithTooltip-KJL26V4Q-5LS5AN27.js +0 -1
  323. package/storybook-static/sb-manager/chunk-B3YDJJJH.js +0 -347
  324. package/storybook-static/sb-manager/chunk-BLWCBWKL.js +0 -9
  325. package/storybook-static/sb-manager/chunk-GUVK2GTO.js +0 -6
  326. package/storybook-static/sb-manager/chunk-LFRML3ZV.js +0 -186
  327. package/storybook-static/sb-manager/chunk-MC7RAF2B.js +0 -274
  328. package/storybook-static/sb-manager/chunk-ZR5JZWHI.js +0 -1
  329. package/storybook-static/sb-manager/formatter-2WMMO6ZP-JI7RHVTW.js +0 -58
  330. package/storybook-static/sb-manager/index.js +0 -1
  331. package/storybook-static/sb-manager/syntaxhighlighter-BP7B2CQK-WOJYHKQR.js +0 -1
  332. /package/storybook-static/sb-addons/{storybook-core-server-presets-0 → storybook-core-core-server-presets-0}/common-manager-bundle.js.LEGAL.txt +0 -0
package/dist/demo/npm-versions-demo.html ADDED
@@ -0,0 +1,118 @@
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
+ <script type="importmap">
8
+ {
9
+ "imports": {
10
+ "@epa-wg/custom-element/": "../",
11
+ "@epa-wg/custom-element-dist/": "../"
12
+ }
13
+ }
14
+ </script>
15
+ <script type="module" src="../http-request.js"></script>
16
+ <script type="module" src="../location-element.js"></script>
17
+ <script type="module" src="../custom-element.js"></script>
18
+ <style>
19
+ @import "./demo.css";
20
+ dt{ font-weight: bold}
21
+ dd{ padding: 0;}
22
+ h1,h3{ margin: 0;}
23
+ nav{ gap:0; }
24
+ </style>
25
+ </head>
26
+ <body>
27
+
28
+ <nav>
29
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
30
+ <h1><code>npm-version</code> Declarative Custom Element</h1>
31
+
32
+ <dl>
33
+ <dt>Attributes</dt>
34
+ <dd><code>package-name</code> NPM package name</dd>
35
+ <dd><code>current-version</code> version to be initially selected </dd>
36
+ <dd><code>value</code> user selection </dd>
37
+
38
+ <dt>Events</dt>
39
+ <dd><code>change</code> triggered when <code>value</code> attribute changed</dd>
40
+
41
+ <dt>Slots</dt>
42
+ <dd><code>label</code> defaults to <code>{$package-name} version:</code> </dd>
43
+ </dl>
44
+
45
+ </nav>
46
+
47
+
48
+ <html-demo-element legend="1. NPM package version picker"
49
+ description="defaults, last version should be preselected">
50
+ <template>
51
+ <custom-element src="./npm-versions.html#npm-version"
52
+ package-name="@epa-wg/custom-element-dist"></custom-element>
53
+ </template>
54
+ </html-demo-element>
55
+
56
+ <html-demo-element legend="2. preselected NPM package version picker"
57
+ description="version 22 should be selected and date shown">
58
+ <template>
59
+ <custom-element tag="custom-element-version" src="./npm-versions.html#npm-version"></custom-element>
60
+ <custom-element-version
61
+ package-name="@epa-wg/custom-element"
62
+ current-version="0.0.22"
63
+ show-date="true"
64
+ ></custom-element-version>
65
+ </template>
66
+ </html-demo-element>
67
+
68
+
69
+ <html-demo-element legend="3. value attribute changed and propagated to slice"
70
+ description="upon selection change the version should be shown as 'selected-version' slice value">
71
+ <template>
72
+ <custom-element tag="npm-version" src="./npm-versions.html#npm-version"></custom-element>
73
+
74
+ <custom-element >
75
+ <template>
76
+ <npm-version slice="selected-version" package-name="@epa-wg/custom-element"></npm-version>
77
+ <p><code>selected-version</code> slice: {//selected-version/@value}</p>
78
+ </template>
79
+ </custom-element>
80
+
81
+ </template>
82
+ </html-demo-element>
83
+
84
+
85
+ <html-demo-element legend="4. label slot override"
86
+ description="upon selection change the version should be shown as 'selected-version' slice value">
87
+ <template>
88
+ <custom-element tag="npm-version-1" src="./npm-versions.html#npm-version"></custom-element>
89
+
90
+ <custom-element >
91
+ <template>
92
+ <npm-version-1 slice="selected" package-name="@epa-wg/custom-element">
93
+ <i slot="label">select:</i>
94
+ </npm-version-1>
95
+ <p><code>selected-version</code> slice: {//selected}</p>
96
+ </template>
97
+ </custom-element>
98
+
99
+ </template>
100
+ </html-demo-element>
101
+
102
+
103
+ <html-demo-element legend="5. control version in URL"
104
+ description="">
105
+ 1. <button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.25/storybook-static/index.html`">set in page URL to version 0.0.25</button><br/>
106
+ 2. switch the package version in select and observe the URL change.
107
+ <template>
108
+ <custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version-to-url"
109
+ package-name="@epa-wg/custom-element-dist"
110
+ ></custom-element>
111
+ </template>
112
+ </html-demo-element>
113
+
114
+
115
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js" hidden></script>
116
+
117
+ </body>
118
+ </html>
package/dist/demo/npm-versions.html ADDED
@@ -0,0 +1,94 @@
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
+
8
+ </head>
9
+ <body>
10
+
11
+ <h1><code>npm-version</code> template</h1>
12
+ <a href="./npm-versions-demo.html">docs</a>
13
+ <template id="npm-version">
14
+ <attribute name="package-name"></attribute>
15
+ <attribute name="current-version" aria-description="version to select"></attribute>
16
+ <attribute name="show-date" aria-description="set to 'true' to append the date to the version"></attribute>
17
+ <attribute name="value" select="//selected-version"></attribute>
18
+ <http-request
19
+ url="https://registry.npmjs.org/{$package-name}"
20
+ method="GET"
21
+ header-accept="application/json"
22
+ slice="versions-ajax"></http-request>
23
+
24
+ <label>
25
+ <slot name="label"><var>{$package-name}</var> version:</slot>
26
+ <xhtml:select slice="selected-version" autocomplete="off" name="version">
27
+ <for-each select="//versions/*">
28
+ <option value="{./@version}">
29
+ <variable name="item-version">{./@version}</variable>
30
+ { $item-version }<if test="$show-date = 'true' "> - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}</if>
31
+ </option>
32
+ </for-each>
33
+ <for-each select="//versions/*">
34
+ <if test="./@version = $current-version">
35
+ <option selected value="{./@version}">
36
+ <variable name="item-version">{./@version}</variable>
37
+ { $item-version }<if test="$show-date = 'true' "> - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}</if>
38
+ </option>
39
+ </if>
40
+ </for-each>
41
+ </xhtml:select>
42
+ </label>
43
+ </template>
44
+
45
+ <template id="npm-version-to-url">
46
+ <attribute name="package-name"></attribute>
47
+ <attribute name="value" select="//selected-version"></attribute>
48
+ <variable name="url" select="//window-location/value/@href"></variable>
49
+
50
+ <variable name="url-version">0{
51
+ substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) -
52
+ string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
53
+ }</variable>
54
+
55
+ <location-element slice="window-location" live>
56
+ <if test="//selected-version">
57
+ <if test=" not(//url-version = //selected-version ) ">
58
+ <attribute name="src">{ concat( substring-before($url, $url-version),
59
+ //selected-version,
60
+ substring-after($url, $url-version) ) }
61
+ </attribute>
62
+ <attribute name="method">location.href</attribute>
63
+ </if>
64
+ </if>
65
+ </location-element>
66
+
67
+ <http-request
68
+ url="https://registry.npmjs.org/{$package-name}"
69
+ method="GET"
70
+ header-accept="application/json"
71
+ slice="versions-ajax"></http-request>
72
+
73
+ <label>
74
+ <slot name="label">{$package-name} version:</slot>
75
+ <xhtml:select slice="selected-version" autocomplete="off" name="version">
76
+ <for-each select="//versions/*">
77
+ <option value="{./@version}">
78
+ <variable name="item-version">{./@version}</variable>
79
+ { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
80
+ </option>
81
+ </for-each>
82
+ <for-each select="//versions/*">
83
+ <if test="./@version = $url-version">
84
+ <option selected value="{./@version}">
85
+ <variable name="item-version">{./@version}</variable>
86
+ { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
87
+ </option>
88
+ </if>
89
+ </for-each>
90
+ </xhtml:select>
91
+ </label>
92
+ </template>
93
+ </body>
94
+ </html>
package/dist/demo/parameters.html ADDED
@@ -0,0 +1,70 @@
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>parameters - 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
+
13
+ button{ background: forestgreen; }
14
+ table{ min-width: 16rem; }
15
+ td{ border-bottom: 1px solid silver; }
16
+ tfoot td{ border-bottom: none; }
17
+ td,th{text-align: right; }
18
+ caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <nav>
23
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
24
+ </nav>
25
+ <html-demo-element legend="param as attributes definition" description="
26
+ params needed to declare DCE attributes and track the attributes changes. It also be used by IDE and validation.
27
+ ">
28
+ <template>
29
+ <custom-element tag="dce-link" hidden>
30
+ <attribute name="p1" >default_P1 </attribute>
31
+ <attribute name="p2" select="'always_p2'" ></attribute>
32
+ <attribute name="p3" select="//p3 ?? 'def_P3' " ></attribute>
33
+ p1:{$p1} <br/> p2: {$p2} <br/> p3: {$p3}
34
+ </custom-element>
35
+ <dce-link id="dce1" ></dce-link>
36
+ <section>
37
+ <dce-link id="dce2" p1="123" p2="override ignored as select is defined"></dce-link> <br/>
38
+ <div><input id="i1" value="p1" /> <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
39
+ <div><input id="i2" value="p2" /> <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
40
+ <div><input id="i3" value="p3" /> <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
41
+ </section>
42
+ <dce-link id="dce3" p1="123" p3="qwe"></dce-link> |
43
+
44
+ </template>
45
+ </html-demo-element>
46
+
47
+ <html-demo-element legend="slice propagates attribute" description="
48
+ when slice value points to attribute, it would be populated on slice change
49
+ ">
50
+ Type in the input field to see the variable $title change. <br/>
51
+ Hover the mouse to see the title attribute text popup.<br/>
52
+ Inspect DCE node in dev tools to see `title` attribute updated while typing.
53
+
54
+ <template>
55
+ <custom-element>
56
+ <template>
57
+ <attribute name="title" select="//title ?? '😃'" ></attribute>
58
+ <input slice="/datadom/attributes/title" slice-event="keyup"/>
59
+ title attribute: {$title}
60
+ </template>
61
+ </custom-element>
62
+ </template>
63
+ </html-demo-element>
64
+
65
+
66
+
67
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
68
+
69
+ </body>
70
+ </html>
package/dist/demo/s.xml ADDED
@@ -0,0 +1,3 @@
1
+ <body xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><h4>embed-1.html</h4>
2
+ <custom-element><template>🖖</template></custom-element>
3
+ </body>
package/dist/demo/s.xslt ADDED
@@ -0,0 +1,56 @@
1
+ <?xml version='1.0' encoding='UTF-8'?>
2
+ <xsl:stylesheet version="1.0"
3
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
4
+ xmlns:xhtml="http://www.w3.org/1999/xhtml"
5
+ >
6
+ <xsl:output method="xml"/>
7
+ <xsl:template match="/">
8
+ <dce-root >
9
+ <xsl:apply-templates select="*"/>
10
+ </dce-root>
11
+ </xsl:template>
12
+ <xsl:template match="*[name()='template']">
13
+ <xsl:apply-templates mode="sanitize" select="*|text()"/>
14
+ </xsl:template>
15
+ <xsl:template match="*">
16
+ <xsl:apply-templates mode="sanitize" select="*|text()"/>
17
+ </xsl:template>
18
+ <xsl:template match="*[name()='svg']|*[name()='math']">
19
+ <xsl:apply-templates mode="sanitize" select="."/>
20
+ </xsl:template>
21
+ <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]">
22
+ <xsl:copy>
23
+ <xsl:apply-templates mode="sanitize" select="@*"/>
24
+ <xsl:value-of select="text()"></xsl:value-of>
25
+ </xsl:copy>
26
+ </xsl:template>
27
+ <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]">
28
+ <xsl:element name="{local-name()}">
29
+ <xsl:apply-templates mode="sanitize" select="@*"/>
30
+ <xsl:value-of select="text()"></xsl:value-of>
31
+ </xsl:element>
32
+ </xsl:template>
33
+ <xsl:template mode="sanitize" match="*|@*">
34
+ <xsl:copy>
35
+ <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
36
+ </xsl:copy>
37
+ </xsl:template>
38
+ <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
39
+ <xsl:template mode="sanitize" match="text()">
40
+ <dce-text>
41
+ <xsl:copy/>
42
+ </dce-text>
43
+ </xsl:template>
44
+ <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']">
45
+ <dce-text>
46
+ <xsl:copy>
47
+ <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
48
+ </xsl:copy>
49
+ </dce-text>
50
+ </xsl:template>
51
+ <xsl:template mode="sanitize" match="xhtml:*">
52
+ <xsl:element name="{local-name()}">
53
+ <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
54
+ </xsl:element>
55
+ </xsl:template>
56
+ </xsl:stylesheet>
package/dist/demo/s1.xslt ADDED
@@ -0,0 +1,60 @@
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>
60
+ </xsl:stylesheet>
package/dist/demo/scoped-css.html ADDED
@@ -0,0 +1,169 @@
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>CSS scoping - Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg"/>
7
+
8
+ <script type="module" src="../http-request.js"></script>
9
+ <script type="module" src="../custom-element.js"></script>
10
+ <style>
11
+ @import "./demo.css";
12
+
13
+ button {
14
+ display: inline-flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ flex: auto;
18
+ box-shadow: inset silver 0 0 1rem;
19
+ min-width: 12rem;
20
+ padding: 1rem;
21
+ color: coral;
22
+ text-shadow: 1px 1px silver;
23
+ font-weight: bolder;
24
+ }
25
+
26
+ caption {
27
+ padding: 1rem;
28
+ font-weight: bolder;
29
+ font-family: sans-serif;
30
+ }
31
+
32
+ code {
33
+ text-align: right;
34
+ min-width: 3rem;
35
+ }
36
+
37
+ </style>
38
+ </head>
39
+ <body>
40
+
41
+ <nav>
42
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
43
+ <h3>DOM merge. DCE dynamic update with focus preservation.</h3>
44
+ </nav>
45
+
46
+ <html-demo-element legend="1. STYLE tag css rules are scoped within element "
47
+ description="Green button borders should not be applied to external button ">
48
+ <template>
49
+ <custom-element>
50
+ <template><!-- template needed to avoid styles leaking into global HTML -->
51
+ <style>
52
+ button{ border: 0.2rem dashed green; }
53
+ </style>
54
+ <button>Green dashed border</button>
55
+ </template>
56
+ </custom-element>
57
+ <button>Default border</button>
58
+ </template>
59
+ </html-demo-element>
60
+
61
+ <html-demo-element legend="2. DCE with tag "
62
+ description="Blue borders only within 2 DCE instances">
63
+ <template>
64
+ <custom-element tag="dce-1">
65
+ <template><!-- template needed to avoid styles leaking into global HTML -->
66
+ <style>
67
+ button{ border: 0.2rem dotted blue; }
68
+ </style>
69
+ <button><slot>Blue borders</slot></button>
70
+ </template>
71
+ </custom-element>
72
+ <button>Default border</button>
73
+ <dce-1>1st</dce-1>
74
+ <dce-1>2nd</dce-1>
75
+ </template>
76
+ </html-demo-element>
77
+
78
+ <html-demo-element legend="3. Override style in DCE payload "
79
+ description="Red borders only for last DCE instance">
80
+ <template>
81
+ <custom-element tag="dce-2">
82
+ <template><!-- template needed to avoid styles leaking into global HTML -->
83
+ <style>
84
+ button{ border: 0.2rem dashed blue; }
85
+ </style>
86
+ <button><slot>Blue borders</slot></button>
87
+ </template>
88
+ </custom-element>
89
+ <button>Default border</button>
90
+ <dce-2>1st</dce-2>
91
+ <dce-2>
92
+ <template> <!-- template needed to avoid styles leaking into global HTML -->
93
+ <style>button{border-color:red;}</style>
94
+ Red border
95
+ <b>2</b>
96
+ 3
97
+ <b>4</b>
98
+ </template>
99
+ </dce-2>
100
+ </template>
101
+ </html-demo-element>
102
+
103
+
104
+ <html-demo-element legend="4. simple internal override "
105
+ description="green label with blue text button ">
106
+ <template>
107
+ <custom-element>
108
+ <template>
109
+ <style>
110
+ color:green;
111
+ b{ color: blue;}
112
+ input:checked+b{ color: darkblue; text-shadow: 0 0 4px springgreen;}
113
+ </style>
114
+ <label>
115
+ green
116
+ <input type="checkbox" value="Glowing Blue" checked/><b>blue</b>
117
+ </label>
118
+ </template>
119
+ </custom-element>
120
+
121
+ </template>
122
+ </html-demo-element>
123
+
124
+
125
+ <html-demo-element legend="5. External template( inline lib )"
126
+ description="green label with blue text button ">
127
+ <template>
128
+ <template id="template-5">
129
+ <style>
130
+ color:green;
131
+ i{ color: blue;}
132
+ </style>
133
+ <p>
134
+ green
135
+ <i>blue</i>
136
+ </p>
137
+ </template>
138
+ <custom-element src="#template-5"></custom-element>
139
+
140
+ </template>
141
+ </html-demo-element>
142
+
143
+ <html-demo-element legend="6. External template( ext lib )"
144
+ description="Grid with 8 hex shaped buttons with text and icon ">
145
+ <template>
146
+ <a href="hex-grid-dce.html">hex-grid-dce.html</a>
147
+ <custom-element src="hex-grid-dce.html#hex-grid-template">
148
+ <template>
149
+ <style>nav{--hex-grid-size: 5rem; margin-left:2rem; }</style>
150
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
151
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
152
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
153
+ <img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
154
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
155
+ <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
156
+ <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
157
+ <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
158
+ </template>
159
+ </custom-element>
160
+
161
+ </template>
162
+ </html-demo-element>
163
+
164
+
165
+
166
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
167
+
168
+ </body>
169
+ </html>