@aurodesignsystem-dev/auro-slideshow 0.0.0-pr59.0 → 0.0.0-pr59.1
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/demo/api.md
CHANGED
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
| [loop](#loop) | `loop` | `boolean` | false | If true, the slideshow will loop back to the first slide after reaching the last slide. |
|
|
15
15
|
| [navigation](#navigation) | `navigation` | `boolean` | false | If true, the slideshow will display navigation arrows for previous and next slides when the slide container is hovered. |
|
|
16
16
|
| [pagination](#pagination) | `pagination` | `boolean` | false | If true, the slideshow will display pagination dots for each slide. If autoplay is on, the active dot will also show a progress bar. |
|
|
17
|
-
| [pauseLabel](#pauseLabel) | `pauseLabel` | `string` | "Pause slideshow" | DEPRECATED - Use `ariaLabel.
|
|
18
|
-
| [playLabel](#playLabel) | `playLabel` | `string` | "Play slideshow" | DEPRECATED - Use `ariaLabel.
|
|
17
|
+
| [pauseLabel](#pauseLabel) | `pauseLabel` | `string` | "Pause slideshow" | DEPRECATED - Use `ariaLabel.slideshow.pause` instead. |
|
|
18
|
+
| [playLabel](#playLabel) | `playLabel` | `string` | "Play slideshow" | DEPRECATED - Use `ariaLabel.slideshow.play` instead. |
|
|
19
19
|
| [playOnInit](#playOnInit) | `playOnInit` | `boolean` | false | If true, the slideshow will start playing automatically on page load when `autoplay` or `autoScroll` are on. |
|
|
20
20
|
| [scrollSpeed](#scrollSpeed) | `scrollSpeed` | `number` | 0.75 | Number of pixels auto scroll should advance per frame. (Only used with `autoScroll`) |
|
|
21
21
|
| [startDelay](#startDelay) | `startDelay` | `number` | 1000 | Delay in milliseconds before the auto scroll starts. (Only used with `autoScroll`) |
|
|
@@ -31,13 +31,13 @@
|
|
|
31
31
|
|
|
32
32
|
## Slots
|
|
33
33
|
|
|
34
|
-
| Name
|
|
35
|
-
|
|
36
|
-
|
|
|
37
|
-
| `ariaLabel.
|
|
38
|
-
| `ariaLabel.
|
|
39
|
-
| `ariaLabel.
|
|
40
|
-
| `ariaLabel.
|
|
34
|
+
| Name | Description |
|
|
35
|
+
|-----------------------------|--------------------------------------------------|
|
|
36
|
+
| | Default slot for the slides. Each child element will be treated as a slide. |
|
|
37
|
+
| `ariaLabel.scroll.left` | The aria-label for the button navigating to the previous slide. Default is "Previous slide". |
|
|
38
|
+
| `ariaLabel.scroll.right` | The aria-label for the button navigating to the next slide. Default is "Next slide". |
|
|
39
|
+
| `ariaLabel.slideshow.pause` | The aria-label for the button that pauses the slideshow. Default is "Pause slideshow". |
|
|
40
|
+
| `ariaLabel.slideshow.play` | The aria-label for the button that starts the slideshow. Default is "Play slideshow". |
|
|
41
41
|
|
|
42
42
|
## CSS Shadow Parts
|
|
43
43
|
|
|
@@ -591,19 +591,19 @@ Setting the `playOnInit` attribute will start playing the slideshow when the pag
|
|
|
591
591
|
### Custom labels for accessibility
|
|
592
592
|
|
|
593
593
|
To customize the aria-labels for the slideshow controls, use the following slots:
|
|
594
|
-
- `ariaLabel.
|
|
595
|
-
- `ariaLabel.
|
|
596
|
-
- `ariaLabel.
|
|
597
|
-
- `ariaLabel.
|
|
594
|
+
- `ariaLabel.scroll.left` - Previous slide button
|
|
595
|
+
- `ariaLabel.scroll.right` - Next slide button
|
|
596
|
+
- `ariaLabel.slideshow.play` - Play slideshow button
|
|
597
|
+
- `ariaLabel.slideshow.pause` - Pause slideshow button
|
|
598
598
|
|
|
599
599
|
<div class="exampleWrapper">
|
|
600
600
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlots.html) -->
|
|
601
601
|
<!-- The below content is automatically added from ./../apiExamples/ariaLabelSlots.html -->
|
|
602
602
|
<auro-slideshow autoplay navigation>
|
|
603
|
-
<span slot="ariaLabel.
|
|
604
|
-
<span slot="ariaLabel.
|
|
605
|
-
<span slot="ariaLabel.
|
|
606
|
-
<span slot="ariaLabel.
|
|
603
|
+
<span slot="ariaLabel.scroll.left">Custom label for previous slide</span>
|
|
604
|
+
<span slot="ariaLabel.scroll.right">Custom label for next slide</span>
|
|
605
|
+
<span slot="ariaLabel.slideshow.play">Custom label for play slideshow</span>
|
|
606
|
+
<span slot="ariaLabel.slideshow.pause">Custom label for pause slideshow</span>
|
|
607
607
|
<div style="height: 480px">
|
|
608
608
|
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
609
609
|
</div>
|
|
@@ -629,10 +629,10 @@ To customize the aria-labels for the slideshow controls, use the following slots
|
|
|
629
629
|
|
|
630
630
|
```html
|
|
631
631
|
<auro-slideshow autoplay navigation>
|
|
632
|
-
<span slot="ariaLabel.
|
|
633
|
-
<span slot="ariaLabel.
|
|
634
|
-
<span slot="ariaLabel.
|
|
635
|
-
<span slot="ariaLabel.
|
|
632
|
+
<span slot="ariaLabel.scroll.left">Custom label for previous slide</span>
|
|
633
|
+
<span slot="ariaLabel.scroll.right">Custom label for next slide</span>
|
|
634
|
+
<span slot="ariaLabel.slideshow.play">Custom label for play slideshow</span>
|
|
635
|
+
<span slot="ariaLabel.slideshow.pause">Custom label for pause slideshow</span>
|
|
636
636
|
<div style="height: 480px">
|
|
637
637
|
<img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
|
|
638
638
|
</div>
|
|
@@ -2479,10 +2479,10 @@ var styleCss = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1r
|
|
|
2479
2479
|
* with several options such as autoplay, navigation controls, and pagination dots.
|
|
2480
2480
|
*
|
|
2481
2481
|
* @slot - Default slot for the slides. Each child element will be treated as a slide.
|
|
2482
|
-
* @slot ariaLabel.
|
|
2483
|
-
* @slot ariaLabel.
|
|
2484
|
-
* @slot ariaLabel.
|
|
2485
|
-
* @slot ariaLabel.
|
|
2482
|
+
* @slot ariaLabel.scroll.left - The aria-label for the button navigating to the previous slide. Default is "Previous slide".
|
|
2483
|
+
* @slot ariaLabel.scroll.right - The aria-label for the button navigating to the next slide. Default is "Next slide".
|
|
2484
|
+
* @slot ariaLabel.slideshow.play - The aria-label for the button that starts the slideshow. Default is "Play slideshow".
|
|
2485
|
+
* @slot ariaLabel.slideshow.pause - The aria-label for the button that pauses the slideshow. Default is "Pause slideshow".
|
|
2486
2486
|
* @csspart prev-button - Use to style the previous button control.
|
|
2487
2487
|
* @csspart next-button - Use to style the next button control.
|
|
2488
2488
|
* @csspart play-pause-button - Use to style the play/pause button control.
|
|
@@ -2604,14 +2604,14 @@ class AuroSlideshow extends i$2 {
|
|
|
2604
2604
|
reflect: true,
|
|
2605
2605
|
},
|
|
2606
2606
|
/**
|
|
2607
|
-
* DEPRECATED - Use `ariaLabel.
|
|
2607
|
+
* DEPRECATED - Use `ariaLabel.slideshow.play` instead.
|
|
2608
2608
|
*/
|
|
2609
2609
|
playLabel: {
|
|
2610
2610
|
type: String,
|
|
2611
2611
|
reflect: true,
|
|
2612
2612
|
},
|
|
2613
2613
|
/**
|
|
2614
|
-
* DEPRECATED - Use `ariaLabel.
|
|
2614
|
+
* DEPRECATED - Use `ariaLabel.slideshow.pause` instead.
|
|
2615
2615
|
*/
|
|
2616
2616
|
pauseLabel: {
|
|
2617
2617
|
type: String,
|
|
@@ -2894,7 +2894,7 @@ class AuroSlideshow extends i$2 {
|
|
|
2894
2894
|
*/
|
|
2895
2895
|
togglePlayButtonOnStop = () => {
|
|
2896
2896
|
this.isPlaying = false;
|
|
2897
|
-
this.playBtnLabel = this.runtimeUtils.getSlotText(this, "ariaLabel.
|
|
2897
|
+
this.playBtnLabel = this.runtimeUtils.getSlotText(this, "ariaLabel.slideshow.play") || this.playLabel;
|
|
2898
2898
|
};
|
|
2899
2899
|
|
|
2900
2900
|
/**
|
|
@@ -2903,7 +2903,7 @@ class AuroSlideshow extends i$2 {
|
|
|
2903
2903
|
*/
|
|
2904
2904
|
togglePlayButtonOnPlay = () => {
|
|
2905
2905
|
this.isPlaying = true;
|
|
2906
|
-
this.playBtnLabel = this.runtimeUtils.getSlotText(this, "ariaLabel.
|
|
2906
|
+
this.playBtnLabel = this.runtimeUtils.getSlotText(this, "ariaLabel.slideshow.pause") || this.pauseLabel;
|
|
2907
2907
|
};
|
|
2908
2908
|
|
|
2909
2909
|
/**
|
|
@@ -3253,7 +3253,7 @@ class AuroSlideshow extends i$2 {
|
|
|
3253
3253
|
renderNavigationControls() {
|
|
3254
3254
|
return u$2`
|
|
3255
3255
|
<${this.buttonTag}
|
|
3256
|
-
aria-label="${this.runtimeUtils.getSlotText(this, "ariaLabel.
|
|
3256
|
+
aria-label="${this.runtimeUtils.getSlotText(this, "ariaLabel.scroll.left") || "Previous slide"}"
|
|
3257
3257
|
class="scroll-prev"
|
|
3258
3258
|
shape="circle"
|
|
3259
3259
|
onDark
|
|
@@ -3263,7 +3263,7 @@ class AuroSlideshow extends i$2 {
|
|
|
3263
3263
|
${this.generateIconHtml(chevronLeft.svg)}
|
|
3264
3264
|
</${this.buttonTag}>
|
|
3265
3265
|
<${this.buttonTag}
|
|
3266
|
-
aria-label="${this.runtimeUtils.getSlotText(this, "ariaLabel.
|
|
3266
|
+
aria-label="${this.runtimeUtils.getSlotText(this, "ariaLabel.scroll.right") || "Next slide"}"
|
|
3267
3267
|
class="scroll-next"
|
|
3268
3268
|
shape="circle"
|
|
3269
3269
|
onDark
|
|
@@ -3308,10 +3308,10 @@ class AuroSlideshow extends i$2 {
|
|
|
3308
3308
|
render() {
|
|
3309
3309
|
return u$2`
|
|
3310
3310
|
<!-- Hidden slots for aria labels -->
|
|
3311
|
-
<slot name="ariaLabel.
|
|
3312
|
-
<slot name="ariaLabel.
|
|
3313
|
-
<slot name="ariaLabel.
|
|
3314
|
-
<slot name="ariaLabel.
|
|
3311
|
+
<slot name="ariaLabel.scroll.left" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
3312
|
+
<slot name="ariaLabel.scroll.right" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
3313
|
+
<slot name="ariaLabel.slideshow.play" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
3314
|
+
<slot name="ariaLabel.slideshow.pause" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
3315
3315
|
|
|
3316
3316
|
<div class="container">
|
|
3317
3317
|
<div class="slideshow-wrapper">
|
|
@@ -76,9 +76,9 @@ import{css as t,LitElement as e,html as o,nothing as s}from"lit";import{unsafeSt
|
|
|
76
76
|
</div>
|
|
77
77
|
</div>
|
|
78
78
|
`}}var Ut=t`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{--border-size: 6px;--border-radius: 24px;--dot-animation-time: .3s}.container{display:flex;width:100%;flex-direction:column;align-items:flex-start}.slideshow-wrapper{position:relative;display:flex;width:100%;overflow:hidden;align-items:center;justify-content:start;padding:var(--border-size);box-sizing:border-box}.embla{max-width:100%;margin:0;--slide-size: 100%;--slide-spacing: 1rem}.embla__container{display:flex;gap:var(--slide-spacing)}.embla__slide{transform:translateZ(0);min-width:0;flex:0 0 var(--slide-size);border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;filter:brightness(100%);transition:filter .5s ease-in-out}.embla__slide:focus-visible{outline:unset;box-shadow:0 0 0 2px var(--ds-advanced-color-state-focused-inverse, #ffffff),0 0 0 var(--border-size) var(--ds-advanced-color-state-focused, #01426a)}.embla__slide:not(.in-view){filter:brightness(65%)}:host([autoScroll]) .embla__slide{filter:unset}.scroll-prev,.scroll-next{position:absolute;display:none;top:50%;transform:translateY(-50%);z-index:10}.scroll-prev{left:8px}.scroll-next{right:8px}.slideshow-wrapper:hover .scroll-prev:not([disabled]),.slideshow-wrapper:hover .scroll-next:not([disabled]){display:block}.pagination-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:100%;margin-top:40px;gap:14px;padding-inline:var(--border-size);box-sizing:border-box}.embla__dots{display:flex;gap:16px}.embla__dot{width:12px;height:12px;border-radius:50%;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);mix-blend-mode:multiply;position:relative;cursor:pointer;transition:all var(--dot-animation-time) ease-in-out}.embla__dot:hover:not(.embla__dot--selected){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__dot:before{content:"";width:24px;height:24px;position:absolute;cursor:pointer;top:50%;left:50%;transform:translate(-50%,-50%)}.embla__dot--selected{width:52px;height:12px;border-radius:1.8rem;background-color:var(--ds-advanced-color-button-primary-background, #01426a)}.embla__dot--selected:before{width:64px}.embla__progress{width:52px;height:12px;border-radius:1.8rem;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);mix-blend-mode:multiply;position:relative;overflow:hidden;cursor:pointer;align-self:center;justify-self:center;transition:all var(--dot-animation-time) ease-in-out}.embla__progress:hover:not(.stopped){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__progress__bar{border-radius:inherit;background-color:var(--ds-advanced-color-button-primary-background, #01426a);position:absolute;width:100%;top:0;bottom:0;left:-100%;animation-delay:var(--dot-animation-time);animation-name:autoplay-progress;animation-timing-function:linear;animation-iteration-count:1;animation-play-state:running}.embla__progress--paused .embla__progress__bar{animation-play-state:paused}.stopped{background-color:var(--ds-advanced-color-button-primary-background, #01426a)}@keyframes autoplay-progress{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}:host([loop]) .embla__container{gap:unset}:host([loop]) .embla__slide{margin-right:var(--slide-spacing)}:host([fullBleed]) .slideshow-wrapper{overflow:visible}:host([fullBleed]) .embla{width:100vw;position:relative;left:50%;transform:translate(-50%);max-width:none}:host([fullBleed]) .embla__slide{max-width:calc(var(--slideshow-width) - var(--border-size) * 2)}:host([fullBleed]:not([autoscroll])) .embla__slide:not(.active){filter:brightness(65%)}
|
|
79
|
-
`;class Pt extends e{constructor(){super(),this.autoplay=!1,this.delay=7e3,this.autoScroll=!1,this.scrollSpeed=.75,this.startDelay=1e3,this.playOnInit=!1,this.loop=!1,this.navigation=!1,this.pagination=!1,this.playLabel="Play slideshow",this.pauseLabel="Pause slideshow",this.fullBleed=!1,this.playBtnLabel="Play slideshow",this.isPlaying=!1,this.embla=null,this.slides=[],this.isHovered=!1,this.isStopped=!0,this.runtimeUtils=new et;const t=new tt;this.buttonTag=t.generateTag("auro-button","12.2.0",_t),this.iconTag=t.generateTag("auro-icon","9.1.0",Rt)}static register(t="auro-slideshow"){et.prototype.registerComponent(t,Pt)}static get styles(){return[Ut]}static get properties(){return{autoplay:{type:Boolean,reflect:!0},autoScroll:{type:Boolean,reflect:!0},playOnInit:{type:Boolean,reflect:!0},delay:{type:Number,reflect:!0},scrollSpeed:{type:Number,reflect:!0},startDelay:{type:Number,reflect:!0},playLabel:{type:String,reflect:!0},pauseLabel:{type:String,reflect:!0},loop:{type:Boolean,reflect:!0},navigation:{type:Boolean,reflect:!0},pagination:{type:Boolean,reflect:!0},isPlaying:{type:Boolean},fullBleed:{type:Boolean,reflect:!0}}}get _slot(){return this.shadowRoot.querySelector("slot:not([name])")}get _playBtn(){return this.shadowRoot.querySelector(".play-pause")}get _prevBtn(){return this.shadowRoot.querySelector(".scroll-prev")}get _nextBtn(){return this.shadowRoot.querySelector(".scroll-next")}get _dotsNode(){return this.shadowRoot.querySelector(".embla__dots")}get _progressNode(){return this.shadowRoot.querySelector(".embla__progress")}get _slideshowWrapperNode(){return this.shadowRoot.querySelector(".slideshow-wrapper")}get _slideshowPaddingSize(){return Number.parseFloat(getComputedStyle(this._slideshowWrapperNode).paddingLeft)||0}play(){this.autoplay?this.embla?.plugins()?.autoplay.play():this.autoScroll&&this.embla?.plugins()?.autoScroll.play()}stop(){this.autoplay?this.embla?.plugins()?.autoplay.stop():this.autoScroll&&this.embla?.plugins()?.autoScroll.stop()}scrollPrev(){this.embla.scrollPrev()}scrollNext(){this.embla.scrollNext()}get _customAlign(){return this.fullBleed&&this._slideshowWrapperNode?()=>this._slideshowWrapperNode.getBoundingClientRect().left+this._slideshowPaddingSize:()=>0}_createWidthProp=()=>{if(this._slideshowWrapperNode){const{width:t}=this._slideshowWrapperNode.getBoundingClientRect();this.style.setProperty("--slideshow-width",`${t}px`)}};initializeEmbla(){const t=this.shadowRoot.querySelector(".embla"),e={loop:this.loop,align:this.fullBleed?this._customAlign:"start",inViewThreshold:.5},o={playOnInit:this.playOnInit,delay:this.delay,stopOnLastSnap:!this.loop},s={playOnInit:this.playOnInit,speed:this.scrollSpeed,startDelay:this.startDelay},a=[J({snapped:"active",inView:"in-view",loop:"",draggable:"",dragging:""})];this.autoplay&&this.autoScroll&&(console.warn("Autoplay and AutoScroll are not meant to be used together. AutoScroll has been disabled."),this.autoScroll=!1),this.autoplay&&a.push(X(o)),this.autoScroll&&!this.isTouchDevice()&&a.push(G(s)),this.embla=W(t,e,a),this.pagination&&this.addDotBtnsAndClickHandlers(this.embla,this._dotsNode,this.stopOnInteraction),this.navigation&&!this.isTouchDevice()&&this.embla.on("select",this.toggleNavBtnsState).on("init",this.toggleNavBtnsState).on("reInit",this.toggleNavBtnsState),this.autoplay&&this.embla.on("autoplay:stop",this.togglePlayButtonOnStop).on("autoplay:play",this.togglePlayButtonOnPlay).on("init",this.togglePlayButtonOnStop),this.autoScroll&&!this.isTouchDevice()&&this.embla.on("autoScroll:stop",this.togglePlayButtonOnStop).on("autoScroll:play",this.togglePlayButtonOnPlay).on("init",this.togglePlayButtonOnStop),this.fullBleed&&this.embla.on("init",this._createWidthProp).on("resize",this._createWidthProp)}updateSlides(){if(this._slot){this.slides=Array.from(this._slot.assignedElements()),this.slides.forEach(((t,e)=>{t.classList.add("embla__slide"),t.addEventListener("keydown",this.handleKeydown),0===e?t.setAttribute("tabindex","0"):t.setAttribute("tabindex","-1")}));this.shadowRoot.querySelector(".embla__container").replaceChildren(...this.slides)}}toggleTabIndex=()=>{const t=this.slides[this.embla.selectedScrollSnap()];this.slides.forEach((t=>{t.setAttribute("tabindex","-1")})),t.setAttribute("tabindex","0")};togglePlayButtonOnStop=()=>{this.isPlaying=!1,this.playBtnLabel=this.runtimeUtils.getSlotText(this,"ariaLabel.
|
|
79
|
+
`;class Pt extends e{constructor(){super(),this.autoplay=!1,this.delay=7e3,this.autoScroll=!1,this.scrollSpeed=.75,this.startDelay=1e3,this.playOnInit=!1,this.loop=!1,this.navigation=!1,this.pagination=!1,this.playLabel="Play slideshow",this.pauseLabel="Pause slideshow",this.fullBleed=!1,this.playBtnLabel="Play slideshow",this.isPlaying=!1,this.embla=null,this.slides=[],this.isHovered=!1,this.isStopped=!0,this.runtimeUtils=new et;const t=new tt;this.buttonTag=t.generateTag("auro-button","12.2.0",_t),this.iconTag=t.generateTag("auro-icon","9.1.0",Rt)}static register(t="auro-slideshow"){et.prototype.registerComponent(t,Pt)}static get styles(){return[Ut]}static get properties(){return{autoplay:{type:Boolean,reflect:!0},autoScroll:{type:Boolean,reflect:!0},playOnInit:{type:Boolean,reflect:!0},delay:{type:Number,reflect:!0},scrollSpeed:{type:Number,reflect:!0},startDelay:{type:Number,reflect:!0},playLabel:{type:String,reflect:!0},pauseLabel:{type:String,reflect:!0},loop:{type:Boolean,reflect:!0},navigation:{type:Boolean,reflect:!0},pagination:{type:Boolean,reflect:!0},isPlaying:{type:Boolean},fullBleed:{type:Boolean,reflect:!0}}}get _slot(){return this.shadowRoot.querySelector("slot:not([name])")}get _playBtn(){return this.shadowRoot.querySelector(".play-pause")}get _prevBtn(){return this.shadowRoot.querySelector(".scroll-prev")}get _nextBtn(){return this.shadowRoot.querySelector(".scroll-next")}get _dotsNode(){return this.shadowRoot.querySelector(".embla__dots")}get _progressNode(){return this.shadowRoot.querySelector(".embla__progress")}get _slideshowWrapperNode(){return this.shadowRoot.querySelector(".slideshow-wrapper")}get _slideshowPaddingSize(){return Number.parseFloat(getComputedStyle(this._slideshowWrapperNode).paddingLeft)||0}play(){this.autoplay?this.embla?.plugins()?.autoplay.play():this.autoScroll&&this.embla?.plugins()?.autoScroll.play()}stop(){this.autoplay?this.embla?.plugins()?.autoplay.stop():this.autoScroll&&this.embla?.plugins()?.autoScroll.stop()}scrollPrev(){this.embla.scrollPrev()}scrollNext(){this.embla.scrollNext()}get _customAlign(){return this.fullBleed&&this._slideshowWrapperNode?()=>this._slideshowWrapperNode.getBoundingClientRect().left+this._slideshowPaddingSize:()=>0}_createWidthProp=()=>{if(this._slideshowWrapperNode){const{width:t}=this._slideshowWrapperNode.getBoundingClientRect();this.style.setProperty("--slideshow-width",`${t}px`)}};initializeEmbla(){const t=this.shadowRoot.querySelector(".embla"),e={loop:this.loop,align:this.fullBleed?this._customAlign:"start",inViewThreshold:.5},o={playOnInit:this.playOnInit,delay:this.delay,stopOnLastSnap:!this.loop},s={playOnInit:this.playOnInit,speed:this.scrollSpeed,startDelay:this.startDelay},a=[J({snapped:"active",inView:"in-view",loop:"",draggable:"",dragging:""})];this.autoplay&&this.autoScroll&&(console.warn("Autoplay and AutoScroll are not meant to be used together. AutoScroll has been disabled."),this.autoScroll=!1),this.autoplay&&a.push(X(o)),this.autoScroll&&!this.isTouchDevice()&&a.push(G(s)),this.embla=W(t,e,a),this.pagination&&this.addDotBtnsAndClickHandlers(this.embla,this._dotsNode,this.stopOnInteraction),this.navigation&&!this.isTouchDevice()&&this.embla.on("select",this.toggleNavBtnsState).on("init",this.toggleNavBtnsState).on("reInit",this.toggleNavBtnsState),this.autoplay&&this.embla.on("autoplay:stop",this.togglePlayButtonOnStop).on("autoplay:play",this.togglePlayButtonOnPlay).on("init",this.togglePlayButtonOnStop),this.autoScroll&&!this.isTouchDevice()&&this.embla.on("autoScroll:stop",this.togglePlayButtonOnStop).on("autoScroll:play",this.togglePlayButtonOnPlay).on("init",this.togglePlayButtonOnStop),this.fullBleed&&this.embla.on("init",this._createWidthProp).on("resize",this._createWidthProp)}updateSlides(){if(this._slot){this.slides=Array.from(this._slot.assignedElements()),this.slides.forEach(((t,e)=>{t.classList.add("embla__slide"),t.addEventListener("keydown",this.handleKeydown),0===e?t.setAttribute("tabindex","0"):t.setAttribute("tabindex","-1")}));this.shadowRoot.querySelector(".embla__container").replaceChildren(...this.slides)}}toggleTabIndex=()=>{const t=this.slides[this.embla.selectedScrollSnap()];this.slides.forEach((t=>{t.setAttribute("tabindex","-1")})),t.setAttribute("tabindex","0")};togglePlayButtonOnStop=()=>{this.isPlaying=!1,this.playBtnLabel=this.runtimeUtils.getSlotText(this,"ariaLabel.slideshow.play")||this.playLabel};togglePlayButtonOnPlay=()=>{this.isPlaying=!0,this.playBtnLabel=this.runtimeUtils.getSlotText(this,"ariaLabel.slideshow.pause")||this.pauseLabel};toggleNavBtnsState=()=>{this.embla.canScrollPrev()?this._prevBtn.removeAttribute("disabled"):this._prevBtn.setAttribute("disabled",""),this.embla.canScrollNext()?this._nextBtn.removeAttribute("disabled"):this._nextBtn.setAttribute("disabled","")};stopOnInteraction=()=>{this.isPlaying&&(this.stop(),this.togglePlayButtonOnStop(),this.isStopped=!0)};isTouchDevice(){return window.matchMedia("(pointer: coarse)").matches}handleSlotChange(){this.updateSlides(),this.embla?this.embla.reInit():this.initializeEmbla(),this.embla.on("select",this.toggleTabIndex),(this.autoplay||this.autoScroll&&!this.isTouchDevice())&&(this.isPlaying=!0,this.playOnInit&&(this.isStopped=!1))}handleNavClick(t){"prev"===t&&this.scrollPrev(),"next"===t&&this.scrollNext(),this.stopOnInteraction()}handleKeydown=t=>{const e=()=>{setTimeout((()=>{this.slides[this.embla.selectedScrollSnap()].focus()}),200)};"ArrowLeft"===t.key?(t.preventDefault(),this.scrollPrev(),e()):"ArrowRight"===t.key&&(t.preventDefault(),this.scrollNext(),e())};handlePlayClick(){this.isPlaying?(this.stop(),this.togglePlayButtonOnStop(),this.isStopped=!0):(this.play(),this.togglePlayButtonOnPlay(),this.isStopped=!1)}handleMouseEnter=()=>{this.isPlaying&&(this.stop(),this.isHovered=!0)};handleMouseLeave=()=>{this.isPlaying||this.isStopped||!this.isHovered||(this.play(),this.isHovered=!1)};addDotBtnsAndClickHandlers=(t,e)=>{let o=[];const s=()=>{const s=t.scrollSnapList().map(((e,o)=>{const s=document.createElement("button");return s.className="embla__dot",s.type="button",s.tabIndex=-1,s.setAttribute("aria-label",`Go to slide ${o+1}`),s.addEventListener("click",(()=>{t.scrollTo(o),this.stopOnInteraction()}),!1),s}));e.replaceChildren(...s),o=s},a=()=>{const e=t.selectedScrollSnap();o[e]&&o[e].classList.toggle("stopped",!this.isPlaying)},r=()=>{const e=t.previousScrollSnap(),s=t.selectedScrollSnap();if(this.autoplay){const r=document.createElement("div");r.className="embla__progress__bar",o[e]&&(o[e].className="embla__dot",o[e].replaceChildren()),o[s]&&(o[s].className="embla__progress",o[s].replaceChildren(r),this.isPlaying||o[s].classList.add("stopped")),this.addAutoplayProgressListeners(this.embla,this._progressNode),t.on("autoplay:play",a).on("autoplay:stop",a)}else o[e]&&o[e].classList.remove("embla__dot--selected"),o[s]&&o[s].classList.add("embla__dot--selected")};return t.on("init",s).on("reInit",s).on("init",r).on("reInit",r).on("select",r),()=>{e.replaceChildren()}};addAutoplayProgressListeners=(t,e)=>{const o=e.querySelector(".embla__progress__bar");let s="";const a=t=>{this._progressNode.classList.remove("embla__progress--paused");const e=t?.plugins()?.autoplay;if(!e)return;const a=e.timeUntilNext();if(null!==a){if(!s){const t=window.getComputedStyle(o);s=t.animationName}o.style.animationName="none",o.style.transform="translate3d(0,0,0)",window.requestAnimationFrame((()=>{window.setTimeout((()=>{o.style.animationName=s,o.style.animationDuration=`${a}ms`}),0)}))}},r=t=>{this._progressNode.classList.add("embla__progress--paused");t?.plugins()};return t.on("autoplay:timerset",a).on("autoplay:timerstopped",r).emit("autoplay:timerset"),()=>{t.off("autoplay:timerset",a).off("autoplay:timerstopped",r)}};disconnectedCallback(){super.disconnectedCallback(),this.embla&&(this.embla.off("select",this.toggleTabIndex),this.navigation&&!this.isTouchDevice()&&this.embla.off("select",this.toggleNavBtnsState).off("init",this.toggleNavBtnsState).off("reInit",this.toggleNavBtnsState),this.autoplay&&this.embla.off("autoplay:stop",this.togglePlayButtonOnStop).off("autoplay:play",this.togglePlayButtonOnPlay),this.autoScroll&&!this.isTouchDevice()&&this.embla.off("autoScroll:stop",this.togglePlayButtonOnStop).off("autoScroll:play",this.togglePlayButtonOnPlay),this.embla.destroy(),this.embla=null),this.slides.forEach((t=>{t.removeEventListener("keydown",this.handleKeydown)})),this.slides=[]}generateIconHtml(t,e){const o=(new DOMParser).parseFromString(t,"text/html").body.firstChild;return o.setAttribute("slot","svg"),i`<${this.iconTag} style="--ds-auro-icon-size: inherit" customColor customSvg ?hidden="${e}">${o}</${this.iconTag}>`}renderNavigationControls(){return i`
|
|
80
80
|
<${this.buttonTag}
|
|
81
|
-
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.
|
|
81
|
+
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.scroll.left")||"Previous slide"}"
|
|
82
82
|
class="scroll-prev"
|
|
83
83
|
shape="circle"
|
|
84
84
|
onDark
|
|
@@ -88,7 +88,7 @@ import{css as t,LitElement as e,html as o,nothing as s}from"lit";import{unsafeSt
|
|
|
88
88
|
${this.generateIconHtml(It)}
|
|
89
89
|
</${this.buttonTag}>
|
|
90
90
|
<${this.buttonTag}
|
|
91
|
-
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.
|
|
91
|
+
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.scroll.right")||"Next slide"}"
|
|
92
92
|
class="scroll-next"
|
|
93
93
|
shape="circle"
|
|
94
94
|
onDark
|
|
@@ -114,10 +114,10 @@ import{css as t,LitElement as e,html as o,nothing as s}from"lit";import{unsafeSt
|
|
|
114
114
|
</div>
|
|
115
115
|
`}render(){return i`
|
|
116
116
|
<!-- Hidden slots for aria labels -->
|
|
117
|
-
<slot name="ariaLabel.
|
|
118
|
-
<slot name="ariaLabel.
|
|
119
|
-
<slot name="ariaLabel.
|
|
120
|
-
<slot name="ariaLabel.
|
|
117
|
+
<slot name="ariaLabel.scroll.left" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
118
|
+
<slot name="ariaLabel.scroll.right" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
119
|
+
<slot name="ariaLabel.slideshow.play" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
120
|
+
<slot name="ariaLabel.slideshow.pause" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
121
121
|
|
|
122
122
|
<div class="container">
|
|
123
123
|
<div class="slideshow-wrapper">
|
package/dist/index.d.ts
CHANGED
|
@@ -81,9 +81,9 @@ function c(t){return "number"==typeof t}function d(t){return "string"==typeof t}
|
|
|
81
81
|
</div>
|
|
82
82
|
</div>
|
|
83
83
|
`}}var Ut=css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{--border-size: 6px;--border-radius: 24px;--dot-animation-time: .3s}.container{display:flex;width:100%;flex-direction:column;align-items:flex-start}.slideshow-wrapper{position:relative;display:flex;width:100%;overflow:hidden;align-items:center;justify-content:start;padding:var(--border-size);box-sizing:border-box}.embla{max-width:100%;margin:0;--slide-size: 100%;--slide-spacing: 1rem}.embla__container{display:flex;gap:var(--slide-spacing)}.embla__slide{transform:translateZ(0);min-width:0;flex:0 0 var(--slide-size);border-radius:var(--border-radius);box-sizing:border-box;overflow:hidden;filter:brightness(100%);transition:filter .5s ease-in-out}.embla__slide:focus-visible{outline:unset;box-shadow:0 0 0 2px var(--ds-advanced-color-state-focused-inverse, #ffffff),0 0 0 var(--border-size) var(--ds-advanced-color-state-focused, #01426a)}.embla__slide:not(.in-view){filter:brightness(65%)}:host([autoScroll]) .embla__slide{filter:unset}.scroll-prev,.scroll-next{position:absolute;display:none;top:50%;transform:translateY(-50%);z-index:10}.scroll-prev{left:8px}.scroll-next{right:8px}.slideshow-wrapper:hover .scroll-prev:not([disabled]),.slideshow-wrapper:hover .scroll-next:not([disabled]){display:block}.pagination-container{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:100%;margin-top:40px;gap:14px;padding-inline:var(--border-size);box-sizing:border-box}.embla__dots{display:flex;gap:16px}.embla__dot{width:12px;height:12px;border-radius:50%;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);mix-blend-mode:multiply;position:relative;cursor:pointer;transition:all var(--dot-animation-time) ease-in-out}.embla__dot:hover:not(.embla__dot--selected){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__dot:before{content:"";width:24px;height:24px;position:absolute;cursor:pointer;top:50%;left:50%;transform:translate(-50%,-50%)}.embla__dot--selected{width:52px;height:12px;border-radius:1.8rem;background-color:var(--ds-advanced-color-button-primary-background, #01426a)}.embla__dot--selected:before{width:64px}.embla__progress{width:52px;height:12px;border-radius:1.8rem;border:none;background-color:var(--ds-advanced-color-button-primary-background-inactive, #cfe0ef);mix-blend-mode:multiply;position:relative;overflow:hidden;cursor:pointer;align-self:center;justify-self:center;transition:all var(--dot-animation-time) ease-in-out}.embla__progress:hover:not(.stopped){background-color:var(--ds-advanced-color-button-primary-background-inactive-hover, #89b2d4)}.embla__progress__bar{border-radius:inherit;background-color:var(--ds-advanced-color-button-primary-background, #01426a);position:absolute;width:100%;top:0;bottom:0;left:-100%;animation-delay:var(--dot-animation-time);animation-name:autoplay-progress;animation-timing-function:linear;animation-iteration-count:1;animation-play-state:running}.embla__progress--paused .embla__progress__bar{animation-play-state:paused}.stopped{background-color:var(--ds-advanced-color-button-primary-background, #01426a)}@keyframes autoplay-progress{0%{transform:translateZ(0)}to{transform:translate3d(100%,0,0)}}:host([loop]) .embla__container{gap:unset}:host([loop]) .embla__slide{margin-right:var(--slide-spacing)}:host([fullBleed]) .slideshow-wrapper{overflow:visible}:host([fullBleed]) .embla{width:100vw;position:relative;left:50%;transform:translate(-50%);max-width:none}:host([fullBleed]) .embla__slide{max-width:calc(var(--slideshow-width) - var(--border-size) * 2)}:host([fullBleed]:not([autoscroll])) .embla__slide:not(.active){filter:brightness(65%)}
|
|
84
|
-
`;class Pt extends LitElement{constructor(){super(),this.autoplay=false,this.delay=7e3,this.autoScroll=false,this.scrollSpeed=.75,this.startDelay=1e3,this.playOnInit=false,this.loop=false,this.navigation=false,this.pagination=false,this.playLabel="Play slideshow",this.pauseLabel="Pause slideshow",this.fullBleed=false,this.playBtnLabel="Play slideshow",this.isPlaying=false,this.embla=null,this.slides=[],this.isHovered=false,this.isStopped=true,this.runtimeUtils=new et;const t=new tt;this.buttonTag=t.generateTag("auro-button","12.2.0",_t),this.iconTag=t.generateTag("auro-icon","9.1.0",Rt);}static register(t="auro-slideshow"){et.prototype.registerComponent(t,Pt);}static get styles(){return [Ut]}static get properties(){return {autoplay:{type:Boolean,reflect:true},autoScroll:{type:Boolean,reflect:true},playOnInit:{type:Boolean,reflect:true},delay:{type:Number,reflect:true},scrollSpeed:{type:Number,reflect:true},startDelay:{type:Number,reflect:true},playLabel:{type:String,reflect:true},pauseLabel:{type:String,reflect:true},loop:{type:Boolean,reflect:true},navigation:{type:Boolean,reflect:true},pagination:{type:Boolean,reflect:true},isPlaying:{type:Boolean},fullBleed:{type:Boolean,reflect:true}}}get _slot(){return this.shadowRoot.querySelector("slot:not([name])")}get _playBtn(){return this.shadowRoot.querySelector(".play-pause")}get _prevBtn(){return this.shadowRoot.querySelector(".scroll-prev")}get _nextBtn(){return this.shadowRoot.querySelector(".scroll-next")}get _dotsNode(){return this.shadowRoot.querySelector(".embla__dots")}get _progressNode(){return this.shadowRoot.querySelector(".embla__progress")}get _slideshowWrapperNode(){return this.shadowRoot.querySelector(".slideshow-wrapper")}get _slideshowPaddingSize(){return Number.parseFloat(getComputedStyle(this._slideshowWrapperNode).paddingLeft)||0}play(){this.autoplay?this.embla?.plugins()?.autoplay.play():this.autoScroll&&this.embla?.plugins()?.autoScroll.play();}stop(){this.autoplay?this.embla?.plugins()?.autoplay.stop():this.autoScroll&&this.embla?.plugins()?.autoScroll.stop();}scrollPrev(){this.embla.scrollPrev();}scrollNext(){this.embla.scrollNext();}get _customAlign(){return this.fullBleed&&this._slideshowWrapperNode?()=>this._slideshowWrapperNode.getBoundingClientRect().left+this._slideshowPaddingSize:()=>0}_createWidthProp=()=>{if(this._slideshowWrapperNode){const{width:t}=this._slideshowWrapperNode.getBoundingClientRect();this.style.setProperty("--slideshow-width",`${t}px`);}};initializeEmbla(){const t=this.shadowRoot.querySelector(".embla"),e={loop:this.loop,align:this.fullBleed?this._customAlign:"start",inViewThreshold:.5},o={playOnInit:this.playOnInit,delay:this.delay,stopOnLastSnap:!this.loop},s={playOnInit:this.playOnInit,speed:this.scrollSpeed,startDelay:this.startDelay},a=[J({snapped:"active",inView:"in-view",loop:"",draggable:"",dragging:""})];this.autoplay&&this.autoScroll&&(console.warn("Autoplay and AutoScroll are not meant to be used together. AutoScroll has been disabled."),this.autoScroll=false),this.autoplay&&a.push(X(o)),this.autoScroll&&!this.isTouchDevice()&&a.push(G(s)),this.embla=W(t,e,a),this.pagination&&this.addDotBtnsAndClickHandlers(this.embla,this._dotsNode,this.stopOnInteraction),this.navigation&&!this.isTouchDevice()&&this.embla.on("select",this.toggleNavBtnsState).on("init",this.toggleNavBtnsState).on("reInit",this.toggleNavBtnsState),this.autoplay&&this.embla.on("autoplay:stop",this.togglePlayButtonOnStop).on("autoplay:play",this.togglePlayButtonOnPlay).on("init",this.togglePlayButtonOnStop),this.autoScroll&&!this.isTouchDevice()&&this.embla.on("autoScroll:stop",this.togglePlayButtonOnStop).on("autoScroll:play",this.togglePlayButtonOnPlay).on("init",this.togglePlayButtonOnStop),this.fullBleed&&this.embla.on("init",this._createWidthProp).on("resize",this._createWidthProp);}updateSlides(){if(this._slot){this.slides=Array.from(this._slot.assignedElements()),this.slides.forEach(((t,e)=>{t.classList.add("embla__slide"),t.addEventListener("keydown",this.handleKeydown),0===e?t.setAttribute("tabindex","0"):t.setAttribute("tabindex","-1");}));this.shadowRoot.querySelector(".embla__container").replaceChildren(...this.slides);}}toggleTabIndex=()=>{const t=this.slides[this.embla.selectedScrollSnap()];this.slides.forEach((t=>{t.setAttribute("tabindex","-1");})),t.setAttribute("tabindex","0");};togglePlayButtonOnStop=()=>{this.isPlaying=false,this.playBtnLabel=this.runtimeUtils.getSlotText(this,"ariaLabel.
|
|
84
|
+
`;class Pt extends LitElement{constructor(){super(),this.autoplay=false,this.delay=7e3,this.autoScroll=false,this.scrollSpeed=.75,this.startDelay=1e3,this.playOnInit=false,this.loop=false,this.navigation=false,this.pagination=false,this.playLabel="Play slideshow",this.pauseLabel="Pause slideshow",this.fullBleed=false,this.playBtnLabel="Play slideshow",this.isPlaying=false,this.embla=null,this.slides=[],this.isHovered=false,this.isStopped=true,this.runtimeUtils=new et;const t=new tt;this.buttonTag=t.generateTag("auro-button","12.2.0",_t),this.iconTag=t.generateTag("auro-icon","9.1.0",Rt);}static register(t="auro-slideshow"){et.prototype.registerComponent(t,Pt);}static get styles(){return [Ut]}static get properties(){return {autoplay:{type:Boolean,reflect:true},autoScroll:{type:Boolean,reflect:true},playOnInit:{type:Boolean,reflect:true},delay:{type:Number,reflect:true},scrollSpeed:{type:Number,reflect:true},startDelay:{type:Number,reflect:true},playLabel:{type:String,reflect:true},pauseLabel:{type:String,reflect:true},loop:{type:Boolean,reflect:true},navigation:{type:Boolean,reflect:true},pagination:{type:Boolean,reflect:true},isPlaying:{type:Boolean},fullBleed:{type:Boolean,reflect:true}}}get _slot(){return this.shadowRoot.querySelector("slot:not([name])")}get _playBtn(){return this.shadowRoot.querySelector(".play-pause")}get _prevBtn(){return this.shadowRoot.querySelector(".scroll-prev")}get _nextBtn(){return this.shadowRoot.querySelector(".scroll-next")}get _dotsNode(){return this.shadowRoot.querySelector(".embla__dots")}get _progressNode(){return this.shadowRoot.querySelector(".embla__progress")}get _slideshowWrapperNode(){return this.shadowRoot.querySelector(".slideshow-wrapper")}get _slideshowPaddingSize(){return Number.parseFloat(getComputedStyle(this._slideshowWrapperNode).paddingLeft)||0}play(){this.autoplay?this.embla?.plugins()?.autoplay.play():this.autoScroll&&this.embla?.plugins()?.autoScroll.play();}stop(){this.autoplay?this.embla?.plugins()?.autoplay.stop():this.autoScroll&&this.embla?.plugins()?.autoScroll.stop();}scrollPrev(){this.embla.scrollPrev();}scrollNext(){this.embla.scrollNext();}get _customAlign(){return this.fullBleed&&this._slideshowWrapperNode?()=>this._slideshowWrapperNode.getBoundingClientRect().left+this._slideshowPaddingSize:()=>0}_createWidthProp=()=>{if(this._slideshowWrapperNode){const{width:t}=this._slideshowWrapperNode.getBoundingClientRect();this.style.setProperty("--slideshow-width",`${t}px`);}};initializeEmbla(){const t=this.shadowRoot.querySelector(".embla"),e={loop:this.loop,align:this.fullBleed?this._customAlign:"start",inViewThreshold:.5},o={playOnInit:this.playOnInit,delay:this.delay,stopOnLastSnap:!this.loop},s={playOnInit:this.playOnInit,speed:this.scrollSpeed,startDelay:this.startDelay},a=[J({snapped:"active",inView:"in-view",loop:"",draggable:"",dragging:""})];this.autoplay&&this.autoScroll&&(console.warn("Autoplay and AutoScroll are not meant to be used together. AutoScroll has been disabled."),this.autoScroll=false),this.autoplay&&a.push(X(o)),this.autoScroll&&!this.isTouchDevice()&&a.push(G(s)),this.embla=W(t,e,a),this.pagination&&this.addDotBtnsAndClickHandlers(this.embla,this._dotsNode,this.stopOnInteraction),this.navigation&&!this.isTouchDevice()&&this.embla.on("select",this.toggleNavBtnsState).on("init",this.toggleNavBtnsState).on("reInit",this.toggleNavBtnsState),this.autoplay&&this.embla.on("autoplay:stop",this.togglePlayButtonOnStop).on("autoplay:play",this.togglePlayButtonOnPlay).on("init",this.togglePlayButtonOnStop),this.autoScroll&&!this.isTouchDevice()&&this.embla.on("autoScroll:stop",this.togglePlayButtonOnStop).on("autoScroll:play",this.togglePlayButtonOnPlay).on("init",this.togglePlayButtonOnStop),this.fullBleed&&this.embla.on("init",this._createWidthProp).on("resize",this._createWidthProp);}updateSlides(){if(this._slot){this.slides=Array.from(this._slot.assignedElements()),this.slides.forEach(((t,e)=>{t.classList.add("embla__slide"),t.addEventListener("keydown",this.handleKeydown),0===e?t.setAttribute("tabindex","0"):t.setAttribute("tabindex","-1");}));this.shadowRoot.querySelector(".embla__container").replaceChildren(...this.slides);}}toggleTabIndex=()=>{const t=this.slides[this.embla.selectedScrollSnap()];this.slides.forEach((t=>{t.setAttribute("tabindex","-1");})),t.setAttribute("tabindex","0");};togglePlayButtonOnStop=()=>{this.isPlaying=false,this.playBtnLabel=this.runtimeUtils.getSlotText(this,"ariaLabel.slideshow.play")||this.playLabel;};togglePlayButtonOnPlay=()=>{this.isPlaying=true,this.playBtnLabel=this.runtimeUtils.getSlotText(this,"ariaLabel.slideshow.pause")||this.pauseLabel;};toggleNavBtnsState=()=>{this.embla.canScrollPrev()?this._prevBtn.removeAttribute("disabled"):this._prevBtn.setAttribute("disabled",""),this.embla.canScrollNext()?this._nextBtn.removeAttribute("disabled"):this._nextBtn.setAttribute("disabled","");};stopOnInteraction=()=>{this.isPlaying&&(this.stop(),this.togglePlayButtonOnStop(),this.isStopped=true);};isTouchDevice(){return window.matchMedia("(pointer: coarse)").matches}handleSlotChange(){this.updateSlides(),this.embla?this.embla.reInit():this.initializeEmbla(),this.embla.on("select",this.toggleTabIndex),(this.autoplay||this.autoScroll&&!this.isTouchDevice())&&(this.isPlaying=true,this.playOnInit&&(this.isStopped=false));}handleNavClick(t){"prev"===t&&this.scrollPrev(),"next"===t&&this.scrollNext(),this.stopOnInteraction();}handleKeydown=t=>{const e=()=>{setTimeout((()=>{this.slides[this.embla.selectedScrollSnap()].focus();}),200);};"ArrowLeft"===t.key?(t.preventDefault(),this.scrollPrev(),e()):"ArrowRight"===t.key&&(t.preventDefault(),this.scrollNext(),e());};handlePlayClick(){this.isPlaying?(this.stop(),this.togglePlayButtonOnStop(),this.isStopped=true):(this.play(),this.togglePlayButtonOnPlay(),this.isStopped=false);}handleMouseEnter=()=>{this.isPlaying&&(this.stop(),this.isHovered=true);};handleMouseLeave=()=>{this.isPlaying||this.isStopped||!this.isHovered||(this.play(),this.isHovered=false);};addDotBtnsAndClickHandlers=(t,e)=>{let o=[];const s=()=>{const s=t.scrollSnapList().map(((e,o)=>{const s=document.createElement("button");return s.className="embla__dot",s.type="button",s.tabIndex=-1,s.setAttribute("aria-label",`Go to slide ${o+1}`),s.addEventListener("click",(()=>{t.scrollTo(o),this.stopOnInteraction();}),false),s}));e.replaceChildren(...s),o=s;},a=()=>{const e=t.selectedScrollSnap();o[e]&&o[e].classList.toggle("stopped",!this.isPlaying);},r=()=>{const e=t.previousScrollSnap(),s=t.selectedScrollSnap();if(this.autoplay){const r=document.createElement("div");r.className="embla__progress__bar",o[e]&&(o[e].className="embla__dot",o[e].replaceChildren()),o[s]&&(o[s].className="embla__progress",o[s].replaceChildren(r),this.isPlaying||o[s].classList.add("stopped")),this.addAutoplayProgressListeners(this.embla,this._progressNode),t.on("autoplay:play",a).on("autoplay:stop",a);}else o[e]&&o[e].classList.remove("embla__dot--selected"),o[s]&&o[s].classList.add("embla__dot--selected");};return t.on("init",s).on("reInit",s).on("init",r).on("reInit",r).on("select",r),()=>{e.replaceChildren();}};addAutoplayProgressListeners=(t,e)=>{const o=e.querySelector(".embla__progress__bar");let s="";const a=t=>{this._progressNode.classList.remove("embla__progress--paused");const e=t?.plugins()?.autoplay;if(!e)return;const a=e.timeUntilNext();if(null!==a){if(!s){const t=window.getComputedStyle(o);s=t.animationName;}o.style.animationName="none",o.style.transform="translate3d(0,0,0)",window.requestAnimationFrame((()=>{window.setTimeout((()=>{o.style.animationName=s,o.style.animationDuration=`${a}ms`;}),0);}));}},r=t=>{this._progressNode.classList.add("embla__progress--paused");t?.plugins();};return t.on("autoplay:timerset",a).on("autoplay:timerstopped",r).emit("autoplay:timerset"),()=>{t.off("autoplay:timerset",a).off("autoplay:timerstopped",r);}};disconnectedCallback(){super.disconnectedCallback(),this.embla&&(this.embla.off("select",this.toggleTabIndex),this.navigation&&!this.isTouchDevice()&&this.embla.off("select",this.toggleNavBtnsState).off("init",this.toggleNavBtnsState).off("reInit",this.toggleNavBtnsState),this.autoplay&&this.embla.off("autoplay:stop",this.togglePlayButtonOnStop).off("autoplay:play",this.togglePlayButtonOnPlay),this.autoScroll&&!this.isTouchDevice()&&this.embla.off("autoScroll:stop",this.togglePlayButtonOnStop).off("autoScroll:play",this.togglePlayButtonOnPlay),this.embla.destroy(),this.embla=null),this.slides.forEach((t=>{t.removeEventListener("keydown",this.handleKeydown);})),this.slides=[];}generateIconHtml(t,e){const o=(new DOMParser).parseFromString(t,"text/html").body.firstChild;return o.setAttribute("slot","svg"),html`<${this.iconTag} style="--ds-auro-icon-size: inherit" customColor customSvg ?hidden="${e}">${o}</${this.iconTag}>`}renderNavigationControls(){return html`
|
|
85
85
|
<${this.buttonTag}
|
|
86
|
-
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.
|
|
86
|
+
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.scroll.left")||"Previous slide"}"
|
|
87
87
|
class="scroll-prev"
|
|
88
88
|
shape="circle"
|
|
89
89
|
onDark
|
|
@@ -93,7 +93,7 @@ function c(t){return "number"==typeof t}function d(t){return "string"==typeof t}
|
|
|
93
93
|
${this.generateIconHtml(It)}
|
|
94
94
|
</${this.buttonTag}>
|
|
95
95
|
<${this.buttonTag}
|
|
96
|
-
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.
|
|
96
|
+
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel.scroll.right")||"Next slide"}"
|
|
97
97
|
class="scroll-next"
|
|
98
98
|
shape="circle"
|
|
99
99
|
onDark
|
|
@@ -119,10 +119,10 @@ function c(t){return "number"==typeof t}function d(t){return "string"==typeof t}
|
|
|
119
119
|
</div>
|
|
120
120
|
`}render(){return html`
|
|
121
121
|
<!-- Hidden slots for aria labels -->
|
|
122
|
-
<slot name="ariaLabel.
|
|
123
|
-
<slot name="ariaLabel.
|
|
124
|
-
<slot name="ariaLabel.
|
|
125
|
-
<slot name="ariaLabel.
|
|
122
|
+
<slot name="ariaLabel.scroll.left" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
123
|
+
<slot name="ariaLabel.scroll.right" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
124
|
+
<slot name="ariaLabel.slideshow.play" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
125
|
+
<slot name="ariaLabel.slideshow.pause" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
126
126
|
|
|
127
127
|
<div class="container">
|
|
128
128
|
<div class="slideshow-wrapper">
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroSlideshow}from"./auro-slideshow-
|
|
1
|
+
export{A as AuroSlideshow}from"./auro-slideshow-vHKongBF.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as i}from"./auro-slideshow-
|
|
1
|
+
import{A as i}from"./auro-slideshow-vHKongBF.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-slideshow",
|
|
10
|
-
"version": "0.0.0-pr59.
|
|
10
|
+
"version": "0.0.0-pr59.1",
|
|
11
11
|
"description": "auro-slideshow HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|