@aurodesignsystem-dev/auro-carousel 0.0.0-pr104.0 → 0.0.0-pr106.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/README.md +79 -68
- package/demo/api.html +1 -1
- package/demo/api.js +1 -1
- package/demo/api.md +103 -153
- package/demo/auro-carousel.min.js +40 -22
- package/demo/index.html +2 -3
- package/demo/index.md +22 -300
- package/dist/{auro-carousel-DbNzxhOH.js → auro-carousel-D1ntQpGY.js} +4 -4
- package/dist/index.d.ts +209 -128
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +14 -8
package/demo/api.md
CHANGED
|
@@ -3,90 +3,88 @@
|
|
|
3
3
|
|
|
4
4
|
# auro-carousel
|
|
5
5
|
|
|
6
|
-
The auro-carousel
|
|
6
|
+
The `auro-carousel` element displays a group of elements in a scrollable container.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
### Properties & Attributes
|
|
9
9
|
|
|
10
|
-
|
|
|
11
|
-
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| -------------- | -------------- | --------- | ------- | ------- | ---------------------------------------------------------------------------------------------- |
|
|
12
|
+
| centerSelected | centerSelected | | string | | Automatically centers the selected node on UI render |
|
|
13
|
+
| displayArrows | displayArrows | | boolean | | Always displays the left and right arrows, regardless of content width |
|
|
14
|
+
| label | label | | string | | DEPRECATED - Use `ariaLabel` slot instead. |
|
|
15
|
+
| scrollDistance | scrollDistance | | number | `300` | The number of pixels to scroll the carousel when the left or right buttons are interacted with |
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
### Methods
|
|
18
18
|
|
|
19
|
-
|
|
|
20
|
-
|
|
21
|
-
|
|
|
22
|
-
|
|
|
23
|
-
|
|
|
24
|
-
|
|
|
19
|
+
| Name | Parameters | Return | Description |
|
|
20
|
+
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------- |
|
|
21
|
+
| centerElement | `el` (Element) - The element to center inside the carousel. Must be a descendant of the carousel. | [object Object] | Centers the given element inside the carousel. |
|
|
22
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
23
|
+
| scrollCarousel | `num` (number) - The number of pixels to scroll the carousel by. Positive scrolls to the<br>right, negative scrolls to the left. | [object Object] | Scrolls the carousel by the given amount. |
|
|
24
|
+
| scrollToSelected | None | [object Object] | Scroll to the first child component that have 'selected' attribute. |
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
### Events
|
|
27
27
|
|
|
28
|
-
|
|
|
29
|
-
|
|
30
|
-
|
|
|
31
|
-
|
|
|
28
|
+
| Name | Description |
|
|
29
|
+
| ----------- | ------------------------------------------------------------ |
|
|
30
|
+
| scrollLeft | Dispatched when the guest clicks the 'left' carousel button |
|
|
31
|
+
| scrollRight | Dispatched when the guest clicks the 'right' carousel button |
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
### Slots
|
|
34
34
|
|
|
35
|
-
| Name
|
|
36
|
-
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
35
|
+
| Name | Description |
|
|
36
|
+
| ---------------------- | ---------------------------------------------------------- |
|
|
37
|
+
| (default) | Default slot for the elements in the carousel |
|
|
38
|
+
| ariaLabel | Text to give an accessible name to the carousel |
|
|
39
|
+
| ariaLabel.scroll.left | Text to give an accessible name to the left scroll button |
|
|
40
|
+
| ariaLabel.scroll.right | Text to give an accessible name to the right scroll button |
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
### CSS Shadow Parts
|
|
43
43
|
|
|
44
|
-
|
|
|
45
|
-
|
|
46
|
-
|
|
|
44
|
+
| Name | Description |
|
|
45
|
+
| ------- | ----------------------------------------------- |
|
|
46
|
+
| wrapper | The primary root HTML element of the component. |
|
|
47
47
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
48
48
|
|
|
49
|
-
##
|
|
50
|
-
|
|
51
|
-
### Default
|
|
49
|
+
## Basic
|
|
52
50
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
51
|
+
<div class="exampleWrapper">
|
|
52
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
53
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
54
|
+
<auro-carousel>
|
|
55
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
56
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
57
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
58
|
+
<auro-pane date="2020-10-13" price="$435"></auro-pane>
|
|
59
|
+
<auro-pane date="2020-10-14" price="$435"></auro-pane>
|
|
60
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
61
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
62
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
63
|
+
<auro-pane date="2020-10-18" selected price="$435"></auro-pane>
|
|
64
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
65
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
66
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
67
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
68
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
69
|
+
</auro-carousel>
|
|
70
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
71
|
+
</div>
|
|
74
72
|
<auro-accordion alignRight>
|
|
75
73
|
<span slot="trigger">See code</span>
|
|
76
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
77
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
74
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
75
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
78
76
|
|
|
79
77
|
```html
|
|
80
78
|
<auro-carousel>
|
|
81
79
|
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
82
80
|
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
83
81
|
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
84
|
-
<auro-pane date="2020-10-13"
|
|
85
|
-
<auro-pane date="2020-10-14" price="$435"
|
|
82
|
+
<auro-pane date="2020-10-13" price="$435"></auro-pane>
|
|
83
|
+
<auro-pane date="2020-10-14" price="$435"></auro-pane>
|
|
86
84
|
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
87
85
|
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
88
86
|
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
89
|
-
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
87
|
+
<auro-pane date="2020-10-18" selected price="$435"></auro-pane>
|
|
90
88
|
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
91
89
|
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
92
90
|
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
@@ -97,14 +95,15 @@ The auro-carousel component displays a group of elements in a scrollable contain
|
|
|
97
95
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
98
96
|
</auro-accordion>
|
|
99
97
|
|
|
100
|
-
|
|
98
|
+
## Property & Attribute Examples
|
|
101
99
|
|
|
102
|
-
####
|
|
103
|
-
|
|
100
|
+
#### Center Selected
|
|
101
|
+
|
|
102
|
+
Set the `centerSelected` attribute to automatically center the selected node upon rendering the UI.
|
|
104
103
|
|
|
105
104
|
<div class="exampleWrapper">
|
|
106
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
107
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
105
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/center-selected.html) -->
|
|
106
|
+
<!-- The below content is automatically added from ./../apiExamples/center-selected.html -->
|
|
108
107
|
<auro-carousel centerSelected>
|
|
109
108
|
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
110
109
|
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
@@ -122,11 +121,11 @@ Apply to the `auro-carousel` element to automatically center the selected node o
|
|
|
122
121
|
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
123
122
|
</auro-carousel>
|
|
124
123
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
125
|
-
</div>
|
|
124
|
+
</div>
|
|
126
125
|
<auro-accordion alignRight>
|
|
127
126
|
<span slot="trigger">See code</span>
|
|
128
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
129
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
127
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/center-selected.html) -->
|
|
128
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/center-selected.html -->
|
|
130
129
|
|
|
131
130
|
```html
|
|
132
131
|
<auro-carousel centerSelected>
|
|
@@ -149,12 +148,13 @@ Apply to the `auro-carousel` element to automatically center the selected node o
|
|
|
149
148
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
150
149
|
</auro-accordion>
|
|
151
150
|
|
|
152
|
-
####
|
|
151
|
+
#### Display Arrows
|
|
152
|
+
|
|
153
153
|
Using the `displayArrows` attribute will persistently show the left and right arrow buttons without consideration of scroll position.
|
|
154
154
|
|
|
155
155
|
<div class="exampleWrapper">
|
|
156
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
157
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
156
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/display-arrows.html) -->
|
|
157
|
+
<!-- The below content is automatically added from ./../apiExamples/display-arrows.html -->
|
|
158
158
|
<auro-carousel displayarrows>
|
|
159
159
|
<auro-pane date="2021-10-01"></auro-pane>
|
|
160
160
|
<auro-pane date="2021-10-02"></auro-pane>
|
|
@@ -186,11 +186,11 @@ Using the `displayArrows` attribute will persistently show the left and right ar
|
|
|
186
186
|
<auro-pane date="2021-10-28"></auro-pane>
|
|
187
187
|
</auro-carousel>
|
|
188
188
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
189
|
-
</div>
|
|
189
|
+
</div>
|
|
190
190
|
<auro-accordion alignRight>
|
|
191
191
|
<span slot="trigger">See code</span>
|
|
192
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
193
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
192
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/display-arrows.html) -->
|
|
193
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/display-arrows.html -->
|
|
194
194
|
|
|
195
195
|
```html
|
|
196
196
|
<auro-carousel displayarrows>
|
|
@@ -227,12 +227,13 @@ Using the `displayArrows` attribute will persistently show the left and right ar
|
|
|
227
227
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
228
228
|
</auro-accordion>
|
|
229
229
|
|
|
230
|
-
####
|
|
231
|
-
|
|
230
|
+
#### Scroll Distance
|
|
231
|
+
|
|
232
|
+
Use the `scrollDistance` attribute to specify how many pixels to scroll the carousel when the shoulder buttons are interacted with.
|
|
232
233
|
|
|
233
234
|
<div class="exampleWrapper">
|
|
234
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
235
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
235
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/scroll-distance.html) -->
|
|
236
|
+
<!-- The below content is automatically added from ./../apiExamples/scroll-distance.html -->
|
|
236
237
|
<auro-carousel scrollDistance="200">
|
|
237
238
|
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
238
239
|
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
@@ -250,11 +251,11 @@ How many pixels to scroll the carousel when the shoulder buttons are triggered.
|
|
|
250
251
|
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
251
252
|
</auro-carousel>
|
|
252
253
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
253
|
-
</div>
|
|
254
|
+
</div>
|
|
254
255
|
<auro-accordion alignRight>
|
|
255
256
|
<span slot="trigger">See code</span>
|
|
256
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
257
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
257
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/scroll-distance.html) -->
|
|
258
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/scroll-distance.html -->
|
|
258
259
|
|
|
259
260
|
```html
|
|
260
261
|
<auro-carousel scrollDistance="200">
|
|
@@ -277,16 +278,17 @@ How many pixels to scroll the carousel when the shoulder buttons are triggered.
|
|
|
277
278
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
278
279
|
</auro-accordion>
|
|
279
280
|
|
|
280
|
-
|
|
281
|
+
## Method Examples
|
|
281
282
|
|
|
282
|
-
####
|
|
283
|
-
|
|
283
|
+
#### Center Element
|
|
284
|
+
|
|
285
|
+
The following example illustrates the use of the `centerElement` method. This feature will center the selected pane element when clicked if there are enough surrounding nodes. This example **DOES NOT** center on load, as shown by the `centerSelected` attribute.
|
|
284
286
|
|
|
285
287
|
This method requires the user to invoke this feature based on a click event. See both a vanilla JS and React example below.
|
|
286
288
|
|
|
287
289
|
<div class="exampleWrapper">
|
|
288
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
289
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
290
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/center-element.html) -->
|
|
291
|
+
<!-- The below content is automatically added from ./../apiExamples/center-element.html -->
|
|
290
292
|
<auro-carousel label="Flight options" id="centerElement">
|
|
291
293
|
<auro-pane date="2021-10-01"></auro-pane>
|
|
292
294
|
<auro-pane date="2021-10-02"></auro-pane>
|
|
@@ -321,8 +323,8 @@ This method requires the user to invoke this feature based on a click event. See
|
|
|
321
323
|
</div>
|
|
322
324
|
<auro-accordion alignRight>
|
|
323
325
|
<span slot="trigger">See code</span>
|
|
324
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
325
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
326
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/center-element.html) -->
|
|
327
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/center-element.html -->
|
|
326
328
|
|
|
327
329
|
```html
|
|
328
330
|
<auro-carousel label="Flight options" id="centerElement">
|
|
@@ -357,8 +359,8 @@ This method requires the user to invoke this feature based on a click event. See
|
|
|
357
359
|
</auro-carousel>
|
|
358
360
|
```
|
|
359
361
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
360
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
361
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
362
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/center-element.js) -->
|
|
363
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/center-element.js -->
|
|
362
364
|
|
|
363
365
|
```js
|
|
364
366
|
// Vanilla JS example
|
|
@@ -380,8 +382,8 @@ export function centerElementExample() {
|
|
|
380
382
|
}
|
|
381
383
|
```
|
|
382
384
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
383
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
384
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
385
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/center-element-react.js) -->
|
|
386
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/center-element-react.js -->
|
|
385
387
|
|
|
386
388
|
```js
|
|
387
389
|
// React example
|
|
@@ -407,70 +409,17 @@ const days = [...Array(28).keys()];
|
|
|
407
409
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
408
410
|
</auro-accordion>
|
|
409
411
|
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
#### <a name="scrollLeft"></a>`scrollLeft`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
|
|
413
|
-
When the guest clicks the 'left' carousel button.
|
|
414
|
-
|
|
415
|
-
#### <a name="scrollRight"></a>`scrollRight`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
|
|
416
|
-
When the guest clicks the 'right' carousel button.
|
|
417
|
-
|
|
418
|
-
</auro-accordion>
|
|
419
|
-
|
|
420
|
-
### Slot Example
|
|
421
|
-
|
|
422
|
-
#### default
|
|
423
|
-
|
|
424
|
-
Used for all elements inside the scrolling carousel.
|
|
425
|
-
|
|
426
|
-
<div class="exampleWrapper">
|
|
427
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
428
|
-
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
429
|
-
<auro-carousel centerSelected>
|
|
430
|
-
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
431
|
-
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
432
|
-
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
433
|
-
<auro-pane date="2020-10-13" selected price="$666"></auro-pane>
|
|
434
|
-
<auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
|
|
435
|
-
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
436
|
-
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
437
|
-
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
438
|
-
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
439
|
-
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
440
|
-
</auro-carousel>
|
|
441
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
442
|
-
</div>
|
|
443
|
-
<auro-accordion alignRight>
|
|
444
|
-
<span slot="trigger">See code</span>
|
|
445
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
446
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
447
|
-
|
|
448
|
-
```html
|
|
449
|
-
<auro-carousel centerSelected>
|
|
450
|
-
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
451
|
-
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
452
|
-
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
453
|
-
<auro-pane date="2020-10-13" selected price="$666"></auro-pane>
|
|
454
|
-
<auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
|
|
455
|
-
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
456
|
-
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
457
|
-
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
458
|
-
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
459
|
-
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
460
|
-
</auro-carousel>
|
|
461
|
-
```
|
|
462
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
463
|
-
</auro-accordion>
|
|
412
|
+
## Slot Examples
|
|
464
413
|
|
|
465
|
-
|
|
414
|
+
### Aria Label Slots
|
|
466
415
|
|
|
467
416
|
Use the `ariaLabel`, `ariaLabel.scroll.left`, and `ariaLabel.scroll.right` slots to customize the accessible names for the carousel container and the left and right scroll buttons.
|
|
468
417
|
|
|
469
418
|
**Note:** Do not use the `aria-label` attribute on the `auro-carousel` element itself. This will be ignored in favor of the `ariaLabel` slot.
|
|
470
419
|
|
|
471
420
|
<div class="exampleWrapper">
|
|
472
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
473
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
421
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label-slots.html) -->
|
|
422
|
+
<!-- The below content is automatically added from ./../apiExamples/aria-label-slots.html -->
|
|
474
423
|
<auro-carousel centerSelected>
|
|
475
424
|
<span slot="ariaLabel">My Carousel</span>
|
|
476
425
|
<span slot="ariaLabel.scroll.left">My custom scroll left text</span>
|
|
@@ -498,8 +447,8 @@ Use the `ariaLabel`, `ariaLabel.scroll.left`, and `ariaLabel.scroll.right` slots
|
|
|
498
447
|
</div>
|
|
499
448
|
<auro-accordion alignRight>
|
|
500
449
|
<span slot="trigger">See code</span>
|
|
501
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
502
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
450
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label-slots.html) -->
|
|
451
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/aria-label-slots.html -->
|
|
503
452
|
|
|
504
453
|
```html
|
|
505
454
|
<auro-carousel centerSelected>
|
|
@@ -529,10 +478,11 @@ Use the `ariaLabel`, `ariaLabel.scroll.left`, and `ariaLabel.scroll.right` slots
|
|
|
529
478
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
530
479
|
</auro-accordion>
|
|
531
480
|
|
|
532
|
-
|
|
481
|
+
## Restyle Component with CSS Variables
|
|
533
482
|
|
|
534
|
-
The component may be restyled
|
|
483
|
+
The component may be restyled by changing the values of the following token(s).
|
|
535
484
|
|
|
485
|
+
<!-- Remove section if component does not have any component specific tokens -->
|
|
536
486
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
537
487
|
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
538
488
|
|
|
@@ -230,9 +230,9 @@ class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),
|
|
|
230
230
|
</${this._renderTag}>
|
|
231
231
|
`}renderLayout(){return this.renderLayoutDefault()}}
|
|
232
232
|
|
|
233
|
-
var buttonVersion = '12.
|
|
233
|
+
var buttonVersion = '12.3.0';
|
|
234
234
|
|
|
235
|
-
class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" 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="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;
|
|
235
|
+
class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" 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="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
236
236
|
`;class z extends m{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
237
237
|
`;var y=i$5`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
238
238
|
`;var k=i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
@@ -256,7 +256,7 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
256
256
|
</div>
|
|
257
257
|
`}}
|
|
258
258
|
|
|
259
|
-
var iconVersion = '9.1.
|
|
259
|
+
var iconVersion = '9.1.1';
|
|
260
260
|
|
|
261
261
|
var colorCss = i$5`:host .gradient{background:var(--ds-auro-carousel-gradient-color-two)}:host .gradient--left{background:linear-gradient(to right,var(--ds-auro-carousel-gradient-color-one),var(--ds-auro-carousel-gradient-color-two))}:host .gradient--right{background:linear-gradient(to left,var(--ds-auro-carousel-gradient-color-one),var(--ds-auro-carousel-gradient-color-two))}
|
|
262
262
|
`;
|
|
@@ -273,27 +273,28 @@ var tokensCss = i$5`:host{--ds-auro-carousel-gradient-color-one: var(--ds-basic-
|
|
|
273
273
|
|
|
274
274
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
275
275
|
/**
|
|
276
|
-
* The auro-carousel
|
|
276
|
+
* The `auro-carousel` element displays a group of elements in a scrollable container.
|
|
277
|
+
* @customElement auro-carousel
|
|
277
278
|
*
|
|
278
|
-
* @
|
|
279
|
-
* @
|
|
280
|
-
* @
|
|
281
|
-
* @
|
|
282
|
-
*
|
|
283
|
-
* @slot - the elements in the carousel
|
|
284
|
-
* @slot ariaLabel - Text to give an accessible name to the carousel.
|
|
285
|
-
* @slot ariaLabel.scroll.left - Text to give an accessible name to the left scroll button.
|
|
286
|
-
* @slot ariaLabel.scroll.right - Text to give an accessible name to the right scroll button.
|
|
279
|
+
* @slot - Default slot for the elements in the carousel
|
|
280
|
+
* @slot ariaLabel - Text to give an accessible name to the carousel
|
|
281
|
+
* @slot ariaLabel.scroll.left - Text to give an accessible name to the left scroll button
|
|
282
|
+
* @slot ariaLabel.scroll.right - Text to give an accessible name to the right scroll button
|
|
287
283
|
*
|
|
288
284
|
* @csspart wrapper - The primary root HTML element of the component.
|
|
289
285
|
*
|
|
290
|
-
* @event scrollRight - when the guest clicks the 'right' carousel button
|
|
291
|
-
* @event scrollLeft - when the guest clicks the 'left' carousel button
|
|
286
|
+
* @event scrollRight - Dispatched when the guest clicks the 'right' carousel button
|
|
287
|
+
* @event scrollLeft - Dispatched when the guest clicks the 'left' carousel button
|
|
292
288
|
*/
|
|
293
289
|
|
|
294
290
|
class AuroCarousel extends i$2 {
|
|
295
291
|
constructor() {
|
|
296
292
|
super();
|
|
293
|
+
|
|
294
|
+
this._initializeDefaults();
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
_initializeDefaults() {
|
|
297
298
|
this.scrollDistance = 300;
|
|
298
299
|
|
|
299
300
|
/**
|
|
@@ -332,16 +333,32 @@ class AuroCarousel extends i$2 {
|
|
|
332
333
|
|
|
333
334
|
static get properties() {
|
|
334
335
|
return {
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
reflect: true,
|
|
339
|
-
},
|
|
340
|
-
label: { type: String },
|
|
336
|
+
/**
|
|
337
|
+
* Automatically centers the selected node on UI render
|
|
338
|
+
*/
|
|
341
339
|
centerSelected: {
|
|
342
340
|
type: String,
|
|
343
341
|
reflect: true,
|
|
344
342
|
},
|
|
343
|
+
|
|
344
|
+
/**
|
|
345
|
+
* Always displays the left and right arrows, regardless of content width
|
|
346
|
+
*/
|
|
347
|
+
displayArrows: { type: Boolean },
|
|
348
|
+
|
|
349
|
+
/**
|
|
350
|
+
* DEPRECATED - Use `ariaLabel` slot instead.
|
|
351
|
+
*/
|
|
352
|
+
label: { type: String },
|
|
353
|
+
|
|
354
|
+
/**
|
|
355
|
+
* The number of pixels to scroll the carousel when the left or right buttons are interacted with
|
|
356
|
+
* @default 300
|
|
357
|
+
*/
|
|
358
|
+
scrollDistance: {
|
|
359
|
+
type: Number,
|
|
360
|
+
reflect: true
|
|
361
|
+
}
|
|
345
362
|
};
|
|
346
363
|
}
|
|
347
364
|
|
|
@@ -351,7 +368,7 @@ class AuroCarousel extends i$2 {
|
|
|
351
368
|
|
|
352
369
|
/**
|
|
353
370
|
* This will register this element with the browser.
|
|
354
|
-
* @param {string} [name="auro-carousel"] - The name of element that you want to register
|
|
371
|
+
* @param {string} [name="auro-carousel"] - The name of the element that you want to register.
|
|
355
372
|
*
|
|
356
373
|
* @example
|
|
357
374
|
* AuroCarousel.register("custom-carousel") // this will register this element to <custom-carousel/>
|
|
@@ -395,6 +412,7 @@ class AuroCarousel extends i$2 {
|
|
|
395
412
|
|
|
396
413
|
/**
|
|
397
414
|
* Function handler for anything that happens when all its children is ready.
|
|
415
|
+
* @private
|
|
398
416
|
* @return {void}
|
|
399
417
|
*/
|
|
400
418
|
actionOnChildrenReady() {
|
package/demo/index.html
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
36
|
</head>
|
|
37
|
-
<body>
|
|
37
|
+
<body class="auro-markdown">
|
|
38
38
|
<main></main>
|
|
39
39
|
<script type="module">
|
|
40
40
|
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
|
|
@@ -54,9 +54,8 @@
|
|
|
54
54
|
initExamples();
|
|
55
55
|
</script>
|
|
56
56
|
|
|
57
|
-
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
|
|
58
|
-
|
|
59
57
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
58
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
60
59
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-pane@latest/+esm" type="module"></script>
|
|
61
60
|
</body>
|
|
62
61
|
</html>
|