@aurodesignsystem-dev/auro-loader 0.0.0-pr100.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 +269 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +135 -0
- package/demo/api.html +56 -0
- package/demo/api.js +1 -0
- package/demo/api.md +349 -0
- package/demo/api.min.js +3 -0
- package/demo/auro-loader.min.js +331 -0
- package/demo/index.html +56 -0
- package/demo/index.js +4 -0
- package/demo/index.md +48 -0
- package/demo/index.min.js +4 -0
- package/dist/auro-loader-BcZn60oi.js +17 -0
- package/dist/index.d.ts +214 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +88 -0
package/demo/api.md
ADDED
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-loader
|
|
5
|
+
|
|
6
|
+
The `auro-loader` element displays a loading animation to indicate a loading state to users.
|
|
7
|
+
|
|
8
|
+
### Properties & Attributes
|
|
9
|
+
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| ---------- | ---------- | --------- | --------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
12
|
+
| appearance | appearance | | `default` \| `inverse` \| `brand` | `default` | Defines whether the loader is intended for lighter or darker backgrounds, or if it should use the brand color regardless of the background. |
|
|
13
|
+
| laser | laser | | boolean | | Sets loader to laser type. |
|
|
14
|
+
| lg | lg | | boolean | | Sets size to large. |
|
|
15
|
+
| md | md | | boolean | | Sets size to medium. |
|
|
16
|
+
| onDark | onDark | | boolean | | DEPRECATED - use `appearance="inverse"`. |
|
|
17
|
+
| onLight | onLight | | boolean | | DEPRECATED - use `appearance="brand"`. |
|
|
18
|
+
| orbit | orbit | | boolean | | Sets loader to orbit type. |
|
|
19
|
+
| pulse | pulse | | boolean | | Sets loader to pulse type. |
|
|
20
|
+
| ringworm | ringworm | | boolean | | Sets loader to ringworm type. |
|
|
21
|
+
| sm | sm | | boolean | | Sets size to small. |
|
|
22
|
+
| xs | xs | | boolean | | Sets size to extra small. |
|
|
23
|
+
|
|
24
|
+
### Methods
|
|
25
|
+
|
|
26
|
+
| Name | Parameters | Return | Description |
|
|
27
|
+
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
28
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
29
|
+
|
|
30
|
+
### Slots
|
|
31
|
+
|
|
32
|
+
| Name | Description |
|
|
33
|
+
| --------- | ------------------------------------------------------------------------------------------------------------------- |
|
|
34
|
+
| (default) | Default slot for text that replaces `auro-loader` component when user has the "Reduce Motion" a11y feature enabled. |
|
|
35
|
+
|
|
36
|
+
### CSS Shadow Parts
|
|
37
|
+
|
|
38
|
+
| Name | Description |
|
|
39
|
+
| ------- | ----------------------------------------- |
|
|
40
|
+
| element | Apply style to adjust speed of animation. |
|
|
41
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
42
|
+
|
|
43
|
+
## Basic Loaders
|
|
44
|
+
|
|
45
|
+
The following example illustrates the different loader types that the `<auro-loader>` element supports. The `laser` example is shown at the top of the page due to its fixed positioning.
|
|
46
|
+
|
|
47
|
+
<div class="exampleWrapper">
|
|
48
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
49
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
50
|
+
<auro-loader ringworm></auro-loader>
|
|
51
|
+
<auro-loader orbit></auro-loader>
|
|
52
|
+
<auro-loader pulse></auro-loader>
|
|
53
|
+
<auro-loader laser></auro-loader>
|
|
54
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
55
|
+
</div>
|
|
56
|
+
<auro-accordion alignRight>
|
|
57
|
+
<span slot="trigger">See code</span>
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
59
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
60
|
+
|
|
61
|
+
```html
|
|
62
|
+
<auro-loader ringworm></auro-loader>
|
|
63
|
+
<auro-loader orbit></auro-loader>
|
|
64
|
+
<auro-loader pulse></auro-loader>
|
|
65
|
+
<auro-loader laser></auro-loader>
|
|
66
|
+
```
|
|
67
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
68
|
+
</auro-accordion>
|
|
69
|
+
|
|
70
|
+
## Property & Attribute Examples
|
|
71
|
+
|
|
72
|
+
### Appearance
|
|
73
|
+
|
|
74
|
+
The `<auro-loader>` element supports three appearance options via the `appearance` attribute. Options are `default`, `inverse` and `brand`.
|
|
75
|
+
|
|
76
|
+
**Note**: Type `laser` is supported, but not shown due to fixed positioning.
|
|
77
|
+
|
|
78
|
+
#### Brand
|
|
79
|
+
|
|
80
|
+
Use the `appearance="brand"` attribute for a brand color. Type `laser` is supported, but not shown due to fixed positioning.
|
|
81
|
+
|
|
82
|
+
<div class="exampleWrapper">
|
|
83
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/brand-appearance.html) -->
|
|
84
|
+
<!-- The below content is automatically added from ../apiExamples/brand-appearance.html -->
|
|
85
|
+
<auro-loader ringworm appearance="brand"></auro-loader>
|
|
86
|
+
<auro-loader orbit appearance="brand"></auro-loader>
|
|
87
|
+
<auro-loader pulse appearance="brand"></auro-loader>
|
|
88
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
89
|
+
</div>
|
|
90
|
+
<auro-accordion alignRight>
|
|
91
|
+
<span slot="trigger">See code</span>
|
|
92
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/brand-appearance.html) -->
|
|
93
|
+
<!-- The below code snippet is automatically added from ../apiExamples/brand-appearance.html -->
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<auro-loader ringworm appearance="brand"></auro-loader>
|
|
97
|
+
<auro-loader orbit appearance="brand"></auro-loader>
|
|
98
|
+
<auro-loader pulse appearance="brand"></auro-loader>
|
|
99
|
+
```
|
|
100
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
101
|
+
</auro-accordion>
|
|
102
|
+
|
|
103
|
+
#### Inverse
|
|
104
|
+
|
|
105
|
+
Use the `appearance="inverse"` attribute for a pre-defined color.
|
|
106
|
+
|
|
107
|
+
<div class="exampleWrapper--ondark">
|
|
108
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/inverse-appearance.html) -->
|
|
109
|
+
<!-- The below content is automatically added from ../apiExamples/inverse-appearance.html -->
|
|
110
|
+
<auro-loader ringworm appearance="inverse"></auro-loader>
|
|
111
|
+
<auro-loader orbit appearance="inverse"></auro-loader>
|
|
112
|
+
<auro-loader pulse appearance="inverse"></auro-loader>
|
|
113
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
114
|
+
</div>
|
|
115
|
+
<auro-accordion alignRight>
|
|
116
|
+
<span slot="trigger">See code</span>
|
|
117
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/inverse-appearance.html) -->
|
|
118
|
+
<!-- The below code snippet is automatically added from ../apiExamples/inverse-appearance.html -->
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<auro-loader ringworm appearance="inverse"></auro-loader>
|
|
122
|
+
<auro-loader orbit appearance="inverse"></auro-loader>
|
|
123
|
+
<auro-loader pulse appearance="inverse"></auro-loader>
|
|
124
|
+
```
|
|
125
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
126
|
+
</auro-accordion>
|
|
127
|
+
|
|
128
|
+
### Size
|
|
129
|
+
|
|
130
|
+
The `<auro-loader>` element supports a scale of sizes. Options are `[xs, sm, md, lg]`.
|
|
131
|
+
|
|
132
|
+
**Note**: Type `laser` does not support a size attribute.
|
|
133
|
+
|
|
134
|
+
#### Extra Small
|
|
135
|
+
|
|
136
|
+
Use the `xs` boolean attribute for a pre-defined size.
|
|
137
|
+
|
|
138
|
+
<div class="exampleWrapper">
|
|
139
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/xs.html) -->
|
|
140
|
+
<!-- The below content is automatically added from ../apiExamples/xs.html -->
|
|
141
|
+
<auro-loader ringworm xs></auro-loader>
|
|
142
|
+
<auro-loader orbit xs></auro-loader>
|
|
143
|
+
<auro-loader pulse xs></auro-loader>
|
|
144
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
145
|
+
</div>
|
|
146
|
+
<auro-accordion alignRight>
|
|
147
|
+
<span slot="trigger">See code</span>
|
|
148
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/xs.html) -->
|
|
149
|
+
<!-- The below code snippet is automatically added from ../apiExamples/xs.html -->
|
|
150
|
+
|
|
151
|
+
```html
|
|
152
|
+
<auro-loader ringworm xs></auro-loader>
|
|
153
|
+
<auro-loader orbit xs></auro-loader>
|
|
154
|
+
<auro-loader pulse xs></auro-loader>
|
|
155
|
+
```
|
|
156
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
157
|
+
</auro-accordion>
|
|
158
|
+
|
|
159
|
+
#### Small
|
|
160
|
+
|
|
161
|
+
Use the `sm` boolean attribute for a pre-defined size.
|
|
162
|
+
|
|
163
|
+
<div class="exampleWrapper">
|
|
164
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/sm.html) -->
|
|
165
|
+
<!-- The below content is automatically added from ../apiExamples/sm.html -->
|
|
166
|
+
<auro-loader ringworm sm></auro-loader>
|
|
167
|
+
<auro-loader orbit sm></auro-loader>
|
|
168
|
+
<auro-loader pulse sm></auro-loader>
|
|
169
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
170
|
+
</div>
|
|
171
|
+
<auro-accordion alignRight>
|
|
172
|
+
<span slot="trigger">See code</span>
|
|
173
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/sm.html) -->
|
|
174
|
+
<!-- The below code snippet is automatically added from ../apiExamples/sm.html -->
|
|
175
|
+
|
|
176
|
+
```html
|
|
177
|
+
<auro-loader ringworm sm></auro-loader>
|
|
178
|
+
<auro-loader orbit sm></auro-loader>
|
|
179
|
+
<auro-loader pulse sm></auro-loader>
|
|
180
|
+
```
|
|
181
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
182
|
+
</auro-accordion>
|
|
183
|
+
|
|
184
|
+
#### Medium
|
|
185
|
+
|
|
186
|
+
Use the `md` boolean attribute for a pre-defined size.
|
|
187
|
+
|
|
188
|
+
<div class="exampleWrapper">
|
|
189
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/md.html) -->
|
|
190
|
+
<!-- The below content is automatically added from ../apiExamples/md.html -->
|
|
191
|
+
<auro-loader ringworm md></auro-loader>
|
|
192
|
+
<auro-loader orbit md></auro-loader>
|
|
193
|
+
<auro-loader pulse md></auro-loader>
|
|
194
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
195
|
+
</div>
|
|
196
|
+
<auro-accordion alignRight>
|
|
197
|
+
<span slot="trigger">See code</span>
|
|
198
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/md.html) -->
|
|
199
|
+
<!-- The below code snippet is automatically added from ../apiExamples/md.html -->
|
|
200
|
+
|
|
201
|
+
```html
|
|
202
|
+
<auro-loader ringworm md></auro-loader>
|
|
203
|
+
<auro-loader orbit md></auro-loader>
|
|
204
|
+
<auro-loader pulse md></auro-loader>
|
|
205
|
+
```
|
|
206
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
207
|
+
</auro-accordion>
|
|
208
|
+
|
|
209
|
+
#### Large
|
|
210
|
+
|
|
211
|
+
Use the `lg` boolean attribute for a pre-defined size.
|
|
212
|
+
|
|
213
|
+
<div class="exampleWrapper">
|
|
214
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/lg.html) -->
|
|
215
|
+
<!-- The below content is automatically added from ../apiExamples/lg.html -->
|
|
216
|
+
<auro-loader ringworm lg></auro-loader>
|
|
217
|
+
<auro-loader orbit lg></auro-loader>
|
|
218
|
+
<auro-loader pulse lg></auro-loader>
|
|
219
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
220
|
+
</div>
|
|
221
|
+
<auro-accordion alignRight>
|
|
222
|
+
<span slot="trigger">See code</span>
|
|
223
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/lg.html) -->
|
|
224
|
+
<!-- The below code snippet is automatically added from ../apiExamples/lg.html -->
|
|
225
|
+
|
|
226
|
+
```html
|
|
227
|
+
<auro-loader ringworm lg></auro-loader>
|
|
228
|
+
<auro-loader orbit lg></auro-loader>
|
|
229
|
+
<auro-loader pulse lg></auro-loader>
|
|
230
|
+
```
|
|
231
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
232
|
+
</auro-accordion>
|
|
233
|
+
|
|
234
|
+
## Slot Examples
|
|
235
|
+
|
|
236
|
+
### Static Label
|
|
237
|
+
|
|
238
|
+
Use the `staticLabel` slot to provide custom text that replaces the `auro-loader` component when the user has the `prefers-reduced-motion` accessibility feature enabled.
|
|
239
|
+
The default text is `Loading...`
|
|
240
|
+
|
|
241
|
+
In order to see the example in action, please enable your system's "Reduce Motion" accessibility setting.
|
|
242
|
+
|
|
243
|
+
<div class="exampleWrapper">
|
|
244
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/static-label.html) -->
|
|
245
|
+
<!-- The below content is automatically added from ../apiExamples/static-label.html -->
|
|
246
|
+
<auro-loader ringworm>Ringworm</auro-loader>
|
|
247
|
+
<auro-loader orbit>Orbit</auro-loader>
|
|
248
|
+
<auro-loader pulse>Pulse</auro-loader>
|
|
249
|
+
<auro-loader laser>Laser</auro-loader>
|
|
250
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
251
|
+
</div>
|
|
252
|
+
<auro-accordion alignRight>
|
|
253
|
+
<span slot="trigger">See code</span>
|
|
254
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/static-label.html) -->
|
|
255
|
+
<!-- The below code snippet is automatically added from ../apiExamples/static-label.html -->
|
|
256
|
+
|
|
257
|
+
```html
|
|
258
|
+
<auro-loader ringworm>Ringworm</auro-loader>
|
|
259
|
+
<auro-loader orbit>Orbit</auro-loader>
|
|
260
|
+
<auro-loader pulse>Pulse</auro-loader>
|
|
261
|
+
<auro-loader laser>Laser</auro-loader>
|
|
262
|
+
```
|
|
263
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
264
|
+
</auro-accordion>
|
|
265
|
+
|
|
266
|
+
## CSS Shadow Part Examples
|
|
267
|
+
|
|
268
|
+
### Element
|
|
269
|
+
|
|
270
|
+
Use the `::part(element)` with your CSS as illustrated to effect things like the speed of the animation.
|
|
271
|
+
|
|
272
|
+
<div class="exampleWrapper">
|
|
273
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom-speed.html) -->
|
|
274
|
+
<!-- The below content is automatically added from ../apiExamples/custom-speed.html -->
|
|
275
|
+
<style>
|
|
276
|
+
.slow::part(element) {
|
|
277
|
+
animation-duration: 8s;
|
|
278
|
+
}
|
|
279
|
+
.fast::part(element) {
|
|
280
|
+
animation-duration: 1s;
|
|
281
|
+
}
|
|
282
|
+
</style>
|
|
283
|
+
<auro-loader class="slow" orbit md></auro-loader>
|
|
284
|
+
<auro-loader class="fast" orbit lg></auro-loader>
|
|
285
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
286
|
+
</div>
|
|
287
|
+
<auro-accordion alignRight>
|
|
288
|
+
<span slot="trigger">See code</span>
|
|
289
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-speed.html) -->
|
|
290
|
+
<!-- The below code snippet is automatically added from ../apiExamples/custom-speed.html -->
|
|
291
|
+
|
|
292
|
+
```html
|
|
293
|
+
<style>
|
|
294
|
+
.slow::part(element) {
|
|
295
|
+
animation-duration: 8s;
|
|
296
|
+
}
|
|
297
|
+
.fast::part(element) {
|
|
298
|
+
animation-duration: 1s;
|
|
299
|
+
}
|
|
300
|
+
</style>
|
|
301
|
+
<auro-loader class="slow" orbit md></auro-loader>
|
|
302
|
+
<auro-loader class="fast" orbit lg></auro-loader>
|
|
303
|
+
```
|
|
304
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
305
|
+
</auro-accordion>
|
|
306
|
+
|
|
307
|
+
## Common Usage Patterns & Functional Examples
|
|
308
|
+
|
|
309
|
+
### Custom Color Support
|
|
310
|
+
|
|
311
|
+
The `<auro-loader>` element supports any custom color defined at the root level of the element.
|
|
312
|
+
|
|
313
|
+
<div class="exampleWrapper">
|
|
314
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom-color.html) -->
|
|
315
|
+
<!-- The below content is automatically added from ../apiExamples/custom-color.html -->
|
|
316
|
+
<auro-loader style="color: var(--ds-color-brand-tropical-300)" ringworm md></auro-loader>
|
|
317
|
+
<auro-loader style="color: var(--ds-color-brand-goldcoast-300)" orbit md></auro-loader>
|
|
318
|
+
<auro-loader style="color: var(--ds-color-brand-alpine-400)" pulse md></auro-loader>
|
|
319
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
320
|
+
</div>
|
|
321
|
+
<auro-accordion alignRight>
|
|
322
|
+
<span slot="trigger">See code</span>
|
|
323
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom-color.html) -->
|
|
324
|
+
<!-- The below code snippet is automatically added from ../apiExamples/custom-color.html -->
|
|
325
|
+
|
|
326
|
+
```html
|
|
327
|
+
<auro-loader style="color: var(--ds-color-brand-tropical-300)" ringworm md></auro-loader>
|
|
328
|
+
<auro-loader style="color: var(--ds-color-brand-goldcoast-300)" orbit md></auro-loader>
|
|
329
|
+
<auro-loader style="color: var(--ds-color-brand-alpine-400)" pulse md></auro-loader>
|
|
330
|
+
```
|
|
331
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
332
|
+
</auro-accordion>
|
|
333
|
+
|
|
334
|
+
## Restyle Component with CSS Variables
|
|
335
|
+
|
|
336
|
+
The component may be restyled by changing the values of the following token(s).
|
|
337
|
+
|
|
338
|
+
<!-- Remove section if component does not have any component specific tokens -->
|
|
339
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
340
|
+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
341
|
+
|
|
342
|
+
```scss
|
|
343
|
+
:host {
|
|
344
|
+
--ds-auro-loader-background-color: currentcolor;
|
|
345
|
+
--ds-auro-loader-border-color: currentcolor;
|
|
346
|
+
--ds-auro-loader-color: currentcolor;
|
|
347
|
+
}
|
|
348
|
+
```
|
|
349
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
package/demo/api.min.js
ADDED