@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/public/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/public/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/public/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/public/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>
package/public/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/public/demo/ss.html ADDED
@@ -0,0 +1,57 @@
1
+ <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1"><http-request xmlns="" url="/reflect" slice="page" data-dce-id="2"></http-request><p xmlns="" data-dce-id="3">Pokemon Count: 6</p>
2
+ <ul xmlns="" data-dce-id="6">
3
+ <var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">request</dce-text></var><div data-dce-id="9">
4
+ <var data-dce-id="10">@url</var><dce-text data-dce-id="11">
5
+ =
6
+ </dce-text><code data-testid="attr-url" data-dce-id="12">/reflect</code>
7
+ </div>
8
+ <div data-dce-id="9-1">
9
+ <var data-dce-id="10">@data-dce-id</var><dce-text data-dce-id="11">
10
+ =
11
+ </dce-text><code data-testid="attr-data-dce-id" data-dce-id="12">2</code>
12
+ </div>
13
+ </ul>
14
+ <ul xmlns="" data-dce-id="6-1">
15
+ <var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">response</dce-text></var><div data-dce-id="9">
16
+ <var data-dce-id="10">@ok</var><dce-text data-dce-id="11">
17
+ =
18
+ </dce-text><code data-testid="attr-ok" data-dce-id="12">true</code>
19
+ </div>
20
+ <div data-dce-id="9-1">
21
+ <var data-dce-id="10">@status</var><dce-text data-dce-id="11">
22
+ =
23
+ </dce-text><code data-testid="attr-status" data-dce-id="12">200</code>
24
+ </div>
25
+ <div data-dce-id="9-2">
26
+ <var data-dce-id="10">@statusText</var><dce-text data-dce-id="11">
27
+ =
28
+ </dce-text><code data-testid="attr-statusText" data-dce-id="12">OK</code>
29
+ </div>
30
+ <div data-dce-id="9-3">
31
+ <var data-dce-id="10">@type</var><dce-text data-dce-id="11">
32
+ =
33
+ </dce-text><code data-testid="attr-type" data-dce-id="12">basic</code>
34
+ </div>
35
+ <div data-dce-id="9-4">
36
+ <var data-dce-id="10">@url</var><dce-text data-dce-id="11">
37
+ =
38
+ </dce-text><code data-testid="attr-url" data-dce-id="12">http://localhost:5173/reflect</code>
39
+ </div>
40
+ <div data-dce-id="9-5">
41
+ <var data-dce-id="10">@redirected</var><dce-text data-dce-id="11">
42
+ =
43
+ </dce-text><code data-testid="attr-redirected" data-dce-id="12">false</code>
44
+ </div>
45
+ </ul><button xmlns="" data-dce-id="5">bulbasaur</button><button xmlns="" data-dce-id="5-1">ivysaur</button><button xmlns="" data-dce-id="5-2">venusaur</button><button xmlns="" data-dce-id="5-3">charmander</button><button xmlns="" data-dce-id="5-4">charmeleon</button><button xmlns="" data-dce-id="5-5">charizard</button>
46
+ <ul xmlns="" data-dce-id="6-2">
47
+ <var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">data</dce-text></var><div data-dce-id="9">
48
+ <var data-dce-id="10">@count</var><dce-text data-dce-id="11">
49
+ =
50
+ </dce-text><code data-testid="attr-count" data-dce-id="12">1279</code>
51
+ </div>
52
+ <div data-dce-id="9-1">
53
+ <var data-dce-id="10">@next</var><dce-text data-dce-id="11">
54
+ =
55
+ </dce-text><code data-testid="attr-next" data-dce-id="12">https://pokeapi.co/api/v2/pokemon?offset=6&amp;limit=6</code>
56
+ </div>
57
+ </ul></dce-root>
package/public/demo/table.xml ADDED
@@ -0,0 +1,25 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <?xml-stylesheet type="text/xsl" href="table.xsl"?>
3
+ <div xmlns="http://www.w3.org/1999/xhtml">
4
+ <payload>
5
+ <span slot=""></span>
6
+ <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
7
+ the seed grows in size as the Pokémon does.
8
+ </p>
9
+ <span slot=""></span>
10
+ <ul slot="">
11
+ <li pokemon-id="2">ivysaur</li>
12
+ <li pokemon-id="3">venusaur</li>
13
+ </ul>
14
+ <span slot=""></span>
15
+ </payload>
16
+ <attributes>
17
+ <title>bulbasaur</title>
18
+ <data-smile>👼</data-smile>
19
+ <pokemon-id>1</pokemon-id>
20
+ </attributes>
21
+ <dataset>
22
+ <smile>👼</smile>
23
+ </dataset>
24
+ <slice></slice>
25
+ </div>