@epa-wg/custom-element-dist 0.0.1

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 (284) hide show
  1. package/.editorconfig +11 -0
  2. package/.gitignore +26 -0
  3. package/.idea/codeStyles/codeStyleConfig.xml +5 -0
  4. package/.idea/compiler.xml +6 -0
  5. package/.idea/custom-element-dist.iml +13 -0
  6. package/.idea/inspectionProfiles/Project_Default.xml +6 -0
  7. package/.idea/misc.xml +6 -0
  8. package/.idea/modules.xml +8 -0
  9. package/.idea/vcs.xml +6 -0
  10. package/.storybook/main.ts +21 -0
  11. package/.storybook/preview.ts +17 -0
  12. package/.vscode/settings.json +24 -0
  13. package/LICENSE +201 -0
  14. package/README.md +32 -0
  15. package/bin/build.sh +8 -0
  16. package/bin/clean.sh +5 -0
  17. package/bin/postinstall.sh +17 -0
  18. package/bin/start.sh +2 -0
  19. package/coverage/base.css +224 -0
  20. package/coverage/block-navigation.js +87 -0
  21. package/coverage/coverage-final.json +16 -0
  22. package/coverage/favicon.png +0 -0
  23. package/coverage/index.html +161 -0
  24. package/coverage/prettify.css +1 -0
  25. package/coverage/prettify.js +2 -0
  26. package/coverage/sort-arrow-sprite.png +0 -0
  27. package/coverage/sorter.js +196 -0
  28. package/coverage/src/coverage.svg +10 -0
  29. package/coverage/src/custom-element/coverage.svg +10 -0
  30. package/coverage/src/custom-element/custom-element.js/coverage.svg +10 -0
  31. package/coverage/src/custom-element/custom-element.js.html +2149 -0
  32. package/coverage/src/custom-element/http-request.js/coverage.svg +10 -0
  33. package/coverage/src/custom-element/http-request.js.html +352 -0
  34. package/coverage/src/custom-element/index.html +161 -0
  35. package/coverage/src/custom-element/local-storage.js/coverage.svg +10 -0
  36. package/coverage/src/custom-element/local-storage.js.html +346 -0
  37. package/coverage/src/custom-element/location-element.js/coverage.svg +10 -0
  38. package/coverage/src/custom-element/location-element.js.html +343 -0
  39. package/coverage/src/index.html +116 -0
  40. package/coverage/src/mocks/coverage.svg +10 -0
  41. package/coverage/src/mocks/handlers.ts/coverage.svg +10 -0
  42. package/coverage/src/mocks/handlers.ts.html +172 -0
  43. package/coverage/src/mocks/index.html +116 -0
  44. package/coverage/src/stories/attributes.stories.ts/coverage.svg +10 -0
  45. package/coverage/src/stories/attributes.stories.ts.html +481 -0
  46. package/coverage/src/stories/coverage.svg +10 -0
  47. package/coverage/src/stories/css.stories.ts/coverage.svg +10 -0
  48. package/coverage/src/stories/css.stories.ts.html +397 -0
  49. package/coverage/src/stories/dom-merge.stories.ts/coverage.svg +10 -0
  50. package/coverage/src/stories/dom-merge.stories.ts.html +424 -0
  51. package/coverage/src/stories/external-template.stories.ts/coverage.svg +10 -0
  52. package/coverage/src/stories/external-template.stories.ts.html +820 -0
  53. package/coverage/src/stories/http-request.stories.ts/coverage.svg +10 -0
  54. package/coverage/src/stories/http-request.stories.ts.html +817 -0
  55. package/coverage/src/stories/index.html +236 -0
  56. package/coverage/src/stories/local-storage.stories.ts/coverage.svg +10 -0
  57. package/coverage/src/stories/local-storage.stories.ts.html +1249 -0
  58. package/coverage/src/stories/location-element.stories.ts/coverage.svg +10 -0
  59. package/coverage/src/stories/location-element.stories.ts.html +484 -0
  60. package/coverage/src/stories/renderPlay.ts/coverage.svg +10 -0
  61. package/coverage/src/stories/renderPlay.ts.html +151 -0
  62. package/coverage/src/stories/slice-events.stories.ts/coverage.svg +10 -0
  63. package/coverage/src/stories/slice-events.stories.ts.html +436 -0
  64. package/coverage/src/sum.ts/coverage.svg +10 -0
  65. package/coverage/src/sum.ts.html +94 -0
  66. package/dist/confused.svg +37 -0
  67. package/dist/custom-element-B4v-KaIh.cjs +53 -0
  68. package/dist/custom-element-_g0GTup2.js +436 -0
  69. package/dist/custom-element-bundle.cjs +1 -0
  70. package/dist/custom-element-bundle.js +31 -0
  71. package/dist/embed-1.html +3 -0
  72. package/dist/html-template.html +126 -0
  73. package/dist/html-template.xhtml +45 -0
  74. package/dist/html-template.xml +45 -0
  75. package/dist/http-request-BOvP4KTl.js +56 -0
  76. package/dist/http-request-DPrY7mGh.cjs +1 -0
  77. package/dist/local-storage-Boafngui.cjs +1 -0
  78. package/dist/local-storage-BqDEu2kF.js +59 -0
  79. package/dist/location-element-2m0gWq_d.cjs +1 -0
  80. package/dist/location-element-nA_wsqBt.js +49 -0
  81. package/dist/mockServiceWorker.js +284 -0
  82. package/dist/tree.xsl +33 -0
  83. package/dist/vite.svg +1 -0
  84. package/index.html +17 -0
  85. package/package.json +97 -0
  86. package/public/confused.svg +37 -0
  87. package/public/embed-1.html +3 -0
  88. package/public/html-template.html +126 -0
  89. package/public/html-template.xhtml +45 -0
  90. package/public/html-template.xml +45 -0
  91. package/public/mockServiceWorker.js +284 -0
  92. package/public/tree.xsl +33 -0
  93. package/public/vite.svg +1 -0
  94. package/src/assets/lit.svg +1 -0
  95. package/src/custom-element/custom-element.d.ts +36 -0
  96. package/src/custom-element/custom-element.js +688 -0
  97. package/src/custom-element/demo/a.html +63 -0
  98. package/src/custom-element/demo/confused.svg +37 -0
  99. package/src/custom-element/demo/data-slices.html +184 -0
  100. package/src/custom-element/demo/dce-social-preview.png +0 -0
  101. package/src/custom-element/demo/demo.css +22 -0
  102. package/src/custom-element/demo/dom-merge.html +123 -0
  103. package/src/custom-element/demo/embed-1.html +3 -0
  104. package/src/custom-element/demo/external-template.html +179 -0
  105. package/src/custom-element/demo/hex-grid-dce.html +183 -0
  106. package/src/custom-element/demo/hex-grid-transform.png +0 -0
  107. package/src/custom-element/demo/hex-grid.html +66 -0
  108. package/src/custom-element/demo/html-template.html +126 -0
  109. package/src/custom-element/demo/html-template.xhtml +45 -0
  110. package/src/custom-element/demo/html-template.xml +45 -0
  111. package/src/custom-element/demo/http-request.html +143 -0
  112. package/src/custom-element/demo/local-storage.html +218 -0
  113. package/src/custom-element/demo/location-element.html +155 -0
  114. package/src/custom-element/demo/logo.png +0 -0
  115. package/src/custom-element/demo/parameters.html +70 -0
  116. package/src/custom-element/demo/s.xml +14 -0
  117. package/src/custom-element/demo/s.xslt +76 -0
  118. package/src/custom-element/demo/scoped-css.html +169 -0
  119. package/src/custom-element/demo/ss.html +57 -0
  120. package/src/custom-element/demo/table.xml +25 -0
  121. package/src/custom-element/demo/table.xsl +293 -0
  122. package/src/custom-element/demo/template.xsl +46 -0
  123. package/src/custom-element/demo/tree.xml +25 -0
  124. package/src/custom-element/demo/tree.xsl +33 -0
  125. package/src/custom-element/demo/wc-square.svg +1 -0
  126. package/src/custom-element/demo/xhtml-template.xhtml +45 -0
  127. package/src/custom-element/demo/z.html +62 -0
  128. package/src/custom-element/demo/z.xml +60 -0
  129. package/src/custom-element/http-request.js +89 -0
  130. package/src/custom-element/ide/IDE.md +31 -0
  131. package/src/custom-element/ide/customData-dce.json +112 -0
  132. package/src/custom-element/ide/customData-xsl.json +1018 -0
  133. package/src/custom-element/ide/web-types-dce.json +111 -0
  134. package/src/custom-element/ide/web-types-xsl.json +867 -0
  135. package/src/custom-element/index.html +168 -0
  136. package/src/custom-element/index.js +7 -0
  137. package/src/custom-element/local-storage.js +87 -0
  138. package/src/custom-element/location-element.js +87 -0
  139. package/src/custom-element.test.ts +10 -0
  140. package/src/index.css +38 -0
  141. package/src/mocks/handlers.ts +29 -0
  142. package/src/mocks/pokemons.mock.ts +13 -0
  143. package/src/stories/Configure.mdx +364 -0
  144. package/src/stories/assets/accessibility.png +0 -0
  145. package/src/stories/assets/accessibility.svg +5 -0
  146. package/src/stories/assets/addon-library.png +0 -0
  147. package/src/stories/assets/assets.png +0 -0
  148. package/src/stories/assets/avif-test-image.avif +0 -0
  149. package/src/stories/assets/context.png +0 -0
  150. package/src/stories/assets/discord.svg +15 -0
  151. package/src/stories/assets/docs.png +0 -0
  152. package/src/stories/assets/figma-plugin.png +0 -0
  153. package/src/stories/assets/github.svg +3 -0
  154. package/src/stories/assets/share.png +0 -0
  155. package/src/stories/assets/styling.png +0 -0
  156. package/src/stories/assets/testing.png +0 -0
  157. package/src/stories/assets/theming.png +0 -0
  158. package/src/stories/assets/tutorials.svg +12 -0
  159. package/src/stories/assets/youtube.svg +4 -0
  160. package/src/stories/attributes.stories.ts +132 -0
  161. package/src/stories/attributes.test.ts +14 -0
  162. package/src/stories/css.stories.ts +104 -0
  163. package/src/stories/css.test.ts +12 -0
  164. package/src/stories/dom-merge.stories.ts +113 -0
  165. package/src/stories/dom-merge.test.ts +12 -0
  166. package/src/stories/external-template.stories.ts +245 -0
  167. package/src/stories/external-template.test.ts +12 -0
  168. package/src/stories/http-request.stories.ts +244 -0
  169. package/src/stories/http-request.test.ts +29 -0
  170. package/src/stories/local-storage.stories.ts +388 -0
  171. package/src/stories/local-storage.test.ts +12 -0
  172. package/src/stories/location-element.stories.ts +133 -0
  173. package/src/stories/location-element.test.ts +14 -0
  174. package/src/stories/renderPlay.ts +22 -0
  175. package/src/stories/slice-events.stories.ts +117 -0
  176. package/src/stories/slice-events.test.ts +12 -0
  177. package/src/sum.test.ts +6 -0
  178. package/src/sum.ts +4 -0
  179. package/src/vite-env.d.ts +1 -0
  180. package/storybook-static/assets/Color-RQJUDNI5-C4yZhNbM.js +1 -0
  181. package/storybook-static/assets/Configure-C7d36rng.js +173 -0
  182. package/storybook-static/assets/DocsRenderer-K4EAMTCU-BLMupvSb.js +2 -0
  183. package/storybook-static/assets/WithTooltip-Y7J54OF7-BAQSPSFk.js +1 -0
  184. package/storybook-static/assets/accessibility-W_h2acOZ.png +0 -0
  185. package/storybook-static/assets/addon-library-BWUCAmyN.png +0 -0
  186. package/storybook-static/assets/attributes.stories-ZB0RTY1d.js +151 -0
  187. package/storybook-static/assets/context-C0qIqeS4.png +0 -0
  188. package/storybook-static/assets/css.stories-CLSX-Xxd.js +86 -0
  189. package/storybook-static/assets/custom-element-BLZZ00dz.js +53 -0
  190. package/storybook-static/assets/docs---vsFbMi.png +0 -0
  191. package/storybook-static/assets/dom-merge.stories-CgHZUABU.js +138 -0
  192. package/storybook-static/assets/entry-preview-CQqNFx4W.js +8 -0
  193. package/storybook-static/assets/entry-preview-docs-CWgqLfd3.js +2 -0
  194. package/storybook-static/assets/external-template.stories-DtSLMxvg.js +316 -0
  195. package/storybook-static/assets/figma-plugin-CH2hELiO.png +0 -0
  196. package/storybook-static/assets/formatter-B5HCVTEV-tKeEfJA9.js +58 -0
  197. package/storybook-static/assets/http-request.stories-CUzlXO89.js +300 -0
  198. package/storybook-static/assets/iframe-gCvlWuoC.js +2 -0
  199. package/storybook-static/assets/index-CBQwM6ST.js +508 -0
  200. package/storybook-static/assets/index-CDavW7r9.js +193 -0
  201. package/storybook-static/assets/index-CQA5dlr6.js +13 -0
  202. package/storybook-static/assets/index-Cc7K62zD.js +3 -0
  203. package/storybook-static/assets/index-DgaNIR0t.js +1 -0
  204. package/storybook-static/assets/index-Dkj0J1ds.js +1 -0
  205. package/storybook-static/assets/index-DnEJ_bKa.js +1 -0
  206. package/storybook-static/assets/index-DrFu-skq.js +6 -0
  207. package/storybook-static/assets/lit-element-B4_0akdT.js +19 -0
  208. package/storybook-static/assets/local-storage.stories-BkO6djDz.js +415 -0
  209. package/storybook-static/assets/location-element.stories-DCIOUd0D.js +108 -0
  210. package/storybook-static/assets/preview-B4GcaC1c.js +1 -0
  211. package/storybook-static/assets/preview-B63p-W8V.js +20 -0
  212. package/storybook-static/assets/preview-BAz7FMXc.js +396 -0
  213. package/storybook-static/assets/preview-BDY5ThwJ.js +1 -0
  214. package/storybook-static/assets/preview-C6t8KBFr.js +1 -0
  215. package/storybook-static/assets/preview-CYD85dwb.js +7 -0
  216. package/storybook-static/assets/preview-CkgAD_DE.js +2 -0
  217. package/storybook-static/assets/preview-D8LadFCz.js +48 -0
  218. package/storybook-static/assets/preview-DNpCpRPf.js +1 -0
  219. package/storybook-static/assets/preview-PxUn-cIn.js +1 -0
  220. package/storybook-static/assets/share-DGA-UcQf.png +0 -0
  221. package/storybook-static/assets/slice-events.stories-DXKjXI37.js +115 -0
  222. package/storybook-static/assets/styling-Bk6zjRzU.png +0 -0
  223. package/storybook-static/assets/syntaxhighlighter-JOJW2KGS-C04pIVD3.js +1 -0
  224. package/storybook-static/assets/testing-cbzR9l9r.png +0 -0
  225. package/storybook-static/assets/theming-D6WJLNoW.png +0 -0
  226. package/storybook-static/assets/tiny-invariant-BxWVcicq.js +1 -0
  227. package/storybook-static/confused.svg +37 -0
  228. package/storybook-static/embed-1.html +3 -0
  229. package/storybook-static/favicon.svg +7 -0
  230. package/storybook-static/html-template.html +126 -0
  231. package/storybook-static/html-template.xhtml +45 -0
  232. package/storybook-static/html-template.xml +45 -0
  233. package/storybook-static/iframe.html +492 -0
  234. package/storybook-static/index.html +163 -0
  235. package/storybook-static/index.json +1 -0
  236. package/storybook-static/mockServiceWorker.js +284 -0
  237. package/storybook-static/project.json +1 -0
  238. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +327 -0
  239. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +40 -0
  240. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +3 -0
  241. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js.LEGAL.txt +0 -0
  242. package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js +12 -0
  243. package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js.LEGAL.txt +0 -0
  244. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +60 -0
  245. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +18 -0
  246. package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js +3 -0
  247. package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js.LEGAL.txt +0 -0
  248. package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js +3 -0
  249. package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js.LEGAL.txt +0 -0
  250. package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js +3 -0
  251. package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js.LEGAL.txt +0 -0
  252. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +3 -0
  253. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js.LEGAL.txt +0 -0
  254. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +33 -0
  255. package/storybook-static/sb-addons/interactions-10/manager-bundle.js.LEGAL.txt +0 -0
  256. package/storybook-static/sb-addons/links-1/manager-bundle.js +3 -0
  257. package/storybook-static/sb-addons/links-1/manager-bundle.js.LEGAL.txt +0 -0
  258. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +3 -0
  259. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js.LEGAL.txt +0 -0
  260. package/storybook-static/sb-common-assets/fonts.css +31 -0
  261. package/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  262. package/storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  263. package/storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  264. package/storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  265. package/storybook-static/sb-manager/WithTooltip-Y7J54OF7-CEHQ77YF.js +1 -0
  266. package/storybook-static/sb-manager/chunk-E3WK6ZOZ.js +234 -0
  267. package/storybook-static/sb-manager/chunk-E6ABNH5R.js +183 -0
  268. package/storybook-static/sb-manager/chunk-FEE35O7J.js +9 -0
  269. package/storybook-static/sb-manager/chunk-S4VOIVUE.js +347 -0
  270. package/storybook-static/sb-manager/chunk-XCO5HRLK.js +6 -0
  271. package/storybook-static/sb-manager/chunk-XP3HGWTR.js +1 -0
  272. package/storybook-static/sb-manager/formatter-B5HCVTEV-7DCBOGO6.js +58 -0
  273. package/storybook-static/sb-manager/globals-module-info.js +1 -0
  274. package/storybook-static/sb-manager/globals-runtime.js +1 -0
  275. package/storybook-static/sb-manager/globals.js +1 -0
  276. package/storybook-static/sb-manager/index.js +1 -0
  277. package/storybook-static/sb-manager/runtime.js +1 -0
  278. package/storybook-static/sb-manager/syntaxhighlighter-JOJW2KGS-VF6EEVPI.js +1 -0
  279. package/storybook-static/sb-preview/globals.js +1 -0
  280. package/storybook-static/sb-preview/runtime.js +139 -0
  281. package/storybook-static/tree.xsl +33 -0
  282. package/storybook-static/vite.svg +1 -0
  283. package/tsconfig.json +25 -0
  284. package/vite.config.js +55 -0
package/src/custom-element/demo/local-storage.html ADDED
@@ -0,0 +1,218 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>custom-element Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg" />
7
+ <script type="module" src="../local-storage.js"></script>
8
+ <script type="module" src="../custom-element.js"></script>
9
+ <style>
10
+ @import "./demo.css";
11
+
12
+ button{ background: forestgreen; }
13
+ table{ min-width: 16rem; }
14
+ td{ border-bottom: 1px solid silver; }
15
+ tfoot td{ border-bottom: none; }
16
+ td,th{text-align: right; }
17
+ caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
18
+ </style>
19
+
20
+ <script>
21
+ window.JsonSample = {a:1,b:'B'};
22
+ </script>
23
+ </head>
24
+ <body>
25
+
26
+ <nav>
27
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
28
+ </nav>
29
+ <main>
30
+ <code>local-storage</code> allows to read and write its value to the key in <code>localStorage</code>.
31
+ The <code>type</code> attribute allows to place the validation constrains to the value: when the value does not
32
+ match the expected type, it would not be assigned, keeping empty <code>value</code> instead.
33
+ </main>
34
+ <html-demo-element legend="0. read localStorage text value"
35
+ description="click should set text-key slice via localStorage change.">
36
+ <template>
37
+ <custom-element>
38
+ <template>
39
+ <local-storage key="textKey" slice="text-key" type="text" live="live"></local-storage>
40
+ <button onclick="localStorage.setItem('textKey','text value')">text value</button>
41
+ <button onclick="localStorage.setItem('textKey','another value')">another value</button>
42
+ //text-key: <code>{//text-key}</code>
43
+ </template>
44
+ </custom-element>
45
+ </template>
46
+ </html-demo-element>
47
+
48
+ <html-demo-element legend="1. always override "
49
+ description="value in localStorage[] should be always reset to ABC. click should set text-key slice via localStorage change.">
50
+ <template>
51
+ <custom-element>
52
+ <template>
53
+ <!-- always reset -->
54
+ <local-storage slice="override-key" key="overrideKey" type="text" value="ABC"></local-storage>
55
+ <button onclick="localStorage.setItem( 'overrideKey','text value')">text value</button>
56
+ <button onclick="localStorage.removeItem('overrideKey' )">clear key</button>
57
+ //override-key: <code>{ //override-key }</code>
58
+ </template>
59
+ </custom-element>
60
+ </template>
61
+ </html-demo-element>
62
+
63
+ <html-demo-element legend="2. from storage with default "
64
+ description="default overridden by button, refresh should preserve updated value">
65
+ <template>
66
+ <custom-element>
67
+ <template>
68
+ <!-- initially set value to DEF and update by button. On reload the value picked from localStorage -->
69
+ <local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF'"></local-storage>
70
+ <button onclick="localStorage.clear()">clear localStorage</button>
71
+ <button onclick="localStorage.removeItem('attr2Key')">clear key</button>
72
+ <button onclick="localStorage.setItem('attr2Key','text value')">updated value</button>
73
+ //attr2-key: <code>{//attr2-key}</code>
74
+ </template>
75
+ </custom-element>
76
+ </template>
77
+ </html-demo-element>
78
+
79
+ <html-demo-element legend="3. localStorage type"
80
+ description="type validation happy path. Invalid for type value in storage would be treated as null">
81
+ <template>
82
+ <custom-element>
83
+ <template>
84
+ <local-storage key="dateKey" slice="date-key" type="date" live="live"></local-storage>
85
+ <local-storage key="timeKey" slice="time-key" type="time" live="live"></local-storage>
86
+ <local-storage key="localDateTimeKey" slice="local-date-time" type="datetime-local" live="live"></local-storage>
87
+ <local-storage key="numberKey" slice="number-key" type="number" live="live"></local-storage>
88
+ <local-storage key="jsonKey" slice="json-key" type="json" live="live"></local-storage>
89
+ <input id="typesinput" placeholder="set value" /><button onclick="
90
+ 'dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
91
+ .map( k=> localStorage.setItem(k, typesinput.value) )
92
+ "> set to all</button><br/>
93
+ <hr/>
94
+ date-key:
95
+ <button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')" >2024-04-21T03:58:42.131Z </button>
96
+ <button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())" >now </button>
97
+ <button onclick="localStorage.setItem('dateKey', 'ABC' )" >date ABC - invalid </button>
98
+ <code>{//date-key }</code><br/>
99
+ time-key:
100
+ <button onclick="localStorage.setItem('timeKey', '13:30')" >13:30 </button>
101
+ <code>{//time-key }</code><br/>
102
+ local-date-time:
103
+ <button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')" >21977-04-01T14:00:30 - local </button>
104
+ <code>{//local-date-time}</code><br/>
105
+ number-key:
106
+ <button onclick="localStorage.setItem('numberKey', '2024' )" >2024 - number </button>
107
+ <button onclick="localStorage.setItem('numberKey', '24' )" >24 - number </button>
108
+ <button onclick="localStorage.setItem('numberKey', '1.23456e+5' )" >1.23456e+5 </button>
109
+ <button onclick="localStorage.setItem('numberKey', '0001' )" >0001 </button>
110
+ <button onclick="localStorage.setItem('numberKey', '000' )" >000 </button>
111
+ <button onclick="localStorage.setItem('numberKey', '0' )" >0 </button>
112
+ <button onclick="localStorage.setItem('numberKey', 'ABC' )" >ABC - invalid, NaN </button>
113
+ <code>{//number-key }</code> <br/>
114
+ <fieldset>
115
+ <legend>json-key: </legend>
116
+
117
+ <button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))" >'ABC' - string </button>
118
+ <button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))" >12.345 - number </button>
119
+ <button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )" >a:1,b:'B' -json </button>
120
+ <button onclick="localStorage.setItem('jsonKey', 'ABC' )" >ABC - invalid </button><br/>
121
+ json-key:<code><xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"></xsl:apply-templates></code>
122
+ </fieldset>
123
+ <xsl:template mode="json" match="*|@*">
124
+ <div>{name()} : {.}</div>
125
+ </xsl:template>
126
+ </template>
127
+ </custom-element>
128
+ </template>
129
+ </html-demo-element>
130
+
131
+ <html-demo-element legend="3. localStorage simplest"
132
+ description="local-storage read only during initial and only render, does not track the changes.">
133
+ <p>Has to produce 12🍒</p>
134
+ <template>
135
+ <custom-element tag="dce-1" hidden>
136
+ {//slice/fruits/text()}
137
+ <slot>🤔</slot>
138
+ <local-storage key="cherries" slice="fruits"></local-storage>
139
+ </custom-element>
140
+ <dce-1>🍒</dce-1>
141
+ </template>
142
+ </html-demo-element>
143
+
144
+ <html-demo-element legend="2. localStorage basket JSON "
145
+ description="local-storage tracks changes">
146
+ <p>Click the fruits button to add into cart </p>
147
+ <template>
148
+ <custom-element tag="dce-2" hidden>
149
+ <template>
150
+ <local-storage key="basket" slice="basket" live type="json"></local-storage>
151
+ <xhtml:table xmlns:xhtml="http://www.w3.org/1999/xhtml" >
152
+ <xhtml:tbody>
153
+ <for-each select="//basket/value/@*">
154
+ <xhtml:tr>
155
+ <xhtml:th> {name()} </xhtml:th>
156
+ <xhtml:td> {.} </xhtml:td>
157
+ </xhtml:tr>
158
+ </for-each>
159
+ </xhtml:tbody>
160
+ <xhtml:tfoot>
161
+ <xhtml:tr>
162
+ <xhtml:td><slot>🤔</slot></xhtml:td>
163
+ <xhtml:th> {sum(//slice/basket/value/@*)} </xhtml:th>
164
+ </xhtml:tr>
165
+ </xhtml:tfoot>
166
+ </xhtml:table>
167
+ </template>
168
+ </custom-element>
169
+ <dce-2>🛒total</dce-2>
170
+ </template>
171
+ </html-demo-element>
172
+
173
+ <fieldset>
174
+ <legend>localStorage content</legend>
175
+ <p>The demo should display count 1🍋 and 12🍒 initially.
176
+ The value in <code>localStorage</code> is incremented
177
+ when clicked on matching button
178
+ </p>
179
+ <button name="lemons" value="1" >🍋</button>
180
+ <button name="cherries" value="12" >🍒</button>
181
+ <button name="apple" >🍏</button>
182
+ <button name="banana" >🍌</button>
183
+ <table>
184
+ <caption> Click to add the localStorage value </caption>
185
+ <thead><tr><th>key</th><th>value</th></tr></thead>
186
+ <tbody id="local-storage-values"></tbody>
187
+ </table>
188
+ </fieldset>
189
+ <script type="module">
190
+ import { localStorageSetItem } from '../local-storage.js';
191
+ import $ from 'https://unpkg.com/css-chain@1/CssChain.js';
192
+
193
+ const basket = {cherries: 12, lemons:1 };
194
+ localStorageSetItem( 'basket', JSON.stringify(basket) );
195
+
196
+ $('button[name]')
197
+ .forEach( b=> localStorage.setItem( b.name, b.value ) )
198
+ .addEventListener( 'click', e =>
199
+ { const k = e.target.name;
200
+ basket[k] || (basket[k] = 1);
201
+ localStorageSetItem( k, basket[k] = 1+1*localStorage[k] )
202
+ localStorageSetItem( 'basket', JSON.stringify(basket) );
203
+ renderStorage();
204
+ } );
205
+
206
+ const renderStorage = () =>
207
+ window[ 'local-storage-values' ].innerHTML = [...Array(localStorage.length).keys()]
208
+ .map( k => `<tr><th>${ localStorage.key(k) }</th><td>${ localStorage.getItem( localStorage.key(k) ) }</td>` ).join( '\n' );
209
+
210
+ window.addEventListener( 'storage', renderStorage );
211
+ window.addEventListener( 'local-storage', renderStorage );
212
+ renderStorage();
213
+ </script>
214
+
215
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
216
+
217
+ </body>
218
+ </html>
package/src/custom-element/demo/location-element.html ADDED
@@ -0,0 +1,155 @@
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
+
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="Change window URL">
26
+ <template>
27
+ <a href="#dce2">#dce2</a>
28
+ <form method="get">
29
+ <input name="p1" value="abc"/>
30
+ <input name="p2" value="def"/>
31
+ <input type="submit" value="params"/>
32
+ </form>
33
+ <button onclick="history.pushState( {},'', 'location-element.html?pushstate')"
34
+ >history.pushState</button>
35
+ <button onclick="history.replaceState( {},'', 'location-element.html?replaceState#dce1')"
36
+ >history.replaceState</button>
37
+
38
+ </template>
39
+ </html-demo-element>
40
+
41
+
42
+ <html-demo-element legend="1. window.location live update"
43
+ description="In the page beginning change the window URL via link or by history change"
44
+ id="dce2"
45
+ >
46
+ <p>Has to produce URL properties</p>
47
+ <template>
48
+ <custom-element tag="dce-2" hidden>
49
+ <template>
50
+
51
+ <location-element slice="window-url" live></location-element>
52
+
53
+ <xhtml:table>
54
+ <xhtml:tbody>
55
+ <xhtml:tr>
56
+ <xhtml:th><h3> URL properties </h3></xhtml:th>
57
+ <xhtml:td>{count(//value/@*)}</xhtml:td>
58
+ </xhtml:tr>
59
+ <apply-templates mode="attrs" select="//value/@*"></apply-templates>
60
+ </xhtml:tbody>
61
+ </xhtml:table>
62
+ <xhtml:table>
63
+ <tr><th><h3> URL parameters </h3></th></tr>
64
+ <apply-templates mode="attrs" select="//params/*/*"></apply-templates>
65
+ </xhtml:table>
66
+ <xsl:template mode="attrs" match="*|@*">
67
+ <xhtml:tr>
68
+ <xhtml:th>{name()}</xhtml:th>
69
+ <xhtml:td>{.}</xhtml:td>
70
+ </xhtml:tr>
71
+ </xsl:template>
72
+ </template>
73
+ </custom-element>
74
+ <dce-2>?</dce-2>
75
+ </template>
76
+ </html-demo-element>
77
+
78
+
79
+ <html-demo-element legend="2. window.location simplest"
80
+ description="location read only during initial and only render, does not track the changes."
81
+ id="dce1">
82
+ <p>Has to produce URL properties</p>
83
+ <template>
84
+ <custom-element tag="dce-1" hidden>
85
+ <template>
86
+
87
+ <location-element slice="window-url"></location-element>
88
+
89
+ <xhtml:table>
90
+ <xhtml:tbody>
91
+ <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
92
+ <for-each select="//slice/window-url/value/@*">
93
+ <xhtml:tr>
94
+ <xhtml:th>{name()}</xhtml:th>
95
+ <xhtml:td>{.}</xhtml:td>
96
+ </xhtml:tr>
97
+ </for-each>
98
+ </xhtml:tbody>
99
+ <xhtml:tbody>
100
+ <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
101
+ <for-each select="//slice/window-url/value/params/*">
102
+ <xhtml:tr>
103
+ <xhtml:th>{name()}</xhtml:th>
104
+ <xhtml:td>{.}</xhtml:td>
105
+ </xhtml:tr>
106
+ </for-each>
107
+ </xhtml:tbody>
108
+ </xhtml:table>
109
+ </template>
110
+ </custom-element>
111
+ <dce-1>?</dce-1>
112
+ </template>
113
+ </html-demo-element>
114
+
115
+
116
+ <html-demo-element legend="3. External URL as HREF attribute"
117
+ description="url parsed and populated into slice."
118
+ id="dce3">
119
+ <p>Has to produce URL properties</p>
120
+ <template>
121
+ <custom-element tag="dce-3" hidden>
122
+ <template>
123
+
124
+ <location-element slice="href-url" href="https://my.example?a=1&b=2#3"></location-element>
125
+
126
+ <xhtml:table>
127
+ <xhtml:tbody>
128
+ <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
129
+ <for-each select="//slice/href-url/value/@*">
130
+ <xhtml:tr>
131
+ <xhtml:th>{name()}</xhtml:th>
132
+ <xhtml:td>{.}</xhtml:td>
133
+ </xhtml:tr>
134
+ </for-each>
135
+ </xhtml:tbody>
136
+ <xhtml:tbody>
137
+ <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
138
+ <for-each select="//slice/href-url/value/params/*">
139
+ <xhtml:tr>
140
+ <xhtml:th>{name()}</xhtml:th>
141
+ <xhtml:td>{.}</xhtml:td>
142
+ </xhtml:tr>
143
+ </for-each>
144
+ </xhtml:tbody>
145
+ </xhtml:table>
146
+ </template>
147
+ </custom-element>
148
+ <dce-3>?</dce-3>
149
+ </template>
150
+ </html-demo-element>
151
+
152
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
153
+
154
+ </body>
155
+ </html>
package/src/custom-element/demo/logo.png ADDED
Binary file
package/src/custom-element/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/src/custom-element/demo/s.xml ADDED
@@ -0,0 +1,14 @@
1
+ <div xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><!-- wrapping into template to prevent images loading within DCE declaration -->
2
+ <local-storage key="undefined" slice="s" }=""></local-storage>
3
+
4
+ <input placeholder="value for localStorage" slice="s" value="{ //s ?? 'undefined' }" />
5
+ <button>set</button>
6
+ <button slice="sv" slice-value="''" slice-event="click">set blank</button>
7
+ <button slice="sv" slice-value="'/reflect'" slice-event="click">/reflect</button>
8
+ <button slice="sv" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>
9
+ <button slice="sv" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>
10
+ <br />
11
+ <var>undefined</var>:<code>{ //slice/s }</code>
12
+ <br />
13
+ undefined
14
+ </div>
package/src/custom-element/demo/s.xslt ADDED
@@ -0,0 +1,76 @@
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
+ <http-request xmlns="" url="{concat(//s , '') }" slice="s" data-dce-id="2"/>
18
+ <p xmlns="" data-dce-id="3">Pokemon Count:
19
+ <xsl:value-of select="count(/datadom/slice/s//results)"/>
20
+ </p>
21
+ <xsl:if xmlns:xsl="http://www.w3.org/1999/XSL/Transform" test="count(/datadom/slice/s//results) &lt; 0">
22
+ <h3 xmlns="" data-dce-id="4">loading...</h3>
23
+ </xsl:if>
24
+ <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="/datadom/slice/s//results">
25
+ <xsl:variable name="pokeid"
26
+ select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"/>
27
+ <button xmlns="" data-dce-id="5">
28
+ <xsl:value-of select="@name">
29
+ </xsl:value-of>
30
+ </button>
31
+ </xsl:for-each>
32
+ <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="//slice/s/value/*">
33
+ <ul xmlns="" data-dce-id="6">
34
+ <var data-testid="request-section" data-dce-id="7">
35
+ <dce-text data-dce-id="8">
36
+ <xsl:value-of select="name(.)"/>
37
+ </dce-text>
38
+ </var>
39
+ <xsl:for-each select="@*">
40
+ <div data-dce-id="9">
41
+ <var data-dce-id="10">@<xsl:value-of select="local-name(.)"/>
42
+ </var>
43
+ <dce-text data-dce-id="11">
44
+ =
45
+ </dce-text>
46
+ <code data-testid="attr-{local-name(.)}" data-dce-id="12">
47
+ <xsl:value-of select="."/>
48
+ </code>
49
+ </div>
50
+ </xsl:for-each>
51
+ </ul>
52
+ </xsl:for-each>
53
+ </dce-root>
54
+ </xsl:template>
55
+ <xsl:template match="/">
56
+ <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
57
+ </xsl:template>
58
+ <xsl:template name="slot">
59
+ <xsl:param name="slotname"/>
60
+ <xsl:param name="defaultvalue"/>
61
+ <xsl:choose>
62
+ <xsl:when test="//payload/*[@slot=$slotname]">
63
+ <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
64
+ </xsl:when>
65
+ <xsl:otherwise>
66
+ <xsl:copy-of select="$defaultvalue"/>
67
+ </xsl:otherwise>
68
+ </xsl:choose>
69
+ </xsl:template>
70
+ <xsl:variable name="js-injected-body">
71
+ <xsl:call-template name="slot">
72
+ <xsl:with-param name="slotname" select="''"/>
73
+ <xsl:with-param name="defaultvalue"/>
74
+ </xsl:call-template>
75
+ </xsl:variable>
76
+ </xsl:stylesheet>