@aurodesignsystem-dev/auro-backtotop 0.0.0-pr67.1 → 0.0.0-pr67.3
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
|
@@ -76,17 +76,6 @@
|
|
|
76
76
|
"module": "src/auro-backtotop.js"
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
|
-
{
|
|
80
|
-
"name": "iconOnly",
|
|
81
|
-
"type": {
|
|
82
|
-
"text": "boolean"
|
|
83
|
-
},
|
|
84
|
-
"fieldName": "iconOnly",
|
|
85
|
-
"inheritedFrom": {
|
|
86
|
-
"name": "AuroBackToTop",
|
|
87
|
-
"module": "src/auro-backtotop.js"
|
|
88
|
-
}
|
|
89
|
-
},
|
|
90
79
|
{
|
|
91
80
|
"name": "interactionActive",
|
|
92
81
|
"type": {
|
|
@@ -112,7 +101,7 @@
|
|
|
112
101
|
{
|
|
113
102
|
"name": "variant",
|
|
114
103
|
"type": {
|
|
115
|
-
"text": "
|
|
104
|
+
"text": "string"
|
|
116
105
|
},
|
|
117
106
|
"description": "The variant attribute allows for rendering the button using the primary (default) or secondary styles.",
|
|
118
107
|
"default": "\"primary\"",
|
|
@@ -153,20 +142,6 @@
|
|
|
153
142
|
"module": "src/auro-backtotop.js"
|
|
154
143
|
}
|
|
155
144
|
},
|
|
156
|
-
{
|
|
157
|
-
"kind": "field",
|
|
158
|
-
"name": "iconOnly",
|
|
159
|
-
"privacy": "public",
|
|
160
|
-
"type": {
|
|
161
|
-
"text": "boolean"
|
|
162
|
-
},
|
|
163
|
-
"attribute": "iconOnly",
|
|
164
|
-
"reflects": true,
|
|
165
|
-
"inheritedFrom": {
|
|
166
|
-
"name": "AuroBackToTop",
|
|
167
|
-
"module": "src/auro-backtotop.js"
|
|
168
|
-
}
|
|
169
|
-
},
|
|
170
145
|
{
|
|
171
146
|
"kind": "method",
|
|
172
147
|
"name": "initializeProperties",
|
|
@@ -255,7 +230,7 @@
|
|
|
255
230
|
"name": "variant",
|
|
256
231
|
"privacy": "public",
|
|
257
232
|
"type": {
|
|
258
|
-
"text": "
|
|
233
|
+
"text": "string"
|
|
259
234
|
},
|
|
260
235
|
"description": "The variant attribute allows for rendering the button using the primary (default) or secondary styles.",
|
|
261
236
|
"default": "\"primary\"",
|
|
@@ -330,16 +305,6 @@
|
|
|
330
305
|
"attribute": "hidden",
|
|
331
306
|
"reflects": true
|
|
332
307
|
},
|
|
333
|
-
{
|
|
334
|
-
"kind": "field",
|
|
335
|
-
"name": "iconOnly",
|
|
336
|
-
"privacy": "public",
|
|
337
|
-
"type": {
|
|
338
|
-
"text": "boolean"
|
|
339
|
-
},
|
|
340
|
-
"attribute": "iconOnly",
|
|
341
|
-
"reflects": true
|
|
342
|
-
},
|
|
343
308
|
{
|
|
344
309
|
"kind": "method",
|
|
345
310
|
"name": "initializeProperties"
|
|
@@ -404,7 +369,7 @@
|
|
|
404
369
|
"name": "variant",
|
|
405
370
|
"privacy": "public",
|
|
406
371
|
"type": {
|
|
407
|
-
"text": "
|
|
372
|
+
"text": "string"
|
|
408
373
|
},
|
|
409
374
|
"description": "The variant attribute allows for rendering the button using the primary (default) or secondary styles.",
|
|
410
375
|
"default": "\"primary\"",
|
|
@@ -428,13 +393,6 @@
|
|
|
428
393
|
},
|
|
429
394
|
"fieldName": "hidden"
|
|
430
395
|
},
|
|
431
|
-
{
|
|
432
|
-
"name": "iconOnly",
|
|
433
|
-
"type": {
|
|
434
|
-
"text": "boolean"
|
|
435
|
-
},
|
|
436
|
-
"fieldName": "iconOnly"
|
|
437
|
-
},
|
|
438
396
|
{
|
|
439
397
|
"name": "interactionActive",
|
|
440
398
|
"type": {
|
|
@@ -452,7 +410,7 @@
|
|
|
452
410
|
{
|
|
453
411
|
"name": "variant",
|
|
454
412
|
"type": {
|
|
455
|
-
"text": "
|
|
413
|
+
"text": "string"
|
|
456
414
|
},
|
|
457
415
|
"description": "The variant attribute allows for rendering the button using the primary (default) or secondary styles.",
|
|
458
416
|
"default": "\"primary\"",
|
package/demo/api.md
CHANGED
|
@@ -7,10 +7,10 @@ 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 | Type
|
|
11
|
-
| ---------- | ---------- |
|
|
12
|
-
| disabled | disabled | boolean
|
|
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
|
|
|
@@ -158,7 +158,9 @@ The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The d
|
|
|
158
158
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelButtonOnly.html) -->
|
|
159
159
|
<!-- The below content is automatically added from ./../apiExamples/ariaLabelButtonOnly.html -->
|
|
160
160
|
<auro-button
|
|
161
|
-
aria-label="Custom aria-label goes here!"
|
|
161
|
+
aria-label="Custom aria-label goes here!"
|
|
162
|
+
shape="pill"
|
|
163
|
+
size="lg">
|
|
162
164
|
Back to top
|
|
163
165
|
<auro-icon customcolor category="interface" name="arrow-up" slot="icon" part="icon"></auro-icon>
|
|
164
166
|
</auro-button>
|
|
@@ -171,7 +173,6 @@ The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The d
|
|
|
171
173
|
|
|
172
174
|
```html
|
|
173
175
|
<auro-backtotop>
|
|
174
|
-
<span slot="ariaLabel">Custom aria-label goes here!</span>
|
|
175
176
|
Back to top
|
|
176
177
|
</auro-backtotop>
|
|
177
178
|
```
|
|
@@ -318,11 +318,6 @@ class AuroBackToTop extends i$1 {
|
|
|
318
318
|
*/
|
|
319
319
|
this.hidden = true;
|
|
320
320
|
|
|
321
|
-
/**
|
|
322
|
-
* @private
|
|
323
|
-
*/
|
|
324
|
-
this.iconOnly = true;
|
|
325
|
-
|
|
326
321
|
/**
|
|
327
322
|
* @private
|
|
328
323
|
*/
|
|
@@ -363,10 +358,6 @@ class AuroBackToTop extends i$1 {
|
|
|
363
358
|
type: Boolean,
|
|
364
359
|
reflect: true,
|
|
365
360
|
},
|
|
366
|
-
iconOnly: {
|
|
367
|
-
type: Boolean,
|
|
368
|
-
reflect: true,
|
|
369
|
-
},
|
|
370
361
|
interactionActive: {
|
|
371
362
|
type: Boolean,
|
|
372
363
|
},
|
|
@@ -376,7 +367,6 @@ class AuroBackToTop extends i$1 {
|
|
|
376
367
|
|
|
377
368
|
/**
|
|
378
369
|
* The variant attribute allows for rendering the button using the primary (default) or secondary styles.
|
|
379
|
-
* @type { 'primary' | 'secondary' | String }
|
|
380
370
|
* @default "primary"
|
|
381
371
|
*/
|
|
382
372
|
variant: {
|
|
@@ -478,7 +468,6 @@ class AuroBackToTop extends i$1 {
|
|
|
478
468
|
aria-label="${this.runtimeUtils.getSlotText(this, "ariaLabel") || "arrow-up"}"
|
|
479
469
|
.disabled="${this.disabled}"
|
|
480
470
|
variant="${this.variant}"
|
|
481
|
-
?iconOnly=${!this.lastScrollDirectionUp && !this.interactionActive}
|
|
482
471
|
part="button"
|
|
483
472
|
shape="${this.shape}"
|
|
484
473
|
size="${this.size}"
|
|
@@ -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.0",O),this.buttonTag=t.generateTag("auro-backtotop-button","12.3.0",R),this.shape="circle",this.size="lg",this.hidden=!0,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.0",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
|
|
|
@@ -84,7 +84,6 @@ import{literal as t,html as e,unsafeStatic as o}from"lit/static-html.js";import{
|
|
|
84
84
|
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel")||"arrow-up"}"
|
|
85
85
|
.disabled="${this.disabled}"
|
|
86
86
|
variant="${this.variant}"
|
|
87
|
-
?iconOnly=${!this.lastScrollDirectionUp&&!this.interactionActive}
|
|
88
87
|
part="button"
|
|
89
88
|
shape="${this.shape}"
|
|
90
89
|
size="${this.size}"
|
package/dist/index.d.ts
CHANGED
|
@@ -81,7 +81,7 @@ class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),
|
|
|
81
81
|
</div>
|
|
82
82
|
</div>
|
|
83
83
|
`}}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=literal`${unsafeStatic(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,true);}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:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var X=css`: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}
|
|
84
|
-
`;class j extends LitElement{constructor(){super(),this.initializeProperties();}initializeProperties(){const t=new W;this.disabled=false,this.variant="primary",this.iconTag=t.generateTag("auro-icon","9.1.0",O),this.buttonTag=t.generateTag("auro-backtotop-button","12.3.0",R),this.shape="circle",this.size="lg",this.hidden=true,this.
|
|
84
|
+
`;class j extends LitElement{constructor(){super(),this.initializeProperties();}initializeProperties(){const t=new W;this.disabled=false,this.variant="primary",this.iconTag=t.generateTag("auro-icon","9.1.0",O),this.buttonTag=t.generateTag("auro-backtotop-button","12.3.0",R),this.shape="circle",this.size="lg",this.hidden=true,this.lastKnownScrollPosition=0,this.lastScrollDirectionUp=false,this.interactionActive=false,this.yPosShowButton=400,this.runtimeUtils=new P;}static get properties(){return {disabled:{type:Boolean,reflect:true},hidden:{type:Boolean,reflect:true},interactionActive:{type:Boolean},lastScrollDirectionUp:{type:Boolean},variant:{type:String,reflect:true}}}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=false;}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-backtotop"),document.addEventListener("scroll",()=>{window.scrollY<this.lastKnownScrollPosition?this.lastScrollDirectionUp=true:this.lastScrollDirectionUp=false,this.lastKnownScrollPosition=window.scrollY,this.lastKnownScrollPosition<this.yPosShowButton?this.hidden=true:this.hidden=false;}),this.addEventListener("mouseover",()=>{this.shape="pill",this.interactionActive=true;}),this.addEventListener("mouseout",()=>{this.shape="circle",this.interactionActive=false;}),this.addEventListener("focusin",()=>{this.interactionActive=true;}),this.addEventListener("focusout",()=>{this.interactionActive=false;}),this.addEventListener("touchend",()=>{this.onTriggerClick();});}render(){return html`
|
|
85
85
|
<!-- Hidden slot for aria-label -->
|
|
86
86
|
<slot name="ariaLabel" hidden></slot>
|
|
87
87
|
|
|
@@ -89,7 +89,6 @@ class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),
|
|
|
89
89
|
aria-label="${this.runtimeUtils.getSlotText(this,"ariaLabel")||"arrow-up"}"
|
|
90
90
|
.disabled="${this.disabled}"
|
|
91
91
|
variant="${this.variant}"
|
|
92
|
-
?iconOnly=${!this.lastScrollDirectionUp&&!this.interactionActive}
|
|
93
92
|
part="button"
|
|
94
93
|
shape="${this.shape}"
|
|
95
94
|
size="${this.size}"
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroBackToTop}from"./auro-backtotop-
|
|
1
|
+
export{A as AuroBackToTop}from"./auro-backtotop-CYTkGahv.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-CYTkGahv.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-pr67.
|
|
10
|
+
"version": "0.0.0-pr67.3",
|
|
11
11
|
"description": "auro-backtotop HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|