@aurodesignsystem-dev/auro-toast 0.0.0-pr147.2 → 0.0.0-pr148.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 +36 -24
- package/demo/api.md +7 -8
- package/demo/api.min.js +13 -29
- package/demo/index.min.js +12 -28
- package/dist/{auro-toaster-J1vx9GDk.js → auro-toaster-BVtBRPDA.js} +1 -1
- package/dist/index.d.ts +5 -14
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +1 -2
- package/custom-elements.json +0 -447
package/README.md
CHANGED
|
@@ -49,7 +49,9 @@ The `<auro-toast>` use cases include:
|
|
|
49
49
|
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
50
50
|

|
|
51
51
|
|
|
52
|
-
|
|
52
|
+
```shell
|
|
53
|
+
$ npm i @aurodesignsystem/auro-toast
|
|
54
|
+
```
|
|
53
55
|
|
|
54
56
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
55
57
|
|
|
@@ -61,7 +63,9 @@ Defining the dependency within each project that is using the `<auro-toast>` com
|
|
|
61
63
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
62
64
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
63
65
|
|
|
64
|
-
|
|
66
|
+
```js
|
|
67
|
+
import "@aurodesignsystem/auro-toast";
|
|
68
|
+
```
|
|
65
69
|
|
|
66
70
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
67
71
|
|
|
@@ -70,7 +74,9 @@ Defining the dependency within each project that is using the `<auro-toast>` com
|
|
|
70
74
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
71
75
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
72
76
|
|
|
73
|
-
|
|
77
|
+
```html
|
|
78
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@latest/+esm"></script>
|
|
79
|
+
```
|
|
74
80
|
|
|
75
81
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
76
82
|
|
|
@@ -79,16 +85,18 @@ In cases where the project is not able to process JS assets, there are pre-proce
|
|
|
79
85
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
80
86
|
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
81
87
|
|
|
82
|
-
|
|
88
|
+
```html
|
|
89
|
+
<auro-button id="basicToastBtn">
|
|
83
90
|
Show default notification
|
|
84
|
-
|
|
85
|
-
|
|
91
|
+
</auro-button>
|
|
92
|
+
<!--
|
|
86
93
|
NOTE: The manually added style is NOT necessary for use,
|
|
87
94
|
Demo purposes ONLY!
|
|
88
|
-
|
|
89
|
-
|
|
95
|
+
-->
|
|
96
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
|
|
90
97
|
Default notification with no error type.
|
|
91
|
-
|
|
98
|
+
</auro-toast>
|
|
99
|
+
```
|
|
92
100
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
93
101
|
|
|
94
102
|
## Custom Component Registration for Version Management
|
|
@@ -105,35 +113,39 @@ You can do this by importing only the component class and using the `register(na
|
|
|
105
113
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
106
114
|
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
107
115
|
|
|
108
|
-
|
|
116
|
+
```js
|
|
117
|
+
// Import the class only
|
|
109
118
|
import { AuroToast } from '@aurodesignsystem/auro-toast/class';
|
|
110
|
-
|
|
119
|
+
|
|
111
120
|
// Register with a custom name if desired
|
|
112
|
-
AuroToast.register('custom-toast')
|
|
121
|
+
AuroToast.register('custom-toast');
|
|
122
|
+
```
|
|
113
123
|
|
|
114
124
|
This will create a new custom element `<custom-toast>` that behaves exactly like `<auro-toast>`, allowing both to coexist on the same page without interfering with each other.
|
|
115
125
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
116
126
|
<div class="exampleWrapper exampleWrapper--flex">
|
|
117
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
|
118
|
-
<!-- The below content is automatically added from ./apiExamples/custom.html -->
|
|
119
|
-
<auro-button id="customToastBtn">
|
|
127
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
|
128
|
+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
|
|
129
|
+
<auro-button id="customToastBtn">
|
|
120
130
|
Show default notification
|
|
121
|
-
</auro-button>
|
|
122
|
-
<custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
|
|
131
|
+
</auro-button>
|
|
132
|
+
<custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
|
|
123
133
|
Default notification with no error type.
|
|
124
|
-
</custom-toast>
|
|
125
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
134
|
+
</custom-toast>
|
|
135
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
126
136
|
</div>
|
|
127
137
|
<auro-accordion alignRight>
|
|
128
|
-
<span slot="trigger">See code</span>
|
|
138
|
+
<span slot="trigger">See code</span>
|
|
129
139
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
|
|
130
140
|
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
|
|
131
141
|
|
|
132
|
-
|
|
142
|
+
```html
|
|
143
|
+
<auro-button id="customToastBtn">
|
|
133
144
|
Show default notification
|
|
134
|
-
|
|
135
|
-
|
|
145
|
+
</auro-button>
|
|
146
|
+
<custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
|
|
136
147
|
Default notification with no error type.
|
|
137
|
-
|
|
148
|
+
</custom-toast>
|
|
149
|
+
```
|
|
138
150
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
139
151
|
</auro-accordion>
|
package/demo/api.md
CHANGED
|
@@ -9,9 +9,9 @@ The `auro-toast` element provides users a way to display short, temporary messag
|
|
|
9
9
|
|
|
10
10
|
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
11
11
|
| --------------- | --------------- | --------- | -------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
12
|
-
| disableAutoHide |
|
|
13
|
-
| noIcon |
|
|
14
|
-
| timeTilHide |
|
|
12
|
+
| disableAutoHide | disableAutoHide | | boolean | | Prevents the toast from auto-hiding on the default time. |
|
|
13
|
+
| noIcon | noIcon | | boolean | | Removes icon from the toast UI. |
|
|
14
|
+
| timeTilHide | timeTilHide | | number | | Sets the time in milliseconds until the toast hides. |
|
|
15
15
|
| trigger | trigger | | string | | The id of the element that triggered the toast.<br>When the toast is manually closed, focus will return to this element.<br>Takes precedence over the triggerElement property if both are set. |
|
|
16
16
|
| triggerElement | | | HTMLElement | | A direct reference to the element that triggered the toast.<br>When the toast is manually closed, focus will return to this element.<br>Use the trigger attribute instead if you prefer a declarative approach. |
|
|
17
17
|
| variant | variant | | `error` \| `success` \| `custom` | | Component will render visually based on which variant value is set. |
|
|
@@ -25,10 +25,9 @@ The `auro-toast` element provides users a way to display short, temporary messag
|
|
|
25
25
|
|
|
26
26
|
### Events
|
|
27
27
|
|
|
28
|
-
| Name | Description
|
|
29
|
-
| ------------ |
|
|
30
|
-
|
|
|
31
|
-
| onToastClose | **Deprecated**, use `toast-close` event instead. |
|
|
28
|
+
| Name | Description |
|
|
29
|
+
| ------------ | --------------------------------------- |
|
|
30
|
+
| onToastClose | Notifies that the toast has been closed |
|
|
32
31
|
|
|
33
32
|
### CSS Shadow Parts
|
|
34
33
|
|
|
@@ -514,7 +513,7 @@ export function initDynamicToastsExample() {
|
|
|
514
513
|
console.log("Toast added:", toastId);
|
|
515
514
|
|
|
516
515
|
// optional cleanup if your component doesn't auto-remove itself
|
|
517
|
-
toast.addEventListener("
|
|
516
|
+
toast.addEventListener("onToastClose", () => {
|
|
518
517
|
activeToasts.delete(toastId);
|
|
519
518
|
});
|
|
520
519
|
});
|
package/demo/api.min.js
CHANGED
|
@@ -182,7 +182,7 @@ function initDynamicToastsExample() {
|
|
|
182
182
|
console.log("Toast added:", toastId);
|
|
183
183
|
|
|
184
184
|
// optional cleanup if your component doesn't auto-remove itself
|
|
185
|
-
toast.addEventListener("
|
|
185
|
+
toast.addEventListener("onToastClose", () => {
|
|
186
186
|
activeToasts.delete(toastId);
|
|
187
187
|
});
|
|
188
188
|
});
|
|
@@ -538,8 +538,7 @@ const FADE_OUT_DURATION = 300;
|
|
|
538
538
|
*
|
|
539
539
|
* @csspart type-icon - Apply css to the toast type icon
|
|
540
540
|
* @csspart close-button - Apply css to the toast close button
|
|
541
|
-
* @fires onToastClose -
|
|
542
|
-
* @event toast-close - Notifies that the toast has been closed
|
|
541
|
+
* @fires onToastClose - Notifies that the toast has been closed
|
|
543
542
|
*/
|
|
544
543
|
|
|
545
544
|
// build the component class
|
|
@@ -647,7 +646,6 @@ class AuroToast extends i$2 {
|
|
|
647
646
|
disableAutoHide: {
|
|
648
647
|
type: Boolean,
|
|
649
648
|
reflect: true,
|
|
650
|
-
attribute: "disableautohide",
|
|
651
649
|
},
|
|
652
650
|
|
|
653
651
|
/**
|
|
@@ -656,7 +654,6 @@ class AuroToast extends i$2 {
|
|
|
656
654
|
noIcon: {
|
|
657
655
|
type: Boolean,
|
|
658
656
|
reflect: true,
|
|
659
|
-
attribute: "noicon",
|
|
660
657
|
},
|
|
661
658
|
|
|
662
659
|
/**
|
|
@@ -665,7 +662,6 @@ class AuroToast extends i$2 {
|
|
|
665
662
|
timeTilHide: {
|
|
666
663
|
type: Number,
|
|
667
664
|
reflect: true,
|
|
668
|
-
attribute: "timetilhide",
|
|
669
665
|
},
|
|
670
666
|
|
|
671
667
|
/**
|
|
@@ -783,29 +779,15 @@ class AuroToast extends i$2 {
|
|
|
783
779
|
/**
|
|
784
780
|
* Emits closed toast event.
|
|
785
781
|
*
|
|
786
|
-
* @deprecated Use `toast-close` event instead.
|
|
787
782
|
* @event onToastClose
|
|
788
|
-
* @type {
|
|
783
|
+
* @type {object}
|
|
784
|
+
* @property {boolean} false - Sets visibility value for the toast element.
|
|
789
785
|
*/
|
|
790
786
|
this.dispatchEvent(
|
|
791
787
|
new CustomEvent("onToastClose", {
|
|
792
788
|
bubbles: true,
|
|
793
789
|
composed: true,
|
|
794
|
-
detail:
|
|
795
|
-
}),
|
|
796
|
-
);
|
|
797
|
-
|
|
798
|
-
/**
|
|
799
|
-
* Emits closed toast event.
|
|
800
|
-
*
|
|
801
|
-
* @event toast-close
|
|
802
|
-
* @type {{ visible: boolean }}
|
|
803
|
-
*/
|
|
804
|
-
this.dispatchEvent(
|
|
805
|
-
new CustomEvent("toast-close", {
|
|
806
|
-
bubbles: true,
|
|
807
|
-
composed: true,
|
|
808
|
-
detail: { visible: this.visible },
|
|
790
|
+
detail: this,
|
|
809
791
|
}),
|
|
810
792
|
);
|
|
811
793
|
}
|
|
@@ -954,12 +936,14 @@ class AuroToast extends i$2 {
|
|
|
954
936
|
|
|
955
937
|
render() {
|
|
956
938
|
return u$2`
|
|
957
|
-
${
|
|
958
|
-
|
|
939
|
+
${
|
|
940
|
+
this.visible
|
|
941
|
+
? u$2`
|
|
959
942
|
<div class="toastContainer">
|
|
960
|
-
${
|
|
961
|
-
|
|
962
|
-
|
|
943
|
+
${
|
|
944
|
+
this.noIcon
|
|
945
|
+
? undefined
|
|
946
|
+
: u$2`
|
|
963
947
|
<${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
|
|
964
948
|
${this.variant === "custom" ? undefined : u$2`${this.getVariantIcon()}`}
|
|
965
949
|
</${this.iconTag}>
|
|
@@ -981,7 +965,7 @@ class AuroToast extends i$2 {
|
|
|
981
965
|
</${this.buttonTag}>
|
|
982
966
|
</div>
|
|
983
967
|
`
|
|
984
|
-
|
|
968
|
+
: undefined
|
|
985
969
|
}
|
|
986
970
|
`;
|
|
987
971
|
}
|
package/demo/index.min.js
CHANGED
|
@@ -289,8 +289,7 @@ const FADE_OUT_DURATION = 300;
|
|
|
289
289
|
*
|
|
290
290
|
* @csspart type-icon - Apply css to the toast type icon
|
|
291
291
|
* @csspart close-button - Apply css to the toast close button
|
|
292
|
-
* @fires onToastClose -
|
|
293
|
-
* @event toast-close - Notifies that the toast has been closed
|
|
292
|
+
* @fires onToastClose - Notifies that the toast has been closed
|
|
294
293
|
*/
|
|
295
294
|
|
|
296
295
|
// build the component class
|
|
@@ -398,7 +397,6 @@ class AuroToast extends i$2 {
|
|
|
398
397
|
disableAutoHide: {
|
|
399
398
|
type: Boolean,
|
|
400
399
|
reflect: true,
|
|
401
|
-
attribute: "disableautohide",
|
|
402
400
|
},
|
|
403
401
|
|
|
404
402
|
/**
|
|
@@ -407,7 +405,6 @@ class AuroToast extends i$2 {
|
|
|
407
405
|
noIcon: {
|
|
408
406
|
type: Boolean,
|
|
409
407
|
reflect: true,
|
|
410
|
-
attribute: "noicon",
|
|
411
408
|
},
|
|
412
409
|
|
|
413
410
|
/**
|
|
@@ -416,7 +413,6 @@ class AuroToast extends i$2 {
|
|
|
416
413
|
timeTilHide: {
|
|
417
414
|
type: Number,
|
|
418
415
|
reflect: true,
|
|
419
|
-
attribute: "timetilhide",
|
|
420
416
|
},
|
|
421
417
|
|
|
422
418
|
/**
|
|
@@ -534,29 +530,15 @@ class AuroToast extends i$2 {
|
|
|
534
530
|
/**
|
|
535
531
|
* Emits closed toast event.
|
|
536
532
|
*
|
|
537
|
-
* @deprecated Use `toast-close` event instead.
|
|
538
533
|
* @event onToastClose
|
|
539
|
-
* @type {
|
|
534
|
+
* @type {object}
|
|
535
|
+
* @property {boolean} false - Sets visibility value for the toast element.
|
|
540
536
|
*/
|
|
541
537
|
this.dispatchEvent(
|
|
542
538
|
new CustomEvent("onToastClose", {
|
|
543
539
|
bubbles: true,
|
|
544
540
|
composed: true,
|
|
545
|
-
detail:
|
|
546
|
-
}),
|
|
547
|
-
);
|
|
548
|
-
|
|
549
|
-
/**
|
|
550
|
-
* Emits closed toast event.
|
|
551
|
-
*
|
|
552
|
-
* @event toast-close
|
|
553
|
-
* @type {{ visible: boolean }}
|
|
554
|
-
*/
|
|
555
|
-
this.dispatchEvent(
|
|
556
|
-
new CustomEvent("toast-close", {
|
|
557
|
-
bubbles: true,
|
|
558
|
-
composed: true,
|
|
559
|
-
detail: { visible: this.visible },
|
|
541
|
+
detail: this,
|
|
560
542
|
}),
|
|
561
543
|
);
|
|
562
544
|
}
|
|
@@ -705,12 +687,14 @@ class AuroToast extends i$2 {
|
|
|
705
687
|
|
|
706
688
|
render() {
|
|
707
689
|
return u$2`
|
|
708
|
-
${
|
|
709
|
-
|
|
690
|
+
${
|
|
691
|
+
this.visible
|
|
692
|
+
? u$2`
|
|
710
693
|
<div class="toastContainer">
|
|
711
|
-
${
|
|
712
|
-
|
|
713
|
-
|
|
694
|
+
${
|
|
695
|
+
this.noIcon
|
|
696
|
+
? undefined
|
|
697
|
+
: u$2`
|
|
714
698
|
<${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
|
|
715
699
|
${this.variant === "custom" ? undefined : u$2`${this.getVariantIcon()}`}
|
|
716
700
|
</${this.iconTag}>
|
|
@@ -732,7 +716,7 @@ class AuroToast extends i$2 {
|
|
|
732
716
|
</${this.buttonTag}>
|
|
733
717
|
</div>
|
|
734
718
|
`
|
|
735
|
-
|
|
719
|
+
: undefined
|
|
736
720
|
}
|
|
737
721
|
`;
|
|
738
722
|
}
|
|
@@ -78,7 +78,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{unsafeStatic as a,lit
|
|
|
78
78
|
`}}var X='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error-stroke__desc" class="ico_squareLarge" 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-stroke__desc">triangle with exclamation mark.</desc><path d="M12 15.34c-.41 0-.75-.34-.75-.75V9.33c0-.41.34-.75.75-.75s.75.34.75.75v5.26c0 .41-.34.75-.75.75m.87 1.62c0-.48-.39-.88-.88-.88s-.88.39-.88.88.39.88.88.88.88-.39.88-.88M11.98 4.5 3.5 18.97h16.99zm0-1.5c.5 0 1 .25 1.29.74l8.51 14.47c.59 1-.13 2.26-1.29 2.26H3.5c-1.16 0-1.88-1.26-1.29-2.26l8.48-14.47c.29-.49.79-.74 1.29-.74"/></svg>',j='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="information-stroke__desc" class="ico_squareLarge" 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="information-stroke__desc">Important information indicator.</desc><path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17m0 5.75a.75.75 0 0 1 .743.648l.007.102v6.25a.75.75 0 0 1-1.493.102l-.007-.102V10a.75.75 0 0 1 .75-.75M12 7a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5"/></svg>',P='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" class="ico_squareLarge" 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/><path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17m-1.524 10.416 4.971-5.423a.75.75 0 0 1 1.175.927l-.07.087-5.5 6a.75.75 0 0 1-.996.098l-.086-.075-2.5-2.5a.75.75 0 0 1 .976-1.133l.084.073zl4.971-5.423z"/></svg>',V='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="x-lg__desc" class="ico_squareLarge" 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="x-lg__desc">a large x</desc><path fill-rule="evenodd" d="M16.51 17.26q-.255 0-.45-.15l-.09-.08-3.96-3.96-3.98 3.98-.1.08a.76.76 0 0 1-.43.14.75.75 0 0 1-.6-1.2l.08-.09 3.96-3.96-3.98-3.98-.08-.1a.746.746 0 0 1 .61-1.18q.255 0 .45.15l.1.08L12 10.95l3.98-3.98.1-.08a.76.76 0 0 1 .43-.14.75.75 0 0 1 .6 1.2l-.08.1-3.96 3.96 3.98 3.98.08.1a.746.746 0 0 1-.61 1.18z" clip-rule="evenodd"/></svg>',J=e`:host([visible]){background-color:var(--ds-auro-toast-container-color);color:var(--ds-auro-toast-text-color)}:host([visible]) .typeIcon{color:var(--ds-auro-toast-icon-color)}:host([visible]) .closeButton:hover{background-color:var(--ds-auro-toast-close-button-hover-container-color)}:host([variant=error]){--ds-auro-toast-container-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-toast-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-toast-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([variant=success]){--ds-auro-toast-container-color: var(--ds-basic-color-status-success-subtle, #d6eac7);--ds-auro-toast-icon-color: var(--ds-basic-color-status-success, #447a1f);--ds-auro-toast-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
|
|
79
79
|
`,K=e`.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-default-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-lg-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-sm-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-sm-emphasized-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-xs-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-xs-emphasized-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, .875rem)}.body-2xs,.body-2xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-emphasized-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-variant-ligatures:none;font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-variant-ligatures:none;font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-variant-ligatures:none;font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-variant-ligatures:none;font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-variant-ligatures:none;font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-variant-ligatures:none;font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:inherit}:host([visible]){display:inline-block;min-width:100%;border-radius:var(--ds-size-100, .5rem);box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15));pointer-events:auto}@media (width >= 576px){:host([visible]){min-width:200px;max-width:500px}}:host([visible]) .toastContainer{display:flex;flex-direction:row;align-items:flex-start;padding:var(--ds-size-200, 1rem) var(--ds-size-150, .75rem);gap:var(--ds-size-200, 1rem)}:host([visible]) .hidden{opacity:0;transition:visibility 0s .3s,opacity .3s ease-out;visibility:hidden}:host([visible]) [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([visible]) .message{flex:1}:host([visible]) .closeButton{border-radius:50%}
|
|
80
80
|
`,Q=e`:host{--ds-auro-toast-close-button-hover-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-toast-container-color: var(--ds-advanced-color-shared-background-strong, #676767);--ds-auro-toast-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-toast-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}
|
|
81
|
-
`;class Y extends t{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.closeDom=(new DOMParser).parseFromString(V,"text/html"),this.closeSvg=this.closeDom.body.firstChild,this.closeSvg.setAttribute("slot","svg"),this.successDom=(new DOMParser).parseFromString(P,"text/html"),this.successSvg=this.successDom.body.firstChild,this.successSvg.setAttribute("slot","svg"),this.errorDom=(new DOMParser).parseFromString(X,"text/html"),this.errorSvg=this.errorDom.body.firstChild,this.errorSvg.setAttribute("slot","svg"),this.infoDom=(new DOMParser).parseFromString(j,"text/html"),this.infoSvg=this.infoDom.body.firstChild,this.infoSvg.setAttribute("slot","svg");const e=new l;this.buttonTag=e.generateTag("auro-button","12.3.2",U),this.iconTag=e.generateTag("auro-icon","9.2.0",G),this.runtimeUtils=new c,this.fadeOutTimer=void 0,this._isStandalone=!1}static get properties(){return{...t.properties,disableAutoHide:{type:Boolean,reflect:!0
|
|
81
|
+
`;class Y extends t{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.closeDom=(new DOMParser).parseFromString(V,"text/html"),this.closeSvg=this.closeDom.body.firstChild,this.closeSvg.setAttribute("slot","svg"),this.successDom=(new DOMParser).parseFromString(P,"text/html"),this.successSvg=this.successDom.body.firstChild,this.successSvg.setAttribute("slot","svg"),this.errorDom=(new DOMParser).parseFromString(X,"text/html"),this.errorSvg=this.errorDom.body.firstChild,this.errorSvg.setAttribute("slot","svg"),this.infoDom=(new DOMParser).parseFromString(j,"text/html"),this.infoSvg=this.infoDom.body.firstChild,this.infoSvg.setAttribute("slot","svg");const e=new l;this.buttonTag=e.generateTag("auro-button","12.3.2",U),this.iconTag=e.generateTag("auro-icon","9.2.0",G),this.runtimeUtils=new c,this.fadeOutTimer=void 0,this._isStandalone=!1}static get properties(){return{...t.properties,disableAutoHide:{type:Boolean,reflect:!0},noIcon:{type:Boolean,reflect:!0},timeTilHide:{type:Number,reflect:!0},trigger:{type:String,reflect:!0},triggerElement:{type:Object,attribute:!1},variant:{type:String,reflect:!0},visible:{type:Boolean,reflect:!0}}}static get styles(){return[K,J,Q]}static register(e="auro-toast"){c.prototype.registerComponent(e,Y)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-toast")}_returnFocus(){const e=(this.trigger?document.getElementById(this.trigger):null)??this.triggerElement;e&&e.focus()}clickToClose(){this._returnFocus(),this.closeToast(),clearTimeout(this.fadeOutTimer)}fadeOutToast(){if(!this.disableAutoHide){const e=this.shadowRoot.querySelector(".toastContainer");e&&e.classList.add("hidden"),setTimeout(()=>{this.closeToast()},300)}}closeToast(){clearTimeout(this.fadeOutTimer),this.visible=!1,this.dispatchEvent(new CustomEvent("onToastClose",{bubbles:!0,composed:!0,detail:this}))}setOnClick(){window.innerWidth<767&&(this.onclick=()=>{this.fadeOutToast()})}getVariantIcon(){const e={success:this.successSvg,error:this.errorSvg,default:this.infoSvg};return e[this.variant]||e.default}connectedCallback(){super.connectedCallback(),this.setOnClick();const e=new CustomEvent("toast-request-announce",{bubbles:!0,cancelable:!0,composed:!0}),t=this.dispatchEvent(e);this._isStandalone=t&&!this._hasAncestorLiveRegion(),this._syncStandaloneRole()}_syncStandaloneRole(){this._isStandalone?this.setAttribute("role","error"===this.variant?"alert":"status"):this.removeAttribute("role")}_hasAncestorLiveRegion(){let e=this.parentElement;for(;e;){if(["polite","assertive"].includes(e.getAttribute?.("aria-live"))||["alert","status","log"].includes(e.getAttribute?.("role")))return!0;e=e.parentElement??e.getRootNode()?.host??null}return!1}updated(e){e.has("visible")&&this.handleSlotContent(),e.has("variant")&&(clearTimeout(this.fadeOutTimer),this._syncStandaloneRole()),this.visible&&!this.disableAutoHide&&"error"!==this.variant&&(clearTimeout(this.fadeOutTimer),this.fadeOutTimer=setTimeout(()=>{this.fadeOutToast()},this.timeTilHide||5e3))}handleSlotContent(){try{const e=this.querySelector('[slot="customSvg"]');if(e){const t=e.cloneNode(!0),s=this.shadowRoot.querySelector(".typeIcon");s&&(t.setAttribute("slot","svg"),s.appendChild(t))}}catch(e){console.error("handleSlotContent",e)}}render(){return r`
|
|
82
82
|
${this.visible?r`
|
|
83
83
|
<div class="toastContainer">
|
|
84
84
|
${this.noIcon?void 0:r`
|
package/dist/index.d.ts
CHANGED
|
@@ -82,17 +82,11 @@ type BaseEvents = {
|
|
|
82
82
|
|
|
83
83
|
|
|
84
84
|
export type AuroToastProps = {
|
|
85
|
-
/** Prevents the toast from auto-hiding on the default time. */
|
|
86
|
-
"disableautohide"?: AuroToast['disableAutoHide'];
|
|
87
85
|
/** Prevents the toast from auto-hiding on the default time. */
|
|
88
86
|
"disableAutoHide"?: AuroToast['disableAutoHide'];
|
|
89
87
|
/** Removes icon from the toast UI. */
|
|
90
|
-
"noicon"?: AuroToast['noIcon'];
|
|
91
|
-
/** Removes icon from the toast UI. */
|
|
92
88
|
"noIcon"?: AuroToast['noIcon'];
|
|
93
89
|
/** Sets the time in milliseconds until the toast hides. */
|
|
94
|
-
"timetilhide"?: AuroToast['timeTilHide'];
|
|
95
|
-
/** Sets the time in milliseconds until the toast hides. */
|
|
96
90
|
"timeTilHide"?: AuroToast['timeTilHide'];
|
|
97
91
|
/** The id of the element that triggered the toast.
|
|
98
92
|
When the toast is manually closed, focus will return to this element.
|
|
@@ -108,9 +102,7 @@ Use the trigger attribute instead if you prefer a declarative approach. */
|
|
|
108
102
|
"triggerElement"?: AuroToast['triggerElement'];
|
|
109
103
|
|
|
110
104
|
/** Notifies that the toast has been closed */
|
|
111
|
-
"
|
|
112
|
-
/** @deprecated Use `toast-close` event instead. - **Deprecated**, use `toast-close` event instead. */
|
|
113
|
-
"ononToastClose"?: (e: CustomEvent<{ visible: boolean }>) => void;
|
|
105
|
+
"ononToastClose"?: (e: CustomEvent<object>) => void;
|
|
114
106
|
}
|
|
115
107
|
|
|
116
108
|
|
|
@@ -124,9 +116,9 @@ Use the trigger attribute instead if you prefer a declarative approach. */
|
|
|
124
116
|
*
|
|
125
117
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
126
118
|
*
|
|
127
|
-
* - `
|
|
128
|
-
* - `
|
|
129
|
-
* - `
|
|
119
|
+
* - `disableAutoHide`: Prevents the toast from auto-hiding on the default time.
|
|
120
|
+
* - `noIcon`: Removes icon from the toast UI.
|
|
121
|
+
* - `timeTilHide`: Sets the time in milliseconds until the toast hides.
|
|
130
122
|
* - `trigger`: The id of the element that triggered the toast.
|
|
131
123
|
* When the toast is manually closed, focus will return to this element.
|
|
132
124
|
* Takes precedence over the triggerElement property if both are set.
|
|
@@ -140,8 +132,7 @@ Use the trigger attribute instead if you prefer a declarative approach. */
|
|
|
140
132
|
*
|
|
141
133
|
* Events that will be emitted by the component.
|
|
142
134
|
*
|
|
143
|
-
* - `
|
|
144
|
-
* - `onToastClose`: **Deprecated**, use `toast-close` event instead.
|
|
135
|
+
* - `onToastClose`: Notifies that the toast has been closed
|
|
145
136
|
*
|
|
146
137
|
* ## Methods
|
|
147
138
|
*
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroToast,a as AuroToaster}from"./auro-toaster-
|
|
1
|
+
export{A as AuroToast,a as AuroToaster}from"./auro-toaster-BVtBRPDA.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as i,a as t}from"./auro-toaster-
|
|
1
|
+
import{A as i,a as t}from"./auro-toaster-BVtBRPDA.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register(),t.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-toast",
|
|
10
|
-
"version": "0.0.0-
|
|
10
|
+
"version": "0.0.0-pr148.0",
|
|
11
11
|
"description": "auro-toast HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -84,7 +84,6 @@
|
|
|
84
84
|
"files": [
|
|
85
85
|
"dist/**/*",
|
|
86
86
|
"demo/**/*",
|
|
87
|
-
"custom-elements.json",
|
|
88
87
|
"CHANGELOG.md",
|
|
89
88
|
"README.md",
|
|
90
89
|
"LICENSE",
|
package/custom-elements.json
DELETED
|
@@ -1,447 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"schemaVersion": "1.0.0",
|
|
3
|
-
"readme": "",
|
|
4
|
-
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "src/auro-toast.js",
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "class",
|
|
11
|
-
"description": "The `auro-toast` element provides users a way to display short, temporary messages.",
|
|
12
|
-
"name": "AuroToast",
|
|
13
|
-
"cssParts": [
|
|
14
|
-
{
|
|
15
|
-
"description": "Apply css to the toast close button",
|
|
16
|
-
"name": "close-button"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"description": "Apply css to the toast type icon",
|
|
20
|
-
"name": "type-icon"
|
|
21
|
-
}
|
|
22
|
-
],
|
|
23
|
-
"members": [
|
|
24
|
-
{
|
|
25
|
-
"kind": "method",
|
|
26
|
-
"name": "_hasAncestorLiveRegion",
|
|
27
|
-
"description": "Walks the DOM ancestors (crossing shadow boundaries) looking for any\nactive live region — either an aria-live=\"polite/assertive\" attribute or\nan implicit live region role (alert, status, log).\naria-live=\"off\" is not considered active and is intentionally ignored.",
|
|
28
|
-
"privacy": "private",
|
|
29
|
-
"return": {
|
|
30
|
-
"type": {
|
|
31
|
-
"text": "boolean"
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
"kind": "method",
|
|
37
|
-
"name": "_initializeDefaults",
|
|
38
|
-
"type": {
|
|
39
|
-
"text": "_initializeDefaults() => void"
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
"kind": "method",
|
|
44
|
-
"name": "_returnFocus",
|
|
45
|
-
"description": "Returns focus to the trigger element when the toast is manually closed.\nNot called on auto-dismiss — moving focus during auto-dismiss would\ninterrupt the AT user's current position in the page.",
|
|
46
|
-
"privacy": "private",
|
|
47
|
-
"return": {
|
|
48
|
-
"type": {
|
|
49
|
-
"text": "void"
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
"kind": "method",
|
|
55
|
-
"name": "_syncStandaloneRole",
|
|
56
|
-
"description": "Sets or removes the live-region role on the host depending on whether\nthe toast is standalone. Extracted so connectedCallback and updated()\nstay in sync without duplicating the logic.",
|
|
57
|
-
"privacy": "private",
|
|
58
|
-
"return": {
|
|
59
|
-
"type": {
|
|
60
|
-
"text": "void"
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
"kind": "method",
|
|
66
|
-
"name": "clickToClose",
|
|
67
|
-
"privacy": "private",
|
|
68
|
-
"return": {
|
|
69
|
-
"type": {
|
|
70
|
-
"text": "void"
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
"kind": "method",
|
|
76
|
-
"name": "closeToast",
|
|
77
|
-
"privacy": "private",
|
|
78
|
-
"return": {
|
|
79
|
-
"type": {
|
|
80
|
-
"text": "void"
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
"kind": "field",
|
|
86
|
-
"name": "disableAutoHide",
|
|
87
|
-
"privacy": "public",
|
|
88
|
-
"type": {
|
|
89
|
-
"text": "boolean"
|
|
90
|
-
},
|
|
91
|
-
"description": "Prevents the toast from auto-hiding on the default time.",
|
|
92
|
-
"attribute": "disableautohide",
|
|
93
|
-
"reflects": true
|
|
94
|
-
},
|
|
95
|
-
{
|
|
96
|
-
"kind": "method",
|
|
97
|
-
"name": "fadeOutToast",
|
|
98
|
-
"privacy": "private",
|
|
99
|
-
"return": {
|
|
100
|
-
"type": {
|
|
101
|
-
"text": "void"
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
"kind": "method",
|
|
107
|
-
"name": "getVariantIcon",
|
|
108
|
-
"description": "Determines which type icon to render based on the variant prop.",
|
|
109
|
-
"privacy": "private",
|
|
110
|
-
"return": {
|
|
111
|
-
"type": {
|
|
112
|
-
"text": "HTMLElement"
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
},
|
|
116
|
-
{
|
|
117
|
-
"kind": "method",
|
|
118
|
-
"name": "handleSlotContent",
|
|
119
|
-
"description": "Mirrors any defined custom type svg into the correct place in the template.",
|
|
120
|
-
"privacy": "private",
|
|
121
|
-
"return": {
|
|
122
|
-
"type": {
|
|
123
|
-
"text": "void"
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
|
-
{
|
|
128
|
-
"kind": "field",
|
|
129
|
-
"name": "noIcon",
|
|
130
|
-
"privacy": "public",
|
|
131
|
-
"type": {
|
|
132
|
-
"text": "boolean"
|
|
133
|
-
},
|
|
134
|
-
"description": "Removes icon from the toast UI.",
|
|
135
|
-
"attribute": "noicon",
|
|
136
|
-
"reflects": true
|
|
137
|
-
},
|
|
138
|
-
{
|
|
139
|
-
"kind": "method",
|
|
140
|
-
"name": "register",
|
|
141
|
-
"static": true,
|
|
142
|
-
"parameters": [
|
|
143
|
-
{
|
|
144
|
-
"name": "name",
|
|
145
|
-
"default": "\"auro-toast\"",
|
|
146
|
-
"description": "The name of the element that you want to register.",
|
|
147
|
-
"optional": true,
|
|
148
|
-
"type": {
|
|
149
|
-
"text": "string"
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
],
|
|
153
|
-
"description": "This will register this element with the browser.",
|
|
154
|
-
"type": {
|
|
155
|
-
"text": "register(name?: string = \"auro-toast\") => void"
|
|
156
|
-
}
|
|
157
|
-
},
|
|
158
|
-
{
|
|
159
|
-
"kind": "method",
|
|
160
|
-
"name": "setOnClick",
|
|
161
|
-
"description": "For mobile, set the onclick function so the toast can be dismissed if it is tapped on anywhere inside the toast.",
|
|
162
|
-
"privacy": "private",
|
|
163
|
-
"return": {
|
|
164
|
-
"type": {
|
|
165
|
-
"text": "void"
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
},
|
|
169
|
-
{
|
|
170
|
-
"kind": "field",
|
|
171
|
-
"name": "timeTilHide",
|
|
172
|
-
"privacy": "public",
|
|
173
|
-
"type": {
|
|
174
|
-
"text": "number"
|
|
175
|
-
},
|
|
176
|
-
"description": "Sets the time in milliseconds until the toast hides.",
|
|
177
|
-
"attribute": "timetilhide",
|
|
178
|
-
"reflects": true
|
|
179
|
-
},
|
|
180
|
-
{
|
|
181
|
-
"kind": "field",
|
|
182
|
-
"name": "trigger",
|
|
183
|
-
"privacy": "public",
|
|
184
|
-
"type": {
|
|
185
|
-
"text": "string"
|
|
186
|
-
},
|
|
187
|
-
"description": "The id of the element that triggered the toast.\nWhen the toast is manually closed, focus will return to this element.\nTakes precedence over the triggerElement property if both are set.",
|
|
188
|
-
"attribute": "trigger",
|
|
189
|
-
"reflects": true
|
|
190
|
-
},
|
|
191
|
-
{
|
|
192
|
-
"kind": "field",
|
|
193
|
-
"name": "triggerElement",
|
|
194
|
-
"privacy": "public",
|
|
195
|
-
"type": {
|
|
196
|
-
"text": "HTMLElement"
|
|
197
|
-
},
|
|
198
|
-
"description": "A direct reference to the element that triggered the toast.\nWhen the toast is manually closed, focus will return to this element.\nUse the trigger attribute instead if you prefer a declarative approach."
|
|
199
|
-
},
|
|
200
|
-
{
|
|
201
|
-
"kind": "field",
|
|
202
|
-
"name": "variant",
|
|
203
|
-
"privacy": "public",
|
|
204
|
-
"type": {
|
|
205
|
-
"text": "'error' | 'success' | 'custom'"
|
|
206
|
-
},
|
|
207
|
-
"description": "Component will render visually based on which variant value is set.",
|
|
208
|
-
"attribute": "variant",
|
|
209
|
-
"reflects": true
|
|
210
|
-
},
|
|
211
|
-
{
|
|
212
|
-
"kind": "field",
|
|
213
|
-
"name": "visible",
|
|
214
|
-
"privacy": "public",
|
|
215
|
-
"type": {
|
|
216
|
-
"text": "boolean"
|
|
217
|
-
},
|
|
218
|
-
"description": "Sets state of toast to visible",
|
|
219
|
-
"attribute": "visible",
|
|
220
|
-
"reflects": true
|
|
221
|
-
}
|
|
222
|
-
],
|
|
223
|
-
"events": [
|
|
224
|
-
{
|
|
225
|
-
"name": "toast-close",
|
|
226
|
-
"type": {
|
|
227
|
-
"text": "{ visible: boolean }"
|
|
228
|
-
},
|
|
229
|
-
"description": "Notifies that the toast has been closed"
|
|
230
|
-
},
|
|
231
|
-
{
|
|
232
|
-
"name": "onToastClose",
|
|
233
|
-
"type": {
|
|
234
|
-
"text": "{ visible: boolean }"
|
|
235
|
-
},
|
|
236
|
-
"description": "**Deprecated**, use `toast-close` event instead.",
|
|
237
|
-
"deprecated": "Use `toast-close` event instead."
|
|
238
|
-
}
|
|
239
|
-
],
|
|
240
|
-
"attributes": [
|
|
241
|
-
{
|
|
242
|
-
"name": "disableautohide",
|
|
243
|
-
"type": {
|
|
244
|
-
"text": "boolean"
|
|
245
|
-
},
|
|
246
|
-
"description": "Prevents the toast from auto-hiding on the default time.",
|
|
247
|
-
"fieldName": "disableAutoHide"
|
|
248
|
-
},
|
|
249
|
-
{
|
|
250
|
-
"name": "noicon",
|
|
251
|
-
"type": {
|
|
252
|
-
"text": "boolean"
|
|
253
|
-
},
|
|
254
|
-
"description": "Removes icon from the toast UI.",
|
|
255
|
-
"fieldName": "noIcon"
|
|
256
|
-
},
|
|
257
|
-
{
|
|
258
|
-
"name": "timetilhide",
|
|
259
|
-
"type": {
|
|
260
|
-
"text": "number"
|
|
261
|
-
},
|
|
262
|
-
"description": "Sets the time in milliseconds until the toast hides.",
|
|
263
|
-
"fieldName": "timeTilHide"
|
|
264
|
-
},
|
|
265
|
-
{
|
|
266
|
-
"name": "trigger",
|
|
267
|
-
"type": {
|
|
268
|
-
"text": "string"
|
|
269
|
-
},
|
|
270
|
-
"description": "The id of the element that triggered the toast.\nWhen the toast is manually closed, focus will return to this element.\nTakes precedence over the triggerElement property if both are set.",
|
|
271
|
-
"fieldName": "trigger"
|
|
272
|
-
},
|
|
273
|
-
{
|
|
274
|
-
"name": "variant",
|
|
275
|
-
"type": {
|
|
276
|
-
"text": "'error' | 'success' | 'custom'"
|
|
277
|
-
},
|
|
278
|
-
"description": "Component will render visually based on which variant value is set.",
|
|
279
|
-
"fieldName": "variant"
|
|
280
|
-
},
|
|
281
|
-
{
|
|
282
|
-
"name": "visible",
|
|
283
|
-
"type": {
|
|
284
|
-
"text": "boolean"
|
|
285
|
-
},
|
|
286
|
-
"description": "Sets state of toast to visible",
|
|
287
|
-
"fieldName": "visible"
|
|
288
|
-
}
|
|
289
|
-
],
|
|
290
|
-
"superclass": {
|
|
291
|
-
"name": "LitElement",
|
|
292
|
-
"package": "lit"
|
|
293
|
-
},
|
|
294
|
-
"tagName": "auro-toast",
|
|
295
|
-
"customElement": true,
|
|
296
|
-
"modulePath": "src/auro-toast.js"
|
|
297
|
-
}
|
|
298
|
-
],
|
|
299
|
-
"exports": [
|
|
300
|
-
{
|
|
301
|
-
"kind": "js",
|
|
302
|
-
"name": "AuroToast",
|
|
303
|
-
"declaration": {
|
|
304
|
-
"name": "AuroToast",
|
|
305
|
-
"module": "src/auro-toast.js"
|
|
306
|
-
}
|
|
307
|
-
}
|
|
308
|
-
]
|
|
309
|
-
},
|
|
310
|
-
{
|
|
311
|
-
"kind": "javascript-module",
|
|
312
|
-
"path": "src/auro-toaster.js",
|
|
313
|
-
"declarations": [
|
|
314
|
-
{
|
|
315
|
-
"kind": "class",
|
|
316
|
-
"description": "",
|
|
317
|
-
"name": "AuroToaster",
|
|
318
|
-
"members": [
|
|
319
|
-
{
|
|
320
|
-
"kind": "field",
|
|
321
|
-
"name": "_announcedErrorToasts",
|
|
322
|
-
"default": "new WeakSet()"
|
|
323
|
-
},
|
|
324
|
-
{
|
|
325
|
-
"kind": "field",
|
|
326
|
-
"name": "_assertiveResetTimer",
|
|
327
|
-
"default": "undefined"
|
|
328
|
-
},
|
|
329
|
-
{
|
|
330
|
-
"kind": "method",
|
|
331
|
-
"name": "_onSlotChange",
|
|
332
|
-
"parameters": [
|
|
333
|
-
{
|
|
334
|
-
"name": "e"
|
|
335
|
-
}
|
|
336
|
-
],
|
|
337
|
-
"description": "Handles slot changes — checks if a newly slotted error toast\nis already visible at the time it is added to the toaster.",
|
|
338
|
-
"privacy": "private"
|
|
339
|
-
},
|
|
340
|
-
{
|
|
341
|
-
"kind": "field",
|
|
342
|
-
"name": "_onToastRequestAnnounce"
|
|
343
|
-
},
|
|
344
|
-
{
|
|
345
|
-
"kind": "method",
|
|
346
|
-
"name": "_setAssertiveTemporarily",
|
|
347
|
-
"description": "Temporarily sets the live region to assertive so the error toast\ninterrupts the screen reader, then resets to polite after 3 seconds.\nThis ensures subsequent polite toasts don't keep interrupting the user,\neven if the error toast remains visible (errors are never auto-dismissed).",
|
|
348
|
-
"privacy": "private"
|
|
349
|
-
},
|
|
350
|
-
{
|
|
351
|
-
"kind": "method",
|
|
352
|
-
"name": "register",
|
|
353
|
-
"static": true,
|
|
354
|
-
"parameters": [
|
|
355
|
-
{
|
|
356
|
-
"name": "name",
|
|
357
|
-
"default": "\"auro-toaster\"",
|
|
358
|
-
"description": "The name of the element that you want to register to.",
|
|
359
|
-
"optional": true,
|
|
360
|
-
"type": {
|
|
361
|
-
"text": "string"
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
|
-
],
|
|
365
|
-
"description": "This will register this element with the browser."
|
|
366
|
-
}
|
|
367
|
-
],
|
|
368
|
-
"superclass": {
|
|
369
|
-
"name": "LitElement",
|
|
370
|
-
"package": "lit"
|
|
371
|
-
},
|
|
372
|
-
"customElement": true,
|
|
373
|
-
"modulePath": "src/auro-toaster.js"
|
|
374
|
-
}
|
|
375
|
-
],
|
|
376
|
-
"exports": [
|
|
377
|
-
{
|
|
378
|
-
"kind": "js",
|
|
379
|
-
"name": "AuroToaster",
|
|
380
|
-
"declaration": {
|
|
381
|
-
"name": "AuroToaster",
|
|
382
|
-
"module": "src/auro-toaster.js"
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
]
|
|
386
|
-
},
|
|
387
|
-
{
|
|
388
|
-
"kind": "javascript-module",
|
|
389
|
-
"path": "src/buttonVersion.js",
|
|
390
|
-
"declarations": [],
|
|
391
|
-
"exports": [
|
|
392
|
-
{
|
|
393
|
-
"kind": "js",
|
|
394
|
-
"name": "default",
|
|
395
|
-
"declaration": {
|
|
396
|
-
"name": "12.3.2",
|
|
397
|
-
"module": "src/buttonVersion.js"
|
|
398
|
-
}
|
|
399
|
-
}
|
|
400
|
-
]
|
|
401
|
-
},
|
|
402
|
-
{
|
|
403
|
-
"kind": "javascript-module",
|
|
404
|
-
"path": "src/iconVersion.js",
|
|
405
|
-
"declarations": [],
|
|
406
|
-
"exports": [
|
|
407
|
-
{
|
|
408
|
-
"kind": "js",
|
|
409
|
-
"name": "default",
|
|
410
|
-
"declaration": {
|
|
411
|
-
"name": "9.2.0",
|
|
412
|
-
"module": "src/iconVersion.js"
|
|
413
|
-
}
|
|
414
|
-
}
|
|
415
|
-
]
|
|
416
|
-
},
|
|
417
|
-
{
|
|
418
|
-
"kind": "javascript-module",
|
|
419
|
-
"path": "src/index.js",
|
|
420
|
-
"declarations": [],
|
|
421
|
-
"exports": [
|
|
422
|
-
{
|
|
423
|
-
"kind": "js",
|
|
424
|
-
"name": "AuroToast",
|
|
425
|
-
"declaration": {
|
|
426
|
-
"name": "AuroToast",
|
|
427
|
-
"module": "src/index.js"
|
|
428
|
-
}
|
|
429
|
-
},
|
|
430
|
-
{
|
|
431
|
-
"kind": "js",
|
|
432
|
-
"name": "AuroToaster",
|
|
433
|
-
"declaration": {
|
|
434
|
-
"name": "AuroToaster",
|
|
435
|
-
"module": "src/index.js"
|
|
436
|
-
}
|
|
437
|
-
}
|
|
438
|
-
]
|
|
439
|
-
},
|
|
440
|
-
{
|
|
441
|
-
"kind": "javascript-module",
|
|
442
|
-
"path": "src/registered.js",
|
|
443
|
-
"declarations": [],
|
|
444
|
-
"exports": []
|
|
445
|
-
}
|
|
446
|
-
]
|
|
447
|
-
}
|