@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/hex-grid-dce.html ADDED
@@ -0,0 +1,183 @@
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
+ <script type="module" src="../custom-element.js"></script>
6
+
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
9
+ button{ font-family: 'Roboto', sans-serif; color: darkcyan;}
10
+ body{ background-color: #DDE2F1;}
11
+ </style>
12
+ </head>
13
+ <body>
14
+
15
+ <custom-element tag="hex-grid">
16
+ <template id="hex-grid-template">
17
+ <style>
18
+ section{ filter: drop-shadow(0px 2px 3px rgba(50, 50, 0, 0.5)) }
19
+ :root {
20
+ --hex-grid-size: 8rem;
21
+ }
22
+
23
+ nav {
24
+ --hex-grid-size: 8rem;
25
+ display: flex;
26
+ flex-wrap: wrap;
27
+ flex-direction: row;
28
+ justify-content: left;
29
+ margin-right: calc(var(--hex-grid-size)/2);
30
+ padding-bottom: calc(var(--hex-grid-size,8rem));
31
+ gap: 0.1rem;
32
+ section{
33
+ width: var(--hex-grid-size);
34
+ height: calc(1.53 *var(--hex-grid-size))
35
+ }
36
+ button {
37
+ display: flex;
38
+ flex-direction: column; align-items: center;
39
+ justify-content: center;
40
+ border: none;
41
+ width: var(--hex-grid-size,8rem);
42
+ min-width: var(--hex-grid-size,8rem);
43
+ height: var(--hex-grid-size,8rem);
44
+ padding: calc( var(--hex-grid-size,8rem)/8);
45
+ clip-path: polygon(50% 0, 100% 25%,100% 75%, 50% 100%, 0 75%, 0 25%);
46
+ &:hover,&:focus,&.focus{
47
+ transform: scale3d(0.9,0.9,0.9) ;
48
+ background-color: mediumaquamarine;
49
+ color: white;
50
+ }
51
+
52
+ img{ height: calc( var(--hex-grid-size,8rem)/2);}
53
+ }
54
+
55
+
56
+ section:nth-child(even){
57
+ width:0;
58
+ }
59
+ section:nth-child(even){
60
+ position: relative;
61
+ top: 50%;
62
+ button{
63
+ position: absolute;
64
+
65
+ top: calc(0.77*var(--hex-grid-size));
66
+ right: calc( -1* var(--hex-grid-size,8rem)/2);
67
+ }
68
+ }
69
+ }
70
+ </style>
71
+ <nav>
72
+ <for-each select="/datadom/payload/xhtml:*">
73
+ <if test="local-name(.) = 'style'">
74
+ <copy-of select="." />
75
+ </if>
76
+ <!-- sanitize blank spans -->
77
+ <if test="local-name(.) != 'style' and (local-name(.) != 'span' or normalize-space(.) != '')">
78
+ <section>
79
+ <button class="action">
80
+ {@alt}
81
+ <copy-of select="."/>
82
+ </button>
83
+ </section>
84
+ </if>
85
+ </for-each>
86
+ </nav>
87
+ </template>
88
+ </custom-element>
89
+
90
+ <!--<hex-grid>-->
91
+ <!-- <img src="wc-square.svg" alt="web component"/>-->
92
+ <!-- <img src="wc-square.svg" alt="123"/>-->
93
+ <!-- <span>Hey!</span>-->
94
+ <!--</hex-grid>-->
95
+ <hex-grid class="grid2x">
96
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
97
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
98
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
99
+ <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
100
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
101
+ <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
102
+ <img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
103
+ <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
104
+ <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
105
+ <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
106
+ <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
107
+ <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
108
+ <img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
109
+ <img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
110
+ <img src="https://global.discourse-cdn.com/standard17/uploads/threejs/original/2X/b/be2f75f72751c11cbe1593c69a99a52900bf12cb.svg" alt="ThreeJS" href="https://threejs.org/"/>
111
+ <img src="https://www.blazejs.org/logo/icon.png" alt="BlazeJS"/>
112
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/tailwindcss.webp" alt="Tailwind CSS"/>
113
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/flowbite.webp" alt="Flowbite"/>
114
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/chakra-ui.webp" alt="Chakra-UI"/>
115
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/graphql.webp" alt="GraphQL"/>
116
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/cloud-icon.png" alt="Meteor" href="https://www.meteor.com/"/>
117
+ <img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
118
+ <img src="https://www.svgrepo.com/show/330899/materialui.svg" alt="Material UI"/>
119
+ <img src="https://mithril.js.org/logo.svg" alt="Mithril.js" href="https://mithril.js.org/"/>
120
+ <img src="https://seeklogo.com/images/M/materialize-logo-0FCAD8A6F8-seeklogo.com.png" alt="Materialize"/>
121
+ <img src="https://seeklogo.com/images/P/preact-logo-64E4BF9ABC-seeklogo.com.png" alt="Preact"/>
122
+ <img src="https://seeklogo.com/images/D/dojo-logo-E24E2CA700-seeklogo.com.png" alt="Dojo"/>
123
+ <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/backbone-js-icon.svg" alt="Backbone.js"/>
124
+ <img src="https://d3js.org/logo.svg" alt="D3.js"/>
125
+ <img src="https://lodash.com/assets/img/lodash.svg" alt="Lodash"/>
126
+ <img src="https://www.chartjs.org/img/chartjs-logo.svg" alt="Chart.JS" href="https://www.chartjs.org/"/>
127
+ <img src="https://glimmerjs.com/images/favicon.png" alt="Glimmer" href="https://glimmerjs.com/"/>
128
+ <img src="https://sarcadass.github.io/granim.js/favicon.ico" alt="Granim.js" href="https://sarcadass.github.io/granim.js/"/>
129
+ <img src="https://leafletjs.com/docs/images/favicon.ico" alt="leaflet.js" href="https://leafletjs.com/"/>
130
+ <img src="https://animejs.com/documentation/assets/img/favicon.png" alt="Anime.JS"/>
131
+ <img src="https://www.algolia.com/algoliaweb-static-favicons/light-mode/apple-touch-icon.png" alt="Algolia"/>
132
+ <img src="https://momentjs.com/static/img/moment-favicon.png" alt="Moment" href="https://momentjs.com"/>
133
+ <img src="https://omniscientjs.github.io/assets/favicon.ico" alt="Omniscient" href="https://omniscientjs.github.io"/>
134
+ <img src="https://aurelia.io/styles/images/aurelia-icon.svg" alt="Aurelia" href="https://aurelia.io"/>
135
+ <img src="https://emberjs.com/favicons/icon.svg" alt="EmberJS" href="https://emberjs.com"/>
136
+ <img src="https://ionicframework.com/apple-icon-57x57.png" alt="Ionic" href="https://ionicframework.com/"/>
137
+ <img src="https://webix.com/assets/favicons/favicon-96x96.png" alt="Webix" href="https://webix.com/"/>
138
+ <img src="https://images.ctfassets.net/vkdbses00qqt/3Id5VwofmvaFbjuSumaOmM/592c2d2e523187bd054a16b358d5a7ec/framework.svg" alt="Gatsby" href="https://www.gatsbyjs.com/"/>
139
+ </hex-grid>
140
+
141
+ <custom-element tag="hex-row">
142
+ <template>
143
+ <style>
144
+ hex-grid {
145
+ nav {
146
+ --hex-grid-size:6rem;
147
+ display: inline-flex;
148
+ padding-bottom: 0;
149
+ margin-right: 0;
150
+ section{ margin-right: 0.2rem; height: var(--hex-grid-size);}
151
+ button:has([selected]){ background-color: #2d4554; color: burlywood; }
152
+ }
153
+ }
154
+ </style>
155
+ <for-each select="/datadom/payload/xhtml:*">
156
+ <!-- sanitize blank spans -->
157
+ <if test="local-name(.) != 'span' or normalize-space(.) != ''">
158
+ <hex-grid>
159
+ <copy-of select="."/>
160
+ </hex-grid>
161
+ </if>
162
+ </for-each>
163
+ </template>
164
+ </custom-element>
165
+ <hex-row class="grid2x">
166
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/chakra-ui.webp" alt="Chakra-UI"/>
167
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/graphql.webp" alt="GraphQL"/>
168
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/cloud-icon.png" alt="Meteor"/>
169
+ <img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery" selected/>
170
+ <img src="https://www.svgrepo.com/show/330899/materialui.svg" alt="Material UI"/>
171
+ <img src="https://mithril.js.org/logo.svg" alt="Mithril.js"/>
172
+ <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/backbone-js-icon.svg" alt="Backbone.js" href="https://backbonejs.org/"/>
173
+ <img src="https://ionicframework.com/apple-icon-57x57.png" alt="Ionic" href="https://ionicframework.com/"/>
174
+ </hex-row>
175
+
176
+
177
+
178
+ <style>
179
+ .grid2x{--hex-grid-size:16rem; margin-top: 8rem; }
180
+ </style>
181
+
182
+ </body>
183
+ </html>
package/src/custom-element/demo/hex-grid.html ADDED
@@ -0,0 +1,66 @@
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
+ <link rel="icon" href="./wc-square.svg"/>
6
+ <script type="module" src="../custom-element.js"></script>
7
+ <style>
8
+ html
9
+ { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
10
+ font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased;
11
+ }
12
+ #grid1 nav {
13
+ transform: perspective(15cm) rotateX(5deg) rotateY(40deg) translateX(20rem) translateY(6rem);
14
+ }
15
+ #grid2 nav {
16
+ transform: perspective(15cm) rotateX(5deg) rotateY(50deg) translateX(20rem) translateY(10rem);
17
+ }
18
+ </style>
19
+ </head>
20
+ <body>
21
+
22
+ <nav>
23
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
24
+ <h3>Example of DCE HTML as a library.</h3>
25
+ </nav>
26
+ <p>The template and its own responsive layout behavior demo resides in
27
+ <a href="hex-grid-dce.html">hex-grid-dce.html</a> file.</p>
28
+ <custom-element src="hex-grid-dce.html#hex-grid-template" tag="hex-grid" >
29
+ <template><i>loading hex-grid template from HTML lib file ...</i></template>
30
+ </custom-element>
31
+
32
+ <hex-grid id="grid1">
33
+ <template>
34
+ <style>
35
+ nav{
36
+ --hex-grid-size:5rem;
37
+ button dce-text{ position: absolute; top: 3rem; text-shadow: 0 0 3px white, 0 0 6px blue; }
38
+ }
39
+ </style>
40
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
41
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
42
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
43
+ <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
44
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
45
+ </template>
46
+ </hex-grid>
47
+ <hex-grid id="grid2">
48
+ <template>
49
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
50
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
51
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
52
+ <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
53
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
54
+ <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
55
+ <img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
56
+ <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
57
+ <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
58
+ <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
59
+ <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
60
+ <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
61
+ <img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
62
+ <img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
63
+ </template>
64
+ </hex-grid>
65
+ </body>
66
+ </html>
package/src/custom-element/demo/html-template.html ADDED
@@ -0,0 +1,126 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <head>
4
+ <title>template based on HTML file</title>
5
+ <style>svg {
6
+ width: 4rem;
7
+ }</style>
8
+ </head>
9
+ <body>
10
+ <script>console.error('Stranger danger!')</script>
11
+ <b id="wave">👋</b>
12
+ <b id="ok">👌</b>
13
+ <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
14
+ <defs>
15
+ <style>.cls-1 {
16
+ fill: #c2e6f1;
17
+ }
18
+
19
+ .cls-2 {
20
+ fill: #dcf1f7;
21
+ }
22
+
23
+ .cls-3 {
24
+ fill: #2d4554;
25
+ }
26
+
27
+ .cls-4 {
28
+ fill: #60cae5;
29
+ }</style>
30
+ </defs>
31
+ <polygon class="cls-3"
32
+ points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
33
+ <path class="cls-2"
34
+ d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
35
+ <path class="cls-2"
36
+ d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
37
+ <path class="cls-1"
38
+ d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
39
+ <path class="cls-2"
40
+ d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
41
+ <path class="cls-2"
42
+ d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
43
+ <path class="cls-2"
44
+ d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
45
+ <path class="cls-2"
46
+ d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
47
+ <path class="cls-4"
48
+ d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
49
+ <path class="cls-4"
50
+ d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
51
+ <path class="cls-4"
52
+ d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
53
+ <path class="cls-4"
54
+ d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
55
+ <path class="cls-4"
56
+ d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
57
+ <path class="cls-4"
58
+ d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
59
+ <path class="cls-4"
60
+ d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
61
+ <path class="cls-4"
62
+ d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
63
+ <path class="cls-2"
64
+ d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
65
+ <path class="cls-1"
66
+ d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
67
+ <path class="cls-1"
68
+ d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
69
+ <path class="cls-2"
70
+ d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
71
+ <path class="cls-1"
72
+ d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
73
+ <path class="cls-1"
74
+ d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
75
+ </svg>
76
+ <math id="sophomores-dream" display="block">
77
+ <mrow>
78
+ <msubsup>
79
+ <mo>∫</mo>
80
+ <mn>0</mn>
81
+ <mn>1</mn>
82
+ </msubsup>
83
+ <msup>
84
+ <mi>x</mi>
85
+ <mi>x</mi>
86
+ </msup>
87
+ <mo rspace="0.22em">⁢</mo>
88
+ <mo rspace="0">ⅆ</mo>
89
+ <mi>x</mi>
90
+ <mo>=</mo>
91
+ <munderover>
92
+ <mo>∑</mo>
93
+ <mrow>
94
+ <mi>n</mi>
95
+ <mo>=</mo>
96
+ <mn>1</mn>
97
+ </mrow>
98
+ <mn>∞</mn>
99
+ </munderover>
100
+ <msup>
101
+ <mrow>
102
+ <mo>(</mo>
103
+ <mrow>
104
+ <mo form="prefix">−</mo>
105
+ <mn>1</mn>
106
+ </mrow>
107
+ <mo>)</mo>
108
+ </mrow>
109
+ <mrow>
110
+ <mi>n</mi>
111
+ <mo>+</mo>
112
+ <mn>1</mn>
113
+ </mrow>
114
+ </msup>
115
+ <mo>⁢</mo>
116
+ <msup>
117
+ <mi>n</mi>
118
+ <mrow>
119
+ <mo form="prefix">−</mo>
120
+ <mi>n</mi>
121
+ </mrow>
122
+ </msup>
123
+ </mrow>
124
+ </math>
125
+ </body>
126
+ </html>
package/src/custom-element/demo/html-template.xhtml ADDED
@@ -0,0 +1,45 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <title>template based on HTML file</title>
6
+ </head>
7
+ <body>
8
+ <b id="wave">👋</b>
9
+ <b id="ok">👌</b>
10
+ <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>
11
+ <xsl:stylesheet
12
+ id="embedded-xsl"
13
+ version="1.0"
14
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
15
+ <xsl:output
16
+ method="html"
17
+ omit-xml-declaration="yes"
18
+ standalone="yes"
19
+ indent="yes"
20
+ />
21
+
22
+ <xsl:template match="/">
23
+ <xsl:apply-templates select="*"/>
24
+ </xsl:template>
25
+ <xsl:template match="*">
26
+ <details style="padding:0 1rem" open="open">
27
+ <summary>
28
+ <b style="color:green"><xsl:value-of select="name()"/></b>
29
+ <xsl:apply-templates select="@*"/>
30
+ </summary>
31
+ <xsl:value-of select="./text()"/>
32
+ <xsl:apply-templates select="*"/>
33
+ </details>
34
+ </xsl:template>
35
+ <xsl:template match="@*">
36
+ <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
37
+ </xsl:template>
38
+ <xsl:template match="text()">
39
+ <p>
40
+ <xsl:value-of select="."/>
41
+ </p>
42
+ </xsl:template>
43
+ </xsl:stylesheet>
44
+ </body>
45
+ </html>
package/src/custom-element/demo/html-template.xml ADDED
@@ -0,0 +1,45 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <title>template based on HTML file</title>
6
+ </head>
7
+ <body>
8
+ <b id="wave">👋</b>
9
+ <b id="ok">👌</b>
10
+ <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/><path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/><path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/><path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/><path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/><path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/><path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/><path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/><path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/><path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/><path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/><path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/><path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/></svg>
11
+ <xsl:stylesheet
12
+ id="embedded-xsl"
13
+ version="1.0"
14
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
15
+ <xsl:output
16
+ method="html"
17
+ omit-xml-declaration="yes"
18
+ standalone="yes"
19
+ indent="yes"
20
+ />
21
+
22
+ <xsl:template match="/">
23
+ <xsl:apply-templates select="*"/>
24
+ </xsl:template>
25
+ <xsl:template match="*">
26
+ <details style="padding:0 1rem" open="open">
27
+ <summary>
28
+ <b style="color:green"><xsl:value-of select="name()"/></b>
29
+ <xsl:apply-templates select="@*"/>
30
+ </summary>
31
+ <xsl:value-of select="./text()"/>
32
+ <xsl:apply-templates select="*"/>
33
+ </details>
34
+ </xsl:template>
35
+ <xsl:template match="@*">
36
+ <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
37
+ </xsl:template>
38
+ <xsl:template match="text()">
39
+ <p>
40
+ <xsl:value-of select="."/>
41
+ </p>
42
+ </xsl:template>
43
+ </xsl:stylesheet>
44
+ </body>
45
+ </html>
package/src/custom-element/demo/http-request.html ADDED
@@ -0,0 +1,143 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>http-request 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; flex-direction: column; align-items: center; flex: auto;
15
+ box-shadow: inset silver 0px 0px 1rem; min-width: 12rem; padding: 1rem;
16
+ color: coral; text-shadow: 1px 1px silver; font-weight: bolder;
17
+ }
18
+ button img{ max-height: 10vw; min-height: 4rem;}
19
+ table{ min-width: 16rem; }
20
+ td{ border-bottom: 1px solid silver; }
21
+ tfoot td{ border-bottom: none; }
22
+ td,th{text-align: right; }
23
+ caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
24
+ dce-1{ padding: 0; display: flex; flex-wrap: wrap;}
25
+ code{ text-align: right; min-width: 3rem;}
26
+ </style>
27
+ </head>
28
+ <body>
29
+
30
+ <nav>
31
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
32
+ </nav>
33
+
34
+
35
+ <html-demo-element legend="0. url from text to http-request "
36
+ description="read data from arbitrary URL">
37
+ <template>
38
+ <custom-element>
39
+ <template>
40
+
41
+ <button slice="url-string" slice-value="''" slice-event="click">⬇️set blank</button>
42
+ <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=6</button>
43
+ <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=3'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=3</button>
44
+ <input slice="url-string" value="{ //url-string ?? '' }" style="width:100%"/>
45
+ <button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
46
+ <http-request
47
+ url="{//fetch-url}"
48
+ slice="request_slice"
49
+ type="text"
50
+ mode="cors"
51
+ ></http-request>
52
+ <code>//fetch-url</code> from <code>{//fetch-url}</code><br/>
53
+ <ul><for-each select="//results">
54
+ <li>{@name}</li>
55
+ </for-each></ul>
56
+ </template>
57
+ </custom-element>
58
+ </template>
59
+ </html-demo-element>
60
+
61
+ <html-demo-element legend="1. http-request simplest"
62
+ description="load the list of pokemons">
63
+ <p>Should display 6 image buttons with pokemon name </p>
64
+ <template>
65
+ <custom-element>
66
+ <template><!-- wrapping into template to prevent images loading within DCE declaration -->
67
+ <p>Pokemon buttons from API</p>
68
+ <http-request
69
+ url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
70
+ slice="page"
71
+ method="GET"
72
+ header-accept="application/json"
73
+ ></http-request>
74
+ <variable name="slides-url"
75
+ >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</variable>
76
+ <for-each select="//results">
77
+ <variable name="pokeid"
78
+ select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
79
+ ></variable>
80
+ <button>
81
+ <img src="{$slides-url}/{$pokeid}.svg"
82
+ alt="{@name}"/>
83
+ {@name}
84
+ </button>
85
+ </for-each>
86
+ </template>
87
+ </custom-element>
88
+ </template>
89
+ </html-demo-element>
90
+
91
+ <html-demo-element legend="2. http-request response and headers"
92
+ description="request and response headers access demo">
93
+
94
+ <template>
95
+ <custom-element url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6">
96
+ <template> <!-- IMPORTANT! to wrap DCE payload into template to avoid
97
+ http-request initializing out of instance -->
98
+ <attribute name="url"></attribute>
99
+ <http-request
100
+ url="{url}"
101
+ slice="request_slice"
102
+ type="text"
103
+ mode="cors"
104
+ header-x-test="testing"
105
+ ></http-request>
106
+ Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
107
+ from <code>${url}</code>
108
+
109
+ <h3>Samples</h3>
110
+ <table>
111
+ <tr><th> //slice/request_slice/value/request/@mode </th>
112
+ <td>{ //slice/request_slice/value/request/@mode }</td></tr>
113
+ <tr><th> //slice/request_slice/value/response/headers/@content-type </th>
114
+ <td>{ //slice/request_slice/value/response/headers/@content-type }</td></tr>
115
+ <tr><th> //slice/request_slice/value/response/@status </th>
116
+ <td>{ //slice/request_slice/value/response/@status }</td></tr>
117
+ </table>
118
+ <apply-templates mode="display" select="//slice/request_slice/value/*"></apply-templates>
119
+ <xsl:template mode="display" match="*">
120
+ <fieldset>
121
+ <legend> {local-name(.)} </legend>
122
+ <ul>
123
+ <for-each select="@*">
124
+ <li>
125
+ <var data-testid="section-attribute">@{local-name(.)}</var>
126
+ =
127
+ <code><value-of select='.'/></code>
128
+ </li>
129
+ </for-each>
130
+ </ul>
131
+ <apply-templates mode="display" select="*"></apply-templates>
132
+ </fieldset>
133
+ </xsl:template>
134
+ </template>
135
+ </custom-element>
136
+ </template>
137
+ </html-demo-element>
138
+
139
+
140
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
141
+
142
+ </body>
143
+ </html>