@aurodesignsystem-dev/auro-skeleton 0.0.0-pr69.0 → 0.0.0-pr71.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 +45 -57
- package/demo/api.md +133 -30
- package/demo/auro-skeleton.min.js +25 -6
- package/demo/index.md +21 -129
- package/dist/auro-skeleton-DmGY_hvs.js +6 -0
- package/dist/index.d.ts +169 -8
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +8 -7
- package/dist/auro-skeleton-cRSCIPzX.js +0 -6
package/README.md
CHANGED
|
@@ -32,17 +32,17 @@ The `<auro-skeleton>` element uses animation to convey that the page is still lo
|
|
|
32
32
|
<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
|
|
33
33
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
34
34
|
|
|
35
|
-
##
|
|
36
|
-
|
|
37
|
-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
|
|
38
|
-
For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
|
|
35
|
+
## Use Cases
|
|
39
36
|
|
|
37
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
38
|
+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
39
|
+
The `<auro-skeleton>` element can be used on container-based components like `<auro-card>` and other structured lists to indicate loading states.
|
|
40
40
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
41
41
|
|
|
42
42
|
## Install
|
|
43
43
|
|
|
44
44
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
|
|
45
|
-
[](https://github.com/AlaskaAirlines/auro-skeleton/actions/workflows/release.yml)
|
|
46
46
|
[](https://www.npmjs.com/package/@aurodesignsystem/auro-skeleton)
|
|
47
47
|
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
48
48
|
|
|
@@ -53,17 +53,10 @@ $ npm i @aurodesignsystem/auro-skeleton
|
|
|
53
53
|
|
|
54
54
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
55
55
|
|
|
56
|
-
###
|
|
57
|
-
|
|
58
|
-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
|
|
59
|
-
The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
|
|
60
|
-
|
|
61
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
62
|
-
|
|
63
|
-
### Define dependency in project component
|
|
56
|
+
### Define Dependency in Project
|
|
64
57
|
|
|
65
58
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
|
|
66
|
-
Defining the
|
|
59
|
+
Defining the dependency within each project that is using the `<auro-skeleton>` component.
|
|
67
60
|
|
|
68
61
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
69
62
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
@@ -72,19 +65,9 @@ Defining the component dependency within each component that is using the `<auro
|
|
|
72
65
|
import "@aurodesignsystem/auro-skeleton";
|
|
73
66
|
```
|
|
74
67
|
|
|
75
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
76
|
-
**Reference component in HTML**
|
|
77
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
78
|
-
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
79
|
-
|
|
80
|
-
```html
|
|
81
|
-
<auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
|
|
82
|
-
<auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
|
|
83
|
-
<auro-skeleton shape="rectangle" style="width: 400px; height: 300px"></auro-skeleton>
|
|
84
|
-
```
|
|
85
68
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
86
69
|
|
|
87
|
-
|
|
70
|
+
### Use CDN
|
|
88
71
|
|
|
89
72
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
90
73
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
@@ -95,52 +78,57 @@ In cases where the project is not able to process JS assets, there are pre-proce
|
|
|
95
78
|
|
|
96
79
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
97
80
|
|
|
98
|
-
##
|
|
99
|
-
|
|
100
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
101
|
-
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
102
|
-
The `<auro-skeleton>` element can be used on container-based components like `<auro-card>` and other structured lists.
|
|
103
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
104
|
-
|
|
105
|
-
## API Code Examples
|
|
106
|
-
|
|
107
|
-
### Default auro-skeleton
|
|
81
|
+
## Basic Example
|
|
108
82
|
|
|
109
83
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
110
84
|
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
111
85
|
|
|
112
86
|
```html
|
|
113
|
-
<auro-skeleton
|
|
114
|
-
<auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
|
|
115
|
-
<auro-skeleton shape="rectangle" style="width: 400px; height: 300px"></auro-skeleton>
|
|
87
|
+
<auro-skeleton style="width: 400px; height: 300px"></auro-skeleton>
|
|
116
88
|
```
|
|
117
89
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
118
90
|
|
|
119
|
-
##
|
|
91
|
+
## Custom Component Registration for Version Management
|
|
120
92
|
|
|
121
|
-
|
|
122
|
-
|
|
93
|
+
There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
|
|
94
|
+
The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
|
|
123
95
|
|
|
124
|
-
|
|
96
|
+
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
|
|
125
97
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
### Start development environment
|
|
98
|
+
However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
|
|
129
99
|
|
|
130
|
-
|
|
131
|
-
Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
|
|
100
|
+
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
132
101
|
|
|
133
|
-
|
|
134
|
-
|
|
102
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
103
|
+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
104
|
+
|
|
105
|
+
```js
|
|
106
|
+
// Import the class only
|
|
107
|
+
import { AuroSkeleton } from '@aurodesignsystem/auro-skeleton/class';
|
|
108
|
+
|
|
109
|
+
// Register with a custom name if desired
|
|
110
|
+
AuroSkeleton.register('custom-skeleton');
|
|
135
111
|
```
|
|
136
112
|
|
|
137
|
-
|
|
138
|
-
|
|
113
|
+
This will create a new custom element `<custom-skeleton>` that behaves exactly like `<auro-skeleton>`, allowing both to coexist on the same page without interfering with each other.
|
|
139
114
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
115
|
+
<div class="exampleWrapper exampleWrapper--flex">
|
|
116
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
|
117
|
+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
|
|
118
|
+
<custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
|
|
119
|
+
<custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
|
|
120
|
+
<custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
|
|
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/custom.html) -->
|
|
126
|
+
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
|
|
140
127
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
128
|
+
```html
|
|
129
|
+
<custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
|
|
130
|
+
<custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
|
|
131
|
+
<custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
|
|
132
|
+
```
|
|
133
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
134
|
+
</auro-accordion>
|
package/demo/api.md
CHANGED
|
@@ -1,37 +1,62 @@
|
|
|
1
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
2
|
-
<!-- The below content is automatically added from
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
3
|
|
|
4
4
|
# auro-skeleton
|
|
5
5
|
|
|
6
|
-
The auro-skeleton element provides users a way to indicate the loading of asynchronous content on a page.
|
|
6
|
+
The `auro-skeleton` element provides users a way to indicate the loading of asynchronous content on a page.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
### Properties & Attributes
|
|
9
9
|
|
|
10
|
-
|
|
|
11
|
-
|
|
12
|
-
|
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| ---------- | ---------- | --------- | --------------------------------- | ----------- | ------------------------------------------- |
|
|
12
|
+
| shape | shape | | `circle` \| `oval` \| `rectangle` | `rectangle` | Renders a circle, oval, or rectangle loader |
|
|
13
|
+
|
|
14
|
+
### Methods
|
|
15
|
+
|
|
16
|
+
| Name | Parameters | Return | Description |
|
|
17
|
+
| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
18
|
+
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
|
|
13
19
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
14
20
|
|
|
15
|
-
##
|
|
21
|
+
## Basic
|
|
22
|
+
|
|
23
|
+
<div class="exampleWrapper">
|
|
24
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
25
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
26
|
+
<auro-skeleton style="width: 400px; height: 300px"></auro-skeleton>
|
|
27
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
28
|
+
</div>
|
|
29
|
+
<auro-accordion alignRight>
|
|
30
|
+
<span slot="trigger">See code</span>
|
|
31
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
32
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
16
33
|
|
|
17
|
-
|
|
34
|
+
```html
|
|
35
|
+
<auro-skeleton style="width: 400px; height: 300px"></auro-skeleton>
|
|
36
|
+
```
|
|
37
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
38
|
+
</auro-accordion>
|
|
39
|
+
|
|
40
|
+
## Property & Attribute Examples
|
|
18
41
|
|
|
19
|
-
|
|
42
|
+
### Shape
|
|
20
43
|
|
|
21
|
-
The `<auro-skeleton>` element makes use of a single `shape`
|
|
44
|
+
The `<auro-skeleton>` element makes use of a single `shape` to control its appearance. Options are [`circle`, `oval`, `rectangle`].
|
|
45
|
+
|
|
46
|
+
### Circle
|
|
22
47
|
|
|
23
48
|
<div class="exampleWrapper">
|
|
24
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
25
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
49
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api-shape-circle.html) -->
|
|
50
|
+
<!-- The below content is automatically added from ../apiExamples/api-shape-circle.html -->
|
|
26
51
|
<auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
|
|
27
52
|
<auro-skeleton shape="circle" style="width: 100px; height: 100px"></auro-skeleton>
|
|
28
53
|
<auro-skeleton shape="circle" style="width: 300px; height: 300px"></auro-skeleton>
|
|
29
54
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
30
|
-
</div>
|
|
55
|
+
</div>
|
|
31
56
|
<auro-accordion alignRight>
|
|
32
57
|
<span slot="trigger">See code</span>
|
|
33
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
34
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api-shape-circle.html) -->
|
|
59
|
+
<!-- The below code snippet is automatically added from ../apiExamples/api-shape-circle.html -->
|
|
35
60
|
|
|
36
61
|
```html
|
|
37
62
|
<auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
|
|
@@ -40,18 +65,21 @@ The `<auro-skeleton>` element makes use of a single `shape` enumerated attribute
|
|
|
40
65
|
```
|
|
41
66
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
42
67
|
</auro-accordion>
|
|
68
|
+
|
|
69
|
+
### Oval
|
|
70
|
+
|
|
43
71
|
<div class="exampleWrapper">
|
|
44
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
45
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
72
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api-shape-oval.html) -->
|
|
73
|
+
<!-- The below content is automatically added from ../apiExamples/api-shape-oval.html -->
|
|
46
74
|
<auro-skeleton shape="oval" style="width: 80px; height: 40px"></auro-skeleton>
|
|
47
75
|
<auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
|
|
48
76
|
<auro-skeleton shape="oval" style="width: 600px; height: 300px"></auro-skeleton>
|
|
49
77
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
50
|
-
</div>
|
|
78
|
+
</div>
|
|
51
79
|
<auro-accordion alignRight>
|
|
52
80
|
<span slot="trigger">See code</span>
|
|
53
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
54
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
81
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api-shape-oval.html) -->
|
|
82
|
+
<!-- The below code snippet is automatically added from ../apiExamples/api-shape-oval.html -->
|
|
55
83
|
|
|
56
84
|
```html
|
|
57
85
|
<auro-skeleton shape="oval" style="width: 80px; height: 40px"></auro-skeleton>
|
|
@@ -60,18 +88,21 @@ The `<auro-skeleton>` element makes use of a single `shape` enumerated attribute
|
|
|
60
88
|
```
|
|
61
89
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
62
90
|
</auro-accordion>
|
|
91
|
+
|
|
92
|
+
### Rectangle
|
|
93
|
+
|
|
63
94
|
<div class="exampleWrapper">
|
|
64
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/
|
|
65
|
-
<!-- The below content is automatically added from ../apiExamples/
|
|
95
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/api-shape-rectangle.html) -->
|
|
96
|
+
<!-- The below content is automatically added from ../apiExamples/api-shape-rectangle.html -->
|
|
66
97
|
<auro-skeleton shape="rectangle" style="width: 100px; height: 50px"></auro-skeleton>
|
|
67
98
|
<auro-skeleton shape="rectangle" style="width: 400px; height: 150px"></auro-skeleton>
|
|
68
99
|
<auro-skeleton shape="rectangle" style="width: 800px; height: 300px"></auro-skeleton>
|
|
69
100
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
70
|
-
</div>
|
|
101
|
+
</div>
|
|
71
102
|
<auro-accordion alignRight>
|
|
72
103
|
<span slot="trigger">See code</span>
|
|
73
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/
|
|
74
|
-
<!-- The below code snippet is automatically added from ../apiExamples/
|
|
104
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/api-shape-rectangle.html) -->
|
|
105
|
+
<!-- The below code snippet is automatically added from ../apiExamples/api-shape-rectangle.html -->
|
|
75
106
|
|
|
76
107
|
```html
|
|
77
108
|
<auro-skeleton shape="rectangle" style="width: 100px; height: 50px"></auro-skeleton>
|
|
@@ -81,12 +112,84 @@ The `<auro-skeleton>` element makes use of a single `shape` enumerated attribute
|
|
|
81
112
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
82
113
|
</auro-accordion>
|
|
83
114
|
|
|
84
|
-
|
|
115
|
+
## Common Usage Patterns & Functional Examples
|
|
116
|
+
|
|
117
|
+
## Be creative
|
|
118
|
+
|
|
119
|
+
Use your imagination. Wherever data can be placed, an `<auro-skeleton>` element can be used. In the following example see how `<auro-skeleton>` is used in place where data will be filled once the process is completed.
|
|
120
|
+
|
|
121
|
+
<div class="exampleWrapper">
|
|
122
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/table-example.html) -->
|
|
123
|
+
<!-- The below content is automatically added from ../apiExamples/table-example.html -->
|
|
124
|
+
<table class="auro_table">
|
|
125
|
+
<thead>
|
|
126
|
+
<tr>
|
|
127
|
+
<th>The table header</th>
|
|
128
|
+
<th>The table header</th>
|
|
129
|
+
</tr>
|
|
130
|
+
</thead>
|
|
131
|
+
<tbody>
|
|
132
|
+
<tr>
|
|
133
|
+
<td colspan="2">
|
|
134
|
+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
135
|
+
</td>
|
|
136
|
+
</tr>
|
|
137
|
+
<tr>
|
|
138
|
+
<td colspan="2">
|
|
139
|
+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
140
|
+
</td>
|
|
141
|
+
</tr>
|
|
142
|
+
<tr>
|
|
143
|
+
<td colspan="2">
|
|
144
|
+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
145
|
+
</td>
|
|
146
|
+
</tr>
|
|
147
|
+
</tbody>
|
|
148
|
+
</table>
|
|
149
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
150
|
+
</div>
|
|
151
|
+
<auro-accordion alignRight>
|
|
152
|
+
<span slot="trigger">See code</span>
|
|
153
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/table-example.html) -->
|
|
154
|
+
<!-- The below code snippet is automatically added from ../apiExamples/table-example.html -->
|
|
155
|
+
|
|
156
|
+
```html
|
|
157
|
+
<table class="auro_table">
|
|
158
|
+
<thead>
|
|
159
|
+
<tr>
|
|
160
|
+
<th>The table header</th>
|
|
161
|
+
<th>The table header</th>
|
|
162
|
+
</tr>
|
|
163
|
+
</thead>
|
|
164
|
+
<tbody>
|
|
165
|
+
<tr>
|
|
166
|
+
<td colspan="2">
|
|
167
|
+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
168
|
+
</td>
|
|
169
|
+
</tr>
|
|
170
|
+
<tr>
|
|
171
|
+
<td colspan="2">
|
|
172
|
+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
173
|
+
</td>
|
|
174
|
+
</tr>
|
|
175
|
+
<tr>
|
|
176
|
+
<td colspan="2">
|
|
177
|
+
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
178
|
+
</td>
|
|
179
|
+
</tr>
|
|
180
|
+
</tbody>
|
|
181
|
+
</table>
|
|
182
|
+
```
|
|
183
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
184
|
+
</auro-accordion>
|
|
185
|
+
|
|
186
|
+
## Restyle Component with CSS Variables
|
|
85
187
|
|
|
86
|
-
The component may be restyled
|
|
188
|
+
The component may be restyled by changing the values of the following token(s).
|
|
87
189
|
|
|
88
|
-
<!--
|
|
89
|
-
<!--
|
|
190
|
+
<!-- Remove section if component does not have any component specific tokens -->
|
|
191
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
192
|
+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
90
193
|
|
|
91
194
|
```scss
|
|
92
195
|
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
@@ -66,6 +66,19 @@ class AuroLibraryRuntimeUtils {
|
|
|
66
66
|
|
|
67
67
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
68
68
|
}
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Gets the text content of a named slot.
|
|
72
|
+
* @returns {String}
|
|
73
|
+
* @private
|
|
74
|
+
*/
|
|
75
|
+
getSlotText(elem, name) {
|
|
76
|
+
const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
|
|
77
|
+
const nodes = slot?.assignedNodes({ flatten: true }) || [];
|
|
78
|
+
const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
|
|
79
|
+
|
|
80
|
+
return text || null;
|
|
81
|
+
}
|
|
69
82
|
}
|
|
70
83
|
|
|
71
84
|
/**
|
|
@@ -103,18 +116,15 @@ var styleCss = i$3`:focus:not(:focus-visible){outline:3px solid transparent}.uti
|
|
|
103
116
|
var tokensCss = i$3`:host{--ds-auro-skeleton-container-color: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-one: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-two: var(--ds-advanced-color-skeleton-wave, #e4e8ec)}
|
|
104
117
|
`;
|
|
105
118
|
|
|
106
|
-
// Copyright (c)
|
|
119
|
+
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
107
120
|
// See LICENSE in the project root for license information.
|
|
108
121
|
|
|
109
122
|
|
|
110
123
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
111
124
|
/**
|
|
112
|
-
* The auro-skeleton element provides users a way to indicate the loading of asynchronous content on a page.
|
|
113
|
-
*
|
|
114
|
-
* @attr {String} shape - Renders a circle, oval, or rectangle loader.
|
|
125
|
+
* The `auro-skeleton` element provides users a way to indicate the loading of asynchronous content on a page.
|
|
126
|
+
* @customElement auro-skeleton
|
|
115
127
|
*/
|
|
116
|
-
|
|
117
|
-
// build the component class
|
|
118
128
|
class AuroSkeleton extends i {
|
|
119
129
|
constructor() {
|
|
120
130
|
super();
|
|
@@ -129,6 +139,15 @@ class AuroSkeleton extends i {
|
|
|
129
139
|
static get properties() {
|
|
130
140
|
return {
|
|
131
141
|
// ...super.properties,
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* Renders a circle, oval, or rectangle loader
|
|
145
|
+
* @type {'circle' | 'oval' | 'rectangle'}
|
|
146
|
+
* @default 'rectangle'
|
|
147
|
+
*/
|
|
148
|
+
shape: {
|
|
149
|
+
type: String,
|
|
150
|
+
},
|
|
132
151
|
};
|
|
133
152
|
}
|
|
134
153
|
|
package/demo/index.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<!--
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
|
|
3
|
+
ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
|
|
4
|
+
ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
|
|
5
5
|
-->
|
|
6
6
|
|
|
7
|
-
# Skeleton
|
|
8
|
-
|
|
9
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
10
|
-
<!-- The below content is automatically added from
|
|
7
|
+
# Skeleton
|
|
8
|
+
|
|
9
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
|
|
10
|
+
<!-- The below content is automatically added from ./../docs/partials/description.md -->
|
|
11
11
|
The `<auro-skeleton>` custom element is for use when display content takes an extended amount of time to process and render on-screen. This indicator communicates to the user that data is being loaded and that the page is not frozen.
|
|
12
12
|
|
|
13
13
|
[Research](https://www.nngroup.com/articles/progress-indicators/) conducted by the Nielsen Norman Group states that using skeleton states and [loading indicators](https://auro.alaskaair.com/components/auro/loader) improve user satisfaction.
|
|
@@ -15,144 +15,36 @@ The `<auro-skeleton>` custom element is for use when display content takes an ex
|
|
|
15
15
|
The `<auro-skeleton>` element uses animation to convey that the page is still loading in order to reduce user uncertainty.
|
|
16
16
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
17
17
|
|
|
18
|
-
##
|
|
19
|
-
|
|
20
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
21
|
-
<!-- The below content is automatically added from
|
|
22
|
-
The `<auro-skeleton>` element can be used on container-based components like `<auro-card>` and other structured lists.
|
|
18
|
+
## Use Cases
|
|
19
|
+
|
|
20
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
|
|
21
|
+
<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
|
|
22
|
+
The `<auro-skeleton>` element can be used on container-based components like `<auro-card>` and other structured lists to indicate loading states.
|
|
23
23
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
24
24
|
|
|
25
|
-
## Do
|
|
25
|
+
## Do Not...
|
|
26
26
|
|
|
27
27
|
`<auro-skeleton>` should not be used on action components like `<auro-button>`, `<auro-input>` or `<auro-radio>`.
|
|
28
28
|
|
|
29
29
|
Do not represent a loading state with `<auro-skeleton>` for an entire component such as a toast notification, dropdown menus, or a modal dialog. It is appropriate to use `<auro-skeleton>` for content inside those components, but never for the entire component.
|
|
30
30
|
|
|
31
|
-
##
|
|
31
|
+
## Example(s)
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<div class="exampleWrapper">
|
|
36
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
|
|
37
|
-
<!-- The below content is automatically added from ../apiExamples/basic.html -->
|
|
38
|
-
<auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
|
|
39
|
-
<auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
|
|
40
|
-
<auro-skeleton shape="rectangle" style="width: 400px; height: 300px"></auro-skeleton>
|
|
41
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
42
|
-
</div>
|
|
43
|
-
<auro-accordion alignRight>
|
|
44
|
-
<span slot="trigger">See code</span>
|
|
45
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
|
|
46
|
-
<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
|
|
47
|
-
|
|
48
|
-
```html
|
|
49
|
-
<auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
|
|
50
|
-
<auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
|
|
51
|
-
<auro-skeleton shape="rectangle" style="width: 400px; height: 300px"></auro-skeleton>
|
|
52
|
-
```
|
|
53
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
54
|
-
</auro-accordion>
|
|
33
|
+
### Basic
|
|
55
34
|
|
|
56
|
-
## Be creative
|
|
57
|
-
|
|
58
|
-
Use your imagination. Wherever data can be placed, an `<auro-skeleton>` element can be used. In the following example see how `<auro-skeleton>` is used in place where data will be filled once the process is completed.
|
|
59
|
-
|
|
60
35
|
<div class="exampleWrapper">
|
|
61
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
62
|
-
<!-- The below content is automatically added from
|
|
63
|
-
<
|
|
64
|
-
<thead>
|
|
65
|
-
<tr>
|
|
66
|
-
<th>The table header</th>
|
|
67
|
-
<th>The table header</th>
|
|
68
|
-
</tr>
|
|
69
|
-
</thead>
|
|
70
|
-
<tbody>
|
|
71
|
-
<tr>
|
|
72
|
-
<td colspan="2">
|
|
73
|
-
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
74
|
-
</td>
|
|
75
|
-
</tr>
|
|
76
|
-
<tr>
|
|
77
|
-
<td colspan="2">
|
|
78
|
-
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
79
|
-
</td>
|
|
80
|
-
</tr>
|
|
81
|
-
<tr>
|
|
82
|
-
<td colspan="2">
|
|
83
|
-
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
84
|
-
</td>
|
|
85
|
-
</tr>
|
|
86
|
-
</tbody>
|
|
87
|
-
</table>
|
|
36
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
37
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
38
|
+
<auro-skeleton style="width: 400px; height: 300px"></auro-skeleton>
|
|
88
39
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
89
40
|
</div>
|
|
90
41
|
<auro-accordion alignRight>
|
|
91
42
|
<span slot="trigger">See code</span>
|
|
92
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
93
|
-
<!-- The below code snippet is automatically added from
|
|
43
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
44
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
94
45
|
|
|
95
46
|
```html
|
|
96
|
-
<
|
|
97
|
-
<thead>
|
|
98
|
-
<tr>
|
|
99
|
-
<th>The table header</th>
|
|
100
|
-
<th>The table header</th>
|
|
101
|
-
</tr>
|
|
102
|
-
</thead>
|
|
103
|
-
<tbody>
|
|
104
|
-
<tr>
|
|
105
|
-
<td colspan="2">
|
|
106
|
-
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
107
|
-
</td>
|
|
108
|
-
</tr>
|
|
109
|
-
<tr>
|
|
110
|
-
<td colspan="2">
|
|
111
|
-
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
112
|
-
</td>
|
|
113
|
-
</tr>
|
|
114
|
-
<tr>
|
|
115
|
-
<td colspan="2">
|
|
116
|
-
<auro-skeleton shape="oval" style="height: 20px;"></auro-skeleton>
|
|
117
|
-
</td>
|
|
118
|
-
</tr>
|
|
119
|
-
</tbody>
|
|
120
|
-
</table>
|
|
47
|
+
<auro-skeleton style="width: 400px; height: 300px"></auro-skeleton>
|
|
121
48
|
```
|
|
122
49
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
123
|
-
</auro-accordion>
|
|
124
|
-
|
|
125
|
-
## Recommended Use and Version Control
|
|
126
|
-
|
|
127
|
-
There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-skeleton` custom element is defined automatically.
|
|
128
|
-
|
|
129
|
-
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroSkeleton.register(name)` method and pass in a unique name.
|
|
130
|
-
|
|
131
|
-
```js
|
|
132
|
-
import { AuroSkeleton } from '@aurodesignsystem/auro-skeleton/class';
|
|
133
|
-
|
|
134
|
-
AuroSkeleton.register('custom-skeleton');
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
This will create a new custom element that you can use in your HTML that will function identically to the `<auro-skeleton>` element.
|
|
138
|
-
|
|
139
|
-
<div class="exampleWrapper exampleWrapper--flex">
|
|
140
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
|
|
141
|
-
<!-- The below content is automatically added from ../apiExamples/custom.html -->
|
|
142
|
-
<custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
|
|
143
|
-
<custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
|
|
144
|
-
<custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
|
|
145
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
146
|
-
</div>
|
|
147
|
-
<auro-accordion alignRight>
|
|
148
|
-
<span slot="trigger">See code</span>
|
|
149
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
|
|
150
|
-
<!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
|
|
151
|
-
|
|
152
|
-
```html
|
|
153
|
-
<custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
|
|
154
|
-
<custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
|
|
155
|
-
<custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
|
|
156
|
-
```
|
|
157
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
158
50
|
</auro-accordion>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import{css as e,LitElement as t,html as o}from"lit";class n{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,o=(t,n=t&&t.closest(e))=>t&&t!==document&&t!==window?n||o(t.getRootNode().host):null){return o(t)}handleComponentTagRename(e,t){const o=t.toLowerCase();e.tagName.toLowerCase()!==o&&e.setAttribute(o,!0)}elementMatch(e,t){const o=t.toLowerCase();return e.tagName.toLowerCase()===o||e.hasAttribute(o)}getSlotText(e,t){const o=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(o?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var a=e`:host{background-color:var(--ds-auro-skeleton-container-color);background-image:linear-gradient(to right,var(--ds-auro-skeleton-container-gradient-color-one) 10%,var(--ds-auro-skeleton-container-gradient-color-two) 40%,var(--ds-auro-skeleton-container-gradient-color-one) 60%)}
|
|
2
|
+
`,r=e`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:block;animation-duration:2s;animation-fill-mode:backwards;animation-iteration-count:infinite;animation-name:place-holder-shimmer;animation-timing-function:linear;background-repeat:no-repeat;background-size:1000px 100%}:host([shape=circle]){width:auto;border-radius:50%}:host([shape=oval]){border-radius:9999px}:host([shape=rectangle]){border-radius:var(--ds-border-radius, .375rem)}@keyframes place-holder-shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}
|
|
3
|
+
`,s=e`:host{--ds-auro-skeleton-container-color: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-one: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-two: var(--ds-advanced-color-skeleton-wave, #e4e8ec)}
|
|
4
|
+
`;class i extends t{constructor(){super(),this.runtimeUtils=new n}static get properties(){return{shape:{type:String}}}static get styles(){return[r,a,s]}static register(e="auro-skeleton"){n.prototype.registerComponent(e,i)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-skeleton")}render(){return o`
|
|
5
|
+
<span class="util_displayHiddenVisually">Loading...</span>
|
|
6
|
+
`}}export{i as A};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,171 @@
|
|
|
1
|
-
import { css, LitElement, html } from 'lit';
|
|
2
1
|
|
|
3
|
-
|
|
4
|
-
`,r=css`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:block;animation-duration:2s;animation-fill-mode:backwards;animation-iteration-count:infinite;animation-name:place-holder-shimmer;animation-timing-function:linear;background-repeat:no-repeat;background-size:1000px 100%}:host([shape=circle]){width:auto;border-radius:50%}:host([shape=oval]){border-radius:9999px}:host([shape=rectangle]){border-radius:var(--ds-border-radius, .375rem)}@keyframes place-holder-shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}
|
|
5
|
-
`,i=css`:host{--ds-auro-skeleton-container-color: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-one: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-two: var(--ds-advanced-color-skeleton-wave, #e4e8ec)}
|
|
6
|
-
`;class s extends LitElement{constructor(){super(),this.runtimeUtils=new a;}static get properties(){return {}}static get styles(){return [r,n,i]}static register(e="auro-skeleton"){a.prototype.registerComponent(e,s);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-skeleton");}render(){return html`
|
|
7
|
-
<span class="util_displayHiddenVisually">Loading...</span>
|
|
8
|
-
`}}
|
|
2
|
+
import type { AuroSkeleton } from "src/auro-skeleton.js";
|
|
9
3
|
|
|
10
|
-
|
|
4
|
+
/**
|
|
5
|
+
* This type can be used to create scoped tags for your components.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* import type { ScopedElements } from "path/to/library/jsx-integration";
|
|
11
|
+
*
|
|
12
|
+
* declare module "my-library" {
|
|
13
|
+
* namespace JSX {
|
|
14
|
+
* interface IntrinsicElements
|
|
15
|
+
* extends ScopedElements<'test-', ''> {}
|
|
16
|
+
* }
|
|
17
|
+
* }
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @deprecated Runtime scoped elements result in duplicate types and can confusing for developers. It is recommended to use the `prefix` and `suffix` options to generate new types instead.
|
|
21
|
+
*/
|
|
22
|
+
export type ScopedElements<
|
|
23
|
+
Prefix extends string = "",
|
|
24
|
+
Suffix extends string = ""
|
|
25
|
+
> = {
|
|
26
|
+
[Key in keyof CustomElements as `${Prefix}${Key}${Suffix}`]: CustomElements[Key];
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
type BaseProps<T extends HTMLElement> = {
|
|
30
|
+
|
|
31
|
+
/** Content added between the opening and closing tags of the element */
|
|
32
|
+
children?: any;
|
|
33
|
+
/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
|
|
34
|
+
class?: string;
|
|
35
|
+
/** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
|
|
36
|
+
className?: string;
|
|
37
|
+
/** Takes an object where the key is the class name(s) and the value is a boolean expression. When true, the class is applied, and when false, it is removed. */
|
|
38
|
+
classList?: Record<string, boolean | undefined>;
|
|
39
|
+
/** Specifies the text direction of the element. */
|
|
40
|
+
dir?: "ltr" | "rtl";
|
|
41
|
+
/** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
|
|
42
|
+
exportparts?: string;
|
|
43
|
+
/** For <label> and <output>, lets you associate the label with some control. */
|
|
44
|
+
htmlFor?: string;
|
|
45
|
+
/** Specifies whether the element should be hidden. */
|
|
46
|
+
hidden?: boolean | string;
|
|
47
|
+
/** A unique identifier for the element. */
|
|
48
|
+
id?: string;
|
|
49
|
+
/** Keys tell React which array item each component corresponds to */
|
|
50
|
+
key?: string | number;
|
|
51
|
+
/** Specifies the language of the element. */
|
|
52
|
+
lang?: string;
|
|
53
|
+
/** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
|
|
54
|
+
part?: string;
|
|
55
|
+
/** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
|
|
56
|
+
ref?: T | ((e: T) => void);
|
|
57
|
+
/** Adds a reference for a custom element slot */
|
|
58
|
+
slot?: string;
|
|
59
|
+
/** Prop for setting inline styles */
|
|
60
|
+
style?: Record<string, string | number>;
|
|
61
|
+
/** Overrides the default Tab button behavior. Avoid using values other than -1 and 0. */
|
|
62
|
+
tabIndex?: number;
|
|
63
|
+
/** Specifies the tooltip text for the element. */
|
|
64
|
+
title?: string;
|
|
65
|
+
/** Passing 'no' excludes the element content from being translated. */
|
|
66
|
+
translate?: "yes" | "no";
|
|
67
|
+
/** The popover global attribute is used to designate an element as a popover element. */
|
|
68
|
+
popover?: "auto" | "hint" | "manual";
|
|
69
|
+
/** Turns an element element into a popover control button; takes the ID of the popover element to control as its value. */
|
|
70
|
+
popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
|
|
71
|
+
/** Specifies the action to be performed on a popover element being controlled by a control element. */
|
|
72
|
+
popovertargetaction?: "show" | "hide" | "toggle";
|
|
73
|
+
|
|
74
|
+
} ;
|
|
75
|
+
|
|
76
|
+
type BaseEvents = {
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
export type AuroSkeletonProps = {
|
|
84
|
+
/** Renders a circle, oval, or rectangle loader */
|
|
85
|
+
"shape"?: AuroSkeleton['shape'];
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
export type CustomElements = {
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* The `auro-skeleton` element provides users a way to indicate the loading of asynchronous content on a page.
|
|
95
|
+
*
|
|
96
|
+
* ## Attributes & Properties
|
|
97
|
+
*
|
|
98
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
99
|
+
*
|
|
100
|
+
* - `shape`: Renders a circle, oval, or rectangle loader
|
|
101
|
+
*
|
|
102
|
+
* ## Methods
|
|
103
|
+
*
|
|
104
|
+
* Methods that can be called to access component functionality.
|
|
105
|
+
*
|
|
106
|
+
* - `register(name?: string = "auro-skeleton") => void`: This will register this element with the browser.
|
|
107
|
+
*/
|
|
108
|
+
"auro-skeleton": Partial<AuroSkeletonProps & BaseProps<AuroSkeleton> & BaseEvents>;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
export type CustomCssProperties = {
|
|
112
|
+
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
declare module 'react' {
|
|
117
|
+
namespace JSX {
|
|
118
|
+
interface IntrinsicElements extends CustomElements {}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
declare module 'preact' {
|
|
124
|
+
namespace JSX {
|
|
125
|
+
interface IntrinsicElements extends CustomElements {}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
declare module '@builder.io/qwik' {
|
|
131
|
+
namespace JSX {
|
|
132
|
+
interface IntrinsicElements extends CustomElements {}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
declare module '@stencil/core' {
|
|
138
|
+
namespace JSX {
|
|
139
|
+
interface IntrinsicElements extends CustomElements {}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
declare module 'hono/jsx' {
|
|
145
|
+
namespace JSX {
|
|
146
|
+
interface IntrinsicElements extends CustomElements {}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
declare module 'react-native' {
|
|
152
|
+
namespace JSX {
|
|
153
|
+
interface IntrinsicElements extends CustomElements {}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
declare global {
|
|
159
|
+
namespace JSX {
|
|
160
|
+
interface IntrinsicElements extends CustomElements {}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
}
|
|
164
|
+
declare global {
|
|
165
|
+
namespace svelteHTML {
|
|
166
|
+
interface IntrinsicElements extends CustomElements {}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
export { AuroSkeleton } from "./index.js";
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroSkeleton}from"./auro-skeleton-
|
|
1
|
+
export{A as AuroSkeleton}from"./auro-skeleton-DmGY_hvs.js";import"lit";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as r}from"./auro-skeleton-
|
|
1
|
+
import{A as r}from"./auro-skeleton-DmGY_hvs.js";import"lit";r.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-skeleton",
|
|
10
|
-
"version": "0.0.0-
|
|
10
|
+
"version": "0.0.0-pr71.0",
|
|
11
11
|
"description": "auro-skeleton HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
"node": ">=20"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"lit": "^3.3.
|
|
24
|
+
"lit": "^3.3.1"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@aurodesignsystem/auro-cli": "^3.
|
|
27
|
+
"@aurodesignsystem/auro-cli": "^3.4.2",
|
|
28
28
|
"@aurodesignsystem/auro-config": "^1.3.1",
|
|
29
|
-
"@aurodesignsystem/auro-library": "^5.5.
|
|
30
|
-
"@aurodesignsystem/design-tokens": "^8.
|
|
31
|
-
"@aurodesignsystem/webcorestylesheets": "10.
|
|
29
|
+
"@aurodesignsystem/auro-library": "^5.5.4",
|
|
30
|
+
"@aurodesignsystem/design-tokens": "^8.7.0",
|
|
31
|
+
"@aurodesignsystem/webcorestylesheets": "^10.1.4",
|
|
32
32
|
"husky": "^9.1.7"
|
|
33
33
|
},
|
|
34
34
|
"browserslist": [
|
|
@@ -78,5 +78,6 @@
|
|
|
78
78
|
"README.md",
|
|
79
79
|
"LICENSE",
|
|
80
80
|
"NOTICE"
|
|
81
|
-
]
|
|
81
|
+
],
|
|
82
|
+
"customElements": "custom-elements.json"
|
|
82
83
|
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import{css as e,LitElement as o,html as t}from"lit";class a{registerComponent(e,o){customElements.get(e)||customElements.define(e,class extends o{})}closestElement(e,o=this,t=(o,a=o&&o.closest(e))=>o&&o!==document&&o!==window?a||t(o.getRootNode().host):null){return t(o)}handleComponentTagRename(e,o){const t=o.toLowerCase();e.tagName.toLowerCase()!==t&&e.setAttribute(t,!0)}elementMatch(e,o){const t=o.toLowerCase();return e.tagName.toLowerCase()===t||e.hasAttribute(t)}}var n=e`:host{background-color:var(--ds-auro-skeleton-container-color);background-image:linear-gradient(to right,var(--ds-auro-skeleton-container-gradient-color-one) 10%,var(--ds-auro-skeleton-container-gradient-color-two) 40%,var(--ds-auro-skeleton-container-gradient-color-one) 60%)}
|
|
2
|
-
`,r=e`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:block;animation-duration:2s;animation-fill-mode:backwards;animation-iteration-count:infinite;animation-name:place-holder-shimmer;animation-timing-function:linear;background-repeat:no-repeat;background-size:1000px 100%}:host([shape=circle]){width:auto;border-radius:50%}:host([shape=oval]){border-radius:9999px}:host([shape=rectangle]){border-radius:var(--ds-border-radius, .375rem)}@keyframes place-holder-shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}
|
|
3
|
-
`,i=e`:host{--ds-auro-skeleton-container-color: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-one: var(--ds-advanced-color-skeleton-background, #f7f8fa);--ds-auro-skeleton-container-gradient-color-two: var(--ds-advanced-color-skeleton-wave, #e4e8ec)}
|
|
4
|
-
`;class s extends o{constructor(){super(),this.runtimeUtils=new a}static get properties(){return{}}static get styles(){return[r,n,i]}static register(e="auro-skeleton"){a.prototype.registerComponent(e,s)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-skeleton")}render(){return t`
|
|
5
|
-
<span class="util_displayHiddenVisually">Loading...</span>
|
|
6
|
-
`}}export{s as A};
|