@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
package/demo/api.md
CHANGED
|
@@ -12,6 +12,7 @@ Use auro-accordion-group if you want to have auto closing accordion components w
|
|
|
12
12
|
|--------------|--------------|-----------|---------|--------------------------------------------------|
|
|
13
13
|
| [alignRight](#alignRight) | `alignRight` | `Boolean` | | If set, the trigger content will align right. |
|
|
14
14
|
| [chevron](#chevron) | `chevron` | `String` | | Sets chevron variant option. Possible values are: `none`, `right`. |
|
|
15
|
+
| [disabled](#disabled) | `disabled` | `Boolean` | | If set, the accordion is disabled and have reduced opacity. |
|
|
15
16
|
| [emphasis](#emphasis) | `emphasis` | `Boolean` | | If set, emphasis styles will be applied to the auro-accordions. |
|
|
16
17
|
| [expanded](#expanded) | `expanded` | `Boolean` | false | If set, the accordion is expanded. |
|
|
17
18
|
| [grouped](#grouped) | `grouped` | `Boolean` | | Attribute will be set on accordion when it appears in an accordion group. |
|
|
@@ -401,6 +402,55 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
|
|
|
401
402
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
402
403
|
</auro-accordion>
|
|
403
404
|
|
|
405
|
+
#### disabled
|
|
406
|
+
|
|
407
|
+
Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity of the element.
|
|
408
|
+
|
|
409
|
+
<div class="exampleWrapper">
|
|
410
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
|
|
411
|
+
<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
|
|
412
|
+
<auro-accordion disabled>
|
|
413
|
+
<span slot="trigger">Trigger</span>
|
|
414
|
+
<p>
|
|
415
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
416
|
+
</p>
|
|
417
|
+
<p>
|
|
418
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
419
|
+
</p>
|
|
420
|
+
<p>
|
|
421
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
422
|
+
</p>
|
|
423
|
+
<p>
|
|
424
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
425
|
+
</p>
|
|
426
|
+
</auro-accordion>
|
|
427
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
428
|
+
</div>
|
|
429
|
+
<auro-accordion alignRight>
|
|
430
|
+
<span slot="trigger">See code</span>
|
|
431
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
|
|
432
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
|
|
433
|
+
|
|
434
|
+
```html
|
|
435
|
+
<auro-accordion disabled>
|
|
436
|
+
<span slot="trigger">Trigger</span>
|
|
437
|
+
<p>
|
|
438
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
439
|
+
</p>
|
|
440
|
+
<p>
|
|
441
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
442
|
+
</p>
|
|
443
|
+
<p>
|
|
444
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
445
|
+
</p>
|
|
446
|
+
<p>
|
|
447
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
448
|
+
</p>
|
|
449
|
+
</auro-accordion>
|
|
450
|
+
```
|
|
451
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
452
|
+
</auro-accordion>
|
|
453
|
+
|
|
404
454
|
#### expanded
|
|
405
455
|
|
|
406
456
|
The accordion can be programatically expanded or collapsed by setting the `expanded` attribute to `true` or `false`.
|
|
@@ -699,6 +749,119 @@ Using the `variant="lg"` attribute will cause the size of the accordion trigger
|
|
|
699
749
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
700
750
|
</auro-accordion>
|
|
701
751
|
|
|
752
|
+
#### disabled
|
|
753
|
+
|
|
754
|
+
Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity for the whole accordion inside of the group.
|
|
755
|
+
|
|
756
|
+
<div class="exampleWrapper">
|
|
757
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledGroup.html) -->
|
|
758
|
+
<!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
|
|
759
|
+
<auro-accordion-group disabled>
|
|
760
|
+
<auro-accordion>
|
|
761
|
+
<span slot="trigger">Trigger</span>
|
|
762
|
+
<p>
|
|
763
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
764
|
+
</p>
|
|
765
|
+
<p>
|
|
766
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
767
|
+
</p>
|
|
768
|
+
<p>
|
|
769
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
770
|
+
</p>
|
|
771
|
+
<p>
|
|
772
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
773
|
+
</p>
|
|
774
|
+
</auro-accordion>
|
|
775
|
+
<auro-accordion>
|
|
776
|
+
<span slot="trigger">Trigger</span>
|
|
777
|
+
<p>
|
|
778
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
779
|
+
</p>
|
|
780
|
+
<p>
|
|
781
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
782
|
+
</p>
|
|
783
|
+
<p>
|
|
784
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
785
|
+
</p>
|
|
786
|
+
<p>
|
|
787
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
788
|
+
</p>
|
|
789
|
+
</auro-accordion>
|
|
790
|
+
<auro-accordion>
|
|
791
|
+
<span slot="trigger">Trigger</span>
|
|
792
|
+
<p>
|
|
793
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
794
|
+
</p>
|
|
795
|
+
<p>
|
|
796
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
797
|
+
</p>
|
|
798
|
+
<p>
|
|
799
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
800
|
+
</p>
|
|
801
|
+
<p>
|
|
802
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
803
|
+
</p>
|
|
804
|
+
</auro-accordion>
|
|
805
|
+
</auro-accordion-group>
|
|
806
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
807
|
+
</div>
|
|
808
|
+
<auro-accordion alignRight>
|
|
809
|
+
<span slot="trigger">See code</span>
|
|
810
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledGroup.html) -->
|
|
811
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/disabledGroup.html -->
|
|
812
|
+
|
|
813
|
+
```html
|
|
814
|
+
<auro-accordion-group disabled>
|
|
815
|
+
<auro-accordion>
|
|
816
|
+
<span slot="trigger">Trigger</span>
|
|
817
|
+
<p>
|
|
818
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
819
|
+
</p>
|
|
820
|
+
<p>
|
|
821
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
822
|
+
</p>
|
|
823
|
+
<p>
|
|
824
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
825
|
+
</p>
|
|
826
|
+
<p>
|
|
827
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
828
|
+
</p>
|
|
829
|
+
</auro-accordion>
|
|
830
|
+
<auro-accordion>
|
|
831
|
+
<span slot="trigger">Trigger</span>
|
|
832
|
+
<p>
|
|
833
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
834
|
+
</p>
|
|
835
|
+
<p>
|
|
836
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
837
|
+
</p>
|
|
838
|
+
<p>
|
|
839
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
840
|
+
</p>
|
|
841
|
+
<p>
|
|
842
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
843
|
+
</p>
|
|
844
|
+
</auro-accordion>
|
|
845
|
+
<auro-accordion>
|
|
846
|
+
<span slot="trigger">Trigger</span>
|
|
847
|
+
<p>
|
|
848
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
849
|
+
</p>
|
|
850
|
+
<p>
|
|
851
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
852
|
+
</p>
|
|
853
|
+
<p>
|
|
854
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
855
|
+
</p>
|
|
856
|
+
<p>
|
|
857
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
858
|
+
</p>
|
|
859
|
+
</auro-accordion>
|
|
860
|
+
</auro-accordion-group>
|
|
861
|
+
```
|
|
862
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
863
|
+
</auro-accordion>
|
|
864
|
+
|
|
702
865
|
### emphasis
|
|
703
866
|
|
|
704
867
|
Use the `emphasis` attribute to apply border highlights to the `auro-accordion` on hover and move the chevron to the right side of the trigger.
|
package/demo/api.min.js
CHANGED
|
@@ -137,6 +137,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
137
137
|
*
|
|
138
138
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
139
139
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
140
|
+
* @attr {Boolean} disabled - If set, the whole accordion inside the group are disabled and have reduced opacity.
|
|
140
141
|
* @attr {Boolean} noToggleExpanded - If set, multiple accordions can be open at the same time.
|
|
141
142
|
*/
|
|
142
143
|
|
|
@@ -165,6 +166,10 @@ class AuroAccordionGroup extends i$2 {
|
|
|
165
166
|
variant: {
|
|
166
167
|
type: String,
|
|
167
168
|
reflect: true
|
|
169
|
+
},
|
|
170
|
+
disabled: {
|
|
171
|
+
type: Boolean,
|
|
172
|
+
reflect: true
|
|
168
173
|
}
|
|
169
174
|
};
|
|
170
175
|
}
|
|
@@ -186,6 +191,23 @@ class AuroAccordionGroup extends i$2 {
|
|
|
186
191
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion-group');
|
|
187
192
|
}
|
|
188
193
|
|
|
194
|
+
updated(changedProperties) {
|
|
195
|
+
if (changedProperties.has('disabled')) {
|
|
196
|
+
this.updateDisabledState();
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/**
|
|
201
|
+
* Updates the disabled state of all child <auro-accordion> elements
|
|
202
|
+
* to match the disabled state of the <auro-accordion-group> element.
|
|
203
|
+
*/
|
|
204
|
+
updateDisabledState() {
|
|
205
|
+
const accordions = this.querySelectorAll('auro-accordion');
|
|
206
|
+
accordions.forEach((accordion) => {
|
|
207
|
+
accordion.disabled = this.disabled;
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
|
|
189
211
|
handleSlotContentChange() {
|
|
190
212
|
this.addEventListener('toggleExpanded', this.handleToggleExpanded);
|
|
191
213
|
|
|
@@ -250,9 +272,9 @@ class AuroAccordionGroup extends i$2 {
|
|
|
250
272
|
}
|
|
251
273
|
}
|
|
252
274
|
|
|
253
|
-
var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .
|
|
275
|
+
var styleButtonCss = i$5`: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}`;
|
|
254
276
|
|
|
255
|
-
var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-basic-text-body-default-font-family, AS Circular);font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight,
|
|
277
|
+
var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);line-height:var(--ds-basic-text-body-default-line-height, 24px);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible{outline:none}.auro-button:focus-visible:not([variant=flat]){outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:calc(var(--ds-size-50, 0.25rem)*-1)}.auro-button:focus-visible:not([variant=flat]):not([variant=secondary]):not([variant=tertiary]){outline-width:calc(var(--ds-size-50, 0.25rem) - 1px)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-family:var(--ds-basic-text-body-sm-font-family, "AS Circular");font-size:var(--ds-basic-text-body-sm-font-size, 14px);font-weight:var(--ds-basic-text-body-sm-font-weight, 450);line-height:var(--ds-basic-text-body-sm-line-height, 20px);letter-spacing:var(--ds-basic-text-body-sm-letter-spacing, 0);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]){outline-width:1px;outline-offset:-2px}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out,outline 0ms,outline-offset 0ms}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--rounded:focus-visible:not([variant=flat]):after{border-radius:100px}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
|
|
256
278
|
|
|
257
279
|
/**
|
|
258
280
|
* @license
|
|
@@ -686,7 +708,7 @@ class AuroButton extends i$2 {
|
|
|
686
708
|
/**
|
|
687
709
|
* Returns the form element that this button is associated with.
|
|
688
710
|
* @private
|
|
689
|
-
* @returns {HTMLFormElement|null}
|
|
711
|
+
* @returns {HTMLFormElement | null}
|
|
690
712
|
*/
|
|
691
713
|
get form() {
|
|
692
714
|
return this.internals ? this.internals.form : null;
|
|
@@ -1100,9 +1122,9 @@ var chevronUp = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"
|
|
|
1100
1122
|
|
|
1101
1123
|
var chevronDown = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-down__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-down__desc\">Directional indicator; down.</desc><path d=\"m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084z\"/></svg>"};
|
|
1102
1124
|
|
|
1103
|
-
var styleCss = i$5`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}:host .trigger{position:relative;
|
|
1125
|
+
var styleCss = i$5`: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}`;
|
|
1104
1126
|
|
|
1105
|
-
var colorCss = i$5`: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)}`;
|
|
1127
|
+
var colorCss = i$5`: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)}`;
|
|
1106
1128
|
|
|
1107
1129
|
var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color:transparent;--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
1108
1130
|
|
|
@@ -1119,6 +1141,7 @@ var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;-
|
|
|
1119
1141
|
* @attr {Boolean} expanded - If set, the accordion is expanded.
|
|
1120
1142
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
1121
1143
|
* @attr {Boolean} grouped - Attribute will be set on accordion when it appears in an accordion group.
|
|
1144
|
+
* @attr {Boolean} disabled - If set, the accordion is disabled and have reduced opacity.
|
|
1122
1145
|
* @attr {String} chevron - Sets chevron variant option. Possible values are: `none`, `right`.
|
|
1123
1146
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
1124
1147
|
* @slot - Default slot for the accordion content.
|
|
@@ -1190,6 +1213,10 @@ class AuroAccordion extends i$2 {
|
|
|
1190
1213
|
variant: {
|
|
1191
1214
|
type: String,
|
|
1192
1215
|
reflect: true
|
|
1216
|
+
},
|
|
1217
|
+
disabled: {
|
|
1218
|
+
type: Boolean,
|
|
1219
|
+
reflect: true
|
|
1193
1220
|
}
|
|
1194
1221
|
};
|
|
1195
1222
|
}
|
|
@@ -1268,6 +1295,19 @@ class AuroAccordion extends i$2 {
|
|
|
1268
1295
|
}));
|
|
1269
1296
|
}
|
|
1270
1297
|
|
|
1298
|
+
/**
|
|
1299
|
+
* Toggles the visibility of the accordion content when button gets clicked.
|
|
1300
|
+
* @private
|
|
1301
|
+
* @param {Event} event - The event object.
|
|
1302
|
+
*/
|
|
1303
|
+
handleButtonClick(event) {
|
|
1304
|
+
if (this.disabled) {
|
|
1305
|
+
event.preventDefault();
|
|
1306
|
+
return;
|
|
1307
|
+
}
|
|
1308
|
+
this.toggle();
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1271
1311
|
// function that renders the HTML and CSS into the scope of the component
|
|
1272
1312
|
render() {
|
|
1273
1313
|
const buttonClasses = {
|
|
@@ -1285,7 +1325,9 @@ class AuroAccordion extends i$2 {
|
|
|
1285
1325
|
id="accordionTrigger"
|
|
1286
1326
|
aria-controls="accordionContent"
|
|
1287
1327
|
?ariaexpanded="${this.expanded}"
|
|
1288
|
-
|
|
1328
|
+
?aria-disabled="${this.disabled}"
|
|
1329
|
+
?disabled="${this.disabled}"
|
|
1330
|
+
@click="${this.handleButtonClick}"
|
|
1289
1331
|
part="trigger">
|
|
1290
1332
|
${this.chevron === 'none' ? undefined : u`
|
|
1291
1333
|
<${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}">
|
|
@@ -1307,6 +1349,8 @@ class AuroAccordion extends i$2 {
|
|
|
1307
1349
|
}
|
|
1308
1350
|
}
|
|
1309
1351
|
|
|
1352
|
+
customElements.define('auro-accordion', AuroAccordion);
|
|
1353
|
+
|
|
1310
1354
|
AuroAccordion.register();
|
|
1311
1355
|
|
|
1312
1356
|
function initExamples(initCount) {
|
package/demo/index.min.js
CHANGED
|
@@ -125,6 +125,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
125
125
|
*
|
|
126
126
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
127
127
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
128
|
+
* @attr {Boolean} disabled - If set, the whole accordion inside the group are disabled and have reduced opacity.
|
|
128
129
|
* @attr {Boolean} noToggleExpanded - If set, multiple accordions can be open at the same time.
|
|
129
130
|
*/
|
|
130
131
|
|
|
@@ -153,6 +154,10 @@ class AuroAccordionGroup extends i$2 {
|
|
|
153
154
|
variant: {
|
|
154
155
|
type: String,
|
|
155
156
|
reflect: true
|
|
157
|
+
},
|
|
158
|
+
disabled: {
|
|
159
|
+
type: Boolean,
|
|
160
|
+
reflect: true
|
|
156
161
|
}
|
|
157
162
|
};
|
|
158
163
|
}
|
|
@@ -174,6 +179,23 @@ class AuroAccordionGroup extends i$2 {
|
|
|
174
179
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion-group');
|
|
175
180
|
}
|
|
176
181
|
|
|
182
|
+
updated(changedProperties) {
|
|
183
|
+
if (changedProperties.has('disabled')) {
|
|
184
|
+
this.updateDisabledState();
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* Updates the disabled state of all child <auro-accordion> elements
|
|
190
|
+
* to match the disabled state of the <auro-accordion-group> element.
|
|
191
|
+
*/
|
|
192
|
+
updateDisabledState() {
|
|
193
|
+
const accordions = this.querySelectorAll('auro-accordion');
|
|
194
|
+
accordions.forEach((accordion) => {
|
|
195
|
+
accordion.disabled = this.disabled;
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
|
|
177
199
|
handleSlotContentChange() {
|
|
178
200
|
this.addEventListener('toggleExpanded', this.handleToggleExpanded);
|
|
179
201
|
|
|
@@ -238,9 +260,9 @@ class AuroAccordionGroup extends i$2 {
|
|
|
238
260
|
}
|
|
239
261
|
}
|
|
240
262
|
|
|
241
|
-
var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .
|
|
263
|
+
var styleButtonCss = i$5`: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}`;
|
|
242
264
|
|
|
243
|
-
var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-basic-text-body-default-font-family, AS Circular);font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight,
|
|
265
|
+
var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-basic-text-body-default-font-family, "AS Circular");font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, 450);line-height:var(--ds-basic-text-body-default-line-height, 24px);letter-spacing:var(--ds-basic-text-body-default-letter-spacing, 0);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible{outline:none}.auro-button:focus-visible:not([variant=flat]){outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:calc(var(--ds-size-50, 0.25rem)*-1)}.auro-button:focus-visible:not([variant=flat]):not([variant=secondary]):not([variant=tertiary]){outline-width:calc(var(--ds-size-50, 0.25rem) - 1px)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-family:var(--ds-basic-text-body-sm-font-family, "AS Circular");font-size:var(--ds-basic-text-body-sm-font-size, 14px);font-weight:var(--ds-basic-text-body-sm-font-weight, 450);line-height:var(--ds-basic-text-body-sm-line-height, 20px);letter-spacing:var(--ds-basic-text-body-sm-letter-spacing, 0);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]){outline-width:1px;outline-offset:-2px}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out,outline 0ms,outline-offset 0ms}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}.auro-button--rounded:focus-visible:not([variant=flat]):after{border-radius:100px}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
|
|
244
266
|
|
|
245
267
|
/**
|
|
246
268
|
* @license
|
|
@@ -674,7 +696,7 @@ class AuroButton extends i$2 {
|
|
|
674
696
|
/**
|
|
675
697
|
* Returns the form element that this button is associated with.
|
|
676
698
|
* @private
|
|
677
|
-
* @returns {HTMLFormElement|null}
|
|
699
|
+
* @returns {HTMLFormElement | null}
|
|
678
700
|
*/
|
|
679
701
|
get form() {
|
|
680
702
|
return this.internals ? this.internals.form : null;
|
|
@@ -1088,9 +1110,9 @@ var chevronUp = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"
|
|
|
1088
1110
|
|
|
1089
1111
|
var chevronDown = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-down__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-down__desc\">Directional indicator; down.</desc><path d=\"m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084z\"/></svg>"};
|
|
1090
1112
|
|
|
1091
|
-
var styleCss = i$5`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}:host .trigger{position:relative;
|
|
1113
|
+
var styleCss = i$5`: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}`;
|
|
1092
1114
|
|
|
1093
|
-
var colorCss = i$5`: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)}`;
|
|
1115
|
+
var colorCss = i$5`: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)}`;
|
|
1094
1116
|
|
|
1095
1117
|
var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color:transparent;--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
1096
1118
|
|
|
@@ -1107,6 +1129,7 @@ var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;-
|
|
|
1107
1129
|
* @attr {Boolean} expanded - If set, the accordion is expanded.
|
|
1108
1130
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
1109
1131
|
* @attr {Boolean} grouped - Attribute will be set on accordion when it appears in an accordion group.
|
|
1132
|
+
* @attr {Boolean} disabled - If set, the accordion is disabled and have reduced opacity.
|
|
1110
1133
|
* @attr {String} chevron - Sets chevron variant option. Possible values are: `none`, `right`.
|
|
1111
1134
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
1112
1135
|
* @slot - Default slot for the accordion content.
|
|
@@ -1178,6 +1201,10 @@ class AuroAccordion extends i$2 {
|
|
|
1178
1201
|
variant: {
|
|
1179
1202
|
type: String,
|
|
1180
1203
|
reflect: true
|
|
1204
|
+
},
|
|
1205
|
+
disabled: {
|
|
1206
|
+
type: Boolean,
|
|
1207
|
+
reflect: true
|
|
1181
1208
|
}
|
|
1182
1209
|
};
|
|
1183
1210
|
}
|
|
@@ -1256,6 +1283,19 @@ class AuroAccordion extends i$2 {
|
|
|
1256
1283
|
}));
|
|
1257
1284
|
}
|
|
1258
1285
|
|
|
1286
|
+
/**
|
|
1287
|
+
* Toggles the visibility of the accordion content when button gets clicked.
|
|
1288
|
+
* @private
|
|
1289
|
+
* @param {Event} event - The event object.
|
|
1290
|
+
*/
|
|
1291
|
+
handleButtonClick(event) {
|
|
1292
|
+
if (this.disabled) {
|
|
1293
|
+
event.preventDefault();
|
|
1294
|
+
return;
|
|
1295
|
+
}
|
|
1296
|
+
this.toggle();
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1259
1299
|
// function that renders the HTML and CSS into the scope of the component
|
|
1260
1300
|
render() {
|
|
1261
1301
|
const buttonClasses = {
|
|
@@ -1273,7 +1313,9 @@ class AuroAccordion extends i$2 {
|
|
|
1273
1313
|
id="accordionTrigger"
|
|
1274
1314
|
aria-controls="accordionContent"
|
|
1275
1315
|
?ariaexpanded="${this.expanded}"
|
|
1276
|
-
|
|
1316
|
+
?aria-disabled="${this.disabled}"
|
|
1317
|
+
?disabled="${this.disabled}"
|
|
1318
|
+
@click="${this.handleButtonClick}"
|
|
1277
1319
|
part="trigger">
|
|
1278
1320
|
${this.chevron === 'none' ? undefined : u`
|
|
1279
1321
|
<${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}">
|
|
@@ -1295,6 +1337,8 @@ class AuroAccordion extends i$2 {
|
|
|
1295
1337
|
}
|
|
1296
1338
|
}
|
|
1297
1339
|
|
|
1340
|
+
customElements.define('auro-accordion', AuroAccordion);
|
|
1341
|
+
|
|
1298
1342
|
AuroAccordion.register();
|
|
1299
1343
|
AuroAccordionGroup.register();
|
|
1300
1344
|
AuroAccordionButton.register();
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
*
|
|
5
5
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
6
6
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
7
|
+
* @attr {Boolean} disabled - If set, the whole accordion inside the group are disabled and have reduced opacity.
|
|
7
8
|
* @attr {Boolean} noToggleExpanded - If set, multiple accordions can be open at the same time.
|
|
8
9
|
*/
|
|
9
10
|
export class AuroAccordionGroup extends LitElement {
|
|
@@ -16,6 +17,10 @@ export class AuroAccordionGroup extends LitElement {
|
|
|
16
17
|
type: StringConstructor;
|
|
17
18
|
reflect: boolean;
|
|
18
19
|
};
|
|
20
|
+
disabled: {
|
|
21
|
+
type: BooleanConstructor;
|
|
22
|
+
reflect: boolean;
|
|
23
|
+
};
|
|
19
24
|
};
|
|
20
25
|
/**
|
|
21
26
|
* This will register this element with the browser.
|
|
@@ -31,6 +36,12 @@ export class AuroAccordionGroup extends LitElement {
|
|
|
31
36
|
*/
|
|
32
37
|
private runtimeUtils;
|
|
33
38
|
firstUpdated(): void;
|
|
39
|
+
updated(changedProperties: any): void;
|
|
40
|
+
/**
|
|
41
|
+
* Updates the disabled state of all child <auro-accordion> elements
|
|
42
|
+
* to match the disabled state of the <auro-accordion-group> element.
|
|
43
|
+
*/
|
|
44
|
+
updateDisabledState(): void;
|
|
34
45
|
handleSlotContentChange(): void;
|
|
35
46
|
/**
|
|
36
47
|
* Internal function to toggle any expanded panels if it is not the one selected.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"auro-accordion-group.d.ts","sourceRoot":"","sources":["../src/auro-accordion-group.js"],"names":[],"mappings":"AAWA
|
|
1
|
+
{"version":3,"file":"auro-accordion-group.d.ts","sourceRoot":"","sources":["../src/auro-accordion-group.js"],"names":[],"mappings":"AAWA;;;;;;;;GAQG;AAGH;IAaE;;;;;;;;;;;;;MAiBC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAtCC;;OAEG;IACH,qBAAiD;IAqCnD,qBAGC;IAED,sCAIC;IAED;;;OAGG;IACH,4BAKC;IAED,gCAqBC;IAED;;;;OAIG;IACH,6BAaC;IAED;;;OAGG;IACH,oBAKC;IADC,iBAAgE;IAIlE,+CAMC;CACF;2BAhJgC,KAAK"}
|
package/dist/auro-accordion.d.ts
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
* @attr {Boolean} expanded - If set, the accordion is expanded.
|
|
7
7
|
* @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
|
|
8
8
|
* @attr {Boolean} grouped - Attribute will be set on accordion when it appears in an accordion group.
|
|
9
|
+
* @attr {Boolean} disabled - If set, the accordion is disabled and have reduced opacity.
|
|
9
10
|
* @attr {String} chevron - Sets chevron variant option. Possible values are: `none`, `right`.
|
|
10
11
|
* @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
11
12
|
* @slot - Default slot for the accordion content.
|
|
@@ -42,6 +43,10 @@ export class AuroAccordion extends LitElement {
|
|
|
42
43
|
type: StringConstructor;
|
|
43
44
|
reflect: boolean;
|
|
44
45
|
};
|
|
46
|
+
disabled: {
|
|
47
|
+
type: BooleanConstructor;
|
|
48
|
+
reflect: boolean;
|
|
49
|
+
};
|
|
45
50
|
};
|
|
46
51
|
static get styles(): import("lit").CSSResult[];
|
|
47
52
|
/**
|
|
@@ -89,6 +94,12 @@ export class AuroAccordion extends LitElement {
|
|
|
89
94
|
* Toggles the visibility of the accordion content.
|
|
90
95
|
*/
|
|
91
96
|
toggle(): void;
|
|
97
|
+
/**
|
|
98
|
+
* Toggles the visibility of the accordion content when button gets clicked.
|
|
99
|
+
* @private
|
|
100
|
+
* @param {Event} event - The event object.
|
|
101
|
+
*/
|
|
102
|
+
private handleButtonClick;
|
|
92
103
|
render(): import("lit-html").TemplateResult;
|
|
93
104
|
}
|
|
94
105
|
import { LitElement } from "lit";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"auro-accordion.d.ts","sourceRoot":"","sources":["../src/auro-accordion.js"],"names":[],"mappings":"AA8BA
|
|
1
|
+
{"version":3,"file":"auro-accordion.d.ts","sourceRoot":"","sources":["../src/auro-accordion.js"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;GAkBG;AAGH;IAgCE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiCC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAUhB;IAjFC;;OAEG;IACH,gBAAyE;IAEzE;;OAEG;IACH,uBAAmD;IAEnD;;OAEG;IACH,kBAA0G;IAE1G;;OAEG;IACH,qBAAiD;IAEjD,kBAAqB;IA+DvB,qBAGC;IAED;;;;;OAKG;IACH,yBAOC;IAED;;;;;OAKG;IACH,8BASC;IAED;;OAEG;IACH,eAUC;IAED;;;;OAIG;IACH,0BAMC;IAGD,4CAqCC;CACF;2BA5OmC,KAAK"}
|