@epa-wg/custom-element 0.0.35 → 0.0.37

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 (10) hide show
  1. package/README.md +7 -5
  2. package/bin/xslDtd2Ide.mjs +1 -1
  3. package/custom-element.js +4 -0
  4. package/demo/a.html +41 -64
  5. package/demo/for-each.html +213 -0
  6. package/demo/s.xslt +94 -350
  7. package/ide/web-types-dce.json +1 -1
  8. package/ide/web-types-xsl.json +1 -1
  9. package/index.html +2 -1
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -268,7 +268,8 @@ i.e. slot `xxx` is matching `<i slot="xxx">...</i>` in payload.
268
268
  ```
269
269
 
270
270
  ## loops, variables
271
- Loop implemented via [for-each](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each)
271
+ Loop implemented via [for-each](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/for-each).
272
+ See [for-each table demo][for-each-demo] for examples including nested loops and XHTML namespace usage.
272
273
 
273
274
  [Variables in XSLT](https://developer.mozilla.org/en-US/docs/Web/XSLT/Element/variable)
274
275
 
@@ -340,17 +341,18 @@ within template
340
341
  [demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/index.html
341
342
  [css-demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/scoped-css.html
342
343
  [slice-demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/data-slices.html
344
+ [for-each-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/for-each.html
343
345
  [hex-grid-url]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/hex-grid.html
344
- [hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.35/demo/hex-grid-transform.png
346
+ [hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.37/demo/hex-grid-transform.png
345
347
  [local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
346
348
  [http-request-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
347
349
  [location-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
348
350
  [github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
349
351
  [npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element.svg
350
352
  [npm-url]: https://npmjs.org/package/@epa-wg/custom-element
351
- [coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.35/coverage/src/custom-element/coverage.svg
352
- [coverage-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.35/coverage/src/custom-element/index.html
353
- [storybook-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.35/storybook-static/index.html?path=/story/welcome--introduction
353
+ [coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/coverage/src/custom-element/coverage.svg
354
+ [coverage-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/coverage/src/custom-element/index.html
355
+ [storybook-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/storybook-static/index.html?path=/story/welcome--introduction
354
356
  [sandbox-url]: https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
355
357
  [webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
356
358
  [webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
package/bin/xslDtd2Ide.mjs CHANGED
@@ -116,7 +116,7 @@ writeFileSync( '.././ide/customData-xsl.json', JSON.stringify( vsCode, undefined
116
116
  const intelliJ = {
117
117
  "$schema": "http://json.schemastore.org/web-types",
118
118
  "name": "@epa-wg/custom-element",
119
- "version": "0.0.35",
119
+ "version": "0.0.37",
120
120
  "js-types-syntax": "typescript",
121
121
  "description-markup": "markdown",
122
122
  "contributions": {
package/custom-element.js CHANGED
@@ -682,6 +682,9 @@ export const toXsl = (el, defParent) => {
682
682
  while(el.firstChild)
683
683
  x.append(el.firstChild);
684
684
  const replacement = 'if,choose,for-each'.includes(el.localName) ? (() => {
685
+ const parent = el.parentElement;
686
+ if( !parent || parent.childNodes.length ===1 )
687
+ return x;
685
688
  const span = create('span');
686
689
  span.append(x);
687
690
  return span;
@@ -798,6 +801,7 @@ CustomElement extends HTMLElement
798
801
  processed[s] = ev;
799
802
  }
800
803
  Object.keys(processed).length !== 0 && transform();
804
+ this.customElementRegistry?.initialize(this);
801
805
  }
802
806
  let timeoutID;
803
807
 
package/demo/a.html CHANGED
@@ -1,80 +1,57 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
3
3
  <head>
4
4
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
5
  <title>http-request Declarative Custom Element implementation demo</title>
6
- <link rel="icon" href="./wc-square.svg"/>
6
+ <link rel="icon" href="./wc-square.svg" />
7
7
 
8
8
  <script type="module" src="../http-request.js"></script>
9
9
  <script type="module" src="../custom-element.js"></script>
10
10
  <style>
11
11
  @import "./demo.css";
12
12
 
13
- button {
14
- display: inline-flex;
15
- flex-direction: column;
16
- align-items: center;
17
- flex: auto;
18
- box-shadow: inset silver 0 0 1rem;
19
- min-width: 12rem;
20
- padding: 1rem;
21
- color: coral;
22
- text-shadow: 1px 1px silver;
23
- font-weight: bolder;
24
- }
25
-
26
- button img {
27
- max-height: 10vw;
28
- min-height: 4rem;
29
- }
30
-
31
- table {
32
- min-width: 16rem;
33
- }
34
-
35
- td {
36
- border-bottom: 1px solid silver;
37
- }
38
-
39
- tfoot td {
40
- border-bottom: none;
41
- }
42
-
43
- td, th {
44
- text-align: right;
45
- }
46
-
47
- caption {
48
- padding: 1rem;
49
- font-weight: bolder;
50
- font-family: sans-serif;
51
- }
52
-
53
- code {
54
- text-align: right;
55
- min-width: 3rem;
56
- }
57
-
58
- svg {
59
- max-height: 3rem;
60
- }
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;}
61
26
  </style>
62
27
  </head>
63
28
  <body>
64
29
 
65
-
66
- <custom-element tag="dce-link2" >
67
- <template>
68
-
69
- <attribute name="p3" select="//attributes/p3 ?? 'def_P3' "></attribute>
70
-
71
- p3: <code data-testid="t3">{$p3}</code>
72
- </template>
73
- </custom-element>
74
- <section>
75
- <dce-link2 id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2>
76
-
77
- </section>
78
-
30
+ <custom-element>
31
+ <template><!-- wrapping into template to prevent images loading within DCE declaration -->
32
+ <p>Pokemon buttons from API</p>
33
+ <http-request
34
+ url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
35
+ slice="page"
36
+ method="GET"
37
+ header-accept="application/json"
38
+ ></http-request>
39
+ <variable name="slides-url"
40
+ >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</variable>
41
+ {count(//results)}
42
+ <div><for-each select="//results">
43
+ <variable name="pokeid"
44
+ select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
45
+ ></variable>
46
+ <button>
47
+ <img src="{$slides-url}/{$pokeid}.svg"
48
+ alt="{@name}"/>
49
+ {@name}
50
+ </button>
51
+ </for-each>
52
+ </div>
53
+ </template>
54
+ </custom-element>
55
+ <button onclick="window.customElements.upgrade(document.body);console.log(9);">window.customElements.upgrade(document.body)</button>
79
56
  </body>
80
57
  </html>
package/demo/for-each.html ADDED
@@ -0,0 +1,213 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>for-each - Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg"/>
7
+
8
+ <script type="module" src="../custom-element.js"></script>
9
+ <style>
10
+ @import "./demo.css";
11
+
12
+ table {
13
+ border-collapse: collapse;
14
+ margin: 1rem 0;
15
+ }
16
+ th, td {
17
+ border: 1px solid #ccc;
18
+ padding: 0.5rem;
19
+ }
20
+ th {
21
+ background: #f0f0f0;
22
+ }
23
+ </style>
24
+ </head>
25
+ <body>
26
+
27
+ <nav>
28
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
29
+ <h3>for-each loop</h3>
30
+ <p>The <code>&lt;for-each&gt;</code> element iterates over a node-set selected by XPath expression
31
+ and renders its content for each node.</p>
32
+ <p><b>XHTML namespace use</b><br/>
33
+ HTML elements like <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;td&gt;</code>
34
+ have strict content model rules - only specific child elements are permitted.
35
+ For example, <code>&lt;table&gt;</code> only allows <code>&lt;thead&gt;</code>,
36
+ <code>&lt;tbody&gt;</code>, <code>&lt;tr&gt;</code> as children; <code>&lt;tr&gt;</code>
37
+ only allows <code>&lt;th&gt;</code> or <code>&lt;td&gt;</code>.<br/>
38
+ When the browser parses HTML, it moves non-permitted elements (like <code>&lt;for-each&gt;</code>)
39
+ outside the table before JavaScript runs.<br/>
40
+ Using <code>xhtml:</code> namespace prefix (e.g., <code>&lt;xhtml:table&gt;</code>,
41
+ <code>&lt;xhtml:tr&gt;</code>) prevents the browser from recognizing these as standard HTML
42
+ elements during initial parsing, preserving the template structure for DCE to process correctly.
43
+ See examples 4 and 6.
44
+ </p>
45
+ </nav>
46
+
47
+ <html-demo-element legend="1. Simple for-each"
48
+ description="Loop over inline XML data and render each item">
49
+ <template>
50
+ <custom-element>
51
+ <template>
52
+ <xsl:variable name="fruits">
53
+ <item>Apple</item>
54
+ <item>Banana</item>
55
+ <item>Cherry</item>
56
+ </xsl:variable>
57
+ <ul>
58
+ <for-each select="exsl:node-set($fruits)/*">
59
+ <li>{.}</li>
60
+ </for-each>
61
+ </ul>
62
+ </template>
63
+ </custom-element>
64
+ </template>
65
+ </html-demo-element>
66
+
67
+ <html-demo-element legend="2. for-each with position()"
68
+ description="Using position() to number items in the loop">
69
+ <template>
70
+ <custom-element>
71
+ <template>
72
+ <xsl:variable name="colors">
73
+ <color hex="#ff0000">Red</color>
74
+ <color hex="#00ff00">Green</color>
75
+ <color hex="#0000ff">Blue</color>
76
+ </xsl:variable>
77
+ <for-each select="exsl:node-set($colors)/*">
78
+ <div style="padding: 0.5rem; background: {@hex}; color: white;">
79
+ {position()}. {.}
80
+ </div>
81
+ </for-each>
82
+ </template>
83
+ </custom-element>
84
+ </template>
85
+ </html-demo-element>
86
+
87
+ <html-demo-element legend="3. Conditional for-each"
88
+ description="Initially empty, items shown when checkbox is checked">
89
+ <template>
90
+ <custom-element>
91
+ <template>
92
+ <xsl:variable name="items">
93
+ <item>First</item>
94
+ <item>Second</item>
95
+ <item>Third</item>
96
+ </xsl:variable>
97
+ <label>
98
+ <input type="checkbox" slice="show-items" value="yes"/>
99
+ Show items
100
+ </label>
101
+ <variable name="show" select="//show-items = 'yes'"></variable>
102
+ <div>
103
+ BEFORE
104
+ <for-each select="exsl:node-set($items)/*[$show]">
105
+ <span style="margin: 0 0.25rem; padding: 0.25rem; background: #e0e0ff;">
106
+ {position()}:{.}
107
+ </span>
108
+ </for-each>
109
+ AFTER
110
+ </div>
111
+ </template>
112
+ </custom-element>
113
+ </template>
114
+ </html-demo-element>
115
+
116
+ <html-demo-element legend="4. Nested for-each (Table)"
117
+ description="Nested loops to render table rows and cells">
118
+ <template>
119
+ <custom-element>
120
+ <template>
121
+ <xsl:variable name="table-data">
122
+ <row><cell>A1</cell><cell>A2</cell><cell>A3</cell></row>
123
+ <row><cell>B1</cell><cell>B2</cell><cell>B3</cell></row>
124
+ <row><cell>C1</cell><cell>C2</cell><cell>C3</cell></row>
125
+ </xsl:variable>
126
+ <variable name="rows" select="exsl:node-set($table-data)/*"></variable>
127
+ <xhtml:table>
128
+ <xhtml:thead>
129
+ <xhtml:tr>
130
+ <xhtml:th>Col 1</xhtml:th>
131
+ <xhtml:th>Col 2</xhtml:th>
132
+ <xhtml:th>Col 3</xhtml:th>
133
+ </xhtml:tr>
134
+ </xhtml:thead>
135
+ <xhtml:tbody>
136
+ <for-each select="$rows">
137
+ <xhtml:tr>
138
+ <for-each select="*">
139
+ <xhtml:td>{.}</xhtml:td>
140
+ </for-each>
141
+ </xhtml:tr>
142
+ </for-each>
143
+ </xhtml:tbody>
144
+ </xhtml:table>
145
+ </template>
146
+ </custom-element>
147
+ </template>
148
+ </html-demo-element>
149
+
150
+ <html-demo-element legend="5. for-each with attributes"
151
+ description="Access element attributes within the loop">
152
+ <template>
153
+ <custom-element>
154
+ <template>
155
+ <xsl:variable name="users">
156
+ <user id="1" role="admin">Alice</user>
157
+ <user id="2" role="editor">Bob</user>
158
+ <user id="3" role="viewer">Charlie</user>
159
+ </xsl:variable>
160
+ <for-each select="exsl:node-set($users)/*">
161
+ <div style="padding: 0.5rem; margin: 0.25rem 0; border-left: 3px solid #007bff;">
162
+ <strong>#{@id}</strong> {.}
163
+ <em>({@role})</em>
164
+ </div>
165
+ </for-each>
166
+ </template>
167
+ </custom-element>
168
+ </template>
169
+ </html-demo-element>
170
+
171
+ <html-demo-element legend="6. Dynamic table with toggle"
172
+ description="Table rows appear/disappear based on checkbox state">
173
+ <template>
174
+ <custom-element>
175
+ <template>
176
+ <xsl:variable name="products">
177
+ <product price="10">Widget</product>
178
+ <product price="25">Gadget</product>
179
+ <product price="15">Gizmo</product>
180
+ </xsl:variable>
181
+ <variable name="items" select="exsl:node-set($products)/*"></variable>
182
+ <label>
183
+ <input type="checkbox" slice="show-products" value="yes"/>
184
+ Show products
185
+ </label>
186
+ <variable name="visible" select="//show-products = 'yes'"></variable>
187
+ <xhtml:table>
188
+ <xhtml:thead>
189
+ <xhtml:tr>
190
+ <xhtml:th>#</xhtml:th>
191
+ <xhtml:th>Product</xhtml:th>
192
+ <xhtml:th>Price</xhtml:th>
193
+ </xhtml:tr>
194
+ </xhtml:thead>
195
+ <xhtml:tbody>
196
+ <for-each select="$items[$visible]">
197
+ <xhtml:tr>
198
+ <xhtml:td>{position()}</xhtml:td>
199
+ <xhtml:td>{.}</xhtml:td>
200
+ <xhtml:td>${@price}</xhtml:td>
201
+ </xhtml:tr>
202
+ </for-each>
203
+ </xhtml:tbody>
204
+ </xhtml:table>
205
+ </template>
206
+ </custom-element>
207
+ </template>
208
+ </html-demo-element>
209
+
210
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
211
+
212
+ </body>
213
+ </html>
package/demo/s.xslt CHANGED
@@ -14,357 +14,101 @@
14
14
  </xsl:template>
15
15
  <xsl:template mode="payload" match="attributes">
16
16
  <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
17
- <div xmlns="" data-testid="whole-text" data-dce-id="2">
18
- <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="test-data">
19
- <h6 id="cem-color-hue-variant" tabindex="-1" data-dce-id="3">cem-color-hue-variant</h6>
20
- <table data-dce-id="4">
21
- <thead data-dce-id="5">
22
- <tr data-dce-id="6">
23
- <th data-dce-id="7">Token</th>
24
- <th data-dce-id="8">Hue</th>
25
- <th data-dce-id="9">Variant</th>
26
- <th data-dce-id="10">Hex</th>
27
- <th data-dce-id="11">Label</th>
28
- <th data-dce-id="12">Intended use</th>
29
- </tr>
30
- </thead>
31
- <tbody data-dce-id="13">
32
- <tr data-dce-id="14">
33
- <td data-dce-id="15">
34
- <code data-dce-id="16">--cem-color-blue-xl</code>
35
- </td>
36
- <td data-dce-id="17">blue</td>
37
- <td data-dce-id="18">xl</td>
38
- <td data-dce-id="19">
39
- <code data-dce-id="20">#faf9fd</code>
40
- </td>
41
- <td data-dce-id="21">Lightest blue</td>
42
- <td data-dce-id="22">Comfort/trust emotion (light scene)</td>
43
- </tr>
44
- <tr data-dce-id="23">
45
- <td data-dce-id="24">
46
- <code data-dce-id="25">--cem-color-blue-l</code>
47
- </td>
48
- <td data-dce-id="26">blue</td>
49
- <td data-dce-id="27">l</td>
50
- <td data-dce-id="28">
51
- <code data-dce-id="29">#d7e3ff</code>
52
- </td>
53
- <td data-dce-id="30">Light blue</td>
54
- <td data-dce-id="31">Trust palette, attention semantic</td>
55
- </tr>
56
- <tr data-dce-id="32">
57
- <td data-dce-id="33">
58
- <code data-dce-id="34">--cem-color-blue-d</code>
59
- </td>
60
- <td data-dce-id="35">blue</td>
61
- <td data-dce-id="36">d</td>
62
- <td data-dce-id="37">
63
- <code data-dce-id="38">#002f65</code>
64
- </td>
65
- <td data-dce-id="39">Dark blue</td>
66
- <td data-dce-id="40">Trust palette (dark theme)</td>
67
- </tr>
68
- <tr data-dce-id="41">
69
- <td data-dce-id="42">
70
- <code data-dce-id="43">--cem-color-blue-xd</code>
71
- </td>
72
- <td data-dce-id="44">blue</td>
73
- <td data-dce-id="45">xd</td>
74
- <td data-dce-id="46">
75
- <code data-dce-id="47">#1a1b1f</code>
76
- </td>
77
- <td data-dce-id="48">Darkest blue</td>
78
- <td data-dce-id="49">Comfort/trust emotion (dark scene)</td>
79
- </tr>
80
- <tr data-dce-id="50">
81
- <td data-dce-id="51">
82
- <code data-dce-id="52">--cem-color-brown-xl</code>
83
- </td>
84
- <td data-dce-id="53">brown</td>
85
- <td data-dce-id="54">xl</td>
86
- <td data-dce-id="55">
87
- <code data-dce-id="56">#d7ccc8</code>
88
- </td>
89
- <td data-dce-id="57">Extra light brown</td>
90
- <td data-dce-id="58">Conservative palette (light theme)</td>
91
- </tr>
92
- <tr data-dce-id="59">
93
- <td data-dce-id="60">
94
- <code data-dce-id="61">--cem-color-brown-l</code>
95
- </td>
96
- <td data-dce-id="62">brown</td>
97
- <td data-dce-id="63">l</td>
98
- <td data-dce-id="64">
99
- <code data-dce-id="65">#a1887f</code>
100
- </td>
101
- <td data-dce-id="66">Light brown</td>
102
- <td data-dce-id="67">Conservative emotion, brand-3</td>
103
- </tr>
104
- <tr data-dce-id="68">
105
- <td data-dce-id="69">
106
- <code data-dce-id="70">--cem-color-brown-d</code>
107
- </td>
108
- <td data-dce-id="71">brown</td>
109
- <td data-dce-id="72">d</td>
110
- <td data-dce-id="73">
111
- <code data-dce-id="74">#4e342e</code>
112
- </td>
113
- <td data-dce-id="75">Dark brown</td>
114
- <td data-dce-id="76">Conservative palette (dark theme)</td>
115
- </tr>
116
- <tr data-dce-id="77">
117
- <td data-dce-id="78">
118
- <code data-dce-id="79">--cem-color-brown-xd</code>
119
- </td>
120
- <td data-dce-id="80">brown</td>
121
- <td data-dce-id="81">xd</td>
122
- <td data-dce-id="82">
123
- <code data-dce-id="83">#3e2723</code>
124
- </td>
125
- <td data-dce-id="84">Extra dark brown</td>
126
- <td data-dce-id="85">Conservative palette (dark theme, extreme)</td>
127
- </tr>
128
- <tr data-dce-id="86">
129
- <td data-dce-id="87">
130
- <code data-dce-id="88">--cem-color-cyan-xl</code>
131
- </td>
132
- <td data-dce-id="89">cyan</td>
133
- <td data-dce-id="90">xl</td>
134
- <td data-dce-id="91">
135
- <code data-dce-id="92">#f1fefe</code>
136
- </td>
137
- <td data-dce-id="93">Extra light cyan</td>
138
- <td data-dce-id="94">Used for comfort palette (light scenes)</td>
139
- </tr>
140
- <tr data-dce-id="95">
141
- <td data-dce-id="96">
142
- <code data-dce-id="97">--cem-color-cyan-l</code>
143
- </td>
144
- <td data-dce-id="98">cyan</td>
145
- <td data-dce-id="99">l</td>
146
- <td data-dce-id="100">
147
- <code data-dce-id="101">#00fbfb</code>
148
- </td>
149
- <td data-dce-id="102">Light cyan</td>
150
- <td data-dce-id="103">Calm palette, creativity accent</td>
151
- </tr>
152
- <tr data-dce-id="104">
153
- <td data-dce-id="105">
154
- <code data-dce-id="106">--cem-color-cyan-d</code>
155
- </td>
156
- <td data-dce-id="107">cyan</td>
157
- <td data-dce-id="108">d</td>
158
- <td data-dce-id="109">
159
- <code data-dce-id="110">#006a6a</code>
160
- </td>
161
- <td data-dce-id="111">Dark cyan</td>
162
- <td data-dce-id="112">Calm palette (dark theme)</td>
163
- </tr>
164
- <tr data-dce-id="113">
165
- <td data-dce-id="114">
166
- <code data-dce-id="115">--cem-color-cyan-xd</code>
167
- </td>
168
- <td data-dce-id="116">cyan</td>
169
- <td data-dce-id="117">xd</td>
170
- <td data-dce-id="118">
171
- <code data-dce-id="119">#001010</code>
172
- </td>
173
- <td data-dce-id="120">Extra dark cyan</td>
174
- <td data-dce-id="121">Used for comfort palette (dark scenes)</td>
175
- </tr>
176
- <tr data-dce-id="122">
177
- <td data-dce-id="123">
178
- <code data-dce-id="124">--cem-color-grey-l</code>
179
- </td>
180
- <td data-dce-id="125">grey</td>
181
- <td data-dce-id="126">l</td>
182
- <td data-dce-id="127">
183
- <code data-dce-id="128">#f1f1eb</code>
184
- </td>
185
- <td data-dce-id="129">Light grey</td>
186
- <td data-dce-id="130">Conservative palette, neutral backgrounds</td>
187
- </tr>
188
- <tr data-dce-id="131">
189
- <td data-dce-id="132">
190
- <code data-dce-id="133">--cem-color-grey-d</code>
191
- </td>
192
- <td data-dce-id="134">grey</td>
193
- <td data-dce-id="135">d</td>
194
- <td data-dce-id="136">
195
- <code data-dce-id="137">#1a1c18</code>
196
- </td>
197
- <td data-dce-id="138">Dark grey</td>
198
- <td data-dce-id="139">Conservative palette (dark theme)</td>
199
- </tr>
200
- <tr data-dce-id="140">
201
- <td data-dce-id="141">
202
- <code data-dce-id="142">--cem-color-orange-xl</code>
203
- </td>
204
- <td data-dce-id="143">orange</td>
205
- <td data-dce-id="144">xl</td>
206
- <td data-dce-id="145">
207
- <code data-dce-id="146">#f0f070</code>
208
- </td>
209
- <td data-dce-id="147">Extra light yellow</td>
210
- <td data-dce-id="148">Enthusiasm palette (light theme)</td>
211
- </tr>
212
- <tr data-dce-id="149">
213
- <td data-dce-id="150">
214
- <code data-dce-id="151">--cem-color-orange-l</code>
215
- </td>
216
- <td data-dce-id="152">orange</td>
217
- <td data-dce-id="153">l</td>
218
- <td data-dce-id="154">
219
- <code data-dce-id="155">#ffe082</code>
220
- </td>
221
- <td data-dce-id="156">Light orange</td>
222
- <td data-dce-id="157">Enthusiasm emotion, brand-2</td>
223
- </tr>
224
- <tr data-dce-id="158">
225
- <td data-dce-id="159">
226
- <code data-dce-id="160">--cem-color-orange-d</code>
227
- </td>
228
- <td data-dce-id="161">orange</td>
229
- <td data-dce-id="162">d</td>
230
- <td data-dce-id="163">
231
- <code data-dce-id="164">#723600</code>
232
- </td>
233
- <td data-dce-id="165">Dark orange</td>
234
- <td data-dce-id="166">Enthusiasm hype (dark theme)</td>
235
- </tr>
236
- <tr data-dce-id="167">
237
- <td data-dce-id="168">
238
- <code data-dce-id="169">--cem-color-orange-xd</code>
239
- </td>
240
- <td data-dce-id="170">orange</td>
241
- <td data-dce-id="171">xd</td>
242
- <td data-dce-id="172">
243
- <code data-dce-id="173">#502400</code>
244
- </td>
245
- <td data-dce-id="174">Extra dark orange</td>
246
- <td data-dce-id="175">Enthusiasm palette (dark theme, extreme)</td>
247
- </tr>
248
- <tr data-dce-id="176">
249
- <td data-dce-id="177">
250
- <code data-dce-id="178">--cem-color-purple-xl</code>
251
- </td>
252
- <td data-dce-id="179">purple</td>
253
- <td data-dce-id="180">xl</td>
254
- <td data-dce-id="181">
255
- <code data-dce-id="182">#f3e5f5</code>
256
- </td>
257
- <td data-dce-id="183">Extra light purple</td>
258
- <td data-dce-id="184">Creativity palette (light theme)</td>
259
- </tr>
260
- <tr data-dce-id="185">
261
- <td data-dce-id="186">
262
- <code data-dce-id="187">--cem-color-purple-l</code>
263
- </td>
264
- <td data-dce-id="188">purple</td>
265
- <td data-dce-id="189">l</td>
266
- <td data-dce-id="190">
267
- <code data-dce-id="191">#e1bee7</code>
268
- </td>
269
- <td data-dce-id="192">Light purple</td>
270
- <td data-dce-id="193">Creativity emotion, brand-1</td>
271
- </tr>
272
- <tr data-dce-id="194">
273
- <td data-dce-id="195">
274
- <code data-dce-id="196">--cem-color-purple-d</code>
275
- </td>
276
- <td data-dce-id="197">purple</td>
277
- <td data-dce-id="198">d</td>
278
- <td data-dce-id="199">
279
- <code data-dce-id="200">#6a1b9a</code>
280
- </td>
281
- <td data-dce-id="201">Dark purple</td>
282
- <td data-dce-id="202">Creativity palette (dark theme)</td>
283
- </tr>
284
- <tr data-dce-id="203">
285
- <td data-dce-id="204">
286
- <code data-dce-id="205">--cem-color-purple-xd</code>
287
- </td>
288
- <td data-dce-id="206">purple</td>
289
- <td data-dce-id="207">xd</td>
290
- <td data-dce-id="208">
291
- <code data-dce-id="209">#4a148c</code>
292
- </td>
293
- <td data-dce-id="210">Extra dark purple</td>
294
- <td data-dce-id="211">Creativity palette (dark theme, extreme)</td>
295
- </tr>
296
- <tr data-dce-id="212">
297
- <td data-dce-id="213">
298
- <code data-dce-id="214">--cem-color-red-xl</code>
299
- </td>
300
- <td data-dce-id="215">red</td>
301
- <td data-dce-id="216">xl</td>
302
- <td data-dce-id="217">
303
- <code data-dce-id="218">#ffb4ab</code>
304
- </td>
305
- <td data-dce-id="219">Extra light red</td>
306
- <td data-dce-id="220">Danger palette (light theme)</td>
307
- </tr>
308
- <tr data-dce-id="221">
309
- <td data-dce-id="222">
310
- <code data-dce-id="223">--cem-color-red-l</code>
311
- </td>
312
- <td data-dce-id="224">red</td>
313
- <td data-dce-id="225">l</td>
314
- <td data-dce-id="226">
315
- <code data-dce-id="227">#ba1a1a</code>
316
- </td>
317
- <td data-dce-id="228">Light red</td>
318
- <td data-dce-id="229">Danger emotion, alert semantic</td>
319
- </tr>
320
- <tr data-dce-id="230">
321
- <td data-dce-id="231">
322
- <code data-dce-id="232">--cem-color-red-d</code>
323
- </td>
324
- <td data-dce-id="233">red</td>
325
- <td data-dce-id="234">d</td>
326
- <td data-dce-id="235">
327
- <code data-dce-id="236">#690005</code>
328
- </td>
329
- <td data-dce-id="237">Dark red</td>
330
- <td data-dce-id="238">Danger palette (dark theme)</td>
331
- </tr>
332
- <tr data-dce-id="239">
333
- <td data-dce-id="240">
334
- <code data-dce-id="241">--cem-color-red-xd</code>
335
- </td>
336
- <td data-dce-id="242">red</td>
337
- <td data-dce-id="243">xd</td>
338
- <td data-dce-id="244">
339
- <code data-dce-id="245">#410002</code>
340
- </td>
341
- <td data-dce-id="246">Extra dark red</td>
342
- <td data-dce-id="247">Danger palette (dark theme, extreme)</td>
343
- </tr>
344
- </tbody>
345
- </table>
346
- </xsl:variable>
347
- <label data-dce-id="248">
348
- <input type="checkbox" data-testid="toggle-all" slice="show-all" value="ALL" data-dce-id="249"/>
349
- <dce-text data-dce-id="250">ALL</dce-text>
350
- </label>
351
- <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="cem-color-hue-variant"
352
- select="exsl:node-set($test-data)//*[@id='cem-color-hue-variant']/following-sibling::table[1]/tbody"/>
353
- <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="all-or-nothing"
354
- select="$cem-color-hue-variant[ //show-all = 'ALL' ]">
355
- <dce-text data-dce-id="251">
356
- 0
357
- </dce-text>
358
- <xsl:for-each select="$all-or-nothing/*">
359
- <div data-testid="color-{position()}" data-dce-id="252">
360
- <xsl:value-of select="./*[1]"/>
361
- </div>
17
+ <http-request xmlns="" method="GET" slice="cem-colors" url="../../../dist/lib/tokens/cem-colors.xhtml"
18
+ data-dce-id="2"/>
19
+ <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="colorsData" select="//cem-colors"/>
20
+ <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="cem-color-hue-variant"
21
+ select="$colorsData//*[@id='cem-color-hue-variant']/following-sibling::xhtml:table[1]/xhtml:tbody"/>
22
+ <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="css-body">
23
+ <dce-text xmlns="" data-dce-id="3">
24
+
25
+ :root{
26
+ /* branded colors: cem-color-[hue]-[variant] */
27
+
28
+ </dce-text>
29
+ <span xmlns="" data-dce-id="4">
30
+ <xsl:for-each select="$cem-color-hue-variant/xhtml:tr">
31
+ <xsl:value-of select="./*[1]"/> :
32
+ <xsl:value-of select="./*[4]"/> ; /*
33
+ <xsl:value-of select="./*[5]"/> ;
34
+ <xsl:value-of select="./*[6]"/> */
362
35
  </xsl:for-each>
363
- <dce-text data-dce-id="253">
364
- N
365
- </dce-text>
366
- </xsl:variable>
367
- </div>
36
+ </span>
37
+ <dce-text xmlns="" data-dce-id="5">
38
+
39
+ /* emotion palette: cem-palette-[emotion]-[shift] */
40
+ </dce-text>
41
+ <xsl:variable name="cem-palette-emotion-heading"
42
+ select="$colorsData//*[@id='cem-palette-emotion-shift']"/>
43
+ <xsl:variable name="cem-palette-emotion"
44
+ select="$cem-palette-emotion-heading/following-sibling::xhtml:table[1]/xhtml:tbody"/>
45
+ <dce-text xmlns="" data-dce-id="6">
46
+ /* light/dark */
47
+ </dce-text>
48
+ <span xmlns="" data-dce-id="7">
49
+ <xsl:for-each select="$cem-palette-emotion/xhtml:tr">
50
+ <xsl:variable name="emotion" select="xhtml:td[1]"/>
51
+ <xsl:variable name="light-val" select="xhtml:td[3]"/>
52
+ <xsl:variable name="dark-val" select="xhtml:td[4]"/>
53
+ <span data-dce-id="8">
54
+ <xsl:choose>
55
+ <xsl:when test="$dark-val">
56
+ <xsl:value-of select="$emotion"/>: light-dark(var( $light-val ), var( $dark-val ) );
57
+ </xsl:when>
58
+ <xsl:otherwise>
59
+ <xsl:value-of select="$emotion"/>: var( $light-val );
60
+ </xsl:otherwise>
61
+ </xsl:choose>
62
+ </span>
63
+ </xsl:for-each>
64
+ </span>
65
+ <dce-text xmlns="" data-dce-id="9">
66
+ /* override for native */
67
+ .cem-theme-native,[data-theme="cem-theme-native"]{
68
+ </dce-text>
69
+ <span xmlns="" data-dce-id="10">
70
+ <xsl:for-each select="$cem-palette-emotion/xhtml:tr">
71
+ <xsl:variable name="emotion" select="xhtml:td[1]"/>
72
+ <xsl:variable name="light-val" select="xhtml:td[5]"/>
73
+ <xsl:variable name="dark-val" select="xhtml:td[6]"/>
74
+ <span data-dce-id="11">
75
+ <xsl:choose>
76
+ <xsl:when test="$dark-val">
77
+ <xsl:value-of select="$emotion"/>: light-dark(var( $light-val ), var( $dark-val ) );
78
+ </xsl:when>
79
+ <xsl:otherwise>
80
+ <xsl:value-of select="$emotion"/>: var( $light-val );
81
+ </xsl:otherwise>
82
+ </xsl:choose>
83
+ </span>
84
+ </xsl:for-each>
85
+ </span>
86
+ <dce-text xmlns="" data-dce-id="12">
87
+ }
88
+ }
89
+ </dce-text>
90
+ </xsl:variable>
91
+ <pre xmlns="" class="language-css" data-dce-id="13">
92
+ <code class="language-css" data-dce-id="14">
93
+ <xsl:value-of select="$css-body"/>
94
+ </code>
95
+ </pre>
96
+ <cem-css-loader xmlns="" value="{$css-body}" data-dce-id="15"/>
97
+ <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="$cem-palette-emotion/xhtml:tr">
98
+ <xsl:variable name="emotion" select="xhtml:td[1]"/>
99
+ <xsl:variable name="light-val" select="xhtml:td[5]"/>
100
+ <xsl:variable name="dark-val" select="xhtml:td[6]"/>
101
+ <span xmlns="" data-dce-id="16">
102
+ <xsl:choose>
103
+ <xsl:when test="$dark-val">
104
+ <xsl:value-of select="$emotion"/>: light-dark(var( $light-val ), var( $dark-val ) );
105
+ </xsl:when>
106
+ <xsl:otherwise>
107
+ <xsl:value-of select="$emotion"/>: var( $light-val );
108
+ </xsl:otherwise>
109
+ </xsl:choose>
110
+ </span>
111
+ </xsl:for-each>
368
112
  </dce-root>
369
113
  </xsl:template>
370
114
  <xsl:template match="/">
package/ide/web-types-dce.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "http://json.schemastore.org/web-types",
3
3
  "name": "@epa-wg/custom-element",
4
- "version": "0.0.35",
4
+ "version": "0.0.37",
5
5
  "js-types-syntax": "typescript",
6
6
  "description-markup": "markdown",
7
7
  "contributions": {
package/ide/web-types-xsl.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "http://json.schemastore.org/web-types",
3
3
  "name": "@epa-wg/custom-element",
4
- "version": "0.0.35",
4
+ "version": "0.0.37",
5
5
  "js-types-syntax": "typescript",
6
6
  "description-markup": "markdown",
7
7
  "contributions": {
package/index.html CHANGED
@@ -54,7 +54,8 @@
54
54
  <a href="./demo/attributes.html" >attributes </a> |
55
55
  <a href="./demo/data-slices.html" >data slices/events </a> |
56
56
  <a href="./demo/form.html" >Form validation </a> |
57
- <a href="./demo/dom-merge.html" >DOM merge on dynamic update </a><br/>
57
+ <a href="./demo/dom-merge.html" >DOM merge on dynamic update </a> |
58
+ <a href="./demo/for-each.html" >for-each loop in TABLE </a><br/>
58
59
  <a href="./demo/npm-versions-demo.html">npm version </a>
59
60
  </section>
60
61
  </nav>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epa-wg/custom-element",
3
- "version": "0.0.35",
3
+ "version": "0.0.37",
4
4
  "description": "Declarative Custom Element as W3C proposal PoC with native(XSLT) based templating",
5
5
  "browser": "custom-element.js",
6
6
  "module": "custom-element.js",