@aurodesignsystem-dev/auro-backtotop 0.0.0-pr76.0 → 0.0.0-pr79.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 +37 -97
- package/custom-elements.json +20 -264
- package/demo/api.md +35 -164
- package/demo/auro-backtotop.min.js +11 -9
- package/demo/index.md +16 -43
- package/dist/{auro-backtotop-BcarFpWB.js → auro-backtotop-DbVpaEcC.js} +1 -1
- package/dist/index.d.ts +198 -104
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +8 -4
package/demo/api.md
CHANGED
|
@@ -1,201 +1,72 @@
|
|
|
1
1
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
-
<!--
|
|
3
|
-
|
|
4
|
-
# auro-backtotop
|
|
5
|
-
|
|
6
|
-
The auro-backtotop element provides users a way to quickly return to page top.
|
|
7
|
-
|
|
8
|
-
### Properties & Attributes
|
|
9
|
-
|
|
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
|
-
|
|
15
|
-
### Methods
|
|
16
|
-
|
|
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
|
-
|
|
21
|
-
### Slots
|
|
22
|
-
|
|
23
|
-
| Name | Description |
|
|
24
|
-
| --------- | -------------------------------------------------------- |
|
|
25
|
-
| (default) | Default slot for the text of the button. |
|
|
26
|
-
| ariaLabel | Use this slot to pass an aria-label to the HTML5 button. |
|
|
27
|
-
|
|
28
|
-
### CSS Shadow Parts
|
|
2
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
29
3
|
|
|
30
|
-
|
|
31
|
-
| ------ | --------------------------- |
|
|
32
|
-
| button | Apply CSS to HTML5 button. |
|
|
33
|
-
| icon | Apply CSS to arrow up icon. |
|
|
34
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
35
|
-
|
|
36
|
-
## API Examples
|
|
37
|
-
|
|
38
|
-
### Basic
|
|
4
|
+
## Basic
|
|
39
5
|
|
|
40
6
|
<div class="exampleWrapper">
|
|
41
7
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
42
|
-
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
43
|
-
<auro-backtotop>Back to top</auro-backtotop>
|
|
44
8
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
45
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
46
|
-
<!-- The below content is automatically added from ./../apiExamples/basicButtonOnly.html -->
|
|
47
|
-
<auro-button
|
|
48
|
-
aria-label="arrow-up"
|
|
49
|
-
shape="pill"
|
|
50
|
-
size="lg">
|
|
51
|
-
Back to top
|
|
52
|
-
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
53
|
-
</auro-button>
|
|
9
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic_button-only.html) -->
|
|
54
10
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
55
11
|
</div>
|
|
12
|
+
|
|
56
13
|
<auro-accordion alignRight>
|
|
57
|
-
<span slot="trigger">See code</span>
|
|
14
|
+
<span slot="trigger">See code</span>
|
|
15
|
+
|
|
58
16
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
59
|
-
<!--
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
### Attribute Examples
|
|
68
|
-
|
|
69
|
-
#### disabled
|
|
17
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
18
|
+
|
|
19
|
+
</auro-accordion>
|
|
20
|
+
|
|
21
|
+
## Property & Attribute Examples
|
|
22
|
+
|
|
23
|
+
### Disabled
|
|
70
24
|
|
|
71
25
|
This example demonstrates auro-backtotop in its disabled state.
|
|
72
26
|
|
|
73
27
|
<div class="exampleWrapper">
|
|
74
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
75
|
-
<!-- The below content is automatically added from ./../apiExamples/disabledButtonOnly.html -->
|
|
76
|
-
<auro-button
|
|
77
|
-
aria-label="arrow-up"
|
|
78
|
-
disabled
|
|
79
|
-
shape="pill"
|
|
80
|
-
size="lg">
|
|
81
|
-
Back to top
|
|
82
|
-
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
83
|
-
</auro-button>
|
|
28
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled_button-only.html) -->
|
|
84
29
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
85
30
|
</div>
|
|
86
31
|
<auro-accordion alignRight>
|
|
87
|
-
<span slot="trigger">See code</span>
|
|
32
|
+
<span slot="trigger">See code</span>
|
|
33
|
+
|
|
88
34
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
|
|
89
|
-
<!--
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
95
|
-
</auro-accordion>
|
|
96
|
-
|
|
97
|
-
#### variant
|
|
35
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
36
|
+
|
|
37
|
+
</auro-accordion>
|
|
38
|
+
|
|
39
|
+
### Variant
|
|
98
40
|
|
|
99
41
|
The `variant` attribute allows for rendering the button using the `primary` (default) or `secondary` styles.
|
|
100
42
|
|
|
101
43
|
<div class="exampleWrapper">
|
|
102
44
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/secondaryButtonOnly.html) -->
|
|
103
|
-
<!-- The below content is automatically added from ./../apiExamples/secondaryButtonOnly.html -->
|
|
104
|
-
<auro-button
|
|
105
|
-
variant="secondary"
|
|
106
|
-
shape="pill"
|
|
107
|
-
size="lg">
|
|
108
|
-
Back to top
|
|
109
|
-
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
110
|
-
</auro-button>
|
|
111
45
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
112
|
-
</div>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
113
48
|
<auro-accordion alignRight>
|
|
114
|
-
<span slot="trigger">See code</span>
|
|
49
|
+
<span slot="trigger">See code</span>
|
|
50
|
+
|
|
115
51
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/secondary.html) -->
|
|
116
|
-
<!--
|
|
117
|
-
|
|
118
|
-
```html
|
|
119
|
-
<auro-backtotop variant="secondary">Back to top</auro-backtotop>
|
|
120
|
-
```
|
|
121
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
122
|
-
</auro-accordion>
|
|
123
|
-
|
|
124
|
-
### Slot Examples
|
|
125
|
-
|
|
126
|
-
#### default
|
|
127
|
-
|
|
128
|
-
The default slot defines the content of the button.
|
|
52
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
129
53
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
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>
|
|
152
|
-
|
|
153
|
-
#### ariaLabel
|
|
54
|
+
</auro-accordion>
|
|
55
|
+
|
|
56
|
+
## Slot Examples
|
|
57
|
+
|
|
58
|
+
### Aria Label
|
|
154
59
|
|
|
155
60
|
The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The default value is `"arrow-up"`.
|
|
156
61
|
|
|
157
62
|
<div class="exampleWrapper">
|
|
158
63
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelButtonOnly.html) -->
|
|
159
|
-
<!-- The below content is automatically added from ./../apiExamples/ariaLabelButtonOnly.html -->
|
|
160
|
-
<auro-button
|
|
161
|
-
aria-label="Custom aria-label goes here!"
|
|
162
|
-
shape="pill"
|
|
163
|
-
size="lg">
|
|
164
|
-
Back to top
|
|
165
|
-
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
166
|
-
</auro-button>
|
|
167
64
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
168
65
|
</div>
|
|
169
66
|
<auro-accordion alignRight>
|
|
170
|
-
<span slot="trigger">See code</span>
|
|
67
|
+
<span slot="trigger">See code</span>
|
|
68
|
+
|
|
171
69
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabel.html) -->
|
|
172
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabel.html -->
|
|
173
|
-
|
|
174
|
-
```html
|
|
175
|
-
<auro-backtotop>
|
|
176
|
-
Back to top
|
|
177
|
-
</auro-backtotop>
|
|
178
|
-
```
|
|
179
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
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
70
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
71
|
+
|
|
72
|
+
</auro-accordion>
|
|
@@ -267,7 +267,8 @@ 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 auro-backtotop element provides users a way to quickly return to page top.
|
|
270
|
+
* The `auro-backtotop` element provides users a way to quickly return to page top.
|
|
271
|
+
* @customElement auro-backtotop
|
|
271
272
|
*
|
|
272
273
|
* @slot - Default slot for the text of the button.
|
|
273
274
|
* @slot ariaLabel - Use this slot to pass an aria-label to the HTML5 button.
|
|
@@ -349,30 +350,31 @@ class AuroBackToTop extends i$1 {
|
|
|
349
350
|
|
|
350
351
|
/**
|
|
351
352
|
* Render the trigger inline, will always be visible.
|
|
353
|
+
* @default false
|
|
352
354
|
*/
|
|
353
355
|
disabled: {
|
|
354
356
|
type: Boolean,
|
|
355
357
|
reflect: true,
|
|
356
358
|
},
|
|
357
359
|
hidden: {
|
|
358
|
-
type: Boolean
|
|
359
|
-
reflect: true,
|
|
360
|
+
type: Boolean
|
|
360
361
|
},
|
|
361
362
|
interactionActive: {
|
|
362
|
-
type: Boolean
|
|
363
|
+
type: Boolean
|
|
363
364
|
},
|
|
364
365
|
lastScrollDirectionUp: {
|
|
365
|
-
type: Boolean
|
|
366
|
+
type: Boolean
|
|
366
367
|
},
|
|
367
368
|
|
|
368
369
|
/**
|
|
369
370
|
* The variant attribute allows for rendering the button using the primary (default) or secondary styles.
|
|
370
|
-
* @
|
|
371
|
+
* @type {'primary' | 'secondary'}
|
|
372
|
+
* @default 'primary'
|
|
371
373
|
*/
|
|
372
374
|
variant: {
|
|
373
375
|
type: String,
|
|
374
|
-
reflect: true
|
|
375
|
-
}
|
|
376
|
+
reflect: true
|
|
377
|
+
}
|
|
376
378
|
};
|
|
377
379
|
}
|
|
378
380
|
|
|
@@ -383,7 +385,7 @@ class AuroBackToTop extends i$1 {
|
|
|
383
385
|
|
|
384
386
|
/**
|
|
385
387
|
* This will register this element with the browser.
|
|
386
|
-
* @param {string} [name="auro-backtotop"] - The name of element that you want to register
|
|
388
|
+
* @param {string} [name="auro-backtotop"] - The name of the element that you want to register.
|
|
387
389
|
*
|
|
388
390
|
* @example
|
|
389
391
|
* 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
|
+
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
|
-
# 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.
|
|
14
14
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
15
15
|
|
|
16
|
-
##
|
|
17
|
-
|
|
16
|
+
## 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,9 +24,11 @@ The `<auro-backtotop>` element should be used in situations where users may:
|
|
|
24
24
|
|
|
25
25
|
## Example(s)
|
|
26
26
|
|
|
27
|
+
### Basic
|
|
28
|
+
|
|
27
29
|
<div class="exampleWrapper">
|
|
28
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
29
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
30
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic_button-only.html) -->
|
|
31
|
+
<!-- The below content is automatically added from ./../apiExamples/basic_button-only.html -->
|
|
30
32
|
<auro-button
|
|
31
33
|
aria-label="arrow-up"
|
|
32
34
|
shape="pill"
|
|
@@ -35,10 +37,6 @@ The `<auro-backtotop>` element should be used in situations where users may:
|
|
|
35
37
|
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
36
38
|
</auro-button>
|
|
37
39
|
<!-- 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 -->
|
|
42
40
|
</div>
|
|
43
41
|
<auro-accordion alignRight>
|
|
44
42
|
<span slot="trigger">See code</span>
|
|
@@ -51,10 +49,10 @@ The `<auro-backtotop>` element should be used in situations where users may:
|
|
|
51
49
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
52
50
|
</auro-accordion>
|
|
53
51
|
|
|
54
|
-
|
|
52
|
+
### Page Content For Demo
|
|
55
53
|
|
|
56
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
57
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
54
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/page-content.html) -->
|
|
55
|
+
<!-- The below content is automatically added from ./../apiExamples/page-content.html -->
|
|
58
56
|
<p>
|
|
59
57
|
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.
|
|
60
58
|
</p>
|
|
@@ -70,29 +68,4 @@ The `<auro-backtotop>` element should be used in situations where users may:
|
|
|
70
68
|
<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>
|
|
71
69
|
<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>
|
|
72
70
|
</i>
|
|
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> -->
|
|
71
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -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.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
|
|
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},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
|
|