@aurodesignsystem-dev/auro-backtotop 0.0.0-pr79.1 → 0.0.0-pr80.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 +97 -37
- package/custom-elements.json +267 -23
- package/demo/api.md +79 -29
- package/demo/auro-backtotop.min.js +12 -13
- package/demo/index.md +43 -16
- package/dist/{auro-backtotop-CV2gu8Qz.js → auro-backtotop-BcarFpWB.js} +4 -4
- package/dist/index.d.ts +104 -198
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +4 -8
package/demo/api.md
CHANGED
|
@@ -3,20 +3,20 @@
|
|
|
3
3
|
|
|
4
4
|
# auro-backtotop
|
|
5
5
|
|
|
6
|
-
The
|
|
6
|
+
The auro-backtotop element provides users a way to quickly return to page top.
|
|
7
7
|
|
|
8
8
|
### Properties & Attributes
|
|
9
9
|
|
|
10
|
-
| Properties | Attributes |
|
|
11
|
-
| ---------- | ---------- |
|
|
12
|
-
| disabled | disabled |
|
|
13
|
-
| variant | variant |
|
|
10
|
+
| Properties | Attributes | Type | Default | Description |
|
|
11
|
+
| ---------- | ---------- | ------- | --------- | ------------------------------------------------------------------------------------------------------ |
|
|
12
|
+
| disabled | disabled | boolean | | Render the trigger inline, will always be visible. |
|
|
13
|
+
| variant | variant | string | "primary" | The variant attribute allows for rendering the button using the primary (default) or secondary styles. |
|
|
14
14
|
|
|
15
15
|
### Methods
|
|
16
16
|
|
|
17
|
-
| Name | Parameters
|
|
18
|
-
| -------- |
|
|
19
|
-
| register | `name` (string) - The name of
|
|
17
|
+
| Name | Parameters | Return | Description |
|
|
18
|
+
| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
19
|
+
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
|
|
20
20
|
|
|
21
21
|
### Slots
|
|
22
22
|
|
|
@@ -33,15 +33,17 @@ The `auro-backtotop` element provides users a way to quickly return to page top.
|
|
|
33
33
|
| icon | Apply CSS to arrow up icon. |
|
|
34
34
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
35
35
|
|
|
36
|
-
##
|
|
36
|
+
## API Examples
|
|
37
|
+
|
|
38
|
+
### Basic
|
|
37
39
|
|
|
38
40
|
<div class="exampleWrapper">
|
|
39
41
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
40
42
|
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
41
43
|
<auro-backtotop>Back to top</auro-backtotop>
|
|
42
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
43
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
44
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
44
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
45
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->
|
|
46
|
+
<!-- The below content is automatically added from ./../apiExamples/basicButtonOnly.html -->
|
|
45
47
|
<auro-button
|
|
46
48
|
aria-label="arrow-up"
|
|
47
49
|
shape="pill"
|
|
@@ -50,7 +52,7 @@ The `auro-backtotop` element provides users a way to quickly return to page top.
|
|
|
50
52
|
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
51
53
|
</auro-button>
|
|
52
54
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
53
|
-
</div>
|
|
55
|
+
</div>
|
|
54
56
|
<auro-accordion alignRight>
|
|
55
57
|
<span slot="trigger">See code</span>
|
|
56
58
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
@@ -62,15 +64,15 @@ The `auro-backtotop` element provides users a way to quickly return to page top.
|
|
|
62
64
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
63
65
|
</auro-accordion>
|
|
64
66
|
|
|
65
|
-
|
|
67
|
+
### Attribute Examples
|
|
66
68
|
|
|
67
|
-
|
|
69
|
+
#### disabled
|
|
68
70
|
|
|
69
71
|
This example demonstrates auro-backtotop in its disabled state.
|
|
70
72
|
|
|
71
73
|
<div class="exampleWrapper">
|
|
72
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
73
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
74
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledButtonOnly.html) -->
|
|
75
|
+
<!-- The below content is automatically added from ./../apiExamples/disabledButtonOnly.html -->
|
|
74
76
|
<auro-button
|
|
75
77
|
aria-label="arrow-up"
|
|
76
78
|
disabled
|
|
@@ -92,13 +94,13 @@ This example demonstrates auro-backtotop in its disabled state.
|
|
|
92
94
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
93
95
|
</auro-accordion>
|
|
94
96
|
|
|
95
|
-
|
|
97
|
+
#### variant
|
|
96
98
|
|
|
97
99
|
The `variant` attribute allows for rendering the button using the `primary` (default) or `secondary` styles.
|
|
98
100
|
|
|
99
101
|
<div class="exampleWrapper">
|
|
100
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
101
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
102
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/secondaryButtonOnly.html) -->
|
|
103
|
+
<!-- The below content is automatically added from ./../apiExamples/secondaryButtonOnly.html -->
|
|
102
104
|
<auro-button
|
|
103
105
|
variant="secondary"
|
|
104
106
|
shape="pill"
|
|
@@ -110,8 +112,8 @@ The `variant` attribute allows for rendering the button using the `primary` (def
|
|
|
110
112
|
</div>
|
|
111
113
|
<auro-accordion alignRight>
|
|
112
114
|
<span slot="trigger">See code</span>
|
|
113
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
114
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
115
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/secondary.html) -->
|
|
116
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/secondary.html -->
|
|
115
117
|
|
|
116
118
|
```html
|
|
117
119
|
<auro-backtotop variant="secondary">Back to top</auro-backtotop>
|
|
@@ -119,15 +121,42 @@ The `variant` attribute allows for rendering the button using the `primary` (def
|
|
|
119
121
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
120
122
|
</auro-accordion>
|
|
121
123
|
|
|
122
|
-
|
|
124
|
+
### Slot Examples
|
|
125
|
+
|
|
126
|
+
#### default
|
|
127
|
+
|
|
128
|
+
The default slot defines the content of the button.
|
|
129
|
+
|
|
130
|
+
<div class="exampleWrapper">
|
|
131
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->
|
|
132
|
+
<!-- The below content is automatically added from ./../apiExamples/basicButtonOnly.html -->
|
|
133
|
+
<auro-button
|
|
134
|
+
aria-label="arrow-up"
|
|
135
|
+
shape="pill"
|
|
136
|
+
size="lg">
|
|
137
|
+
Back to top
|
|
138
|
+
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
139
|
+
</auro-button>
|
|
140
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
141
|
+
</div>
|
|
142
|
+
<auro-accordion alignRight>
|
|
143
|
+
<span slot="trigger">See code</span>
|
|
144
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
145
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
146
|
+
|
|
147
|
+
```html
|
|
148
|
+
<auro-backtotop>Back to top</auro-backtotop>
|
|
149
|
+
```
|
|
150
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
151
|
+
</auro-accordion>
|
|
123
152
|
|
|
124
|
-
|
|
153
|
+
#### ariaLabel
|
|
125
154
|
|
|
126
155
|
The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The default value is `"arrow-up"`.
|
|
127
156
|
|
|
128
157
|
<div class="exampleWrapper">
|
|
129
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
130
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
158
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelButtonOnly.html) -->
|
|
159
|
+
<!-- The below content is automatically added from ./../apiExamples/ariaLabelButtonOnly.html -->
|
|
131
160
|
<auro-button
|
|
132
161
|
aria-label="Custom aria-label goes here!"
|
|
133
162
|
shape="pill"
|
|
@@ -139,8 +168,8 @@ The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The d
|
|
|
139
168
|
</div>
|
|
140
169
|
<auro-accordion alignRight>
|
|
141
170
|
<span slot="trigger">See code</span>
|
|
142
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
143
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
171
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabel.html) -->
|
|
172
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabel.html -->
|
|
144
173
|
|
|
145
174
|
```html
|
|
146
175
|
<auro-backtotop>
|
|
@@ -148,4 +177,25 @@ The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The d
|
|
|
148
177
|
</auro-backtotop>
|
|
149
178
|
```
|
|
150
179
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
151
|
-
</auro-accordion>
|
|
180
|
+
</auro-accordion>
|
|
181
|
+
|
|
182
|
+
## Page Content For Demo
|
|
183
|
+
|
|
184
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pageContent.html) -->
|
|
185
|
+
<!-- The below content is automatically added from ./../apiExamples/pageContent.html -->
|
|
186
|
+
<p>
|
|
187
|
+
This component requires page content that is taller than the window. Below is `lorem ipsum` content to force a large document. A `back to top` button will appear when you begin to scroll down the page.
|
|
188
|
+
</p>
|
|
189
|
+
<i>
|
|
190
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
191
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
192
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
193
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
194
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
195
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
196
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
197
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
198
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
199
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
200
|
+
</i>
|
|
201
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -267,8 +267,7 @@ var styleCss = i$3`:host{position:fixed;right:var(--ds-size-300, 1.5rem);bottom:
|
|
|
267
267
|
|
|
268
268
|
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
|
|
269
269
|
/**
|
|
270
|
-
* The
|
|
271
|
-
* @customElement auro-backtotop
|
|
270
|
+
* The auro-backtotop element provides users a way to quickly return to page top.
|
|
272
271
|
*
|
|
273
272
|
* @slot - Default slot for the text of the button.
|
|
274
273
|
* @slot ariaLabel - Use this slot to pass an aria-label to the HTML5 button.
|
|
@@ -280,10 +279,11 @@ class AuroBackToTop extends i$1 {
|
|
|
280
279
|
constructor() {
|
|
281
280
|
super();
|
|
282
281
|
|
|
283
|
-
this.
|
|
282
|
+
this.initializeProperties();
|
|
284
283
|
}
|
|
285
284
|
|
|
286
|
-
|
|
285
|
+
initializeProperties() {
|
|
286
|
+
|
|
287
287
|
const versioning = new AuroDependencyVersioning();
|
|
288
288
|
|
|
289
289
|
this.disabled = false;
|
|
@@ -349,31 +349,30 @@ class AuroBackToTop extends i$1 {
|
|
|
349
349
|
|
|
350
350
|
/**
|
|
351
351
|
* Render the trigger inline, will always be visible.
|
|
352
|
-
* @default false
|
|
353
352
|
*/
|
|
354
353
|
disabled: {
|
|
355
354
|
type: Boolean,
|
|
356
355
|
reflect: true,
|
|
357
356
|
},
|
|
358
357
|
hidden: {
|
|
359
|
-
type: Boolean
|
|
358
|
+
type: Boolean,
|
|
359
|
+
reflect: true,
|
|
360
360
|
},
|
|
361
361
|
interactionActive: {
|
|
362
|
-
type: Boolean
|
|
362
|
+
type: Boolean,
|
|
363
363
|
},
|
|
364
364
|
lastScrollDirectionUp: {
|
|
365
|
-
type: Boolean
|
|
365
|
+
type: Boolean,
|
|
366
366
|
},
|
|
367
367
|
|
|
368
368
|
/**
|
|
369
369
|
* The variant attribute allows for rendering the button using the primary (default) or secondary styles.
|
|
370
|
-
* @
|
|
371
|
-
* @default 'primary'
|
|
370
|
+
* @default "primary"
|
|
372
371
|
*/
|
|
373
372
|
variant: {
|
|
374
373
|
type: String,
|
|
375
|
-
reflect: true
|
|
376
|
-
}
|
|
374
|
+
reflect: true,
|
|
375
|
+
},
|
|
377
376
|
};
|
|
378
377
|
}
|
|
379
378
|
|
|
@@ -384,7 +383,7 @@ class AuroBackToTop extends i$1 {
|
|
|
384
383
|
|
|
385
384
|
/**
|
|
386
385
|
* This will register this element with the browser.
|
|
387
|
-
* @param {string} [name="auro-backtotop"] - The name of
|
|
386
|
+
* @param {string} [name="auro-backtotop"] - The name of element that you want to register to.
|
|
388
387
|
*
|
|
389
388
|
* @example
|
|
390
389
|
* AuroBackToTop.register("custom-backtotop") // this will register this element to <custom-backtotop/>
|
package/demo/index.md
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
<!--
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
The index.md file is a compiled document. No edits should be made directly to this file.
|
|
3
|
+
README.md is created by running `npm run build:docs`.
|
|
4
|
+
This file is generated based on a template fetched from `./docs/partials/index.md`
|
|
5
5
|
-->
|
|
6
6
|
|
|
7
|
-
# Backtotop
|
|
8
|
-
|
|
7
|
+
# Backtotop
|
|
8
|
+
|
|
9
9
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
|
|
10
10
|
<!-- The below content is automatically added from ./../docs/partials/description.md -->
|
|
11
11
|
`<auro-backtotop>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of providing a quick and accessible means to jump back to the top of a long content page.
|
|
12
12
|
|
|
13
|
-
The component will be hidden while the page Y scroll position is at the top. When scroll down begins the button will display in the bottom right corner of the page. While scrolling down the button will display only an arrow up icon.
|
|
13
|
+
The component will be hidden while the page Y scroll position is at the top. When scroll down begins the button will display in the bottom right corner of the page. While scrolling down the button will display only an arrow up icon. When scroll up occurs, the button will additionally display any slotted text content.
|
|
14
14
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
15
15
|
|
|
16
|
-
##
|
|
17
|
-
|
|
16
|
+
## auro-backtotop use cases
|
|
17
|
+
|
|
18
18
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
|
|
19
19
|
<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
|
|
20
20
|
The `<auro-backtotop>` element should be used in situations where users may:
|
|
@@ -24,11 +24,9 @@ The `<auro-backtotop>` element should be used in situations where users may:
|
|
|
24
24
|
|
|
25
25
|
## Example(s)
|
|
26
26
|
|
|
27
|
-
### Basic
|
|
28
|
-
|
|
29
27
|
<div class="exampleWrapper">
|
|
30
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
31
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
28
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->
|
|
29
|
+
<!-- The below content is automatically added from ./../apiExamples/basicButtonOnly.html -->
|
|
32
30
|
<auro-button
|
|
33
31
|
aria-label="arrow-up"
|
|
34
32
|
shape="pill"
|
|
@@ -37,6 +35,10 @@ The `<auro-backtotop>` element should be used in situations where users may:
|
|
|
37
35
|
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
38
36
|
</auro-button>
|
|
39
37
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
38
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
39
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
40
|
+
<auro-backtotop>Back to top</auro-backtotop>
|
|
41
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
40
42
|
</div>
|
|
41
43
|
<auro-accordion alignRight>
|
|
42
44
|
<span slot="trigger">See code</span>
|
|
@@ -49,10 +51,10 @@ The `<auro-backtotop>` element should be used in situations where users may:
|
|
|
49
51
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
50
52
|
</auro-accordion>
|
|
51
53
|
|
|
52
|
-
|
|
54
|
+
## Page Content For Demo
|
|
53
55
|
|
|
54
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
55
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
56
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pageContent.html) -->
|
|
57
|
+
<!-- The below content is automatically added from ./../apiExamples/pageContent.html -->
|
|
56
58
|
<p>
|
|
57
59
|
This component requires page content that is taller than the window. Below is `lorem ipsum` content to force a large document. A `back to top` button will appear when you begin to scroll down the page.
|
|
58
60
|
</p>
|
|
@@ -68,4 +70,29 @@ The `<auro-backtotop>` element should be used in situations where users may:
|
|
|
68
70
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
69
71
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
70
72
|
</i>
|
|
71
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
73
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
74
|
+
|
|
75
|
+
## Recommended Use and Version Control
|
|
76
|
+
|
|
77
|
+
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-backtotop` custom element is defined automatically.
|
|
78
|
+
|
|
79
|
+
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroBackToTop.register(name)` method and pass in a unique name.
|
|
80
|
+
|
|
81
|
+
```js
|
|
82
|
+
import { AuroBackToTop } from '@aurodesignsystem/auro-backtotop/class';
|
|
83
|
+
|
|
84
|
+
AuroBackToTop.register('custom-backtotop');
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
This will create a new custom element that you can use in your HTML that will function identically to the `auro-backtotop` element.
|
|
88
|
+
|
|
89
|
+
<!-- <div class="exampleWrapper">
|
|
90
|
+
<auro-backtotop>Custom back to top</auro-backtotop>
|
|
91
|
+
</div>
|
|
92
|
+
<auro-accordion alignRight>
|
|
93
|
+
<span slot="trigger">See code</span>
|
|
94
|
+
```html
|
|
95
|
+
<auro-backtotop>Custom back to top</auro-backtotop>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
</auro-accordion> -->
|
|
@@ -53,11 +53,11 @@ import{literal as t,html as e,unsafeStatic as o}from"lit/static-html.js";import{
|
|
|
53
53
|
</span>
|
|
54
54
|
</span>
|
|
55
55
|
</${this._renderTag}>
|
|
56
|
-
`}renderLayout(){return this.renderLayoutDefault()}}class N{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,!0)}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}}class $ extends a{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(t){return t?"true":"false"}}const
|
|
57
|
-
`;class I extends ${constructor(){super(),this.onDark=!1,this.appearance="default"}static get properties(){return{...$.properties,onDark:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},svg:{attribute:!1,reflect:!0}}}static get styles(){return
|
|
56
|
+
`}renderLayout(){return this.renderLayoutDefault()}}class N{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,!0)}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}}class $ extends a{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(t){return t?"true":"false"}}const L=new Map,E=(t,e={})=>{const o=e.responseParser||(t=>t.text());return L.has(t)||L.set(t,fetch(t).then(o)),L.get(t)};var _=s`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
57
|
+
`;class I extends ${constructor(){super(),this.onDark=!1,this.appearance="default"}static get properties(){return{...$.properties,onDark:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},svg:{attribute:!1,reflect:!0}}}static get styles(){return _}async fetchIcon(t,e){let o="";return o="logos"===t?await E(`${this.uri}/${t}/${e}.svg`):await E(`${this.uri}/icons/${t}/${e}.svg`),(new DOMParser).parseFromString(o,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>',"text/html");this.svg=t.body.firstChild}}}catch(t){this.svg=void 0}}}s`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
58
58
|
`;var F=s`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
59
59
|
`,D=s`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
60
|
-
`;class O extends I{constructor(){super(),this.variant=void 0,this.privateDefaults()}privateDefaults(){this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new N}static get properties(){return{...I.properties,ariaHidden:{type:String,reflect:!0},category:{type:String,reflect:!0},customColor:{type:Boolean,reflect:!0},customSvg:{type:Boolean},label:{type:Boolean,reflect:!0},name:{type:String,reflect:!0},variant:{type:String,reflect:!0}}}static get styles(){return[I.styles,F,
|
|
60
|
+
`;class O extends I{constructor(){super(),this.variant=void 0,this.privateDefaults()}privateDefaults(){this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new N}static get properties(){return{...I.properties,ariaHidden:{type:String,reflect:!0},category:{type:String,reflect:!0},customColor:{type:Boolean,reflect:!0},customSvg:{type:Boolean},label:{type:Boolean,reflect:!0},name:{type:String,reflect:!0},variant:{type:String,reflect:!0}}}static get styles(){return[I.styles,F,_,D]}static register(t="auro-icon"){N.prototype.registerComponent(t,O)}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon")}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg")}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"))}}render(){const t={labelWrapper:!0,util_displayHiddenVisually:!this.label};return r`
|
|
61
61
|
<div class="componentWrapper">
|
|
62
62
|
<div
|
|
63
63
|
class="${i({svgWrapper:!0})}"
|
|
@@ -76,7 +76,7 @@ import{literal as t,html as e,unsafeStatic as o}from"lit/static-html.js";import{
|
|
|
76
76
|
</div>
|
|
77
77
|
</div>
|
|
78
78
|
`}}class W{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(e,s,a){const r=this.generateElementName(e,s),i=t`${o(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}}class P{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{})}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,!0)}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return(o?.assignedNodes({flatten:!0})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var X=s`:host{position:fixed;right:var(--ds-size-300, 1.5rem);bottom:var(--ds-size-300, 1.5rem)}:host [auro-button]:not(:hover) .text{display:none;overflow:hidden}
|
|
79
|
-
`;class j extends a{constructor(){super(),this.
|
|
79
|
+
`;class j extends a{constructor(){super(),this.initializeProperties()}initializeProperties(){const t=new W;this.disabled=!1,this.variant="primary",this.iconTag=t.generateTag("auro-icon","9.1.1",O),this.buttonTag=t.generateTag("auro-backtotop-button","12.3.0",R),this.shape="circle",this.size="lg",this.hidden=!0,this.lastKnownScrollPosition=0,this.lastScrollDirectionUp=!1,this.interactionActive=!1,this.yPosShowButton=400,this.runtimeUtils=new P}static get properties(){return{disabled:{type:Boolean,reflect:!0},hidden:{type:Boolean,reflect:!0},interactionActive:{type:Boolean},lastScrollDirectionUp:{type:Boolean},variant:{type:String,reflect:!0}}}static get styles(){return[X]}static register(t="auro-backtotop"){P.prototype.registerComponent(t,j)}scrollTop(){document.documentElement.scrollTop=0}onTriggerClick(){this.scrollTop(),this.interactionActive=!1}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-backtotop"),document.addEventListener("scroll",()=>{window.scrollY<this.lastKnownScrollPosition?this.lastScrollDirectionUp=!0:this.lastScrollDirectionUp=!1,this.lastKnownScrollPosition=window.scrollY,this.lastKnownScrollPosition<this.yPosShowButton?this.hidden=!0:this.hidden=!1}),this.addEventListener("mouseover",()=>{this.shape="pill",this.interactionActive=!0}),this.addEventListener("mouseout",()=>{this.shape="circle",this.interactionActive=!1}),this.addEventListener("focusin",()=>{this.interactionActive=!0}),this.addEventListener("focusout",()=>{this.interactionActive=!1}),this.addEventListener("touchend",()=>{this.onTriggerClick()})}render(){return e`
|
|
80
80
|
<!-- Hidden slot for aria-label -->
|
|
81
81
|
<slot name="ariaLabel" hidden></slot>
|
|
82
82
|
|