@epa-wg/custom-element-dist 0.0.23 → 0.0.24

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 (67) hide show
  1. package/.vscode/settings.json +24 -0
  2. package/README.md +4 -4
  3. package/coverage/coverage-final.json +4 -4
  4. package/coverage/index.html +26 -26
  5. package/coverage/src/custom-element/coverage.svg +1 -1
  6. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  7. package/coverage/src/custom-element/custom-element.js.html +337 -313
  8. package/coverage/src/custom-element/http-request.js.html +10 -10
  9. package/coverage/src/custom-element/index.html +18 -18
  10. package/coverage/src/custom-element/local-storage.js.html +1 -1
  11. package/coverage/src/custom-element/location-element.js.html +1 -1
  12. package/coverage/src/index.html +1 -1
  13. package/coverage/src/mocks/handlers.ts.html +1 -1
  14. package/coverage/src/mocks/index.html +1 -1
  15. package/coverage/src/stories/attributes.test.stories.ts.html +1 -1
  16. package/coverage/src/stories/coverage.svg +1 -1
  17. package/coverage/src/stories/css.test.stories.ts.html +1 -1
  18. package/coverage/src/stories/dom-merge.test.stories.ts/coverage.svg +1 -1
  19. package/coverage/src/stories/dom-merge.test.stories.ts.html +238 -10
  20. package/coverage/src/stories/external-template.test.stories.ts.html +1 -1
  21. package/coverage/src/stories/form.test.stories.ts.html +1 -1
  22. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  23. package/coverage/src/stories/index.html +15 -15
  24. package/coverage/src/stories/local-storage.test.stories.ts.html +1 -1
  25. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  26. package/coverage/src/stories/slice-events.test.stories.ts.html +1 -1
  27. package/coverage/src/stories/slots.test.stories.ts.html +1 -1
  28. package/coverage/src/stories/testStoryBook.ts.html +8 -8
  29. package/coverage/src/sum.ts.html +1 -1
  30. package/dist/{custom-element-N-sWiqGK.cjs → custom-element-BDK7dcJN.cjs} +8 -8
  31. package/dist/{custom-element-BISbI4SU.js → custom-element-DqtzLkTG.js} +74 -66
  32. package/dist/custom-element-bundle.cjs +1 -1
  33. package/dist/custom-element-bundle.js +23 -22
  34. package/package.json +2 -2
  35. package/src/custom-element/custom-element.js +9 -1
  36. package/src/custom-element/demo/form.html +2 -3
  37. package/src/custom-element/ide/web-types-dce.json +1 -1
  38. package/src/custom-element/ide/web-types-xsl.json +1 -1
  39. package/src/stories/dom-merge.test.stories.ts +76 -0
  40. package/storybook-static/assets/{Color-PRSJMWNM-BD_Ds9NW.js → Color-PRSJMWNM-y4ZsI1hY.js} +1 -1
  41. package/storybook-static/assets/{Configure-70I_VApa.js → Configure-CyLVkwlf.js} +1 -1
  42. package/storybook-static/assets/{DocsRenderer-K4EAMTCU-9dn0-HCP.js → DocsRenderer-K4EAMTCU-VRGUwRrq.js} +2 -2
  43. package/storybook-static/assets/{WithTooltip-KJL26V4Q-C6g5GOU9.js → WithTooltip-KJL26V4Q-xdXH9Ztt.js} +1 -1
  44. package/storybook-static/assets/{attributes.test.stories-BEOraI4E.js → attributes.test.stories-BckCcyrF.js} +1 -1
  45. package/storybook-static/assets/{css.test.stories-D9WaxrEv.js → css.test.stories-B-QcObCF.js} +1 -1
  46. package/storybook-static/assets/{custom-element-BV8-hRQS.js → custom-element-BIxkVg7K.js} +5 -5
  47. package/storybook-static/assets/dom-merge.test.stories-CjXhjTQY.js +258 -0
  48. package/storybook-static/assets/{external-template.test.stories-Bpr_wxBo.js → external-template.test.stories-BBqyi0az.js} +1 -1
  49. package/storybook-static/assets/{form.test.stories-3tURbEdv.js → form.test.stories-DsIo1B4n.js} +1 -1
  50. package/storybook-static/assets/{formatter-2WMMO6ZP-6IvBq34u.js → formatter-2WMMO6ZP-CThVcQxM.js} +1 -1
  51. package/storybook-static/assets/{http-request.stories-8K_qSs8C.js → http-request.stories-sXA_Y-VM.js} +1 -1
  52. package/storybook-static/assets/{iframe-zdt9kuj6.js → iframe-DcDTQOmA.js} +2 -2
  53. package/storybook-static/assets/{index-B3oZkK3F.js → index-CUFHd5VD.js} +1 -1
  54. package/storybook-static/assets/{index-C30JwJMK.js → index-DPPi9iZu.js} +5 -5
  55. package/storybook-static/assets/{index-DhXZyjEd.js → index-VWixWKZ7.js} +1 -1
  56. package/storybook-static/assets/{local-storage.test.stories-CtisAQBB.js → local-storage.test.stories-Cs2v3QTS.js} +1 -1
  57. package/storybook-static/assets/{location-element.test.stories-5O_t_m4Y.js → location-element.test.stories-WkrQDzJJ.js} +1 -1
  58. package/storybook-static/assets/{preview-D0eCfQft.js → preview-p-Bwze-K.js} +2 -2
  59. package/storybook-static/assets/{slice-events.test.stories-BSXCLIA5.js → slice-events.test.stories-BRBBc0JT.js} +1 -1
  60. package/storybook-static/assets/{slots.test.stories-B1vqfHmN.js → slots.test.stories-r-i91k3y.js} +1 -1
  61. package/storybook-static/assets/{syntaxhighlighter-BP7B2CQK-DpPBKyTO.js → syntaxhighlighter-BP7B2CQK-OnioRcs9.js} +1 -1
  62. package/storybook-static/iframe.html +1 -1
  63. package/storybook-static/index.json +1 -1
  64. package/storybook-static/project.json +1 -1
  65. package/.idea/.gitignore +0 -8
  66. package/storybook-static/assets/dom-merge.test.stories-BhbNeum_.js +0 -137
  67. package/yarn.lock +0 -10242
package/coverage/src/custom-element/http-request.js.html CHANGED
@@ -182,13 +182,13 @@
182
182
  <span class="cline-any cline-neutral">&nbsp;</span>
183
183
  <span class="cline-any cline-yes">5x</span>
184
184
  <span class="cline-any cline-neutral">&nbsp;</span>
185
- <span class="cline-any cline-yes">28x</span>
186
- <span class="cline-any cline-yes">28x</span>
185
+ <span class="cline-any cline-yes">32x</span>
186
+ <span class="cline-any cline-yes">32x</span>
187
187
  <span class="cline-any cline-neutral">&nbsp;</span>
188
188
  <span class="cline-any cline-neutral">&nbsp;</span>
189
189
  <span class="cline-any cline-neutral">&nbsp;</span>
190
- <span class="cline-any cline-yes">32x</span>
191
- <span class="cline-any cline-yes">20x</span>
190
+ <span class="cline-any cline-yes">36x</span>
191
+ <span class="cline-any cline-yes">24x</span>
192
192
  <span class="cline-any cline-yes">12x</span>
193
193
  <span class="cline-any cline-yes">12x</span>
194
194
  <span class="cline-any cline-yes">1x</span>
@@ -223,12 +223,12 @@
223
223
  <span class="cline-any cline-neutral">&nbsp;</span>
224
224
  <span class="cline-any cline-neutral">&nbsp;</span>
225
225
  <span class="cline-any cline-neutral">&nbsp;</span>
226
- <span class="cline-any cline-yes">102x</span>
227
- <span class="cline-any cline-yes">51x</span>
226
+ <span class="cline-any cline-yes">118x</span>
227
+ <span class="cline-any cline-yes">59x</span>
228
228
  <span class="cline-any cline-neutral">&nbsp;</span>
229
- <span class="cline-any cline-yes">35x</span>
230
- <span class="cline-any cline-yes">35x</span>
231
- <span class="cline-any cline-yes">27x</span>
229
+ <span class="cline-any cline-yes">39x</span>
230
+ <span class="cline-any cline-yes">39x</span>
231
+ <span class="cline-any cline-yes">31x</span>
232
232
  <span class="cline-any cline-neutral">&nbsp;</span>
233
233
  <span class="cline-any cline-yes">8x</span>
234
234
  <span class="cline-any cline-yes">8x</span>
@@ -337,7 +337,7 @@ export default HttpRequestElement;
337
337
  <div class='footer quiet pad2 space-top1 center small'>
338
338
  Code coverage generated by
339
339
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
340
- at 2024-06-27T03:24:38.495Z
340
+ at 2024-07-22T03:09:38.362Z
341
341
  </div>
342
342
  <script src="../../prettify.js"></script>
343
343
  <script>
package/coverage/src/custom-element/index.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">97.87% </span>
26
+ <span class="strong">97.88% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>690/705</span>
28
+ <span class='fraction'>695/710</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
- <span class="strong">91.35% </span>
33
+ <span class="strong">91.45% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>317/347</span>
35
+ <span class='fraction'>321/351</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">98.15% </span>
40
+ <span class="strong">98.17% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>160/163</span>
42
+ <span class='fraction'>161/164</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">98.22% </span>
47
+ <span class="strong">98.24% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>609/620</span>
49
+ <span class='fraction'>614/625</span>
50
50
  </div>
51
51
 
52
52
 
@@ -80,17 +80,17 @@
80
80
  </thead>
81
81
  <tbody><tr>
82
82
  <td class="file high" data-value="custom-element.js"><a href="custom-element.js.html">custom-element.js</a></td>
83
- <td data-value="97.21" class="pic high">
83
+ <td data-value="97.24" class="pic high">
84
84
  <div class="chart"><div class="cover-fill" style="width: 97%"></div><div class="cover-empty" style="width: 3%"></div></div>
85
85
  </td>
86
- <td data-value="97.21" class="pct high">97.21%</td>
87
- <td data-value="539" class="abs high">524/539</td>
88
- <td data-value="89.65" class="pct high">89.65%</td>
89
- <td data-value="290" class="abs high">260/290</td>
90
- <td data-value="97.43" class="pct high">97.43%</td>
91
- <td data-value="117" class="abs high">114/117</td>
92
- <td data-value="97.67" class="pct high">97.67%</td>
93
- <td data-value="474" class="abs high">463/474</td>
86
+ <td data-value="97.24" class="pct high">97.24%</td>
87
+ <td data-value="544" class="abs high">529/544</td>
88
+ <td data-value="89.79" class="pct high">89.79%</td>
89
+ <td data-value="294" class="abs high">264/294</td>
90
+ <td data-value="97.45" class="pct high">97.45%</td>
91
+ <td data-value="118" class="abs high">115/118</td>
92
+ <td data-value="97.7" class="pct high">97.7%</td>
93
+ <td data-value="479" class="abs high">468/479</td>
94
94
  </tr>
95
95
 
96
96
  <tr>
@@ -146,7 +146,7 @@
146
146
  <div class='footer quiet pad2 space-top1 center small'>
147
147
  Code coverage generated by
148
148
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
149
- at 2024-06-27T03:24:38.495Z
149
+ at 2024-07-22T03:09:38.362Z
150
150
  </div>
151
151
  <script src="../../prettify.js"></script>
152
152
  <script>
package/coverage/src/custom-element/local-storage.js.html CHANGED
@@ -331,7 +331,7 @@ export default LocalStorageElement;
331
331
  <div class='footer quiet pad2 space-top1 center small'>
332
332
  Code coverage generated by
333
333
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
334
- at 2024-06-27T03:24:38.495Z
334
+ at 2024-07-22T03:09:38.362Z
335
335
  </div>
336
336
  <script src="../../prettify.js"></script>
337
337
  <script>
package/coverage/src/custom-element/location-element.js.html CHANGED
@@ -328,7 +328,7 @@ export default LocationElement;</pre></td></tr></table></pre>
328
328
  <div class='footer quiet pad2 space-top1 center small'>
329
329
  Code coverage generated by
330
330
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
331
- at 2024-06-27T03:24:38.495Z
331
+ at 2024-07-22T03:09:38.362Z
332
332
  </div>
333
333
  <script src="../../prettify.js"></script>
334
334
  <script>
package/coverage/src/index.html CHANGED
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at 2024-06-27T03:24:38.495Z
104
+ at 2024-07-22T03:09:38.362Z
105
105
  </div>
106
106
  <script src="../prettify.js"></script>
107
107
  <script>
package/coverage/src/mocks/handlers.ts.html CHANGED
@@ -157,7 +157,7 @@ export const handlers =
157
157
  <div class='footer quiet pad2 space-top1 center small'>
158
158
  Code coverage generated by
159
159
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
160
- at 2024-06-27T03:24:38.495Z
160
+ at 2024-07-22T03:09:38.362Z
161
161
  </div>
162
162
  <script src="../../prettify.js"></script>
163
163
  <script>
package/coverage/src/mocks/index.html CHANGED
@@ -101,7 +101,7 @@
101
101
  <div class='footer quiet pad2 space-top1 center small'>
102
102
  Code coverage generated by
103
103
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
104
- at 2024-06-27T03:24:38.495Z
104
+ at 2024-07-22T03:09:38.362Z
105
105
  </div>
106
106
  <script src="../../prettify.js"></script>
107
107
  <script>
package/coverage/src/stories/attributes.test.stories.ts.html CHANGED
@@ -496,7 +496,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
496
496
  <div class='footer quiet pad2 space-top1 center small'>
497
497
  Code coverage generated by
498
498
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
499
- at 2024-06-27T03:24:38.495Z
499
+ at 2024-07-22T03:09:38.362Z
500
500
  </div>
501
501
  <script src="../../prettify.js"></script>
502
502
  <script>
package/coverage/src/stories/coverage.svg CHANGED
@@ -6,5 +6,5 @@
6
6
  <rect width="140" height="32" fill="#473" rx="4"/>
7
7
  <rect width="88" height="32" fill="#534" rx="4"/>
8
8
  <text x="8" y="21" class="heavy">coverage</text>
9
- <text x="94" y="22" class="percent">26.83%</text>
9
+ <text x="94" y="22" class="percent">26.42%</text>
10
10
  </svg>
package/coverage/src/stories/css.test.stories.ts.html CHANGED
@@ -439,7 +439,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
439
439
  <div class='footer quiet pad2 space-top1 center small'>
440
440
  Code coverage generated by
441
441
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
442
- at 2024-06-27T03:24:38.495Z
442
+ at 2024-07-22T03:09:38.362Z
443
443
  </div>
444
444
  <script src="../../prettify.js"></script>
445
445
  <script>
package/coverage/src/stories/dom-merge.test.stories.ts/coverage.svg CHANGED
@@ -6,5 +6,5 @@
6
6
  <rect width="140" height="32" fill="#473" rx="4"/>
7
7
  <rect width="88" height="32" fill="#534" rx="4"/>
8
8
  <text x="8" y="21" class="heavy">coverage</text>
9
- <text x="94" y="22" class="percent">26.31%</text>
9
+ <text x="94" y="22" class="percent">21.05%</text>
10
10
  </svg>
package/coverage/src/stories/dom-merge.test.stories.ts.html CHANGED
@@ -23,9 +23,9 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">27.5% </span>
26
+ <span class="strong">22.03% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>11/40</span>
28
+ <span class='fraction'>13/59</span>
29
29
  </div>
30
30
 
31
31
 
@@ -37,16 +37,16 @@
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">33.33% </span>
40
+ <span class="strong">25% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>2/6</span>
42
+ <span class='fraction'>2/8</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">26.31% </span>
47
+ <span class="strong">21.05% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>10/38</span>
49
+ <span class='fraction'>12/57</span>
50
50
  </div>
51
51
 
52
52
 
@@ -192,7 +192,83 @@
192
192
  <a name='L127'></a><a href='#L127'>127</a>
193
193
  <a name='L128'></a><a href='#L128'>128</a>
194
194
  <a name='L129'></a><a href='#L129'>129</a>
195
- <a name='L130'></a><a href='#L130'>130</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
195
+ <a name='L130'></a><a href='#L130'>130</a>
196
+ <a name='L131'></a><a href='#L131'>131</a>
197
+ <a name='L132'></a><a href='#L132'>132</a>
198
+ <a name='L133'></a><a href='#L133'>133</a>
199
+ <a name='L134'></a><a href='#L134'>134</a>
200
+ <a name='L135'></a><a href='#L135'>135</a>
201
+ <a name='L136'></a><a href='#L136'>136</a>
202
+ <a name='L137'></a><a href='#L137'>137</a>
203
+ <a name='L138'></a><a href='#L138'>138</a>
204
+ <a name='L139'></a><a href='#L139'>139</a>
205
+ <a name='L140'></a><a href='#L140'>140</a>
206
+ <a name='L141'></a><a href='#L141'>141</a>
207
+ <a name='L142'></a><a href='#L142'>142</a>
208
+ <a name='L143'></a><a href='#L143'>143</a>
209
+ <a name='L144'></a><a href='#L144'>144</a>
210
+ <a name='L145'></a><a href='#L145'>145</a>
211
+ <a name='L146'></a><a href='#L146'>146</a>
212
+ <a name='L147'></a><a href='#L147'>147</a>
213
+ <a name='L148'></a><a href='#L148'>148</a>
214
+ <a name='L149'></a><a href='#L149'>149</a>
215
+ <a name='L150'></a><a href='#L150'>150</a>
216
+ <a name='L151'></a><a href='#L151'>151</a>
217
+ <a name='L152'></a><a href='#L152'>152</a>
218
+ <a name='L153'></a><a href='#L153'>153</a>
219
+ <a name='L154'></a><a href='#L154'>154</a>
220
+ <a name='L155'></a><a href='#L155'>155</a>
221
+ <a name='L156'></a><a href='#L156'>156</a>
222
+ <a name='L157'></a><a href='#L157'>157</a>
223
+ <a name='L158'></a><a href='#L158'>158</a>
224
+ <a name='L159'></a><a href='#L159'>159</a>
225
+ <a name='L160'></a><a href='#L160'>160</a>
226
+ <a name='L161'></a><a href='#L161'>161</a>
227
+ <a name='L162'></a><a href='#L162'>162</a>
228
+ <a name='L163'></a><a href='#L163'>163</a>
229
+ <a name='L164'></a><a href='#L164'>164</a>
230
+ <a name='L165'></a><a href='#L165'>165</a>
231
+ <a name='L166'></a><a href='#L166'>166</a>
232
+ <a name='L167'></a><a href='#L167'>167</a>
233
+ <a name='L168'></a><a href='#L168'>168</a>
234
+ <a name='L169'></a><a href='#L169'>169</a>
235
+ <a name='L170'></a><a href='#L170'>170</a>
236
+ <a name='L171'></a><a href='#L171'>171</a>
237
+ <a name='L172'></a><a href='#L172'>172</a>
238
+ <a name='L173'></a><a href='#L173'>173</a>
239
+ <a name='L174'></a><a href='#L174'>174</a>
240
+ <a name='L175'></a><a href='#L175'>175</a>
241
+ <a name='L176'></a><a href='#L176'>176</a>
242
+ <a name='L177'></a><a href='#L177'>177</a>
243
+ <a name='L178'></a><a href='#L178'>178</a>
244
+ <a name='L179'></a><a href='#L179'>179</a>
245
+ <a name='L180'></a><a href='#L180'>180</a>
246
+ <a name='L181'></a><a href='#L181'>181</a>
247
+ <a name='L182'></a><a href='#L182'>182</a>
248
+ <a name='L183'></a><a href='#L183'>183</a>
249
+ <a name='L184'></a><a href='#L184'>184</a>
250
+ <a name='L185'></a><a href='#L185'>185</a>
251
+ <a name='L186'></a><a href='#L186'>186</a>
252
+ <a name='L187'></a><a href='#L187'>187</a>
253
+ <a name='L188'></a><a href='#L188'>188</a>
254
+ <a name='L189'></a><a href='#L189'>189</a>
255
+ <a name='L190'></a><a href='#L190'>190</a>
256
+ <a name='L191'></a><a href='#L191'>191</a>
257
+ <a name='L192'></a><a href='#L192'>192</a>
258
+ <a name='L193'></a><a href='#L193'>193</a>
259
+ <a name='L194'></a><a href='#L194'>194</a>
260
+ <a name='L195'></a><a href='#L195'>195</a>
261
+ <a name='L196'></a><a href='#L196'>196</a>
262
+ <a name='L197'></a><a href='#L197'>197</a>
263
+ <a name='L198'></a><a href='#L198'>198</a>
264
+ <a name='L199'></a><a href='#L199'>199</a>
265
+ <a name='L200'></a><a href='#L200'>200</a>
266
+ <a name='L201'></a><a href='#L201'>201</a>
267
+ <a name='L202'></a><a href='#L202'>202</a>
268
+ <a name='L203'></a><a href='#L203'>203</a>
269
+ <a name='L204'></a><a href='#L204'>204</a>
270
+ <a name='L205'></a><a href='#L205'>205</a>
271
+ <a name='L206'></a><a href='#L206'>206</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
196
272
  <span class="cline-any cline-neutral">&nbsp;</span>
197
273
  <span class="cline-any cline-neutral">&nbsp;</span>
198
274
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -213,8 +289,8 @@
213
289
  <span class="cline-any cline-neutral">&nbsp;</span>
214
290
  <span class="cline-any cline-neutral">&nbsp;</span>
215
291
  <span class="cline-any cline-neutral">&nbsp;</span>
216
- <span class="cline-any cline-yes">2x</span>
217
- <span class="cline-any cline-yes">2x</span>
292
+ <span class="cline-any cline-yes">4x</span>
293
+ <span class="cline-any cline-yes">4x</span>
218
294
  <span class="cline-any cline-neutral">&nbsp;</span>
219
295
  <span class="cline-any cline-neutral">&nbsp;</span>
220
296
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -316,11 +392,87 @@
316
392
  <span class="cline-any cline-yes">1x</span>
317
393
  <span class="cline-any cline-neutral">&nbsp;</span>
318
394
  <span class="cline-any cline-neutral">&nbsp;</span>
395
+ <span class="cline-any cline-neutral">&nbsp;</span>
396
+ <span class="cline-any cline-neutral">&nbsp;</span>
397
+ <span class="cline-any cline-neutral">&nbsp;</span>
398
+ <span class="cline-any cline-neutral">&nbsp;</span>
399
+ <span class="cline-any cline-neutral">&nbsp;</span>
400
+ <span class="cline-any cline-neutral">&nbsp;</span>
401
+ <span class="cline-any cline-neutral">&nbsp;</span>
402
+ <span class="cline-any cline-neutral">&nbsp;</span>
403
+ <span class="cline-any cline-neutral">&nbsp;</span>
404
+ <span class="cline-any cline-neutral">&nbsp;</span>
405
+ <span class="cline-any cline-neutral">&nbsp;</span>
406
+ <span class="cline-any cline-neutral">&nbsp;</span>
407
+ <span class="cline-any cline-neutral">&nbsp;</span>
408
+ <span class="cline-any cline-neutral">&nbsp;</span>
409
+ <span class="cline-any cline-neutral">&nbsp;</span>
410
+ <span class="cline-any cline-neutral">&nbsp;</span>
411
+ <span class="cline-any cline-neutral">&nbsp;</span>
412
+ <span class="cline-any cline-neutral">&nbsp;</span>
413
+ <span class="cline-any cline-neutral">&nbsp;</span>
414
+ <span class="cline-any cline-neutral">&nbsp;</span>
415
+ <span class="cline-any cline-neutral">&nbsp;</span>
416
+ <span class="cline-any cline-neutral">&nbsp;</span>
417
+ <span class="cline-any cline-no">&nbsp;</span>
418
+ <span class="cline-any cline-no">&nbsp;</span>
419
+ <span class="cline-any cline-no">&nbsp;</span>
420
+ <span class="cline-any cline-neutral">&nbsp;</span>
421
+ <span class="cline-any cline-no">&nbsp;</span>
422
+ <span class="cline-any cline-no">&nbsp;</span>
423
+ <span class="cline-any cline-no">&nbsp;</span>
424
+ <span class="cline-any cline-no">&nbsp;</span>
425
+ <span class="cline-any cline-no">&nbsp;</span>
426
+ <span class="cline-any cline-neutral">&nbsp;</span>
427
+ <span class="cline-any cline-neutral">&nbsp;</span>
428
+ <span class="cline-any cline-neutral">&nbsp;</span>
429
+ <span class="cline-any cline-yes">1x</span>
430
+ <span class="cline-any cline-neutral">&nbsp;</span>
431
+ <span class="cline-any cline-neutral">&nbsp;</span>
432
+ <span class="cline-any cline-neutral">&nbsp;</span>
433
+ <span class="cline-any cline-neutral">&nbsp;</span>
434
+ <span class="cline-any cline-neutral">&nbsp;</span>
435
+ <span class="cline-any cline-neutral">&nbsp;</span>
436
+ <span class="cline-any cline-neutral">&nbsp;</span>
437
+ <span class="cline-any cline-neutral">&nbsp;</span>
438
+ <span class="cline-any cline-neutral">&nbsp;</span>
439
+ <span class="cline-any cline-neutral">&nbsp;</span>
440
+ <span class="cline-any cline-neutral">&nbsp;</span>
441
+ <span class="cline-any cline-neutral">&nbsp;</span>
442
+ <span class="cline-any cline-neutral">&nbsp;</span>
443
+ <span class="cline-any cline-neutral">&nbsp;</span>
444
+ <span class="cline-any cline-neutral">&nbsp;</span>
445
+ <span class="cline-any cline-neutral">&nbsp;</span>
446
+ <span class="cline-any cline-neutral">&nbsp;</span>
447
+ <span class="cline-any cline-neutral">&nbsp;</span>
448
+ <span class="cline-any cline-neutral">&nbsp;</span>
449
+ <span class="cline-any cline-neutral">&nbsp;</span>
450
+ <span class="cline-any cline-neutral">&nbsp;</span>
451
+ <span class="cline-any cline-neutral">&nbsp;</span>
452
+ <span class="cline-any cline-neutral">&nbsp;</span>
453
+ <span class="cline-any cline-no">&nbsp;</span>
454
+ <span class="cline-any cline-no">&nbsp;</span>
455
+ <span class="cline-any cline-no">&nbsp;</span>
456
+ <span class="cline-any cline-no">&nbsp;</span>
457
+ <span class="cline-any cline-no">&nbsp;</span>
458
+ <span class="cline-any cline-no">&nbsp;</span>
459
+ <span class="cline-any cline-no">&nbsp;</span>
460
+ <span class="cline-any cline-no">&nbsp;</span>
461
+ <span class="cline-any cline-no">&nbsp;</span>
462
+ <span class="cline-any cline-neutral">&nbsp;</span>
463
+ <span class="cline-any cline-neutral">&nbsp;</span>
464
+ <span class="cline-any cline-neutral">&nbsp;</span>
465
+ <span class="cline-any cline-neutral">&nbsp;</span>
466
+ <span class="cline-any cline-neutral">&nbsp;</span>
467
+ <span class="cline-any cline-yes">1x</span>
468
+ <span class="cline-any cline-neutral">&nbsp;</span>
469
+ <span class="cline-any cline-neutral">&nbsp;</span>
319
470
  <span class="cline-any cline-yes">1x</span>
320
471
  <span class="cline-any cline-yes">1x</span>
321
472
  <span class="cline-any cline-yes">1x</span>
322
473
  <span class="cline-any cline-yes">1x</span>
323
474
  <span class="cline-any cline-neutral">&nbsp;</span>
475
+ <span class="cline-any cline-neutral">&nbsp;</span>
324
476
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
325
477
  &nbsp;
326
478
  import type { StoryObj } from '@storybook/web-components';
@@ -441,6 +593,81 @@ export const WordCountOnType:Story =
441
593
  },
442
594
  };
443
595
  &nbsp;
596
+ export const OrderPreservingOn2ndTransform:Story =
597
+ { args : {title: 'Order preserving on 2nd transform', body:`
598
+ &lt;p&gt;IF condition content should be displayed in place where it is defined (not shifted down on the parent children)&lt;/p&gt;
599
+ &lt;custom-element&gt;
600
+ &lt;form slice="f1"&gt;
601
+ &lt;label&gt;
602
+ &lt;input type="checkbox" name="c1" data-testid="cb1"/&gt;
603
+ click to display #1 bellow
604
+ &lt;/label&gt;
605
+ &lt;br data-testid="beforeC1"/&gt;
606
+ &lt;if test="//c1"&gt;
607
+ &lt;p data-testid="isC1"&gt;#1&lt;/p&gt;
608
+ &lt;/if&gt;
609
+ &lt;label&gt;
610
+ &lt;input type="checkbox" name="c2" data-testid="cb2"/&gt;
611
+ click to display #2 bellow
612
+ &lt;/label&gt;
613
+ &lt;br data-testid="beforeC2"/&gt;
614
+ &lt;if test="//c2"&gt;
615
+ &lt;p&gt;#2&lt;/p&gt;
616
+ &lt;/if&gt;
617
+ &lt;/form&gt;
618
+ &lt;/custom-element&gt;
619
+ `}
620
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
621
+ {
622
+ const titleText = <span class="cstat-no" title="statement not covered" >OrderPreservingOn2ndTransform.args!.title as string;</span>
623
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
624
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
625
+ &nbsp;
626
+ <span class="cstat-no" title="statement not covered" > await userEvent.click(canvas.getByTestId('cb1'));</span>
627
+ <span class="cstat-no" title="statement not covered" > await expect(await canvas.findByText('#1')).toBeInTheDocument();</span>
628
+ <span class="cstat-no" title="statement not covered" > await userEvent.click(canvas.getByTestId('cb2'));</span>
629
+ <span class="cstat-no" title="statement not covered" > await expect(await canvas.findByText('#2')).toBeInTheDocument();</span>
630
+ <span class="cstat-no" title="statement not covered" > await expect(canvas.getByTestId("beforeC1").nextElementSibling).toEqual(canvas.getByTestId("isC1"))</span>
631
+ },
632
+ };
633
+ export const ReadSystemValidityMessage:Story =
634
+ { args : {title: 'read system validity message', body:`
635
+ &lt;p&gt;validationMessage propagated into slice as 'validation-message' attribute&lt;/p&gt;
636
+ &lt;ol&gt;
637
+ &lt;li&gt; type in input field&lt;/li&gt;
638
+ &lt;li&gt; delete input field content&lt;/li&gt;
639
+ &lt;li&gt; observe the warning in string after input&lt;/li&gt;
640
+ &lt;li&gt; Click Next observe the system warning in dropdown over input&lt;/li&gt;
641
+ &lt;/ol&gt;
642
+ &lt;custom-element&gt;
643
+ &lt;template&gt;
644
+ &lt;form slice="email-form"&gt;
645
+ &lt;label&gt; Email
646
+ &lt;input slice="username" slice-event="input" placeholder="non-empty" required data-testid="inp1"&gt;
647
+ &lt;/label&gt;
648
+ &lt;if test="//username/@validation-message"&gt;
649
+ &lt;var data-testid="var1"&gt;{//username/@validation-message}&lt;/var&gt;
650
+ &lt;/if&gt;
651
+ &lt;button data-testid="btn1"&gt;Next&lt;/button&gt;
652
+ &lt;/form&gt;
653
+ &lt;/template&gt;
654
+ &lt;/custom-element&gt;
655
+ `}
656
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
657
+ {
658
+ const titleText = <span class="cstat-no" title="statement not covered" >ReadSystemValidityMessage.args!.title as string;</span>
659
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
660
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
661
+ <span class="cstat-no" title="statement not covered" > await userEvent.type(canvas.getByTestId('inp1'),'Hi');</span>
662
+ <span class="cstat-no" title="statement not covered" > await userEvent.clear(canvas.getByTestId('inp1'));</span>
663
+ <span class="cstat-no" title="statement not covered" > await userEvent.click(canvas.getByTestId('btn1'));</span>
664
+ <span class="cstat-no" title="statement not covered" > await expect(await canvas.findByTestId('var1')).toBeInTheDocument();</span>
665
+ <span class="cstat-no" title="statement not covered" > await expect(canvas.getByTestId("var1").textContent).toEqual(canvas.getByTestId("inp1").validationMessage);</span>
666
+ <span class="cstat-no" title="statement not covered" > await expect(canvas.getByTestId("var1").textContent.length&gt;1).toEqual(true);</span>
667
+ },
668
+ };
669
+ &nbsp;
670
+ //&lt;editor-fold desc="unit test run" collapsed&gt;
444
671
  /* istanbul ignore else -- @preserve */
445
672
  if( 'test' === import.meta.env.MODE &amp;&amp;
446
673
  !import.meta.url.includes('skiptest') )
@@ -450,6 +677,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
450
677
  const { describe } = await import('vitest')
451
678
  describe(meta.title, () =&gt; testStoryBook( mod, meta ) );
452
679
  }
680
+ //&lt;/editor-fold&gt;
453
681
  &nbsp;</pre></td></tr></table></pre>
454
682
 
455
683
  <div class='push'></div><!-- for sticky footer -->
@@ -457,7 +685,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
457
685
  <div class='footer quiet pad2 space-top1 center small'>
458
686
  Code coverage generated by
459
687
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
460
- at 2024-06-27T03:24:38.495Z
688
+ at 2024-07-22T03:09:38.362Z
461
689
  </div>
462
690
  <script src="../../prettify.js"></script>
463
691
  <script>
package/coverage/src/stories/external-template.test.stories.ts.html CHANGED
@@ -835,7 +835,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
835
835
  <div class='footer quiet pad2 space-top1 center small'>
836
836
  Code coverage generated by
837
837
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
838
- at 2024-06-27T03:24:38.495Z
838
+ at 2024-07-22T03:09:38.362Z
839
839
  </div>
840
840
  <script src="../../prettify.js"></script>
841
841
  <script>
package/coverage/src/stories/form.test.stories.ts.html CHANGED
@@ -640,7 +640,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
640
640
  <div class='footer quiet pad2 space-top1 center small'>
641
641
  Code coverage generated by
642
642
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
643
- at 2024-06-27T03:24:38.495Z
643
+ at 2024-07-22T03:09:38.362Z
644
644
  </div>
645
645
  <script src="../../prettify.js"></script>
646
646
  <script>
package/coverage/src/stories/http-request.stories.ts.html CHANGED
@@ -802,7 +802,7 @@ from &lt;code&gt;${url}&lt;/code&gt;
802
802
  <div class='footer quiet pad2 space-top1 center small'>
803
803
  Code coverage generated by
804
804
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
805
- at 2024-06-27T03:24:38.495Z
805
+ at 2024-07-22T03:09:38.362Z
806
806
  </div>
807
807
  <script src="../../prettify.js"></script>
808
808
  <script>