@epa-wg/custom-element-dist 0.0.22 → 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 (94) hide show
  1. package/README.md +4 -4
  2. package/coverage/coverage-final.json +13 -15
  3. package/coverage/index.html +30 -30
  4. package/coverage/src/custom-element/coverage.svg +1 -1
  5. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  6. package/coverage/src/custom-element/custom-element.js.html +336 -312
  7. package/coverage/src/custom-element/http-request.js.html +10 -10
  8. package/coverage/src/custom-element/index.html +19 -49
  9. package/coverage/src/custom-element/local-storage.js.html +5 -5
  10. package/coverage/src/custom-element/location-element.js.html +1 -1
  11. package/coverage/src/index.html +1 -1
  12. package/coverage/src/mocks/handlers.ts.html +1 -1
  13. package/coverage/src/mocks/index.html +1 -1
  14. package/coverage/src/stories/attributes.test.stories.ts/coverage.svg +1 -1
  15. package/coverage/src/stories/attributes.test.stories.ts.html +85 -91
  16. package/coverage/src/stories/coverage.svg +1 -1
  17. package/coverage/src/stories/css.test.stories.ts/coverage.svg +1 -1
  18. package/coverage/src/stories/css.test.stories.ts.html +75 -78
  19. package/coverage/src/stories/dom-merge.test.stories.ts/coverage.svg +1 -1
  20. package/coverage/src/stories/dom-merge.test.stories.ts.html +302 -74
  21. package/coverage/src/stories/external-template.test.stories.ts/coverage.svg +1 -1
  22. package/coverage/src/stories/external-template.test.stories.ts.html +154 -154
  23. package/coverage/src/stories/form.test.stories.ts/coverage.svg +1 -1
  24. package/coverage/src/stories/form.test.stories.ts.html +83 -86
  25. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  26. package/coverage/src/stories/index.html +104 -104
  27. package/coverage/src/stories/local-storage.test.stories.ts/coverage.svg +1 -1
  28. package/coverage/src/stories/local-storage.test.stories.ts.html +444 -444
  29. package/coverage/src/stories/location-element.test.stories.ts/coverage.svg +1 -1
  30. package/coverage/src/stories/location-element.test.stories.ts.html +96 -96
  31. package/coverage/src/stories/slice-events.test.stories.ts/coverage.svg +1 -1
  32. package/coverage/src/stories/slice-events.test.stories.ts.html +141 -141
  33. package/coverage/src/stories/slots.test.stories.ts/coverage.svg +1 -1
  34. package/coverage/src/stories/slots.test.stories.ts.html +120 -123
  35. package/coverage/src/stories/{renderPlay.ts.html → testStoryBook.ts.html} +45 -24
  36. package/coverage/src/sum.ts.html +1 -1
  37. package/dist/{custom-element-N-sWiqGK.cjs → custom-element-BDK7dcJN.cjs} +8 -8
  38. package/dist/{custom-element-BISbI4SU.js → custom-element-DqtzLkTG.js} +74 -66
  39. package/dist/custom-element-bundle.cjs +1 -1
  40. package/dist/custom-element-bundle.js +23 -22
  41. package/package.json +3 -3
  42. package/src/custom-element/custom-element.js +9 -1
  43. package/src/custom-element/demo/form.html +92 -46
  44. package/src/custom-element/demo/s.xml +9 -17
  45. package/src/custom-element/ide/web-types-dce.json +1 -1
  46. package/src/custom-element/ide/web-types-xsl.json +1 -1
  47. package/src/stories/attributes.test.stories.ts +9 -11
  48. package/src/stories/css.test.stories.ts +6 -7
  49. package/src/stories/dom-merge.test.stories.ts +81 -5
  50. package/src/stories/external-template.test.stories.ts +6 -6
  51. package/src/stories/form.test.stories.ts +6 -7
  52. package/src/stories/local-storage.test.stories.ts +7 -7
  53. package/src/stories/location-element.test.stories.ts +6 -6
  54. package/src/stories/slice-events.test.stories.ts +6 -6
  55. package/src/stories/slots.test.stories.ts +6 -7
  56. package/src/stories/testStoryBook.ts +28 -0
  57. package/storybook-static/assets/{Color-PRSJMWNM-e4s261EJ.js → Color-PRSJMWNM-y4ZsI1hY.js} +1 -1
  58. package/storybook-static/assets/{Configure-DWut7txe.js → Configure-CyLVkwlf.js} +1 -1
  59. package/storybook-static/assets/{DocsRenderer-K4EAMTCU-CaXVGjCl.js → DocsRenderer-K4EAMTCU-VRGUwRrq.js} +2 -2
  60. package/storybook-static/assets/{WithTooltip-KJL26V4Q--B8vdnMi.js → WithTooltip-KJL26V4Q-xdXH9Ztt.js} +1 -1
  61. package/storybook-static/assets/{attributes.test.stories-IuwazrdL.js → attributes.test.stories-BckCcyrF.js} +3 -2
  62. package/storybook-static/assets/{css.test.stories-D9WaxrEv.js → css.test.stories-B-QcObCF.js} +1 -1
  63. package/storybook-static/assets/{custom-element-BV8-hRQS.js → custom-element-BIxkVg7K.js} +5 -5
  64. package/storybook-static/assets/dom-merge.test.stories-CjXhjTQY.js +258 -0
  65. package/storybook-static/assets/{external-template.test.stories-Bpr_wxBo.js → external-template.test.stories-BBqyi0az.js} +1 -1
  66. package/storybook-static/assets/{form.test.stories-3tURbEdv.js → form.test.stories-DsIo1B4n.js} +1 -1
  67. package/storybook-static/assets/{formatter-2WMMO6ZP-SJtgH3vM.js → formatter-2WMMO6ZP-CThVcQxM.js} +1 -1
  68. package/storybook-static/assets/{http-request.stories-8K_qSs8C.js → http-request.stories-sXA_Y-VM.js} +1 -1
  69. package/storybook-static/assets/{iframe-CM82WlGY.js → iframe-DcDTQOmA.js} +2 -2
  70. package/storybook-static/assets/{index-DNL-IEpS.js → index-CUFHd5VD.js} +1 -1
  71. package/storybook-static/assets/{index-CEZitmnt.js → index-DPPi9iZu.js} +5 -5
  72. package/storybook-static/assets/{index-D1MP-Zis.js → index-VWixWKZ7.js} +1 -1
  73. package/storybook-static/assets/{local-storage.test.stories-CtisAQBB.js → local-storage.test.stories-Cs2v3QTS.js} +1 -1
  74. package/storybook-static/assets/{location-element.test.stories-5O_t_m4Y.js → location-element.test.stories-WkrQDzJJ.js} +1 -1
  75. package/storybook-static/assets/{preview-5Y0XiZgz.js → preview-p-Bwze-K.js} +2 -2
  76. package/storybook-static/assets/{slice-events.test.stories-BSXCLIA5.js → slice-events.test.stories-BRBBc0JT.js} +1 -1
  77. package/storybook-static/assets/{slots.test.stories-B1vqfHmN.js → slots.test.stories-r-i91k3y.js} +1 -1
  78. package/storybook-static/assets/{syntaxhighlighter-BP7B2CQK-BWFH_0wQ.js → syntaxhighlighter-BP7B2CQK-OnioRcs9.js} +1 -1
  79. package/storybook-static/iframe.html +1 -1
  80. package/storybook-static/index.json +1 -1
  81. package/storybook-static/project.json +1 -1
  82. package/tsconfig.json +31 -21
  83. package/coverage/src/custom-element/custom-element1-1.js/coverage.svg +0 -10
  84. package/coverage/src/custom-element/custom-element1-1.js.html +0 -2374
  85. package/coverage/src/custom-element/custom-element1.js/coverage.svg +0 -10
  86. package/coverage/src/custom-element/custom-element1.js.html +0 -2374
  87. package/src/custom-element/custom-element1-1.js +0 -763
  88. package/src/custom-element/custom-element1.js +0 -763
  89. package/src/custom-element/custom-element1.js0 +0 -750
  90. package/src/custom-element/custom-element2.js0 +0 -759
  91. package/src/custom-element/custom-element3.js0 +0 -763
  92. package/src/stories/renderPlay.ts +0 -21
  93. package/storybook-static/assets/dom-merge.test.stories-BhbNeum_.js +0 -137
  94. /package/coverage/src/stories/{renderPlay.ts → testStoryBook.ts}/coverage.svg +0 -0
package/coverage/src/stories/dom-merge.test.stories.ts.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">100% </span>
26
+ <span class="strong">22.03% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>40/40</span>
28
+ <span class='fraction'>13/59</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'>1/1</span>
35
+ <span class='fraction'>3/3</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
40
+ <span class="strong">25% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>6/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">100% </span>
47
+ <span class="strong">21.05% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>38/38</span>
49
+ <span class='fraction'>12/57</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line high'></div>
64
+ <div class='status-line low'></div>
65
65
  <pre><table class="coverage">
66
66
  <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
67
  <a name='L2'></a><a href='#L2'>2</a>
@@ -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>
@@ -209,12 +285,12 @@
209
285
  <span class="cline-any cline-neutral">&nbsp;</span>
210
286
  <span class="cline-any cline-neutral">&nbsp;</span>
211
287
  <span class="cline-any cline-neutral">&nbsp;</span>
212
- <span class="cline-any cline-yes">3x</span>
288
+ <span class="cline-any cline-no">&nbsp;</span>
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>
@@ -245,20 +321,20 @@
245
321
  <span class="cline-any cline-neutral">&nbsp;</span>
246
322
  <span class="cline-any cline-neutral">&nbsp;</span>
247
323
  <span class="cline-any cline-neutral">&nbsp;</span>
248
- <span class="cline-any cline-yes">1x</span>
249
- <span class="cline-any cline-yes">1x</span>
250
- <span class="cline-any cline-yes">1x</span>
251
- <span class="cline-any cline-yes">1x</span>
252
- <span class="cline-any cline-yes">1x</span>
253
- <span class="cline-any cline-yes">1x</span>
254
- <span class="cline-any cline-yes">1x</span>
255
- <span class="cline-any cline-yes">1x</span>
256
- <span class="cline-any cline-yes">1x</span>
257
- <span class="cline-any cline-yes">1x</span>
258
- <span class="cline-any cline-yes">1x</span>
259
- <span class="cline-any cline-yes">1x</span>
260
- <span class="cline-any cline-yes">1x</span>
261
- <span class="cline-any cline-yes">1x</span>
324
+ <span class="cline-any cline-no">&nbsp;</span>
325
+ <span class="cline-any cline-no">&nbsp;</span>
326
+ <span class="cline-any cline-no">&nbsp;</span>
327
+ <span class="cline-any cline-no">&nbsp;</span>
328
+ <span class="cline-any cline-no">&nbsp;</span>
329
+ <span class="cline-any cline-no">&nbsp;</span>
330
+ <span class="cline-any cline-no">&nbsp;</span>
331
+ <span class="cline-any cline-no">&nbsp;</span>
332
+ <span class="cline-any cline-no">&nbsp;</span>
333
+ <span class="cline-any cline-no">&nbsp;</span>
334
+ <span class="cline-any cline-no">&nbsp;</span>
335
+ <span class="cline-any cline-no">&nbsp;</span>
336
+ <span class="cline-any cline-no">&nbsp;</span>
337
+ <span class="cline-any cline-no">&nbsp;</span>
262
338
  <span class="cline-any cline-neutral">&nbsp;</span>
263
339
  <span class="cline-any cline-neutral">&nbsp;</span>
264
340
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -296,30 +372,106 @@
296
372
  <span class="cline-any cline-neutral">&nbsp;</span>
297
373
  <span class="cline-any cline-neutral">&nbsp;</span>
298
374
  <span class="cline-any cline-neutral">&nbsp;</span>
375
+ <span class="cline-any cline-no">&nbsp;</span>
376
+ <span class="cline-any cline-no">&nbsp;</span>
377
+ <span class="cline-any cline-no">&nbsp;</span>
378
+ <span class="cline-any cline-no">&nbsp;</span>
379
+ <span class="cline-any cline-no">&nbsp;</span>
380
+ <span class="cline-any cline-no">&nbsp;</span>
381
+ <span class="cline-any cline-no">&nbsp;</span>
382
+ <span class="cline-any cline-no">&nbsp;</span>
383
+ <span class="cline-any cline-no">&nbsp;</span>
384
+ <span class="cline-any cline-no">&nbsp;</span>
385
+ <span class="cline-any cline-no">&nbsp;</span>
386
+ <span class="cline-any cline-no">&nbsp;</span>
387
+ <span class="cline-any cline-no">&nbsp;</span>
388
+ <span class="cline-any cline-neutral">&nbsp;</span>
389
+ <span class="cline-any cline-neutral">&nbsp;</span>
390
+ <span class="cline-any cline-neutral">&nbsp;</span>
391
+ <span class="cline-any cline-neutral">&nbsp;</span>
299
392
  <span class="cline-any cline-yes">1x</span>
300
- <span class="cline-any cline-yes">1x</span>
301
- <span class="cline-any cline-yes">1x</span>
302
- <span class="cline-any cline-yes">1x</span>
303
- <span class="cline-any cline-yes">1x</span>
304
- <span class="cline-any cline-yes">1x</span>
305
- <span class="cline-any cline-yes">1x</span>
306
- <span class="cline-any cline-yes">1x</span>
307
- <span class="cline-any cline-yes">1x</span>
308
- <span class="cline-any cline-yes">1x</span>
309
- <span class="cline-any cline-yes">1x</span>
310
- <span class="cline-any cline-yes">1x</span>
311
- <span class="cline-any cline-yes">1x</span>
393
+ <span class="cline-any cline-neutral">&nbsp;</span>
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>
312
426
  <span class="cline-any cline-neutral">&nbsp;</span>
313
427
  <span class="cline-any cline-neutral">&nbsp;</span>
314
428
  <span class="cline-any cline-neutral">&nbsp;</span>
315
429
  <span class="cline-any cline-yes">1x</span>
316
430
  <span class="cline-any cline-neutral">&nbsp;</span>
317
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>
318
467
  <span class="cline-any cline-yes">1x</span>
319
468
  <span class="cline-any cline-neutral">&nbsp;</span>
469
+ <span class="cline-any cline-neutral">&nbsp;</span>
320
470
  <span class="cline-any cline-yes">1x</span>
321
471
  <span class="cline-any cline-yes">1x</span>
322
472
  <span class="cline-any cline-yes">1x</span>
473
+ <span class="cline-any cline-yes">1x</span>
474
+ <span class="cline-any cline-neutral">&nbsp;</span>
323
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;
@@ -338,7 +490,7 @@ import {
338
490
  type TProps = { title: string; body:string};
339
491
  &nbsp;
340
492
  type Story = StoryObj&lt;TProps&gt;;
341
- function sleep(ms: number) { return new Promise((resolve) =&gt; setTimeout(resolve, ms)); }
493
+ function <span class="fstat-no" title="function not covered" >sleep(m</span>s: number) { <span class="cstat-no" title="statement not covered" >return new Promise(<span class="fstat-no" title="function not covered" >(r</span>esolve) =&gt; <span class="cstat-no" title="statement not covered" >setTimeout(resolve, ms))</span>; }</span>
342
494
  &nbsp;
343
495
  function render(args: TProps)
344
496
  {
@@ -372,22 +524,22 @@ export const CharsCountInTextarea:Story =
372
524
  &lt;/form&gt;
373
525
  &lt;/custom-element&gt;
374
526
  `}
375
- , play: async ({canvasElement}) =&gt;
527
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
376
528
  {
377
- const titleText = CharsCountInTextarea.args!.title as string;
378
- const canvas = within(canvasElement);
379
- await canvas.findByText(titleText);
380
- await sleep(100);
381
- expect(await canvas.findByTestId('textarea-id')).toBeInTheDocument();
382
- const textarea = canvas.getByTestId('textarea-id');
383
- textarea.value ='';
384
- textarea.focus();
385
- await userEvent.keyboard(titleText);
386
- expect(textarea.value).toEqual(titleText);
387
- expect(textarea.value.length).toEqual(titleText.length);
388
- canvas.getByTestId('refocus-id').focus();
389
- await sleep(10);
390
- expect(canvas.getByTestId('counter-id').textContent).toEqual(''+titleText?.length,'counter of symbols');
529
+ const titleText = <span class="cstat-no" title="statement not covered" >CharsCountInTextarea.args!.title as string;</span>
530
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
531
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
532
+ <span class="cstat-no" title="statement not covered" > await sleep(100);</span>
533
+ <span class="cstat-no" title="statement not covered" > expect(await canvas.findByTestId('textarea-id')).toBeInTheDocument();</span>
534
+ const textarea = <span class="cstat-no" title="statement not covered" >canvas.getByTestId('textarea-id');</span>
535
+ <span class="cstat-no" title="statement not covered" > textarea.value ='';</span>
536
+ <span class="cstat-no" title="statement not covered" > textarea.focus();</span>
537
+ <span class="cstat-no" title="statement not covered" > await userEvent.keyboard(titleText);</span>
538
+ <span class="cstat-no" title="statement not covered" > expect(textarea.value).toEqual(titleText);</span>
539
+ <span class="cstat-no" title="statement not covered" > expect(textarea.value.length).toEqual(titleText.length);</span>
540
+ <span class="cstat-no" title="statement not covered" > canvas.getByTestId('refocus-id').focus();</span>
541
+ <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
542
+ <span class="cstat-no" title="statement not covered" > expect(canvas.getByTestId('counter-id').textContent).toEqual(''+titleText?.length,'counter of symbols');</span>
391
543
  },
392
544
  };
393
545
  &nbsp;
@@ -423,33 +575,109 @@ export const WordCountOnType:Story =
423
575
  &lt;/form&gt;
424
576
  &lt;/custom-element&gt;
425
577
  `}
426
- , play: async ({canvasElement}) =&gt;
578
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
427
579
  {
428
- const titleText = WordCountOnType.args!.title as string;
429
- const canvas = within(canvasElement);
430
- await canvas.findByText(titleText);
431
- const input = await canvas.findByTestId('input-id');
432
- input.value = '';
433
- input.focus();
434
- expect(input).toBeInTheDocument();
435
- await userEvent.keyboard(titleText);
436
- await sleep(10);
437
- expect(input.value).toEqual(titleText);
438
- expect(canvas.getByTestId('chars-id').textContent.trim()).toEqual(''+titleText.length, 'counter of symbols');
439
- expect(titleText.split(' ').length).toEqual(6, 'counter of words in text sample');
440
- expect(canvas.getByTestId('words-id').textContent.trim()).toEqual('6', 'counter of words in render');
580
+ const titleText = <span class="cstat-no" title="statement not covered" >WordCountOnType.args!.title as string;</span>
581
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
582
+ <span class="cstat-no" title="statement not covered" > await canvas.findByText(titleText);</span>
583
+ const input = <span class="cstat-no" title="statement not covered" >await canvas.findByTestId('input-id');</span>
584
+ <span class="cstat-no" title="statement not covered" > input.value = '';</span>
585
+ <span class="cstat-no" title="statement not covered" > input.focus();</span>
586
+ <span class="cstat-no" title="statement not covered" > expect(input).toBeInTheDocument();</span>
587
+ <span class="cstat-no" title="statement not covered" > await userEvent.keyboard(titleText);</span>
588
+ <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
589
+ <span class="cstat-no" title="statement not covered" > expect(input.value).toEqual(titleText);</span>
590
+ <span class="cstat-no" title="statement not covered" > expect(canvas.getByTestId('chars-id').textContent.trim()).toEqual(''+titleText.length, 'counter of symbols');</span>
591
+ <span class="cstat-no" title="statement not covered" > expect(titleText.split(' ').length).toEqual(6, 'counter of words in text sample');</span>
592
+ <span class="cstat-no" title="statement not covered" > expect(canvas.getByTestId('words-id').textContent.trim()).toEqual('6', 'counter of words in render');</span>
441
593
  },
442
594
  };
443
595
  &nbsp;
444
- const TestStories = { CharsCountInTextarea, WordCountOnType };
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
+ };
445
669
  &nbsp;
670
+ //&lt;editor-fold desc="unit test run" collapsed&gt;
446
671
  /* istanbul ignore else -- @preserve */
447
- if( 'test' === import.meta.env.MODE )
672
+ if( 'test' === import.meta.env.MODE &amp;&amp;
673
+ !import.meta.url.includes('skiptest') )
448
674
  {
449
- const {playStories} = await import('./renderPlay');
450
- const {describe} = await import('vitest')
451
- describe('slots', () =&gt; playStories( TestStories, meta ) );
675
+ const mod = await import('./dom-merge.test.stories.ts?skiptest');
676
+ const { testStoryBook } = await import('./testStoryBook')
677
+ const { describe } = await import('vitest')
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 )
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-25T03:55:40.964Z
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/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">100%</text>
9
+ <text x="94" y="22" class="percent">11.76%</text>
10
10
  </svg>