@aurodesignsystem-dev/auro-loader 0.0.0-pr68.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.
Files changed (18) hide show
  1. package/CHANGELOG.md +269 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +152 -0
  5. package/demo/api.html +56 -0
  6. package/demo/api.js +1 -0
  7. package/demo/api.md +348 -0
  8. package/demo/api.min.js +3 -0
  9. package/demo/auro-loader.min.js +244 -0
  10. package/demo/index.html +56 -0
  11. package/demo/index.js +4 -0
  12. package/demo/index.md +221 -0
  13. package/demo/index.min.js +4 -0
  14. package/dist/auro-loader-CsnGchTw.js +15 -0
  15. package/dist/index.d.ts +19 -0
  16. package/dist/index.js +1 -0
  17. package/dist/registered.js +1 -0
  18. package/package.json +80 -0
package/demo/api.html ADDED
@@ -0,0 +1,56 @@
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-loader</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-loader'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" src="./api.min.js"></script>
52
+
53
+ <!-- If additional elements are needed for the demo, add them here. -->
54
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
55
+ </body>
56
+ </html>
package/demo/api.js ADDED
@@ -0,0 +1 @@
1
+ import "../src/registered";
package/demo/api.md ADDED
@@ -0,0 +1,348 @@
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 is an easy to use animated loader component.
7
+
8
+ ## Attributes
9
+
10
+ | Attribute | Type | Description |
11
+ |-----------|-----------|---------------------------------------------|
12
+ | [lg](#lg) | `Boolean` | Sets size to large. |
13
+ | [md](#md) | `Boolean` | Sets size to medium. |
14
+ | [ondark](#ondark) | `Boolean` | Sets color of loader for dark backgrounds. |
15
+ | [onlight](#onlight) | `Boolean` | sets color of loader for light backgrounds. |
16
+ | [sm](#sm) | `Boolean` | Sets size to small. |
17
+ | [xs](#xs) | `Boolean` | Sets size to extra small. |
18
+
19
+ ## Properties
20
+
21
+ | Property | Attribute | Type | Default | Description |
22
+ |------------|------------|-----------|---------|-------------------------------|
23
+ | [laser](#laser) | `laser` | `boolean` | false | Sets loader to laser type. |
24
+ | [orbit](#orbit) | `orbit` | `boolean` | false | Sets loader to orbit type. |
25
+ | [pulse](#pulse) | `pulse` | `boolean` | false | Sets loader to pulse type. |
26
+ | [ringworm](#ringworm) | `ringworm` | `boolean` | false | Sets loader to ringworm type. |
27
+
28
+ ## CSS Shadow Parts
29
+
30
+ | Part | Description |
31
+ |-----------|-------------------------------------------|
32
+ | [element](#element) | Apply style to adjust speed of animation. |
33
+ <!-- AURO-GENERATED-CONTENT:END -->
34
+
35
+ ## API Examples
36
+
37
+ ### Default examples
38
+
39
+ The following illustrates the use of the base elements with default output. The `laser` example is shown at the top of the page due to its fixed positioning.
40
+
41
+ <div class="exampleWrapper">
42
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
43
+ <!-- The below content is automatically added from ../apiExamples/basic.html -->
44
+ <auro-loader ringworm></auro-loader>
45
+ <auro-loader orbit></auro-loader>
46
+ <auro-loader pulse></auro-loader>
47
+ <auro-loader laser></auro-loader>
48
+ <!-- AURO-GENERATED-CONTENT:END -->
49
+ </div>
50
+ <auro-accordion alignRight>
51
+ <span slot="trigger">See code</span>
52
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
53
+ <!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
54
+
55
+ ```html
56
+ <auro-loader ringworm></auro-loader>
57
+ <auro-loader orbit></auro-loader>
58
+ <auro-loader pulse></auro-loader>
59
+ <auro-loader laser></auro-loader>
60
+ ```
61
+ <!-- AURO-GENERATED-CONTENT:END -->
62
+ </auro-accordion>
63
+
64
+ ### Attribute Examples
65
+
66
+ #### <a name="xs"></a>`xs`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
67
+ Use the `xs` boolean attribute for a pre-defined size. Type `laser` does not support a size attribute.
68
+
69
+ <div class="exampleWrapper">
70
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_xs.html) -->
71
+ <!-- The below content is automatically added from ../apiExamples/api_xs.html -->
72
+ <auro-loader ringworm xs></auro-loader>
73
+ <auro-loader orbit xs></auro-loader>
74
+ <auro-loader pulse xs></auro-loader>
75
+ <!-- AURO-GENERATED-CONTENT:END -->
76
+ </div>
77
+ <auro-accordion alignRight>
78
+ <span slot="trigger">See code</span>
79
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_xs.html) -->
80
+ <!-- The below code snippet is automatically added from ../apiExamples/api_xs.html -->
81
+
82
+ ```html
83
+ <auro-loader ringworm xs></auro-loader>
84
+ <auro-loader orbit xs></auro-loader>
85
+ <auro-loader pulse xs></auro-loader>
86
+ ```
87
+ <!-- AURO-GENERATED-CONTENT:END -->
88
+ </auro-accordion>
89
+
90
+ #### <a name="sm"></a>`sm`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
91
+ Use the `sm` boolean attribute for a pre-defined size. Type `laser` does not support a size attribute.
92
+
93
+ <div class="exampleWrapper">
94
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_small.html) -->
95
+ <!-- The below content is automatically added from ../apiExamples/api_small.html -->
96
+ <auro-loader ringworm sm></auro-loader>
97
+ <auro-loader orbit sm></auro-loader>
98
+ <auro-loader pulse sm></auro-loader>
99
+ <!-- AURO-GENERATED-CONTENT:END -->
100
+ </div>
101
+ <auro-accordion alignRight>
102
+ <span slot="trigger">See code</span>
103
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_small.html) -->
104
+ <!-- The below code snippet is automatically added from ../apiExamples/api_small.html -->
105
+
106
+ ```html
107
+ <auro-loader ringworm sm></auro-loader>
108
+ <auro-loader orbit sm></auro-loader>
109
+ <auro-loader pulse sm></auro-loader>
110
+ ```
111
+ <!-- AURO-GENERATED-CONTENT:END -->
112
+ </auro-accordion>
113
+
114
+ #### <a name="md"></a>`md`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
115
+ Use the `md` boolean attribute for a pre-defined size. Type `laser` does not support a size attribute.
116
+
117
+ <div class="exampleWrapper">
118
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_medium.html) -->
119
+ <!-- The below content is automatically added from ../apiExamples/api_medium.html -->
120
+ <auro-loader ringworm md></auro-loader>
121
+ <auro-loader orbit md></auro-loader>
122
+ <auro-loader pulse md></auro-loader>
123
+ <!-- AURO-GENERATED-CONTENT:END -->
124
+ </div>
125
+ <auro-accordion alignRight>
126
+ <span slot="trigger">See code</span>
127
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_medium.html) -->
128
+ <!-- The below code snippet is automatically added from ../apiExamples/api_medium.html -->
129
+
130
+ ```html
131
+ <auro-loader ringworm md></auro-loader>
132
+ <auro-loader orbit md></auro-loader>
133
+ <auro-loader pulse md></auro-loader>
134
+ ```
135
+ <!-- AURO-GENERATED-CONTENT:END -->
136
+ </auro-accordion>
137
+
138
+ #### <a name="lg"></a>`lg`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
139
+ Use the `lg` boolean attribute for a pre-defined size. Type `laser` does not support a size attribute.
140
+
141
+ <div class="exampleWrapper">
142
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api_large.html) -->
143
+ <!-- The below content is automatically added from ../apiExamples/api_large.html -->
144
+ <auro-loader ringworm lg></auro-loader>
145
+ <auro-loader orbit lg></auro-loader>
146
+ <auro-loader pulse lg></auro-loader>
147
+ <!-- AURO-GENERATED-CONTENT:END -->
148
+ </div>
149
+ <auro-accordion alignRight>
150
+ <span slot="trigger">See code</span>
151
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api_large.html) -->
152
+ <!-- The below code snippet is automatically added from ../apiExamples/api_large.html -->
153
+
154
+ ```html
155
+ <auro-loader ringworm lg></auro-loader>
156
+ <auro-loader orbit lg></auro-loader>
157
+ <auro-loader pulse lg></auro-loader>
158
+ ```
159
+ <!-- AURO-GENERATED-CONTENT:END -->
160
+ </auro-accordion>
161
+
162
+ #### <a name="onlight"></a>`onlight`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
163
+ Use the `onlight` boolean attribute for a pre-defined color. Type `laser` is supported, but not shown due to fixed positioning.
164
+
165
+ <div class="exampleWrapper">
166
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/onlight.html) -->
167
+ <!-- The below content is automatically added from ../apiExamples/onlight.html -->
168
+ <auro-loader ringworm onLight></auro-loader>
169
+ <auro-loader orbit onLight></auro-loader>
170
+ <auro-loader pulse onLight></auro-loader>
171
+ <!-- AURO-GENERATED-CONTENT:END -->
172
+ </div>
173
+ <auro-accordion alignRight>
174
+ <span slot="trigger">See code</span>
175
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/onlight.html) -->
176
+ <!-- The below code snippet is automatically added from ../apiExamples/onlight.html -->
177
+
178
+ ```html
179
+ <auro-loader ringworm onLight></auro-loader>
180
+ <auro-loader orbit onLight></auro-loader>
181
+ <auro-loader pulse onLight></auro-loader>
182
+ ```
183
+ <!-- AURO-GENERATED-CONTENT:END -->
184
+ </auro-accordion>
185
+
186
+ #### <a name="ondark"></a>`ondark`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
187
+ Use the `ondark` boolean attribute for a pre-defined color. Type `laser` is supported, but not shown due to fixed positioning.
188
+
189
+ <div class="exampleWrapper--ondark">
190
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/ondark.html) -->
191
+ <!-- The below content is automatically added from ../apiExamples/ondark.html -->
192
+ <auro-loader ringworm ondark></auro-loader>
193
+ <auro-loader orbit ondark></auro-loader>
194
+ <auro-loader pulse ondark></auro-loader>
195
+ <!-- AURO-GENERATED-CONTENT:END -->
196
+ </div>
197
+ <auro-accordion alignRight>
198
+ <span slot="trigger">See code</span>
199
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/ondark.html) -->
200
+ <!-- The below code snippet is automatically added from ../apiExamples/ondark.html -->
201
+
202
+ ```html
203
+ <auro-loader ringworm ondark></auro-loader>
204
+ <auro-loader orbit ondark></auro-loader>
205
+ <auro-loader pulse ondark></auro-loader>
206
+ ```
207
+ <!-- AURO-GENERATED-CONTENT:END -->
208
+ </auro-accordion>
209
+
210
+ ### Property Examples
211
+
212
+ Use the following `orbit`, `laser`, `ringworm`, and `pulse` properties as illustrated.
213
+
214
+ #### <a name="orbit"></a>`orbit`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
215
+ Use the `orbit` property for the desired animated loader.
216
+
217
+ <div class="exampleWrapper">
218
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/property_orbit.html) -->
219
+ <!-- The below content is automatically added from ../apiExamples/property_orbit.html -->
220
+ <auro-loader orbit></auro-loader>
221
+ <!-- AURO-GENERATED-CONTENT:END -->
222
+ </div>
223
+ <auro-accordion alignRight>
224
+ <span slot="trigger">See code</span>
225
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/property_orbit.html) -->
226
+ <!-- The below code snippet is automatically added from ../apiExamples/property_orbit.html -->
227
+
228
+ ```html
229
+ <auro-loader orbit></auro-loader>
230
+ ```
231
+ <!-- AURO-GENERATED-CONTENT:END -->
232
+ </auro-accordion>
233
+
234
+ #### <a name="laser"></a>`laser`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
235
+ Use the `laser` property for the desired animated loader. Example is shown at the top of the page due its fixed positioning.
236
+
237
+ <div class="exampleWrapper">
238
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/property_laser.html) -->
239
+ <!-- The below content is automatically added from ../apiExamples/property_laser.html -->
240
+ <auro-loader laser></auro-loader>
241
+ <!-- AURO-GENERATED-CONTENT:END -->
242
+ </div>
243
+ <auro-accordion alignRight>
244
+ <span slot="trigger">See code</span>
245
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/property_laser.html) -->
246
+ <!-- The below code snippet is automatically added from ../apiExamples/property_laser.html -->
247
+
248
+ ```html
249
+ <auro-loader laser></auro-loader>
250
+ ```
251
+ <!-- AURO-GENERATED-CONTENT:END -->
252
+ </auro-accordion>
253
+
254
+ #### <a name="pulse"></a>`pulse`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
255
+ Use the `pulse` property for the desired animated loader.
256
+
257
+ <div class="exampleWrapper">
258
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/property_pulse.html) -->
259
+ <!-- The below content is automatically added from ../apiExamples/property_pulse.html -->
260
+ <auro-loader pulse></auro-loader>
261
+ <!-- AURO-GENERATED-CONTENT:END -->
262
+ </div>
263
+ <auro-accordion alignRight>
264
+ <span slot="trigger">See code</span>
265
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/property_pulse.html) -->
266
+ <!-- The below code snippet is automatically added from ../apiExamples/property_pulse.html -->
267
+
268
+ ```html
269
+ <auro-loader pulse></auro-loader>
270
+ ```
271
+ <!-- AURO-GENERATED-CONTENT:END -->
272
+ </auro-accordion>
273
+
274
+ #### <a name="ringworm"></a>`ringworm`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
275
+ Use the `ringworm` property for the desired animated loader.
276
+
277
+ <div class="exampleWrapper">
278
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/property_ringworm.html) -->
279
+ <!-- The below content is automatically added from ../apiExamples/property_ringworm.html -->
280
+ <auro-loader ringworm></auro-loader>
281
+ <!-- AURO-GENERATED-CONTENT:END -->
282
+ </div>
283
+ <auro-accordion alignRight>
284
+ <span slot="trigger">See code</span>
285
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/property_ringworm.html) -->
286
+ <!-- The below code snippet is automatically added from ../apiExamples/property_ringworm.html -->
287
+
288
+ ```html
289
+ <auro-loader ringworm></auro-loader>
290
+ ```
291
+ <!-- AURO-GENERATED-CONTENT:END -->
292
+ </auro-accordion>
293
+
294
+ ### CSS Shadow Parts Examples
295
+
296
+ #### <a name="element"></a>`element`<a href="#" style="float: right; font-size: 1rem; font-weight: 100;">back to top</a>
297
+ Use the `element` CSS Part with your CSS as illustrated to effect things like the speed of the animation.
298
+
299
+ <div class="exampleWrapper">
300
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom_speed.html) -->
301
+ <!-- The below content is automatically added from ../apiExamples/custom_speed.html -->
302
+ <style>
303
+ .slow::part(element) {
304
+ animation-duration: 8s;
305
+ }
306
+ .fast::part(element) {
307
+ animation-duration: 1s;
308
+ }
309
+ </style>
310
+ <auro-loader class="slow" orbit md></auro-loader>
311
+ <auro-loader class="fast" orbit lg></auro-loader>
312
+ <!-- AURO-GENERATED-CONTENT:END -->
313
+ </div>
314
+ <auro-accordion alignRight>
315
+ <span slot="trigger">See code</span>
316
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom_speed.html) -->
317
+ <!-- The below code snippet is automatically added from ../apiExamples/custom_speed.html -->
318
+
319
+ ```html
320
+ <style>
321
+ .slow::part(element) {
322
+ animation-duration: 8s;
323
+ }
324
+ .fast::part(element) {
325
+ animation-duration: 1s;
326
+ }
327
+ </style>
328
+ <auro-loader class="slow" orbit md></auro-loader>
329
+ <auro-loader class="fast" orbit lg></auro-loader>
330
+ ```
331
+ <!-- AURO-GENERATED-CONTENT:END -->
332
+ </auro-accordion>
333
+
334
+ ### Theme Support
335
+
336
+ The component may be restyled using the following code sample and changing the values of the following token(s).
337
+
338
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
339
+ <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
340
+
341
+ ```scss
342
+ :host {
343
+ --ds-auro-loader-background-color: currentcolor;
344
+ --ds-auro-loader-border-color: currentcolor;
345
+ --ds-auro-loader-color: currentcolor;
346
+ }
347
+ ```
348
+ <!-- AURO-GENERATED-CONTENT:END -->
package/demo/api.min.js ADDED
@@ -0,0 +1,3 @@
1
+ import { A as AuroLoader } from './auro-loader.min.js';
2
+
3
+ AuroLoader.register();