@epa-wg/custom-element 0.0.36 → 0.0.38
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.
- package/.claude/settings.local.json +8 -1
- package/README.md +4 -4
- package/bin/xslDtd2Ide.mjs +1 -1
- package/custom-element.js +9 -4
- package/demo/a.html +41 -64
- package/demo/s.xslt +94 -350
- package/ide/customData-dce.json +8 -8
- package/ide/web-types-dce.json +8 -8
- package/ide/web-types-xsl.json +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"permissions": {
|
|
3
3
|
"allow": [
|
|
4
|
-
"Bash(ls:*)"
|
|
4
|
+
"Bash(ls:*)",
|
|
5
|
+
"Bash(Get-ChildItem -Path \"C:\\\\aWork\\\\custom-element\" -Recurse -Force)",
|
|
6
|
+
"Bash(Select-Object -First 50 FullName)",
|
|
7
|
+
"Bash(Get-ChildItem -Path \"C:\\\\aWork\\\\custom-element\\\\components\" -Recurse -ErrorAction SilentlyContinue)",
|
|
8
|
+
"Bash(Select-Object FullName)",
|
|
9
|
+
"Bash(xargs grep *)",
|
|
10
|
+
"Bash(xargs wc *)",
|
|
11
|
+
"Bash(xargs basename *)"
|
|
5
12
|
]
|
|
6
13
|
}
|
|
7
14
|
}
|
package/README.md
CHANGED
|
@@ -343,16 +343,16 @@ within template
|
|
|
343
343
|
[slice-demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/data-slices.html
|
|
344
344
|
[for-each-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/for-each.html
|
|
345
345
|
[hex-grid-url]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/hex-grid.html
|
|
346
|
-
[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.
|
|
346
|
+
[hex-grid-image]: https://unpkg.com/@epa-wg/custom-element@0.0.38/demo/hex-grid-transform.png
|
|
347
347
|
[local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
|
|
348
348
|
[http-request-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
|
|
349
349
|
[location-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
|
|
350
350
|
[github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
|
|
351
351
|
[npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element.svg
|
|
352
352
|
[npm-url]: https://npmjs.org/package/@epa-wg/custom-element
|
|
353
|
-
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.
|
|
354
|
-
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.
|
|
355
|
-
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.
|
|
353
|
+
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.38/coverage/src/custom-element/coverage.svg
|
|
354
|
+
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.38/coverage/src/custom-element/index.html
|
|
355
|
+
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.38/storybook-static/index.html?path=/story/welcome--introduction
|
|
356
356
|
[sandbox-url]: https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
|
|
357
357
|
[webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
|
|
358
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.
|
|
119
|
+
"version": "0.0.38",
|
|
120
120
|
"js-types-syntax": "typescript",
|
|
121
121
|
"description-markup": "markdown",
|
|
122
122
|
"contributions": {
|
package/custom-element.js
CHANGED
|
@@ -297,7 +297,9 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
|
|
|
297
297
|
|
|
298
298
|
sanitizeProcessor.importStylesheet( sanitizeXsl );
|
|
299
299
|
|
|
300
|
-
|
|
300
|
+
// Use a detached (no browsing context) document so Chrome does not eagerly
|
|
301
|
+
// load img/link resources from the intermediate XSLT fragment
|
|
302
|
+
const fr = sanitizeProcessor.transformToFragment(tc, document.implementation.createHTMLDocument(''))
|
|
301
303
|
, $ = (e,css) => e.querySelector(css)
|
|
302
304
|
, payload = $( xslDom, 'template[mode="payload"]');
|
|
303
305
|
if( !fr )
|
|
@@ -399,11 +401,13 @@ xhrTemplate(src)
|
|
|
399
401
|
const dom = await new Promise((resolve,reject)=>
|
|
400
402
|
{ const xhr = new XMLHttpRequest();
|
|
401
403
|
xhr.open("GET", src);
|
|
402
|
-
xhr.responseType = "document";
|
|
403
|
-
// xhr.overrideMimeType("text/xml");
|
|
404
404
|
xhr.onload = () =>
|
|
405
405
|
{ if( xhr.readyState === xhr.DONE && xhr.status === 200 )
|
|
406
|
-
|
|
406
|
+
{ const mime = xhr.getResponseHeader('content-type')?.includes('xml')
|
|
407
|
+
? 'text/xml' : 'text/html';
|
|
408
|
+
const doc = new DOMParser().parseFromString(xhr.responseText, mime);
|
|
409
|
+
resolve( mime === 'text/html' ? doc.body : doc )
|
|
410
|
+
}
|
|
407
411
|
else
|
|
408
412
|
reject(`${xhr.statusText} - ${src}`)
|
|
409
413
|
};
|
|
@@ -801,6 +805,7 @@ CustomElement extends HTMLElement
|
|
|
801
805
|
processed[s] = ev;
|
|
802
806
|
}
|
|
803
807
|
Object.keys(processed).length !== 0 && transform();
|
|
808
|
+
this.customElementRegistry?.initialize(this);
|
|
804
809
|
}
|
|
805
810
|
let timeoutID;
|
|
806
811
|
|
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
|
-
|
|
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
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
-
<
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
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/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
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
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/customData-dce.json
CHANGED
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"tags": [
|
|
58
58
|
{
|
|
59
59
|
"name": "custom-element",
|
|
60
|
-
"description": "Declarative
|
|
60
|
+
"description": "Declarative Custom Element (DCE). `<custom-element tag='my-element'></custom-element>`.",
|
|
61
61
|
"attributes": [
|
|
62
62
|
{
|
|
63
63
|
"name": "hidden",
|
|
@@ -173,7 +173,7 @@
|
|
|
173
173
|
"references": [
|
|
174
174
|
{
|
|
175
175
|
"name": "docs",
|
|
176
|
-
"url": "https://
|
|
176
|
+
"url": "https://unpkg.com/@epa-wg/custom-element@0/demo/location-element.html"
|
|
177
177
|
}
|
|
178
178
|
]
|
|
179
179
|
},
|
|
@@ -222,7 +222,7 @@
|
|
|
222
222
|
"references": [
|
|
223
223
|
{
|
|
224
224
|
"name": "docs",
|
|
225
|
-
"url": "https://
|
|
225
|
+
"url": "https://unpkg.com/@epa-wg/custom-element@0/demo/http-request.html"
|
|
226
226
|
}
|
|
227
227
|
]
|
|
228
228
|
},
|
|
@@ -263,7 +263,7 @@
|
|
|
263
263
|
"references": [
|
|
264
264
|
{
|
|
265
265
|
"name": "docs",
|
|
266
|
-
"url": "https://
|
|
266
|
+
"url": "https://unpkg.com/@epa-wg/custom-element@0/demo/http-request.html"
|
|
267
267
|
}
|
|
268
268
|
]
|
|
269
269
|
},
|
|
@@ -289,7 +289,7 @@
|
|
|
289
289
|
"references": [
|
|
290
290
|
{
|
|
291
291
|
"name": "docs",
|
|
292
|
-
"url": "https://
|
|
292
|
+
"url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html"
|
|
293
293
|
}
|
|
294
294
|
]
|
|
295
295
|
},
|
|
@@ -300,7 +300,7 @@
|
|
|
300
300
|
"references": [
|
|
301
301
|
{
|
|
302
302
|
"name": "docs",
|
|
303
|
-
"url": "https://
|
|
303
|
+
"url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html"
|
|
304
304
|
}
|
|
305
305
|
]
|
|
306
306
|
},
|
|
@@ -311,7 +311,7 @@
|
|
|
311
311
|
"references": [
|
|
312
312
|
{
|
|
313
313
|
"name": "docs",
|
|
314
|
-
"url": "https://
|
|
314
|
+
"url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html"
|
|
315
315
|
}
|
|
316
316
|
]
|
|
317
317
|
},
|
|
@@ -330,7 +330,7 @@
|
|
|
330
330
|
"references": [
|
|
331
331
|
{
|
|
332
332
|
"name": "docs",
|
|
333
|
-
"url": "https://
|
|
333
|
+
"url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html"
|
|
334
334
|
}
|
|
335
335
|
]
|
|
336
336
|
}
|
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.
|
|
4
|
+
"version": "0.0.38",
|
|
5
5
|
"js-types-syntax": "typescript",
|
|
6
6
|
"description-markup": "markdown",
|
|
7
7
|
"contributions": {
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
{
|
|
106
106
|
"name": "location-element",
|
|
107
107
|
"description": "get/set window URL parts or from SRC URL",
|
|
108
|
-
"doc-url": "https://
|
|
108
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/location-element.html",
|
|
109
109
|
"attributes": [
|
|
110
110
|
{
|
|
111
111
|
"name": "href",
|
|
@@ -181,13 +181,13 @@
|
|
|
181
181
|
{
|
|
182
182
|
"name": "http-request",
|
|
183
183
|
"description": "Fetches data from a URL and exposes request, response, and parsed data via the value property. Supports JSON and XML response parsing.",
|
|
184
|
-
"doc-url": "https://
|
|
184
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/http-request.html",
|
|
185
185
|
"attributes": [
|
|
186
186
|
{
|
|
187
187
|
"name": "url",
|
|
188
188
|
"description": "The URL to fetch data from. When changed, triggers a new fetch request.",
|
|
189
189
|
"required": false,
|
|
190
|
-
"doc-url": "https://
|
|
190
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/http-request.html",
|
|
191
191
|
"value": {
|
|
192
192
|
"type": "string"
|
|
193
193
|
}
|
|
@@ -240,7 +240,7 @@
|
|
|
240
240
|
{
|
|
241
241
|
"name": "local-storage",
|
|
242
242
|
"description": "Provides access to localStorage with reactive updates. Reads and writes values to localStorage by key.",
|
|
243
|
-
"doc-url": "https://
|
|
243
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html",
|
|
244
244
|
"attributes": [
|
|
245
245
|
{
|
|
246
246
|
"name": "key",
|
|
@@ -255,7 +255,7 @@
|
|
|
255
255
|
"name": "type",
|
|
256
256
|
"description": "Value type: text, json, or input types (number, date). Defaults to text.",
|
|
257
257
|
"required": false,
|
|
258
|
-
"doc-url": "https://
|
|
258
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html",
|
|
259
259
|
"value": {
|
|
260
260
|
"type": "string"
|
|
261
261
|
}
|
|
@@ -264,7 +264,7 @@
|
|
|
264
264
|
"name": "value",
|
|
265
265
|
"description": "Initial value to set in localStorage. If omitted, reads existing value.",
|
|
266
266
|
"required": false,
|
|
267
|
-
"doc-url": "https://
|
|
267
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html",
|
|
268
268
|
"value": {
|
|
269
269
|
"type": "string"
|
|
270
270
|
}
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
"name": "live",
|
|
274
274
|
"description": "When present, monitors localStorage changes and updates reactively",
|
|
275
275
|
"required": false,
|
|
276
|
-
"doc-url": "https://
|
|
276
|
+
"doc-url": "https://unpkg.com/@epa-wg/custom-element@0/demo/local-storage.html",
|
|
277
277
|
"value": {
|
|
278
278
|
"type": "boolean"
|
|
279
279
|
}
|
package/ide/web-types-xsl.json
CHANGED
package/package.json
CHANGED