@aurodesignsystem-dev/auro-carousel 0.0.0-pr93.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +243 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +163 -0
- package/demo/api.html +60 -0
- package/demo/api.js +18 -0
- package/demo/api.md +527 -0
- package/demo/api.min.js +39 -0
- package/demo/auro-carousel.min.js +1947 -0
- package/demo/index.html +62 -0
- package/demo/index.js +20 -0
- package/demo/index.md +351 -0
- package/demo/index.min.js +9 -0
- package/dist/auro-carousel-Cxfzo_Ed.js +98 -0
- package/dist/index.d.ts +56 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +138 -0
package/demo/api.html
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3
|
+
See LICENSE in the project root for license information.
|
|
4
|
+
|
|
5
|
+
HTML in this document is standardized and NOT to be edited.
|
|
6
|
+
All demo code should be added/edited in ./demo/api.md
|
|
7
|
+
|
|
8
|
+
With the exception of adding custom elements if needed for the demo.
|
|
9
|
+
|
|
10
|
+
----------------------- DO NOT EDIT -----------------------------
|
|
11
|
+
|
|
12
|
+
-->
|
|
13
|
+
|
|
14
|
+
<!DOCTYPE html>
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>Auro Web Component Demo | auro-carousel</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-carousel's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
+
</head>
|
|
37
|
+
<body class="auro-markdown">
|
|
38
|
+
<main></main>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
|
|
42
|
+
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
|
|
43
|
+
fetch('./api.md')
|
|
44
|
+
.then((response) => response.text())
|
|
45
|
+
.then((text) => {
|
|
46
|
+
const rawHtml = marked.parse(text);
|
|
47
|
+
document.querySelector('main').innerHTML = rawHtml;
|
|
48
|
+
Prism.highlightAll();
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
<script type="module" data-demo-script="true" >
|
|
52
|
+
import { initExamples } from './api.min.js';
|
|
53
|
+
initExamples();
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
57
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
|
|
58
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-pane@latest/dist/auro-pane__bundled.js" type="module"></script>
|
|
59
|
+
</body>
|
|
60
|
+
</html>
|
package/demo/api.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { centerElementExample } from "../apiExamples/centerElement";
|
|
2
|
+
import "../src/registered";
|
|
3
|
+
|
|
4
|
+
export function initExamples(initCount) {
|
|
5
|
+
//biome-ignore lint: going to refactor this file later
|
|
6
|
+
initCount = initCount || 0;
|
|
7
|
+
|
|
8
|
+
try {
|
|
9
|
+
centerElementExample();
|
|
10
|
+
} catch {
|
|
11
|
+
if (initCount <= 20) {
|
|
12
|
+
// setTimeout handles issue where content is sometimes loaded after the functions get called
|
|
13
|
+
setTimeout(() => {
|
|
14
|
+
initExamples(initCount + 1);
|
|
15
|
+
}, 100);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
package/demo/api.md
ADDED
|
@@ -0,0 +1,527 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-carousel
|
|
5
|
+
|
|
6
|
+
The auro-carousel component displays a group of elements in a scrollable container.
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Type | Default | Description |
|
|
11
|
+
|------------------|------------------|-----------|---------|--------------------------------------------------|
|
|
12
|
+
| [centerSelected](#centerSelected) | `centerSelected` | `String` | | Apply to outer auro-carousel element to automatically center the selected node on UI render. |
|
|
13
|
+
| [displayArrows](#displayArrows) | `displayArrows` | `Boolean` | | Forces left and right navigation to stick in DOM regardless of content width |
|
|
14
|
+
| [label](#label) | `label` | `String` | | The accessible name for the carousel. Logs a console warning if not set. |
|
|
15
|
+
| [scrollDistance](#scrollDistance) | `scrollDistance` | `Number` | 300 | How many pixels to scroll the carousel when the shoulder buttons are triggered. |
|
|
16
|
+
|
|
17
|
+
## Methods
|
|
18
|
+
|
|
19
|
+
| Method | Type | Description |
|
|
20
|
+
|-------------------------|-----------------------|--------------------------------------------------|
|
|
21
|
+
| [actionOnChildrenReady](#actionOnChildrenReady) | `(): void` | Function handler for anything that happens when all its children is ready. |
|
|
22
|
+
| [centerElement](#centerElement) | `(el: Element): void` | Centers the given element inside the carousel.<br /><br />**el**: The element to center inside the carousel. Must be a descendant of the carousel. |
|
|
23
|
+
| [scrollCarousel](#scrollCarousel) | `(num: number): void` | Scrolls the carousel by the given amount.<br /><br />**num**: The number of pixels to scroll the carousel by. Positive scrolls to the<br />right, negative scrolls to the left. |
|
|
24
|
+
| [scrollToSelected](#scrollToSelected) | `(): void` | Scroll to the first child component that have 'selected' attribute. |
|
|
25
|
+
|
|
26
|
+
## Events
|
|
27
|
+
|
|
28
|
+
| Event | Type | Description |
|
|
29
|
+
|---------------|--------------------|--------------------------------------------------|
|
|
30
|
+
| [scrollLeft](#scrollLeft) | `CustomEvent<any>` | when the guest clicks the 'left' carousel button |
|
|
31
|
+
| [scrollRight](#scrollRight) | `CustomEvent<any>` | when the guest clicks the 'right' carousel button |
|
|
32
|
+
|
|
33
|
+
## Slots
|
|
34
|
+
|
|
35
|
+
| Name | Description |
|
|
36
|
+
|------|------------------------------|
|
|
37
|
+
| | the elements in the carousel |
|
|
38
|
+
|
|
39
|
+
## CSS Shadow Parts
|
|
40
|
+
|
|
41
|
+
| Part | Description |
|
|
42
|
+
|-----------|-------------------------------------------------|
|
|
43
|
+
| [wrapper](#wrapper) | The primary root HTML element of the component. |
|
|
44
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
45
|
+
|
|
46
|
+
## API Examples
|
|
47
|
+
|
|
48
|
+
### Default
|
|
49
|
+
|
|
50
|
+
<div class="exampleWrapper">
|
|
51
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/default.html) -->
|
|
52
|
+
<!-- The below content is automatically added from ./../apiExamples/default.html -->
|
|
53
|
+
<auro-carousel>
|
|
54
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
55
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
56
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
57
|
+
<auro-pane date="2020-10-13" selected price="$435"></auro-pane>
|
|
58
|
+
<auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
|
|
59
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
60
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
61
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
62
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
63
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
64
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
65
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
66
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
67
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
68
|
+
</auro-carousel>
|
|
69
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
70
|
+
</div>
|
|
71
|
+
<auro-accordion alignRight>
|
|
72
|
+
<span slot="trigger">See code</span>
|
|
73
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/default.html) -->
|
|
74
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/default.html -->
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<auro-carousel>
|
|
78
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
79
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
80
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
81
|
+
<auro-pane date="2020-10-13" selected price="$435"></auro-pane>
|
|
82
|
+
<auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
|
|
83
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
84
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
85
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
86
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
87
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
88
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
89
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
90
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
91
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
92
|
+
</auro-carousel>
|
|
93
|
+
```
|
|
94
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
95
|
+
</auro-accordion>
|
|
96
|
+
|
|
97
|
+
### Property Examples
|
|
98
|
+
|
|
99
|
+
#### <a name="centerSelected"></a>`centerSelected`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
|
|
100
|
+
Apply to the `auro-carousel` element to automatically center the selected node on UI render.
|
|
101
|
+
|
|
102
|
+
<div class="exampleWrapper">
|
|
103
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/centerSelected.html) -->
|
|
104
|
+
<!-- The below content is automatically added from ./../apiExamples/centerSelected.html -->
|
|
105
|
+
<auro-carousel centerSelected>
|
|
106
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
107
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
108
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
109
|
+
<auro-pane date="2020-10-13" price="$435"></auro-pane>
|
|
110
|
+
<auro-pane date="2020-10-14" price="$435"></auro-pane>
|
|
111
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
112
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
113
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
114
|
+
<auro-pane date="2020-10-18" selected price="$435"></auro-pane>
|
|
115
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
116
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
117
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
118
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
119
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
120
|
+
</auro-carousel>
|
|
121
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
122
|
+
</div>
|
|
123
|
+
<auro-accordion alignRight>
|
|
124
|
+
<span slot="trigger">See code</span>
|
|
125
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/centerSelected.html) -->
|
|
126
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/centerSelected.html -->
|
|
127
|
+
|
|
128
|
+
```html
|
|
129
|
+
<auro-carousel centerSelected>
|
|
130
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
131
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
132
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
133
|
+
<auro-pane date="2020-10-13" price="$435"></auro-pane>
|
|
134
|
+
<auro-pane date="2020-10-14" price="$435"></auro-pane>
|
|
135
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
136
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
137
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
138
|
+
<auro-pane date="2020-10-18" selected price="$435"></auro-pane>
|
|
139
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
140
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
141
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
142
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
143
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
144
|
+
</auro-carousel>
|
|
145
|
+
```
|
|
146
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
147
|
+
</auro-accordion>
|
|
148
|
+
|
|
149
|
+
#### <a name="displayArrows"></a>`displayArrows`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
|
|
150
|
+
Using the `displayArrows` attribute will persistently show the left and right arrow buttons without consideration of scroll position.
|
|
151
|
+
|
|
152
|
+
<div class="exampleWrapper">
|
|
153
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/displayArrows.html) -->
|
|
154
|
+
<!-- The below content is automatically added from ./../apiExamples/displayArrows.html -->
|
|
155
|
+
<auro-carousel displayarrows>
|
|
156
|
+
<auro-pane date="2021-10-01"></auro-pane>
|
|
157
|
+
<auro-pane date="2021-10-02"></auro-pane>
|
|
158
|
+
<auro-pane date="2021-10-03"></auro-pane>
|
|
159
|
+
<auro-pane date="2021-10-04"></auro-pane>
|
|
160
|
+
<auro-pane date="2021-10-05"></auro-pane>
|
|
161
|
+
<auro-pane date="2021-10-06"></auro-pane>
|
|
162
|
+
<auro-pane date="2021-10-07"></auro-pane>
|
|
163
|
+
<auro-pane date="2021-10-08"></auro-pane>
|
|
164
|
+
<auro-pane date="2021-10-09"></auro-pane>
|
|
165
|
+
<auro-pane date="2021-10-10"></auro-pane>
|
|
166
|
+
<auro-pane date="2021-10-11"></auro-pane>
|
|
167
|
+
<auro-pane date="2021-10-12" selected></auro-pane>
|
|
168
|
+
<auro-pane date="2021-10-13"></auro-pane>
|
|
169
|
+
<auro-pane date="2021-10-14"></auro-pane>
|
|
170
|
+
<auro-pane date="2021-10-15"></auro-pane>
|
|
171
|
+
<auro-pane date="2021-10-16"></auro-pane>
|
|
172
|
+
<auro-pane date="2021-10-17"></auro-pane>
|
|
173
|
+
<auro-pane date="2021-10-18"></auro-pane>
|
|
174
|
+
<auro-pane date="2021-10-19"></auro-pane>
|
|
175
|
+
<auro-pane date="2021-10-20"></auro-pane>
|
|
176
|
+
<auro-pane date="2021-10-21"></auro-pane>
|
|
177
|
+
<auro-pane date="2021-10-22"></auro-pane>
|
|
178
|
+
<auro-pane date="2021-10-23"></auro-pane>
|
|
179
|
+
<auro-pane date="2021-10-24"></auro-pane>
|
|
180
|
+
<auro-pane date="2021-10-25"></auro-pane>
|
|
181
|
+
<auro-pane date="2021-10-26"></auro-pane>
|
|
182
|
+
<auro-pane date="2021-10-27"></auro-pane>
|
|
183
|
+
<auro-pane date="2021-10-28"></auro-pane>
|
|
184
|
+
</auro-carousel>
|
|
185
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
186
|
+
</div>
|
|
187
|
+
<auro-accordion alignRight>
|
|
188
|
+
<span slot="trigger">See code</span>
|
|
189
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/displayArrows.html) -->
|
|
190
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/displayArrows.html -->
|
|
191
|
+
|
|
192
|
+
```html
|
|
193
|
+
<auro-carousel displayarrows>
|
|
194
|
+
<auro-pane date="2021-10-01"></auro-pane>
|
|
195
|
+
<auro-pane date="2021-10-02"></auro-pane>
|
|
196
|
+
<auro-pane date="2021-10-03"></auro-pane>
|
|
197
|
+
<auro-pane date="2021-10-04"></auro-pane>
|
|
198
|
+
<auro-pane date="2021-10-05"></auro-pane>
|
|
199
|
+
<auro-pane date="2021-10-06"></auro-pane>
|
|
200
|
+
<auro-pane date="2021-10-07"></auro-pane>
|
|
201
|
+
<auro-pane date="2021-10-08"></auro-pane>
|
|
202
|
+
<auro-pane date="2021-10-09"></auro-pane>
|
|
203
|
+
<auro-pane date="2021-10-10"></auro-pane>
|
|
204
|
+
<auro-pane date="2021-10-11"></auro-pane>
|
|
205
|
+
<auro-pane date="2021-10-12" selected></auro-pane>
|
|
206
|
+
<auro-pane date="2021-10-13"></auro-pane>
|
|
207
|
+
<auro-pane date="2021-10-14"></auro-pane>
|
|
208
|
+
<auro-pane date="2021-10-15"></auro-pane>
|
|
209
|
+
<auro-pane date="2021-10-16"></auro-pane>
|
|
210
|
+
<auro-pane date="2021-10-17"></auro-pane>
|
|
211
|
+
<auro-pane date="2021-10-18"></auro-pane>
|
|
212
|
+
<auro-pane date="2021-10-19"></auro-pane>
|
|
213
|
+
<auro-pane date="2021-10-20"></auro-pane>
|
|
214
|
+
<auro-pane date="2021-10-21"></auro-pane>
|
|
215
|
+
<auro-pane date="2021-10-22"></auro-pane>
|
|
216
|
+
<auro-pane date="2021-10-23"></auro-pane>
|
|
217
|
+
<auro-pane date="2021-10-24"></auro-pane>
|
|
218
|
+
<auro-pane date="2021-10-25"></auro-pane>
|
|
219
|
+
<auro-pane date="2021-10-26"></auro-pane>
|
|
220
|
+
<auro-pane date="2021-10-27"></auro-pane>
|
|
221
|
+
<auro-pane date="2021-10-28"></auro-pane>
|
|
222
|
+
</auro-carousel>
|
|
223
|
+
```
|
|
224
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
225
|
+
</auro-accordion>
|
|
226
|
+
|
|
227
|
+
#### <a name="label"></a>`label`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
|
|
228
|
+
The accessible name for the carousel. Logs a console warning if not set.
|
|
229
|
+
|
|
230
|
+
<div class="exampleWrapper">
|
|
231
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/label.html) -->
|
|
232
|
+
<!-- The below content is automatically added from ./../apiExamples/label.html -->
|
|
233
|
+
<auro-carousel label="Flight options">
|
|
234
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
235
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
236
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
237
|
+
<auro-pane date="2020-10-13" selected price="$435"></auro-pane>
|
|
238
|
+
<auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
|
|
239
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
240
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
241
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
242
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
243
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
244
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
245
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
246
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
247
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
248
|
+
</auro-carousel>
|
|
249
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
250
|
+
</div>
|
|
251
|
+
<auro-accordion alignRight>
|
|
252
|
+
<span slot="trigger">See code</span>
|
|
253
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/label.html) -->
|
|
254
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/label.html -->
|
|
255
|
+
|
|
256
|
+
```html
|
|
257
|
+
<auro-carousel label="Flight options">
|
|
258
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
259
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
260
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
261
|
+
<auro-pane date="2020-10-13" selected price="$435"></auro-pane>
|
|
262
|
+
<auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
|
|
263
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
264
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
265
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
266
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
267
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
268
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
269
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
270
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
271
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
272
|
+
</auro-carousel>
|
|
273
|
+
```
|
|
274
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
275
|
+
</auro-accordion>
|
|
276
|
+
|
|
277
|
+
#### <a name="scrollDistance"></a>`scrollDistance`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
|
|
278
|
+
How many pixels to scroll the carousel when the shoulder buttons are triggered.
|
|
279
|
+
|
|
280
|
+
<div class="exampleWrapper">
|
|
281
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/scrollDistance.html) -->
|
|
282
|
+
<!-- The below content is automatically added from ./../apiExamples/scrollDistance.html -->
|
|
283
|
+
<auro-carousel scrollDistance="200">
|
|
284
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
285
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
286
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
287
|
+
<auro-pane date="2020-10-13" selected price="$435"></auro-pane>
|
|
288
|
+
<auro-pane date="2020-10-14" price="$435"></auro-pane>
|
|
289
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
290
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
291
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
292
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
293
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
294
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
295
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
296
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
297
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
298
|
+
</auro-carousel>
|
|
299
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
300
|
+
</div>
|
|
301
|
+
<auro-accordion alignRight>
|
|
302
|
+
<span slot="trigger">See code</span>
|
|
303
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/scrollDistance.html) -->
|
|
304
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/scrollDistance.html -->
|
|
305
|
+
|
|
306
|
+
```html
|
|
307
|
+
<auro-carousel scrollDistance="200">
|
|
308
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
309
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
310
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
311
|
+
<auro-pane date="2020-10-13" selected price="$435"></auro-pane>
|
|
312
|
+
<auro-pane date="2020-10-14" price="$435"></auro-pane>
|
|
313
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
314
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
315
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
316
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
317
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
318
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
319
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
320
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
321
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
322
|
+
</auro-carousel>
|
|
323
|
+
```
|
|
324
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
325
|
+
</auro-accordion>
|
|
326
|
+
|
|
327
|
+
### Method Examples
|
|
328
|
+
|
|
329
|
+
#### <a name="centerElement"></a>`centerElement`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
|
|
330
|
+
The following example illustrates the use of the `centerElement` method. This feature will attempt top center the selected pane element when clicked if there are enough surrounding nodes. This example DOES NOT center on load.
|
|
331
|
+
|
|
332
|
+
This method requires the user to invoke this feature based on a click event. See both a vanilla JS and React example below.
|
|
333
|
+
|
|
334
|
+
<div class="exampleWrapper">
|
|
335
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/centerElement.html) -->
|
|
336
|
+
<!-- The below content is automatically added from ./../apiExamples/centerElement.html -->
|
|
337
|
+
<auro-carousel label="Flight options" id="centerElement">
|
|
338
|
+
<auro-pane date="2021-10-01"></auro-pane>
|
|
339
|
+
<auro-pane date="2021-10-02"></auro-pane>
|
|
340
|
+
<auro-pane date="2021-10-03"></auro-pane>
|
|
341
|
+
<auro-pane date="2021-10-04"></auro-pane>
|
|
342
|
+
<auro-pane date="2021-10-05"></auro-pane>
|
|
343
|
+
<auro-pane date="2021-10-06"></auro-pane>
|
|
344
|
+
<auro-pane date="2021-10-07"></auro-pane>
|
|
345
|
+
<auro-pane date="2021-10-08"></auro-pane>
|
|
346
|
+
<auro-pane date="2021-10-09"></auro-pane>
|
|
347
|
+
<auro-pane date="2021-10-10"></auro-pane>
|
|
348
|
+
<auro-pane date="2021-10-11"></auro-pane>
|
|
349
|
+
<auro-pane date="2021-10-12" selected></auro-pane>
|
|
350
|
+
<auro-pane date="2021-10-13"></auro-pane>
|
|
351
|
+
<auro-pane date="2021-10-14"></auro-pane>
|
|
352
|
+
<auro-pane date="2021-10-15"></auro-pane>
|
|
353
|
+
<auro-pane date="2021-10-16"></auro-pane>
|
|
354
|
+
<auro-pane date="2021-10-17"></auro-pane>
|
|
355
|
+
<auro-pane date="2021-10-18"></auro-pane>
|
|
356
|
+
<auro-pane date="2021-10-19"></auro-pane>
|
|
357
|
+
<auro-pane date="2021-10-20"></auro-pane>
|
|
358
|
+
<auro-pane date="2021-10-21"></auro-pane>
|
|
359
|
+
<auro-pane date="2021-10-22"></auro-pane>
|
|
360
|
+
<auro-pane date="2021-10-23"></auro-pane>
|
|
361
|
+
<auro-pane date="2021-10-24"></auro-pane>
|
|
362
|
+
<auro-pane date="2021-10-25"></auro-pane>
|
|
363
|
+
<auro-pane date="2021-10-26"></auro-pane>
|
|
364
|
+
<auro-pane date="2021-10-27"></auro-pane>
|
|
365
|
+
<auro-pane date="2021-10-28"></auro-pane>
|
|
366
|
+
</auro-carousel>
|
|
367
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
368
|
+
</div>
|
|
369
|
+
<auro-accordion alignRight>
|
|
370
|
+
<span slot="trigger">See code</span>
|
|
371
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/centerElement.html) -->
|
|
372
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/centerElement.html -->
|
|
373
|
+
|
|
374
|
+
```html
|
|
375
|
+
<auro-carousel label="Flight options" id="centerElement">
|
|
376
|
+
<auro-pane date="2021-10-01"></auro-pane>
|
|
377
|
+
<auro-pane date="2021-10-02"></auro-pane>
|
|
378
|
+
<auro-pane date="2021-10-03"></auro-pane>
|
|
379
|
+
<auro-pane date="2021-10-04"></auro-pane>
|
|
380
|
+
<auro-pane date="2021-10-05"></auro-pane>
|
|
381
|
+
<auro-pane date="2021-10-06"></auro-pane>
|
|
382
|
+
<auro-pane date="2021-10-07"></auro-pane>
|
|
383
|
+
<auro-pane date="2021-10-08"></auro-pane>
|
|
384
|
+
<auro-pane date="2021-10-09"></auro-pane>
|
|
385
|
+
<auro-pane date="2021-10-10"></auro-pane>
|
|
386
|
+
<auro-pane date="2021-10-11"></auro-pane>
|
|
387
|
+
<auro-pane date="2021-10-12" selected></auro-pane>
|
|
388
|
+
<auro-pane date="2021-10-13"></auro-pane>
|
|
389
|
+
<auro-pane date="2021-10-14"></auro-pane>
|
|
390
|
+
<auro-pane date="2021-10-15"></auro-pane>
|
|
391
|
+
<auro-pane date="2021-10-16"></auro-pane>
|
|
392
|
+
<auro-pane date="2021-10-17"></auro-pane>
|
|
393
|
+
<auro-pane date="2021-10-18"></auro-pane>
|
|
394
|
+
<auro-pane date="2021-10-19"></auro-pane>
|
|
395
|
+
<auro-pane date="2021-10-20"></auro-pane>
|
|
396
|
+
<auro-pane date="2021-10-21"></auro-pane>
|
|
397
|
+
<auro-pane date="2021-10-22"></auro-pane>
|
|
398
|
+
<auro-pane date="2021-10-23"></auro-pane>
|
|
399
|
+
<auro-pane date="2021-10-24"></auro-pane>
|
|
400
|
+
<auro-pane date="2021-10-25"></auro-pane>
|
|
401
|
+
<auro-pane date="2021-10-26"></auro-pane>
|
|
402
|
+
<auro-pane date="2021-10-27"></auro-pane>
|
|
403
|
+
<auro-pane date="2021-10-28"></auro-pane>
|
|
404
|
+
</auro-carousel>
|
|
405
|
+
```
|
|
406
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
407
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/centerElement.js) -->
|
|
408
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/centerElement.js -->
|
|
409
|
+
|
|
410
|
+
```js
|
|
411
|
+
// Vanilla JS example
|
|
412
|
+
// -------------------------
|
|
413
|
+
|
|
414
|
+
export function centerElementExample() {
|
|
415
|
+
const carousel = document.querySelector("auro-carousel#centerElement");
|
|
416
|
+
const panes = carousel.querySelectorAll("auro-pane");
|
|
417
|
+
let selectedPane = carousel.querySelector("auro-pane[selected]");
|
|
418
|
+
|
|
419
|
+
panes.forEach((pane) =>
|
|
420
|
+
pane.addEventListener("click", () => {
|
|
421
|
+
selectedPane.selected = false;
|
|
422
|
+
pane.selected = true;
|
|
423
|
+
selectedPane = pane;
|
|
424
|
+
carousel.centerElement(selectedPane);
|
|
425
|
+
}),
|
|
426
|
+
);
|
|
427
|
+
}
|
|
428
|
+
```
|
|
429
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
430
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/centerElementReact.js) -->
|
|
431
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/centerElementReact.js -->
|
|
432
|
+
|
|
433
|
+
```js
|
|
434
|
+
// React example
|
|
435
|
+
// -------------------------
|
|
436
|
+
|
|
437
|
+
const days = [...Array(28).keys()];
|
|
438
|
+
|
|
439
|
+
<auro-carousel label="Flight options" ref={this.centerCarouselRef}>
|
|
440
|
+
{days.map((day, idx) => (
|
|
441
|
+
//biome-ignore lint: not going to change the onclick event
|
|
442
|
+
<auro-pane
|
|
443
|
+
key={day}
|
|
444
|
+
date={`2021-10-${(day + 1).toString().padStart(2, 0)}`}
|
|
445
|
+
selected={this.state.centerSelectedDay === idx ? true : undefined}
|
|
446
|
+
onClick={({ target }) => {
|
|
447
|
+
this.setState({ centerSelectedDay: idx });
|
|
448
|
+
this.centerCarouselRef.current.centerElement(target);
|
|
449
|
+
}}
|
|
450
|
+
/>
|
|
451
|
+
))}
|
|
452
|
+
</auro-carousel>;
|
|
453
|
+
```
|
|
454
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
455
|
+
</auro-accordion>
|
|
456
|
+
|
|
457
|
+
### Events
|
|
458
|
+
|
|
459
|
+
#### <a name="scrollLeft"></a>`scrollLeft`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
|
|
460
|
+
When the guest clicks the 'left' carousel button.
|
|
461
|
+
|
|
462
|
+
#### <a name="scrollRight"></a>`scrollRight`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
|
|
463
|
+
When the guest clicks the 'right' carousel button.
|
|
464
|
+
|
|
465
|
+
</auro-accordion>
|
|
466
|
+
|
|
467
|
+
### Slot Example
|
|
468
|
+
|
|
469
|
+
#### default
|
|
470
|
+
|
|
471
|
+
Used for all elements inside the scrolling carousel.
|
|
472
|
+
|
|
473
|
+
<div class="exampleWrapper">
|
|
474
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
475
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
476
|
+
<auro-carousel centerSelected>
|
|
477
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
478
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
479
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
480
|
+
<auro-pane date="2020-10-13" selected price="$666"></auro-pane>
|
|
481
|
+
<auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
|
|
482
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
483
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
484
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
485
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
486
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
487
|
+
</auro-carousel>
|
|
488
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
489
|
+
</div>
|
|
490
|
+
<auro-accordion alignRight>
|
|
491
|
+
<span slot="trigger">See code</span>
|
|
492
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
493
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
494
|
+
|
|
495
|
+
```html
|
|
496
|
+
<auro-carousel centerSelected>
|
|
497
|
+
<auro-pane date="2020-10-10" price="$435"></auro-pane>
|
|
498
|
+
<auro-pane date="2020-10-11" price="$435"></auro-pane>
|
|
499
|
+
<auro-pane date="2020-10-12" price="$435"></auro-pane>
|
|
500
|
+
<auro-pane date="2020-10-13" selected price="$666"></auro-pane>
|
|
501
|
+
<auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
|
|
502
|
+
<auro-pane date="2020-10-15" price="$435"></auro-pane>
|
|
503
|
+
<auro-pane date="2020-10-16" price="$435"></auro-pane>
|
|
504
|
+
<auro-pane date="2020-10-17" price="$435"></auro-pane>
|
|
505
|
+
<auro-pane date="2020-10-18" price="$435"></auro-pane>
|
|
506
|
+
<auro-pane date="2020-10-19" price="$435"></auro-pane>
|
|
507
|
+
</auro-carousel>
|
|
508
|
+
```
|
|
509
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
510
|
+
</auro-accordion>
|
|
511
|
+
|
|
512
|
+
### Theme Support
|
|
513
|
+
|
|
514
|
+
The component may be restyled using the following code sample and changing the values of the following token(s).
|
|
515
|
+
|
|
516
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
517
|
+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
518
|
+
|
|
519
|
+
```scss
|
|
520
|
+
@use "./../node_modules/@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
521
|
+
|
|
522
|
+
:host {
|
|
523
|
+
--ds-auro-carousel-gradient-color-one: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
|
|
524
|
+
--ds-auro-carousel-gradient-color-two: transparent;
|
|
525
|
+
}
|
|
526
|
+
```
|
|
527
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
package/demo/api.min.js
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { A as AuroCarousel } from './auro-carousel.min.js';
|
|
2
|
+
|
|
3
|
+
// Vanilla JS example
|
|
4
|
+
// -------------------------
|
|
5
|
+
|
|
6
|
+
function centerElementExample() {
|
|
7
|
+
const carousel = document.querySelector("auro-carousel#centerElement");
|
|
8
|
+
const panes = carousel.querySelectorAll("auro-pane");
|
|
9
|
+
let selectedPane = carousel.querySelector("auro-pane[selected]");
|
|
10
|
+
|
|
11
|
+
panes.forEach((pane) =>
|
|
12
|
+
pane.addEventListener("click", () => {
|
|
13
|
+
selectedPane.selected = false;
|
|
14
|
+
pane.selected = true;
|
|
15
|
+
selectedPane = pane;
|
|
16
|
+
carousel.centerElement(selectedPane);
|
|
17
|
+
}),
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
AuroCarousel.register();
|
|
22
|
+
|
|
23
|
+
function initExamples(initCount) {
|
|
24
|
+
//biome-ignore lint: going to refactor this file later
|
|
25
|
+
initCount = initCount || 0;
|
|
26
|
+
|
|
27
|
+
try {
|
|
28
|
+
centerElementExample();
|
|
29
|
+
} catch {
|
|
30
|
+
if (initCount <= 20) {
|
|
31
|
+
// setTimeout handles issue where content is sometimes loaded after the functions get called
|
|
32
|
+
setTimeout(() => {
|
|
33
|
+
initExamples(initCount + 1);
|
|
34
|
+
}, 100);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export { initExamples };
|