@aurodesignsystem-dev/auro-backtotop 0.0.0-pr79.0 → 0.0.0-pr79.1
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/custom-elements.json
CHANGED
|
@@ -31,6 +31,13 @@
|
|
|
31
31
|
}
|
|
32
32
|
],
|
|
33
33
|
"members": [
|
|
34
|
+
{
|
|
35
|
+
"kind": "method",
|
|
36
|
+
"name": "_initializeDefaults",
|
|
37
|
+
"type": {
|
|
38
|
+
"text": "_initializeDefaults() => void"
|
|
39
|
+
}
|
|
40
|
+
},
|
|
34
41
|
{
|
|
35
42
|
"kind": "field",
|
|
36
43
|
"name": "disabled",
|
|
@@ -52,13 +59,6 @@
|
|
|
52
59
|
},
|
|
53
60
|
"attribute": "hidden"
|
|
54
61
|
},
|
|
55
|
-
{
|
|
56
|
-
"kind": "method",
|
|
57
|
-
"name": "initializeProperties",
|
|
58
|
-
"type": {
|
|
59
|
-
"text": "initializeProperties() => void"
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
62
|
{
|
|
63
63
|
"kind": "field",
|
|
64
64
|
"name": "interactionActive",
|
package/demo/api.md
CHANGED
|
@@ -1,72 +1,151 @@
|
|
|
1
1
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
-
<!--
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-backtotop
|
|
3
5
|
|
|
6
|
+
The `auro-backtotop` element provides users a way to quickly return to page top.
|
|
7
|
+
|
|
8
|
+
### Properties & Attributes
|
|
9
|
+
|
|
10
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
|
+
| ---------- | ---------- | --------- | ------------------------ | --------- | ------------------------------------------------------------------------------------------------------ |
|
|
12
|
+
| disabled | disabled | | boolean | `false` | Render the trigger inline, will always be visible. |
|
|
13
|
+
| variant | variant | | `primary` \| `secondary` | `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 the element that you want to register. | | 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
|
|
29
|
+
|
|
30
|
+
| Name | Description |
|
|
31
|
+
| ------ | --------------------------- |
|
|
32
|
+
| button | Apply CSS to HTML5 button. |
|
|
33
|
+
| icon | Apply CSS to arrow up icon. |
|
|
34
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
35
|
+
|
|
4
36
|
## Basic
|
|
5
37
|
|
|
6
38
|
<div class="exampleWrapper">
|
|
7
39
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
8
|
-
<!--
|
|
40
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
41
|
+
<auro-backtotop>Back to top</auro-backtotop>
|
|
42
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
9
43
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic_button-only.html) -->
|
|
44
|
+
<!-- The below content is automatically added from ./../apiExamples/basic_button-only.html -->
|
|
45
|
+
<auro-button
|
|
46
|
+
aria-label="arrow-up"
|
|
47
|
+
shape="pill"
|
|
48
|
+
size="lg">
|
|
49
|
+
Back to top
|
|
50
|
+
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
51
|
+
</auro-button>
|
|
10
52
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
11
|
-
</div>
|
|
12
|
-
|
|
53
|
+
</div>
|
|
13
54
|
<auro-accordion alignRight>
|
|
14
|
-
<span slot="trigger">See code</span>
|
|
15
|
-
|
|
55
|
+
<span slot="trigger">See code</span>
|
|
16
56
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
17
|
-
<!--
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
57
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<auro-backtotop>Back to top</auro-backtotop>
|
|
61
|
+
```
|
|
62
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
63
|
+
</auro-accordion>
|
|
64
|
+
|
|
65
|
+
## Property & Attribute Examples
|
|
66
|
+
|
|
23
67
|
### Disabled
|
|
24
68
|
|
|
25
69
|
This example demonstrates auro-backtotop in its disabled state.
|
|
26
70
|
|
|
27
71
|
<div class="exampleWrapper">
|
|
28
72
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled_button-only.html) -->
|
|
73
|
+
<!-- The below content is automatically added from ./../apiExamples/disabled_button-only.html -->
|
|
74
|
+
<auro-button
|
|
75
|
+
aria-label="arrow-up"
|
|
76
|
+
disabled
|
|
77
|
+
shape="pill"
|
|
78
|
+
size="lg">
|
|
79
|
+
Back to top
|
|
80
|
+
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
81
|
+
</auro-button>
|
|
29
82
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
30
83
|
</div>
|
|
31
84
|
<auro-accordion alignRight>
|
|
32
|
-
<span slot="trigger">See code</span>
|
|
33
|
-
|
|
85
|
+
<span slot="trigger">See code</span>
|
|
34
86
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
|
|
35
|
-
<!--
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
87
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<auro-backtotop disabled>Back to top</auro-backtotop>
|
|
91
|
+
```
|
|
92
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
93
|
+
</auro-accordion>
|
|
94
|
+
|
|
39
95
|
### Variant
|
|
40
96
|
|
|
41
97
|
The `variant` attribute allows for rendering the button using the `primary` (default) or `secondary` styles.
|
|
42
98
|
|
|
43
99
|
<div class="exampleWrapper">
|
|
44
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
100
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant_button-only.html) -->
|
|
101
|
+
<!-- The below content is automatically added from ./../apiExamples/variant_button-only.html -->
|
|
102
|
+
<auro-button
|
|
103
|
+
variant="secondary"
|
|
104
|
+
shape="pill"
|
|
105
|
+
size="lg">
|
|
106
|
+
Back to top
|
|
107
|
+
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
108
|
+
</auro-button>
|
|
45
109
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
46
|
-
</div>
|
|
47
|
-
|
|
110
|
+
</div>
|
|
48
111
|
<auro-accordion alignRight>
|
|
49
|
-
<span slot="trigger">See code</span>
|
|
50
|
-
|
|
51
|
-
<!--
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</auro-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
112
|
+
<span slot="trigger">See code</span>
|
|
113
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant.html) -->
|
|
114
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/variant.html -->
|
|
115
|
+
|
|
116
|
+
```html
|
|
117
|
+
<auro-backtotop variant="secondary">Back to top</auro-backtotop>
|
|
118
|
+
```
|
|
119
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
120
|
+
</auro-accordion>
|
|
121
|
+
|
|
122
|
+
## Slot Examples
|
|
123
|
+
|
|
58
124
|
### Aria Label
|
|
59
125
|
|
|
60
126
|
The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The default value is `"arrow-up"`.
|
|
61
127
|
|
|
62
128
|
<div class="exampleWrapper">
|
|
63
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
129
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label_button-only.html) -->
|
|
130
|
+
<!-- The below content is automatically added from ./../apiExamples/aria-label_button-only.html -->
|
|
131
|
+
<auro-button
|
|
132
|
+
aria-label="Custom aria-label goes here!"
|
|
133
|
+
shape="pill"
|
|
134
|
+
size="lg">
|
|
135
|
+
Back to top
|
|
136
|
+
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
137
|
+
</auro-button>
|
|
64
138
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
65
139
|
</div>
|
|
66
140
|
<auro-accordion alignRight>
|
|
67
|
-
<span slot="trigger">See code</span>
|
|
68
|
-
|
|
69
|
-
<!--
|
|
70
|
-
|
|
71
|
-
|
|
141
|
+
<span slot="trigger">See code</span>
|
|
142
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label.html) -->
|
|
143
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/aria-label.html -->
|
|
144
|
+
|
|
145
|
+
```html
|
|
146
|
+
<auro-backtotop>
|
|
147
|
+
Back to top
|
|
148
|
+
</auro-backtotop>
|
|
149
|
+
```
|
|
150
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
72
151
|
</auro-accordion>
|
|
@@ -280,11 +280,10 @@ class AuroBackToTop extends i$1 {
|
|
|
280
280
|
constructor() {
|
|
281
281
|
super();
|
|
282
282
|
|
|
283
|
-
this.
|
|
283
|
+
this._initializeDefaults();
|
|
284
284
|
}
|
|
285
285
|
|
|
286
|
-
|
|
287
|
-
|
|
286
|
+
_initializeDefaults() {
|
|
288
287
|
const versioning = new AuroDependencyVersioning();
|
|
289
288
|
|
|
290
289
|
this.disabled = false;
|
|
@@ -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 _=new Map,L=(t,e={})=>{const o=e.responseParser||(t=>t.text());return _.has(t)||_.set(t,fetch(t).then(o)),_.get(t)};var E=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 E}async fetchIcon(t,e){let o="";return o="logos"===t?await L(`${this.uri}/${t}/${e}.svg`):await L(`${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,E,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._initializeDefaults()}_initializeDefaults(){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
|
|
package/dist/index.d.ts
CHANGED
|
@@ -122,7 +122,7 @@ export type AuroBackToTopProps = {
|
|
|
122
122
|
*
|
|
123
123
|
* Methods that can be called to access component functionality.
|
|
124
124
|
*
|
|
125
|
-
* - `
|
|
125
|
+
* - `_initializeDefaults() => void`: undefined
|
|
126
126
|
* - `register(name?: string = "auro-backtotop") => void`: This will register this element with the browser.
|
|
127
127
|
*
|
|
128
128
|
* ## CSS Parts
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroBackToTop}from"./auro-backtotop-
|
|
1
|
+
export{A as AuroBackToTop}from"./auro-backtotop-CV2gu8Qz.js";import"lit/static-html.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as i}from"./auro-backtotop-
|
|
1
|
+
import{A as i}from"./auro-backtotop-CV2gu8Qz.js";import"lit/static-html.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-backtotop",
|
|
10
|
-
"version": "0.0.0-pr79.
|
|
10
|
+
"version": "0.0.0-pr79.1",
|
|
11
11
|
"description": "auro-backtotop HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|