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

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 (93) hide show
  1. package/.storybook/main.ts +21 -21
  2. package/.vscode/settings.json +24 -0
  3. package/README.md +4 -4
  4. package/coverage/coverage-final.json +7 -5
  5. package/coverage/index.html +26 -26
  6. package/coverage/src/custom-element/coverage.svg +1 -1
  7. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  8. package/coverage/src/custom-element/custom-element.js.html +439 -379
  9. package/coverage/src/custom-element/http-request.js.html +12 -12
  10. package/coverage/src/custom-element/index.html +23 -23
  11. package/coverage/src/custom-element/local-storage.js.html +1 -1
  12. package/coverage/src/custom-element/location-element.js/coverage.svg +1 -1
  13. package/coverage/src/custom-element/location-element.js.html +116 -47
  14. package/coverage/src/index.html +1 -1
  15. package/coverage/src/mocks/handlers.ts.html +1 -1
  16. package/coverage/src/mocks/index.html +1 -1
  17. package/coverage/src/stories/attributes.test.stories.ts.html +1 -1
  18. package/coverage/src/stories/coverage.svg +1 -1
  19. package/coverage/src/stories/css.test.stories.ts.html +1 -1
  20. package/coverage/src/stories/dom-merge.test.stories.ts/coverage.svg +1 -1
  21. package/coverage/src/stories/dom-merge.test.stories.ts.html +238 -10
  22. package/coverage/src/stories/external-template.test.stories.ts.html +1 -1
  23. package/coverage/src/stories/form.test.stories.ts.html +1 -1
  24. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  25. package/coverage/src/stories/index.html +46 -16
  26. package/coverage/src/stories/local-storage.test.stories.ts.html +1 -1
  27. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  28. package/coverage/src/stories/set-url.test.stories.ts/coverage.svg +10 -0
  29. package/coverage/src/stories/set-url.test.stories.ts.html +427 -0
  30. package/coverage/src/stories/slice-events.test.stories.ts.html +1 -1
  31. package/coverage/src/stories/slots.test.stories.ts.html +1 -1
  32. package/coverage/src/stories/testStoryBook.ts.html +12 -12
  33. package/coverage/src/stories/version-select.test.stories.ts/coverage.svg +10 -0
  34. package/coverage/src/stories/version-select.test.stories.ts.html +313 -0
  35. package/coverage/src/sum.ts.html +1 -1
  36. package/dist/{custom-element-BISbI4SU.js → custom-element-DAe7uvIt.js} +187 -173
  37. package/dist/custom-element-DZvvhscI.cjs +53 -0
  38. package/dist/custom-element-bundle.cjs +1 -1
  39. package/dist/custom-element-bundle.js +23 -22
  40. package/dist/location-element-DRB7hCwA.cjs +1 -0
  41. package/dist/location-element-FJlONi2n.js +65 -0
  42. package/package.json +2 -2
  43. package/src/custom-element/custom-element.js +25 -5
  44. package/src/custom-element/demo/form.html +2 -3
  45. package/src/custom-element/demo/location-element.html +17 -4
  46. package/src/custom-element/demo/s.xml +31 -6
  47. package/src/custom-element/demo/s.xslt +59 -22
  48. package/src/custom-element/demo/set-url.html +141 -0
  49. package/src/custom-element/ide/customData-dce.json +56 -0
  50. package/src/custom-element/ide/web-types-dce.json +153 -110
  51. package/src/custom-element/ide/web-types-xsl.json +1 -1
  52. package/src/custom-element/index.html +1 -0
  53. package/src/custom-element/location-element.js +25 -2
  54. package/src/custom-element.test.ts +26 -26
  55. package/src/stories/dom-merge.test.stories.ts +76 -0
  56. package/src/stories/set-url.test.stories.ts +114 -0
  57. package/src/stories/version-select.test.stories.ts +76 -0
  58. package/storybook-static/assets/{Color-PRSJMWNM-BD_Ds9NW.js → Color-PRSJMWNM-CRSv4C7i.js} +1 -1
  59. package/storybook-static/assets/{Configure-70I_VApa.js → Configure-D0qG3gR9.js} +1 -1
  60. package/storybook-static/assets/{DocsRenderer-K4EAMTCU-9dn0-HCP.js → DocsRenderer-K4EAMTCU-CG_P5zRZ.js} +2 -2
  61. package/storybook-static/assets/{WithTooltip-KJL26V4Q-C6g5GOU9.js → WithTooltip-KJL26V4Q-CUqUi5E8.js} +1 -1
  62. package/storybook-static/assets/{attributes.test.stories-BEOraI4E.js → attributes.test.stories-W34tZdUt.js} +1 -1
  63. package/storybook-static/assets/{css.test.stories-D9WaxrEv.js → css.test.stories-BZFYx1TQ.js} +1 -1
  64. package/storybook-static/assets/{custom-element-BV8-hRQS.js → custom-element-DpIq8E2p.js} +79 -79
  65. package/storybook-static/assets/dom-merge.test.stories-S-7U5N3h.js +258 -0
  66. package/storybook-static/assets/{external-template.test.stories-Bpr_wxBo.js → external-template.test.stories-QIO3lAFz.js} +1 -1
  67. package/storybook-static/assets/{form.test.stories-3tURbEdv.js → form.test.stories-ClYhj9F1.js} +1 -1
  68. package/storybook-static/assets/{formatter-2WMMO6ZP-6IvBq34u.js → formatter-2WMMO6ZP-C-UiBIma.js} +1 -1
  69. package/storybook-static/assets/http-request-DNq59pnj.js +1 -0
  70. package/storybook-static/assets/{http-request.stories-8K_qSs8C.js → http-request.stories-DCqY5s2i.js} +9 -9
  71. package/storybook-static/assets/iframe-CURpvmVV.js +2 -0
  72. package/storybook-static/assets/{index-DhXZyjEd.js → index-CKw1EbdP.js} +1 -1
  73. package/storybook-static/assets/{index-B3oZkK3F.js → index-DYpTqTNu.js} +1 -1
  74. package/storybook-static/assets/{index-C30JwJMK.js → index-DsWii_Ep.js} +5 -5
  75. package/storybook-static/assets/{local-storage.test.stories-CtisAQBB.js → local-storage.test.stories-BqgYwqr-.js} +1 -1
  76. package/storybook-static/assets/location-element-hKpcXCdn.js +1 -0
  77. package/storybook-static/assets/{location-element.test.stories-5O_t_m4Y.js → location-element.test.stories-DvH1TWK4.js} +9 -9
  78. package/storybook-static/assets/{preview-D0eCfQft.js → preview-DjDbQHPa.js} +2 -2
  79. package/storybook-static/assets/set-url.test.stories-GlJOh31I.js +81 -0
  80. package/storybook-static/assets/{slice-events.test.stories-BSXCLIA5.js → slice-events.test.stories-VoNjuPCX.js} +1 -1
  81. package/storybook-static/assets/{slots.test.stories-B1vqfHmN.js → slots.test.stories-Da2j9YuO.js} +1 -1
  82. package/storybook-static/assets/{syntaxhighlighter-BP7B2CQK-DpPBKyTO.js → syntaxhighlighter-BP7B2CQK-CDpEe51g.js} +1 -1
  83. package/storybook-static/assets/version-select.test.stories-DLwf-TPB.js +60 -0
  84. package/storybook-static/iframe.html +1 -1
  85. package/storybook-static/index.json +1 -1
  86. package/storybook-static/project.json +1 -1
  87. package/.idea/.gitignore +0 -8
  88. package/dist/custom-element-N-sWiqGK.cjs +0 -53
  89. package/dist/location-element-2m0gWq_d.cjs +0 -1
  90. package/dist/location-element-nA_wsqBt.js +0 -49
  91. package/storybook-static/assets/dom-merge.test.stories-BhbNeum_.js +0 -137
  92. package/storybook-static/assets/iframe-zdt9kuj6.js +0 -2
  93. package/yarn.lock +0 -10242
@@ -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-08-06T07:29:06.502Z
461
689
  </div>
462
690
  <script src="../../prettify.js"></script>
463
691
  <script>
@@ -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-08-06T07:29:06.502Z
839
839
  </div>
840
840
  <script src="../../prettify.js"></script>
841
841
  <script>
@@ -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-08-06T07:29:06.502Z
644
644
  </div>
645
645
  <script src="../../prettify.js"></script>
646
646
  <script>
@@ -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-08-06T07:29:06.502Z
806
806
  </div>
807
807
  <script src="../../prettify.js"></script>
808
808
  <script>
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">27.36% </span>
26
+ <span class="strong">27.77% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>214/782</span>
28
+ <span class='fraction'>238/857</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">100% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>39/39</span>
35
+ <span class='fraction'>45/45</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">33.6% </span>
40
+ <span class="strong">32.85% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>42/125</span>
42
+ <span class='fraction'>46/140</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">26.83% </span>
47
+ <span class="strong">27.23% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>197/734</span>
49
+ <span class='fraction'>219/804</span>
50
50
  </div>
51
51
 
52
52
 
@@ -110,17 +110,17 @@
110
110
 
111
111
  <tr>
112
112
  <td class="file low" data-value="dom-merge.test.stories.ts"><a href="dom-merge.test.stories.ts.html">dom-merge.test.stories.ts</a></td>
113
- <td data-value="27.5" class="pic low">
114
- <div class="chart"><div class="cover-fill" style="width: 27%"></div><div class="cover-empty" style="width: 73%"></div></div>
113
+ <td data-value="22.03" class="pic low">
114
+ <div class="chart"><div class="cover-fill" style="width: 22%"></div><div class="cover-empty" style="width: 78%"></div></div>
115
115
  </td>
116
- <td data-value="27.5" class="pct low">27.5%</td>
117
- <td data-value="40" class="abs low">11/40</td>
116
+ <td data-value="22.03" class="pct low">22.03%</td>
117
+ <td data-value="59" class="abs low">13/59</td>
118
118
  <td data-value="100" class="pct high">100%</td>
119
119
  <td data-value="3" class="abs high">3/3</td>
120
- <td data-value="33.33" class="pct low">33.33%</td>
121
- <td data-value="6" class="abs low">2/6</td>
122
- <td data-value="26.31" class="pct low">26.31%</td>
123
- <td data-value="38" class="abs low">10/38</td>
120
+ <td data-value="25" class="pct low">25%</td>
121
+ <td data-value="8" class="abs low">2/8</td>
122
+ <td data-value="21.05" class="pct low">21.05%</td>
123
+ <td data-value="57" class="abs low">12/57</td>
124
124
  </tr>
125
125
 
126
126
  <tr>
@@ -198,6 +198,21 @@
198
198
  <td data-value="50" class="abs low">11/50</td>
199
199
  </tr>
200
200
 
201
+ <tr>
202
+ <td class="file low" data-value="set-url.test.stories.ts"><a href="set-url.test.stories.ts.html">set-url.test.stories.ts</a></td>
203
+ <td data-value="33.33" class="pic low">
204
+ <div class="chart"><div class="cover-fill" style="width: 33%"></div><div class="cover-empty" style="width: 67%"></div></div>
205
+ </td>
206
+ <td data-value="33.33" class="pct low">33.33%</td>
207
+ <td data-value="36" class="abs low">12/36</td>
208
+ <td data-value="100" class="pct high">100%</td>
209
+ <td data-value="3" class="abs high">3/3</td>
210
+ <td data-value="28.57" class="pct low">28.57%</td>
211
+ <td data-value="7" class="abs low">2/7</td>
212
+ <td data-value="32.35" class="pct low">32.35%</td>
213
+ <td data-value="34" class="abs low">11/34</td>
214
+ </tr>
215
+
201
216
  <tr>
202
217
  <td class="file low" data-value="slice-events.test.stories.ts"><a href="slice-events.test.stories.ts.html">slice-events.test.stories.ts</a></td>
203
218
  <td data-value="17.94" class="pic low">
@@ -243,6 +258,21 @@
243
258
  <td data-value="11" class="abs high">11/11</td>
244
259
  </tr>
245
260
 
261
+ <tr>
262
+ <td class="file medium" data-value="version-select.test.stories.ts"><a href="version-select.test.stories.ts.html">version-select.test.stories.ts</a></td>
263
+ <td data-value="50" class="pic medium">
264
+ <div class="chart"><div class="cover-fill" style="width: 50%"></div><div class="cover-empty" style="width: 50%"></div></div>
265
+ </td>
266
+ <td data-value="50" class="pct medium">50%</td>
267
+ <td data-value="20" class="abs medium">10/20</td>
268
+ <td data-value="100" class="pct high">100%</td>
269
+ <td data-value="3" class="abs high">3/3</td>
270
+ <td data-value="33.33" class="pct low">33.33%</td>
271
+ <td data-value="6" class="abs low">2/6</td>
272
+ <td data-value="52.94" class="pct medium">52.94%</td>
273
+ <td data-value="17" class="abs medium">9/17</td>
274
+ </tr>
275
+
246
276
  </tbody>
247
277
  </table>
248
278
  </div>
@@ -251,7 +281,7 @@
251
281
  <div class='footer quiet pad2 space-top1 center small'>
252
282
  Code coverage generated by
253
283
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
254
- at 2024-06-27T03:24:38.495Z
284
+ at 2024-08-06T07:29:06.502Z
255
285
  </div>
256
286
  <script src="../../prettify.js"></script>
257
287
  <script>
@@ -1270,7 +1270,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
1270
1270
  <div class='footer quiet pad2 space-top1 center small'>
1271
1271
  Code coverage generated by
1272
1272
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
1273
- at 2024-06-27T03:24:38.495Z
1273
+ at 2024-08-06T07:29:06.502Z
1274
1274
  </div>
1275
1275
  <script src="../../prettify.js"></script>
1276
1276
  <script>
@@ -505,7 +505,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
505
505
  <div class='footer quiet pad2 space-top1 center small'>
506
506
  Code coverage generated by
507
507
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
508
- at 2024-06-27T03:24:38.495Z
508
+ at 2024-08-06T07:29:06.502Z
509
509
  </div>
510
510
  <script src="../../prettify.js"></script>
511
511
  <script>
@@ -0,0 +1,10 @@
1
+ <svg viewBox="0 0 140 32" height="20px" xmlns="http://www.w3.org/2000/svg">
2
+ <style>
3
+ .heavy { font: bold 16px sans-serif; fill:white; }
4
+ .percent { font: bold 16px monotype; fill: white; }
5
+ </style>
6
+ <rect width="140" height="32" fill="#473" rx="4"/>
7
+ <rect width="88" height="32" fill="#534" rx="4"/>
8
+ <text x="8" y="21" class="heavy">coverage</text>
9
+ <text x="94" y="22" class="percent">28.57%</text>
10
+ </svg>