@aurodesignsystem/auro-accordion 5.1.2 → 5.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +25 -0
- package/README.md +1 -1
- package/apiExamples/disabled.html +15 -0
- package/apiExamples/disabledGroup.html +47 -0
- package/coverage/lcov-report/auro-accordion-button.js.html +10 -10
- package/coverage/lcov-report/auro-accordion-group.js.html +107 -41
- package/coverage/lcov-report/auro-accordion.js.html +161 -95
- package/coverage/lcov-report/color-css.js.html +2 -2
- package/coverage/lcov-report/iconVersion.js.html +1 -1
- package/coverage/lcov-report/index.html +18 -18
- package/coverage/lcov-report/style-button-css.js.html +2 -2
- package/coverage/lcov-report/style-css.js.html +2 -2
- package/coverage/lcov-report/tokens-css.js.html +1 -1
- package/coverage/lcov.info +310 -252
- package/demo/api.md +163 -0
- package/demo/api.min.js +50 -6
- package/demo/index.min.js +50 -6
- package/dist/auro-accordion-group.d.ts +11 -0
- package/dist/auro-accordion-group.d.ts.map +1 -1
- package/dist/auro-accordion.d.ts +11 -0
- package/dist/auro-accordion.d.ts.map +1 -1
- package/dist/auro-accordion__bundled.js +50 -6
- package/package.json +3 -3
- package/src/auro-accordion-group.js +22 -0
- package/src/auro-accordion.js +23 -1
- package/src/color-css.js +1 -1
- package/src/color.css +4 -0
- package/src/color.scss +5 -0
- package/src/style-button-css.js +1 -1
- package/src/style-button.css +11 -5
- package/src/style-button.scss +10 -5
- package/src/style-css.js +1 -1
- package/src/style.css +7 -1
- package/src/style.scss +10 -1
- package/test/auro-accordion-group.test.js +17 -0
- package/test/auro-accordion.test.js +40 -0
|
@@ -25,28 +25,28 @@
|
|
|
25
25
|
<div class='fl pad1y space-right2'>
|
|
26
26
|
<span class="strong">100% </span>
|
|
27
27
|
<span class="quiet">Statements</span>
|
|
28
|
-
<span class='fraction'>
|
|
28
|
+
<span class='fraction'>247/247</span>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
<div class='fl pad1y space-right2'>
|
|
33
|
-
<span class="strong">
|
|
33
|
+
<span class="strong">100% </span>
|
|
34
34
|
<span class="quiet">Branches</span>
|
|
35
|
-
<span class='fraction'>
|
|
35
|
+
<span class='fraction'>17/17</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
<div class='fl pad1y space-right2'>
|
|
40
40
|
<span class="strong">100% </span>
|
|
41
41
|
<span class="quiet">Functions</span>
|
|
42
|
-
<span class='fraction'>
|
|
42
|
+
<span class='fraction'>10/10</span>
|
|
43
43
|
</div>
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
<div class='fl pad1y space-right2'>
|
|
47
47
|
<span class="strong">100% </span>
|
|
48
48
|
<span class="quiet">Lines</span>
|
|
49
|
-
<span class='fraction'>
|
|
49
|
+
<span class='fraction'>247/247</span>
|
|
50
50
|
</div>
|
|
51
51
|
|
|
52
52
|
|
|
@@ -288,7 +288,29 @@
|
|
|
288
288
|
<a name='L223'></a><a href='#L223'>223</a>
|
|
289
289
|
<a name='L224'></a><a href='#L224'>224</a>
|
|
290
290
|
<a name='L225'></a><a href='#L225'>225</a>
|
|
291
|
-
<a name='L226'></a><a href='#L226'>226</a
|
|
291
|
+
<a name='L226'></a><a href='#L226'>226</a>
|
|
292
|
+
<a name='L227'></a><a href='#L227'>227</a>
|
|
293
|
+
<a name='L228'></a><a href='#L228'>228</a>
|
|
294
|
+
<a name='L229'></a><a href='#L229'>229</a>
|
|
295
|
+
<a name='L230'></a><a href='#L230'>230</a>
|
|
296
|
+
<a name='L231'></a><a href='#L231'>231</a>
|
|
297
|
+
<a name='L232'></a><a href='#L232'>232</a>
|
|
298
|
+
<a name='L233'></a><a href='#L233'>233</a>
|
|
299
|
+
<a name='L234'></a><a href='#L234'>234</a>
|
|
300
|
+
<a name='L235'></a><a href='#L235'>235</a>
|
|
301
|
+
<a name='L236'></a><a href='#L236'>236</a>
|
|
302
|
+
<a name='L237'></a><a href='#L237'>237</a>
|
|
303
|
+
<a name='L238'></a><a href='#L238'>238</a>
|
|
304
|
+
<a name='L239'></a><a href='#L239'>239</a>
|
|
305
|
+
<a name='L240'></a><a href='#L240'>240</a>
|
|
306
|
+
<a name='L241'></a><a href='#L241'>241</a>
|
|
307
|
+
<a name='L242'></a><a href='#L242'>242</a>
|
|
308
|
+
<a name='L243'></a><a href='#L243'>243</a>
|
|
309
|
+
<a name='L244'></a><a href='#L244'>244</a>
|
|
310
|
+
<a name='L245'></a><a href='#L245'>245</a>
|
|
311
|
+
<a name='L246'></a><a href='#L246'>246</a>
|
|
312
|
+
<a name='L247'></a><a href='#L247'>247</a>
|
|
313
|
+
<a name='L248'></a><a href='#L248'>248</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
|
|
292
314
|
<span class="cline-any cline-yes">2x</span>
|
|
293
315
|
<span class="cline-any cline-yes">2x</span>
|
|
294
316
|
<span class="cline-any cline-yes">2x</span>
|
|
@@ -340,32 +362,43 @@
|
|
|
340
362
|
<span class="cline-any cline-yes">2x</span>
|
|
341
363
|
<span class="cline-any cline-yes">2x</span>
|
|
342
364
|
<span class="cline-any cline-yes">2x</span>
|
|
343
|
-
<span class="cline-any cline-yes">
|
|
344
|
-
<span class="cline-any cline-yes">
|
|
345
|
-
<span class="cline-any cline-yes">
|
|
346
|
-
<span class="cline-any cline-yes">
|
|
347
|
-
<span class="cline-any cline-yes">
|
|
348
|
-
<span class="cline-any cline-yes">
|
|
349
|
-
<span class="cline-any cline-yes">
|
|
350
|
-
<span class="cline-any cline-yes">
|
|
351
|
-
<span class="cline-any cline-yes">
|
|
352
|
-
<span class="cline-any cline-yes">
|
|
353
|
-
<span class="cline-any cline-yes">
|
|
354
|
-
<span class="cline-any cline-yes">
|
|
355
|
-
<span class="cline-any cline-yes">
|
|
356
|
-
<span class="cline-any cline-yes">
|
|
357
|
-
<span class="cline-any cline-yes">
|
|
358
|
-
<span class="cline-any cline-yes">
|
|
359
|
-
<span class="cline-any cline-yes">
|
|
360
|
-
<span class="cline-any cline-yes">
|
|
361
|
-
<span class="cline-any cline-yes">
|
|
362
|
-
<span class="cline-any cline-yes">
|
|
363
|
-
<span class="cline-any cline-yes">
|
|
364
|
-
<span class="cline-any cline-yes">
|
|
365
|
-
<span class="cline-any cline-yes">
|
|
366
|
-
<span class="cline-any cline-yes">
|
|
367
|
-
<span class="cline-any cline-yes">
|
|
368
|
-
<span class="cline-any cline-yes">
|
|
365
|
+
<span class="cline-any cline-yes">2x</span>
|
|
366
|
+
<span class="cline-any cline-yes">14x</span>
|
|
367
|
+
<span class="cline-any cline-yes">14x</span>
|
|
368
|
+
<span class="cline-any cline-yes">14x</span>
|
|
369
|
+
<span class="cline-any cline-yes">14x</span>
|
|
370
|
+
<span class="cline-any cline-yes">14x</span>
|
|
371
|
+
<span class="cline-any cline-yes">14x</span>
|
|
372
|
+
<span class="cline-any cline-yes">14x</span>
|
|
373
|
+
<span class="cline-any cline-yes">14x</span>
|
|
374
|
+
<span class="cline-any cline-yes">14x</span>
|
|
375
|
+
<span class="cline-any cline-yes">14x</span>
|
|
376
|
+
<span class="cline-any cline-yes">14x</span>
|
|
377
|
+
<span class="cline-any cline-yes">14x</span>
|
|
378
|
+
<span class="cline-any cline-yes">14x</span>
|
|
379
|
+
<span class="cline-any cline-yes">14x</span>
|
|
380
|
+
<span class="cline-any cline-yes">14x</span>
|
|
381
|
+
<span class="cline-any cline-yes">14x</span>
|
|
382
|
+
<span class="cline-any cline-yes">14x</span>
|
|
383
|
+
<span class="cline-any cline-yes">14x</span>
|
|
384
|
+
<span class="cline-any cline-yes">14x</span>
|
|
385
|
+
<span class="cline-any cline-yes">14x</span>
|
|
386
|
+
<span class="cline-any cline-yes">14x</span>
|
|
387
|
+
<span class="cline-any cline-yes">14x</span>
|
|
388
|
+
<span class="cline-any cline-yes">14x</span>
|
|
389
|
+
<span class="cline-any cline-yes">14x</span>
|
|
390
|
+
<span class="cline-any cline-yes">14x</span>
|
|
391
|
+
<span class="cline-any cline-yes">14x</span>
|
|
392
|
+
<span class="cline-any cline-yes">2x</span>
|
|
393
|
+
<span class="cline-any cline-yes">2x</span>
|
|
394
|
+
<span class="cline-any cline-yes">2x</span>
|
|
395
|
+
<span class="cline-any cline-yes">2x</span>
|
|
396
|
+
<span class="cline-any cline-yes">2x</span>
|
|
397
|
+
<span class="cline-any cline-yes">2x</span>
|
|
398
|
+
<span class="cline-any cline-yes">2x</span>
|
|
399
|
+
<span class="cline-any cline-yes">2x</span>
|
|
400
|
+
<span class="cline-any cline-yes">2x</span>
|
|
401
|
+
<span class="cline-any cline-yes">2x</span>
|
|
369
402
|
<span class="cline-any cline-yes">2x</span>
|
|
370
403
|
<span class="cline-any cline-yes">2x</span>
|
|
371
404
|
<span class="cline-any cline-yes">2x</span>
|
|
@@ -402,12 +435,6 @@
|
|
|
402
435
|
<span class="cline-any cline-yes">2x</span>
|
|
403
436
|
<span class="cline-any cline-yes">2x</span>
|
|
404
437
|
<span class="cline-any cline-yes">2x</span>
|
|
405
|
-
<span class="cline-any cline-yes">4x</span>
|
|
406
|
-
<span class="cline-any cline-yes">4x</span>
|
|
407
|
-
<span class="cline-any cline-yes">4x</span>
|
|
408
|
-
<span class="cline-any cline-yes">4x</span>
|
|
409
|
-
<span class="cline-any cline-yes">4x</span>
|
|
410
|
-
<span class="cline-any cline-yes">4x</span>
|
|
411
438
|
<span class="cline-any cline-yes">2x</span>
|
|
412
439
|
<span class="cline-any cline-yes">2x</span>
|
|
413
440
|
<span class="cline-any cline-yes">2x</span>
|
|
@@ -424,9 +451,9 @@
|
|
|
424
451
|
<span class="cline-any cline-yes">2x</span>
|
|
425
452
|
<span class="cline-any cline-yes">2x</span>
|
|
426
453
|
<span class="cline-any cline-yes">2x</span>
|
|
427
|
-
<span class="cline-any cline-yes">
|
|
428
|
-
<span class="cline-any cline-yes">
|
|
429
|
-
<span class="cline-any cline-yes">
|
|
454
|
+
<span class="cline-any cline-yes">14x</span>
|
|
455
|
+
<span class="cline-any cline-yes">14x</span>
|
|
456
|
+
<span class="cline-any cline-yes">14x</span>
|
|
430
457
|
<span class="cline-any cline-yes">2x</span>
|
|
431
458
|
<span class="cline-any cline-yes">2x</span>
|
|
432
459
|
<span class="cline-any cline-yes">2x</span>
|
|
@@ -435,13 +462,13 @@
|
|
|
435
462
|
<span class="cline-any cline-yes">2x</span>
|
|
436
463
|
<span class="cline-any cline-yes">2x</span>
|
|
437
464
|
<span class="cline-any cline-yes">2x</span>
|
|
438
|
-
<span class="cline-any cline-yes">
|
|
439
|
-
<span class="cline-any cline-yes">
|
|
440
|
-
<span class="cline-any cline-yes">
|
|
441
|
-
<span class="cline-any cline-yes">
|
|
442
|
-
<span class="cline-any cline-yes">
|
|
443
|
-
<span class="cline-any cline-yes">
|
|
444
|
-
<span class="cline-any cline-yes">
|
|
465
|
+
<span class="cline-any cline-yes">56x</span>
|
|
466
|
+
<span class="cline-any cline-yes">56x</span>
|
|
467
|
+
<span class="cline-any cline-yes">56x</span>
|
|
468
|
+
<span class="cline-any cline-yes">56x</span>
|
|
469
|
+
<span class="cline-any cline-yes">56x</span>
|
|
470
|
+
<span class="cline-any cline-yes">56x</span>
|
|
471
|
+
<span class="cline-any cline-yes">56x</span>
|
|
445
472
|
<span class="cline-any cline-yes">2x</span>
|
|
446
473
|
<span class="cline-any cline-yes">2x</span>
|
|
447
474
|
<span class="cline-any cline-yes">2x</span>
|
|
@@ -450,15 +477,15 @@
|
|
|
450
477
|
<span class="cline-any cline-yes">2x</span>
|
|
451
478
|
<span class="cline-any cline-yes">2x</span>
|
|
452
479
|
<span class="cline-any cline-yes">2x</span>
|
|
453
|
-
<span class="cline-any cline-yes">
|
|
454
|
-
<span class="cline-any cline-yes">
|
|
455
|
-
<span class="cline-any cline-yes">
|
|
456
|
-
<span class="cline-any cline-yes">
|
|
457
|
-
<span class="cline-any cline-yes">
|
|
458
|
-
<span class="cline-any cline-yes">
|
|
459
|
-
<span class="cline-any cline-yes">
|
|
460
|
-
<span class="cline-any cline-yes">
|
|
461
|
-
<span class="cline-any cline-yes">
|
|
480
|
+
<span class="cline-any cline-yes">14x</span>
|
|
481
|
+
<span class="cline-any cline-yes">14x</span>
|
|
482
|
+
<span class="cline-any cline-yes">14x</span>
|
|
483
|
+
<span class="cline-any cline-yes">14x</span>
|
|
484
|
+
<span class="cline-any cline-yes">56x</span>
|
|
485
|
+
<span class="cline-any cline-yes">56x</span>
|
|
486
|
+
<span class="cline-any cline-yes">14x</span>
|
|
487
|
+
<span class="cline-any cline-yes">14x</span>
|
|
488
|
+
<span class="cline-any cline-yes">14x</span>
|
|
462
489
|
<span class="cline-any cline-yes">2x</span>
|
|
463
490
|
<span class="cline-any cline-yes">2x</span>
|
|
464
491
|
<span class="cline-any cline-yes">2x</span>
|
|
@@ -477,41 +504,58 @@
|
|
|
477
504
|
<span class="cline-any cline-yes">2x</span>
|
|
478
505
|
<span class="cline-any cline-yes">2x</span>
|
|
479
506
|
<span class="cline-any cline-yes">2x</span>
|
|
480
|
-
<span class="cline-any cline-yes">
|
|
481
|
-
<span class="cline-any cline-yes">
|
|
482
|
-
<span class="cline-any cline-yes">
|
|
483
|
-
<span class="cline-any cline-yes">
|
|
484
|
-
<span class="cline-any cline-yes">
|
|
485
|
-
<span class="cline-any cline-yes">
|
|
486
|
-
<span class="cline-any cline-yes">
|
|
487
|
-
<span class="cline-any cline-yes">
|
|
488
|
-
<span class="cline-any cline-yes">
|
|
489
|
-
<span class="cline-any cline-yes">
|
|
490
|
-
<span class="cline-any cline-yes">
|
|
491
|
-
<span class="cline-any cline-yes">
|
|
492
|
-
<span class="cline-any cline-yes">
|
|
493
|
-
<span class="cline-any cline-yes">
|
|
494
|
-
<span class="cline-any cline-yes">
|
|
495
|
-
<span class="cline-any cline-yes">
|
|
496
|
-
<span class="cline-any cline-yes">
|
|
497
|
-
<span class="cline-any cline-yes">
|
|
498
|
-
<span class="cline-any cline-yes">
|
|
499
|
-
<span class="cline-any cline-yes">
|
|
500
|
-
<span class="cline-any cline-yes">
|
|
501
|
-
<span class="cline-any cline-yes">
|
|
502
|
-
<span class="cline-any cline-yes">
|
|
503
|
-
<span class="cline-any cline-yes">
|
|
504
|
-
<span class="cline-any cline-yes">
|
|
505
|
-
<span class="cline-any cline-yes">
|
|
506
|
-
<span class="cline-any cline-yes">
|
|
507
|
-
<span class="cline-any cline-yes">
|
|
508
|
-
<span class="cline-any cline-yes">
|
|
509
|
-
<span class="cline-any cline-yes">
|
|
510
|
-
<span class="cline-any cline-yes">
|
|
511
|
-
<span class="cline-any cline-yes">
|
|
512
|
-
<span class="cline-any cline-yes">
|
|
513
|
-
<span class="cline-any cline-yes">
|
|
514
|
-
<span class="cline-any cline-yes">
|
|
507
|
+
<span class="cline-any cline-yes">2x</span>
|
|
508
|
+
<span class="cline-any cline-yes">2x</span>
|
|
509
|
+
<span class="cline-any cline-yes">2x</span>
|
|
510
|
+
<span class="cline-any cline-yes">2x</span>
|
|
511
|
+
<span class="cline-any cline-yes">5x</span>
|
|
512
|
+
<span class="cline-any cline-yes">1x</span>
|
|
513
|
+
<span class="cline-any cline-yes">1x</span>
|
|
514
|
+
<span class="cline-any cline-yes">1x</span>
|
|
515
|
+
<span class="cline-any cline-yes">4x</span>
|
|
516
|
+
<span class="cline-any cline-yes">5x</span>
|
|
517
|
+
<span class="cline-any cline-yes">2x</span>
|
|
518
|
+
<span class="cline-any cline-yes">2x</span>
|
|
519
|
+
<span class="cline-any cline-yes">2x</span>
|
|
520
|
+
<span class="cline-any cline-yes">29x</span>
|
|
521
|
+
<span class="cline-any cline-yes">29x</span>
|
|
522
|
+
<span class="cline-any cline-yes">29x</span>
|
|
523
|
+
<span class="cline-any cline-yes">29x</span>
|
|
524
|
+
<span class="cline-any cline-yes">29x</span>
|
|
525
|
+
<span class="cline-any cline-yes">29x</span>
|
|
526
|
+
<span class="cline-any cline-yes">29x</span>
|
|
527
|
+
<span class="cline-any cline-yes">29x</span>
|
|
528
|
+
<span class="cline-any cline-yes">29x</span>
|
|
529
|
+
<span class="cline-any cline-yes">29x</span>
|
|
530
|
+
<span class="cline-any cline-yes">29x</span>
|
|
531
|
+
<span class="cline-any cline-yes">29x</span>
|
|
532
|
+
<span class="cline-any cline-yes">29x</span>
|
|
533
|
+
<span class="cline-any cline-yes">29x</span>
|
|
534
|
+
<span class="cline-any cline-yes">29x</span>
|
|
535
|
+
<span class="cline-any cline-yes">29x</span>
|
|
536
|
+
<span class="cline-any cline-yes">29x</span>
|
|
537
|
+
<span class="cline-any cline-yes">29x</span>
|
|
538
|
+
<span class="cline-any cline-yes">29x</span>
|
|
539
|
+
<span class="cline-any cline-yes">29x</span>
|
|
540
|
+
<span class="cline-any cline-yes">28x</span>
|
|
541
|
+
<span class="cline-any cline-yes">28x</span>
|
|
542
|
+
<span class="cline-any cline-yes">28x</span>
|
|
543
|
+
<span class="cline-any cline-yes">28x</span>
|
|
544
|
+
<span class="cline-any cline-yes">28x</span>
|
|
545
|
+
<span class="cline-any cline-yes">28x</span>
|
|
546
|
+
<span class="cline-any cline-yes">29x</span>
|
|
547
|
+
<span class="cline-any cline-yes">29x</span>
|
|
548
|
+
<span class="cline-any cline-yes">29x</span>
|
|
549
|
+
<span class="cline-any cline-yes">29x</span>
|
|
550
|
+
<span class="cline-any cline-yes">29x</span>
|
|
551
|
+
<span class="cline-any cline-yes">29x</span>
|
|
552
|
+
<span class="cline-any cline-yes">29x</span>
|
|
553
|
+
<span class="cline-any cline-yes">29x</span>
|
|
554
|
+
<span class="cline-any cline-yes">29x</span>
|
|
555
|
+
<span class="cline-any cline-yes">29x</span>
|
|
556
|
+
<span class="cline-any cline-yes">29x</span>
|
|
557
|
+
<span class="cline-any cline-yes">2x</span>
|
|
558
|
+
<span class="cline-any cline-yes">2x</span>
|
|
515
559
|
<span class="cline-any cline-yes">2x</span>
|
|
516
560
|
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
517
561
|
// See LICENSE in the project root for license information.
|
|
@@ -551,6 +595,7 @@ import tokensCss from "./tokens-css.js";
|
|
|
551
595
|
* @attr {Boolean} expanded - If set, the accordion is expanded.
|
|
552
596
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
553
597
|
* @attr {Boolean} grouped - Attribute will be set on accordion when it appears in an accordion group.
|
|
598
|
+
* @attr {Boolean} disabled - If set, the accordion is disabled and have reduced opacity.
|
|
554
599
|
* @attr {String} chevron - Sets chevron variant option. Possible values are: `none`, `right`.
|
|
555
600
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
556
601
|
* @slot - Default slot for the accordion content.
|
|
@@ -622,6 +667,10 @@ export class AuroAccordion extends LitElement {
|
|
|
622
667
|
variant: {
|
|
623
668
|
type: String,
|
|
624
669
|
reflect: true
|
|
670
|
+
},
|
|
671
|
+
disabled: {
|
|
672
|
+
type: Boolean,
|
|
673
|
+
reflect: true
|
|
625
674
|
}
|
|
626
675
|
};
|
|
627
676
|
}
|
|
@@ -699,6 +748,19 @@ export class AuroAccordion extends LitElement {
|
|
|
699
748
|
}
|
|
700
749
|
}));
|
|
701
750
|
}
|
|
751
|
+
|
|
752
|
+
/**
|
|
753
|
+
* Toggles the visibility of the accordion content when button gets clicked.
|
|
754
|
+
* @private
|
|
755
|
+
* @param {Event} event - The event object.
|
|
756
|
+
*/
|
|
757
|
+
handleButtonClick(event) {
|
|
758
|
+
if (this.disabled) {
|
|
759
|
+
event.preventDefault();
|
|
760
|
+
return;
|
|
761
|
+
}
|
|
762
|
+
this.toggle();
|
|
763
|
+
}
|
|
702
764
|
|
|
703
765
|
// function that renders the HTML and CSS into the scope of the component
|
|
704
766
|
render() {
|
|
@@ -717,9 +779,11 @@ export class AuroAccordion extends LitElement {
|
|
|
717
779
|
id="accordionTrigger"
|
|
718
780
|
aria-controls="accordionContent"
|
|
719
781
|
?ariaexpanded="${this.expanded}"
|
|
720
|
-
|
|
782
|
+
?aria-disabled="${this.disabled}"
|
|
783
|
+
?disabled="${this.disabled}"
|
|
784
|
+
@click="${this.handleButtonClick}"
|
|
721
785
|
part="trigger">
|
|
722
|
-
${this.chevron === 'none'
|
|
786
|
+
${this.chevron === 'none' ? undefined : html`
|
|
723
787
|
<${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}">
|
|
724
788
|
${this.generateIconHtml(chevronUp.svg)}
|
|
725
789
|
</${this.iconTag}>
|
|
@@ -738,6 +802,8 @@ export class AuroAccordion extends LitElement {
|
|
|
738
802
|
`;
|
|
739
803
|
}
|
|
740
804
|
}
|
|
805
|
+
|
|
806
|
+
customElements.define('auro-accordion', AuroAccordion);
|
|
741
807
|
</pre></td></tr></table></pre>
|
|
742
808
|
|
|
743
809
|
<div class='push'></div><!-- for sticky footer -->
|
|
@@ -745,7 +811,7 @@ export class AuroAccordion extends LitElement {
|
|
|
745
811
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
746
812
|
Code coverage generated by
|
|
747
813
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
748
|
-
at 2025-05-
|
|
814
|
+
at 2025-05-13T18:28:58.969Z
|
|
749
815
|
</div>
|
|
750
816
|
<script src="prettify.js"></script>
|
|
751
817
|
<script>
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
<a name='L3'></a><a href='#L3'>3</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
|
|
69
69
|
<span class="cline-any cline-yes">2x</span>
|
|
70
70
|
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">import { css } from 'lit';
|
|
71
|
-
export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-basic-color-border-subtle, #dddddd)}`;
|
|
71
|
+
export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host([disabled]){--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-disabled, $ds-basic-color-texticon-disabled)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-basic-color-border-subtle, #dddddd)}`;
|
|
72
72
|
</pre></td></tr></table></pre>
|
|
73
73
|
|
|
74
74
|
<div class='push'></div><!-- for sticky footer -->
|
|
@@ -76,7 +76,7 @@ export default css`:host .trigger{color:var(--ds-auro-accordion-trigger-color);b
|
|
|
76
76
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
77
77
|
Code coverage generated by
|
|
78
78
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
79
|
-
at 2025-05-
|
|
79
|
+
at 2025-05-13T18:28:58.969Z
|
|
80
80
|
</div>
|
|
81
81
|
<script src="prettify.js"></script>
|
|
82
82
|
<script>
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
71
71
|
Code coverage generated by
|
|
72
72
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
73
|
-
at 2025-05-
|
|
73
|
+
at 2025-05-13T18:28:58.969Z
|
|
74
74
|
</div>
|
|
75
75
|
<script src="prettify.js"></script>
|
|
76
76
|
<script>
|
|
@@ -23,30 +23,30 @@
|
|
|
23
23
|
<div class='clearfix'>
|
|
24
24
|
|
|
25
25
|
<div class='fl pad1y space-right2'>
|
|
26
|
-
<span class="strong">99.
|
|
26
|
+
<span class="strong">99.55% </span>
|
|
27
27
|
<span class="quiet">Statements</span>
|
|
28
|
-
<span class='fraction'>
|
|
28
|
+
<span class='fraction'>448/450</span>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
<div class='fl pad1y space-right2'>
|
|
33
|
-
<span class="strong">
|
|
33
|
+
<span class="strong">100% </span>
|
|
34
34
|
<span class="quiet">Branches</span>
|
|
35
|
-
<span class='fraction'>
|
|
35
|
+
<span class='fraction'>48/48</span>
|
|
36
36
|
</div>
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
<div class='fl pad1y space-right2'>
|
|
40
|
-
<span class="strong">95% </span>
|
|
40
|
+
<span class="strong">95.65% </span>
|
|
41
41
|
<span class="quiet">Functions</span>
|
|
42
|
-
<span class='fraction'>
|
|
42
|
+
<span class='fraction'>22/23</span>
|
|
43
43
|
</div>
|
|
44
44
|
|
|
45
45
|
|
|
46
46
|
<div class='fl pad1y space-right2'>
|
|
47
|
-
<span class="strong">99.
|
|
47
|
+
<span class="strong">99.55% </span>
|
|
48
48
|
<span class="quiet">Lines</span>
|
|
49
|
-
<span class='fraction'>
|
|
49
|
+
<span class='fraction'>448/450</span>
|
|
50
50
|
</div>
|
|
51
51
|
|
|
52
52
|
|
|
@@ -99,13 +99,13 @@
|
|
|
99
99
|
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
|
|
100
100
|
</td>
|
|
101
101
|
<td data-value="100" class="pct high">100%</td>
|
|
102
|
-
<td data-value="
|
|
102
|
+
<td data-value="151" class="abs high">151/151</td>
|
|
103
103
|
<td data-value="100" class="pct high">100%</td>
|
|
104
|
-
<td data-value="
|
|
104
|
+
<td data-value="23" class="abs high">23/23</td>
|
|
105
105
|
<td data-value="100" class="pct high">100%</td>
|
|
106
|
-
<td data-value="
|
|
106
|
+
<td data-value="10" class="abs high">10/10</td>
|
|
107
107
|
<td data-value="100" class="pct high">100%</td>
|
|
108
|
-
<td data-value="
|
|
108
|
+
<td data-value="151" class="abs high">151/151</td>
|
|
109
109
|
</tr>
|
|
110
110
|
|
|
111
111
|
<tr>
|
|
@@ -114,13 +114,13 @@
|
|
|
114
114
|
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
|
|
115
115
|
</td>
|
|
116
116
|
<td data-value="100" class="pct high">100%</td>
|
|
117
|
-
<td data-value="
|
|
118
|
-
<td data-value="92.3" class="pct high">92.3%</td>
|
|
119
|
-
<td data-value="13" class="abs high">12/13</td>
|
|
117
|
+
<td data-value="247" class="abs high">247/247</td>
|
|
120
118
|
<td data-value="100" class="pct high">100%</td>
|
|
121
|
-
<td data-value="
|
|
119
|
+
<td data-value="17" class="abs high">17/17</td>
|
|
122
120
|
<td data-value="100" class="pct high">100%</td>
|
|
123
|
-
<td data-value="
|
|
121
|
+
<td data-value="10" class="abs high">10/10</td>
|
|
122
|
+
<td data-value="100" class="pct high">100%</td>
|
|
123
|
+
<td data-value="247" class="abs high">247/247</td>
|
|
124
124
|
</tr>
|
|
125
125
|
|
|
126
126
|
<tr>
|
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
207
207
|
Code coverage generated by
|
|
208
208
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
209
|
-
at 2025-05-
|
|
209
|
+
at 2025-05-13T18:28:58.969Z
|
|
210
210
|
</div>
|
|
211
211
|
<script src="prettify.js"></script>
|
|
212
212
|
<script>
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
<a name='L3'></a><a href='#L3'>3</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
|
|
69
69
|
<span class="cline-any cline-yes">2x</span>
|
|
70
70
|
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">import { css } from 'lit';
|
|
71
|
-
export default css`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .
|
|
71
|
+
export default css`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset;cursor:pointer}:host .auro-button{all:unset;width:100%;padding:var(--ds-size-200, 1rem) var(--trigger-padding-right, 0) var(--ds-size-200, 1rem) var(--trigger-padding-left, 0);box-sizing:border-box}:host .auro-button:focus,:host .auro-button:focus-visible,:host .auro-button:focus-within{outline:0}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host([disabled]){cursor:not-allowed}:host([disabled]) .auro-button{pointer-events:none}:host(.sm) .auro-button{padding-top:var(--ds-size-150, 0.75rem);padding-bottom:var(--ds-size-150, 0.75rem)}:host(.lg) .auro-button{padding-top:var(--ds-size-250, 1.25rem);padding-bottom:var(--ds-size-250, 1.25rem)}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
|
|
72
72
|
</pre></td></tr></table></pre>
|
|
73
73
|
|
|
74
74
|
<div class='push'></div><!-- for sticky footer -->
|
|
@@ -76,7 +76,7 @@ export default css`:focus:not(:focus-visible){outline:3px solid transparent}:hos
|
|
|
76
76
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
77
77
|
Code coverage generated by
|
|
78
78
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
79
|
-
at 2025-05-
|
|
79
|
+
at 2025-05-13T18:28:58.969Z
|
|
80
80
|
</div>
|
|
81
81
|
<script src="prettify.js"></script>
|
|
82
82
|
<script>
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
<a name='L3'></a><a href='#L3'>3</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">2x</span>
|
|
69
69
|
<span class="cline-any cline-yes">2x</span>
|
|
70
70
|
<span class="cline-any cline-neutral"> </span></td><td class="text"><pre class="prettyprint lang-js">import { css } from 'lit';
|
|
71
|
-
export default css`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}:host .trigger{position:relative;
|
|
71
|
+
export default css`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}:host .trigger{position:relative;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-100, 0.5rem)}:host([chevron=right]) .contentWrapper{padding-left:var(--ds-size-400, 2rem)}:host([chevron=right]:not([emphasis])) ::slotted([slot=trigger]){padding-left:var(--ds-size-250, 1.25rem)}:host([chevron=right]:not([emphasis])) .contentWrapper{padding-left:var(--ds-size-250, 1.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host([grouped][chevron=right]:not([alignright])) .trigger{width:var(--webkit-fill, 100%);--trigger-padding-right:var(--ds-size-200, 1rem)}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;--trigger-padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis][variant=lg]) .trigger,:host([emphasis][variant=lg]) .contentWrapper{padding-left:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
|
|
72
72
|
</pre></td></tr></table></pre>
|
|
73
73
|
|
|
74
74
|
<div class='push'></div><!-- for sticky footer -->
|
|
@@ -76,7 +76,7 @@ export default css`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-f
|
|
|
76
76
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
77
77
|
Code coverage generated by
|
|
78
78
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
79
|
-
at 2025-05-
|
|
79
|
+
at 2025-05-13T18:28:58.969Z
|
|
80
80
|
</div>
|
|
81
81
|
<script src="prettify.js"></script>
|
|
82
82
|
<script>
|
|
@@ -76,7 +76,7 @@ export default css`:host{--ds-auro-accordion-content-border-color:transparent;--
|
|
|
76
76
|
<div class='footer quiet pad2 space-top1 center small'>
|
|
77
77
|
Code coverage generated by
|
|
78
78
|
<a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
|
|
79
|
-
at 2025-05-
|
|
79
|
+
at 2025-05-13T18:28:58.969Z
|
|
80
80
|
</div>
|
|
81
81
|
<script src="prettify.js"></script>
|
|
82
82
|
<script>
|