@aurodesignsystem-dev/auro-toast 0.0.0-pr141.1 → 0.0.0-pr147.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 +24 -36
- package/demo/api.md +7 -6
- package/demo/api.min.js +27 -11
- package/demo/index.min.js +27 -11
- package/dist/{auro-toaster-BVtBRPDA.js → auro-toaster-BNDwLM9m.js} +1 -1
- package/dist/index.d.ts +14 -5
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,9 +49,7 @@ The `<auro-toast>` use cases include:
|
|
|
49
49
|
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
50
50
|
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
$ npm i @aurodesignsystem/auro-toast
|
|
54
|
-
```
|
|
52
|
+
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-toast</code></pre>
|
|
55
53
|
|
|
56
54
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
57
55
|
|
|
@@ -63,9 +61,7 @@ Defining the dependency within each project that is using the `<auro-toast>` com
|
|
|
63
61
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
64
62
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
65
63
|
|
|
66
|
-
|
|
67
|
-
import "@aurodesignsystem/auro-toast";
|
|
68
|
-
```
|
|
64
|
+
<pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-toast";</code></pre>
|
|
69
65
|
|
|
70
66
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
71
67
|
|
|
@@ -74,9 +70,7 @@ import "@aurodesignsystem/auro-toast";
|
|
|
74
70
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
75
71
|
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.
|
|
76
72
|
|
|
77
|
-
|
|
78
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@latest/+esm"></script>
|
|
79
|
-
```
|
|
73
|
+
<pre class="language-html"><code class="language-html"><script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@latest/+esm"></script></code></pre>
|
|
80
74
|
|
|
81
75
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
82
76
|
|
|
@@ -85,18 +79,16 @@ In cases where the project is not able to process JS assets, there are pre-proce
|
|
|
85
79
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
86
80
|
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
87
81
|
|
|
88
|
-
|
|
89
|
-
<auro-button id="basicToastBtn">
|
|
82
|
+
<pre class="language-html"><code class="language-html"><auro-button id="basicToastBtn">
|
|
90
83
|
Show default notification
|
|
91
|
-
|
|
92
|
-
|
|
84
|
+
</auro-button>
|
|
85
|
+
<!--
|
|
93
86
|
NOTE: The manually added style is NOT necessary for use,
|
|
94
87
|
Demo purposes ONLY!
|
|
95
|
-
|
|
96
|
-
|
|
88
|
+
-->
|
|
89
|
+
<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
|
|
97
90
|
Default notification with no error type.
|
|
98
|
-
|
|
99
|
-
```
|
|
91
|
+
</auro-toast></code></pre>
|
|
100
92
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
101
93
|
|
|
102
94
|
## Custom Component Registration for Version Management
|
|
@@ -113,39 +105,35 @@ You can do this by importing only the component class and using the `register(na
|
|
|
113
105
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
114
106
|
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
115
107
|
|
|
116
|
-
|
|
117
|
-
// Import the class only
|
|
108
|
+
<pre class="language-js"><code class="language-js">// Import the class only
|
|
118
109
|
import { AuroToast } from '@aurodesignsystem/auro-toast/class';
|
|
119
|
-
|
|
110
|
+
|
|
120
111
|
// Register with a custom name if desired
|
|
121
|
-
AuroToast.register('custom-toast')
|
|
122
|
-
```
|
|
112
|
+
AuroToast.register('custom-toast');</code></pre>
|
|
123
113
|
|
|
124
114
|
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.
|
|
125
115
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
126
116
|
<div class="exampleWrapper exampleWrapper--flex">
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
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">
|
|
130
120
|
Show default notification
|
|
131
|
-
|
|
132
|
-
|
|
121
|
+
</auro-button>
|
|
122
|
+
<custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
|
|
133
123
|
Default notification with no error type.
|
|
134
|
-
|
|
135
|
-
|
|
124
|
+
</custom-toast>
|
|
125
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
136
126
|
</div>
|
|
137
127
|
<auro-accordion alignRight>
|
|
138
|
-
|
|
128
|
+
<span slot="trigger">See code</span>
|
|
139
129
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
|
|
140
130
|
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
|
|
141
131
|
|
|
142
|
-
|
|
143
|
-
<auro-button id="customToastBtn">
|
|
132
|
+
<pre class="language-html"><code class="language-html"><auro-button id="customToastBtn">
|
|
144
133
|
Show default notification
|
|
145
|
-
|
|
146
|
-
|
|
134
|
+
</auro-button>
|
|
135
|
+
<custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
|
|
147
136
|
Default notification with no error type.
|
|
148
|
-
|
|
149
|
-
```
|
|
137
|
+
</custom-toast></code></pre>
|
|
150
138
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
151
139
|
</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,9 +25,10 @@ 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
|
-
|
|
|
28
|
+
| Name | Description |
|
|
29
|
+
| ------------ | -------------------------------------------------- |
|
|
30
|
+
| toast-close | Notifies that the toast has been closed |
|
|
31
|
+
| onToastClose | ** Deprecated **, use `toast-close` event instead. |
|
|
31
32
|
|
|
32
33
|
### CSS Shadow Parts
|
|
33
34
|
|
package/demo/api.min.js
CHANGED
|
@@ -538,7 +538,8 @@ 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 -
|
|
541
|
+
* @fires onToastClose - ** Deprecated **, use `toast-close` event instead.
|
|
542
|
+
* @event toast-close - Notifies that the toast has been closed
|
|
542
543
|
*/
|
|
543
544
|
|
|
544
545
|
// build the component class
|
|
@@ -646,6 +647,7 @@ class AuroToast extends i$2 {
|
|
|
646
647
|
disableAutoHide: {
|
|
647
648
|
type: Boolean,
|
|
648
649
|
reflect: true,
|
|
650
|
+
attribute: "disableautohide",
|
|
649
651
|
},
|
|
650
652
|
|
|
651
653
|
/**
|
|
@@ -654,6 +656,7 @@ class AuroToast extends i$2 {
|
|
|
654
656
|
noIcon: {
|
|
655
657
|
type: Boolean,
|
|
656
658
|
reflect: true,
|
|
659
|
+
attribute: "noicon",
|
|
657
660
|
},
|
|
658
661
|
|
|
659
662
|
/**
|
|
@@ -662,6 +665,7 @@ class AuroToast extends i$2 {
|
|
|
662
665
|
timeTilHide: {
|
|
663
666
|
type: Number,
|
|
664
667
|
reflect: true,
|
|
668
|
+
attribute: "timetilhide",
|
|
665
669
|
},
|
|
666
670
|
|
|
667
671
|
/**
|
|
@@ -779,9 +783,9 @@ class AuroToast extends i$2 {
|
|
|
779
783
|
/**
|
|
780
784
|
* Emits closed toast event.
|
|
781
785
|
*
|
|
786
|
+
* @deprecated Use `toast-close` event instead.
|
|
782
787
|
* @event onToastClose
|
|
783
|
-
* @type {
|
|
784
|
-
* @property {boolean} false - Sets visibility value for the toast element.
|
|
788
|
+
* @type {{ visible: boolean }}
|
|
785
789
|
*/
|
|
786
790
|
this.dispatchEvent(
|
|
787
791
|
new CustomEvent("onToastClose", {
|
|
@@ -790,6 +794,20 @@ class AuroToast extends i$2 {
|
|
|
790
794
|
detail: this,
|
|
791
795
|
}),
|
|
792
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: this,
|
|
809
|
+
}),
|
|
810
|
+
);
|
|
793
811
|
}
|
|
794
812
|
|
|
795
813
|
/**
|
|
@@ -936,14 +954,12 @@ class AuroToast extends i$2 {
|
|
|
936
954
|
|
|
937
955
|
render() {
|
|
938
956
|
return u$2`
|
|
939
|
-
${
|
|
940
|
-
|
|
941
|
-
? u$2`
|
|
957
|
+
${this.visible
|
|
958
|
+
? u$2`
|
|
942
959
|
<div class="toastContainer">
|
|
943
|
-
${
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
: u$2`
|
|
960
|
+
${this.noIcon
|
|
961
|
+
? undefined
|
|
962
|
+
: u$2`
|
|
947
963
|
<${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
|
|
948
964
|
${this.variant === "custom" ? undefined : u$2`${this.getVariantIcon()}`}
|
|
949
965
|
</${this.iconTag}>
|
|
@@ -965,7 +981,7 @@ class AuroToast extends i$2 {
|
|
|
965
981
|
</${this.buttonTag}>
|
|
966
982
|
</div>
|
|
967
983
|
`
|
|
968
|
-
|
|
984
|
+
: undefined
|
|
969
985
|
}
|
|
970
986
|
`;
|
|
971
987
|
}
|
package/demo/index.min.js
CHANGED
|
@@ -289,7 +289,8 @@ 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 -
|
|
292
|
+
* @fires onToastClose - ** Deprecated **, use `toast-close` event instead.
|
|
293
|
+
* @event toast-close - Notifies that the toast has been closed
|
|
293
294
|
*/
|
|
294
295
|
|
|
295
296
|
// build the component class
|
|
@@ -397,6 +398,7 @@ class AuroToast extends i$2 {
|
|
|
397
398
|
disableAutoHide: {
|
|
398
399
|
type: Boolean,
|
|
399
400
|
reflect: true,
|
|
401
|
+
attribute: "disableautohide",
|
|
400
402
|
},
|
|
401
403
|
|
|
402
404
|
/**
|
|
@@ -405,6 +407,7 @@ class AuroToast extends i$2 {
|
|
|
405
407
|
noIcon: {
|
|
406
408
|
type: Boolean,
|
|
407
409
|
reflect: true,
|
|
410
|
+
attribute: "noicon",
|
|
408
411
|
},
|
|
409
412
|
|
|
410
413
|
/**
|
|
@@ -413,6 +416,7 @@ class AuroToast extends i$2 {
|
|
|
413
416
|
timeTilHide: {
|
|
414
417
|
type: Number,
|
|
415
418
|
reflect: true,
|
|
419
|
+
attribute: "timetilhide",
|
|
416
420
|
},
|
|
417
421
|
|
|
418
422
|
/**
|
|
@@ -530,9 +534,9 @@ class AuroToast extends i$2 {
|
|
|
530
534
|
/**
|
|
531
535
|
* Emits closed toast event.
|
|
532
536
|
*
|
|
537
|
+
* @deprecated Use `toast-close` event instead.
|
|
533
538
|
* @event onToastClose
|
|
534
|
-
* @type {
|
|
535
|
-
* @property {boolean} false - Sets visibility value for the toast element.
|
|
539
|
+
* @type {{ visible: boolean }}
|
|
536
540
|
*/
|
|
537
541
|
this.dispatchEvent(
|
|
538
542
|
new CustomEvent("onToastClose", {
|
|
@@ -541,6 +545,20 @@ class AuroToast extends i$2 {
|
|
|
541
545
|
detail: this,
|
|
542
546
|
}),
|
|
543
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: this,
|
|
560
|
+
}),
|
|
561
|
+
);
|
|
544
562
|
}
|
|
545
563
|
|
|
546
564
|
/**
|
|
@@ -687,14 +705,12 @@ class AuroToast extends i$2 {
|
|
|
687
705
|
|
|
688
706
|
render() {
|
|
689
707
|
return u$2`
|
|
690
|
-
${
|
|
691
|
-
|
|
692
|
-
? u$2`
|
|
708
|
+
${this.visible
|
|
709
|
+
? u$2`
|
|
693
710
|
<div class="toastContainer">
|
|
694
|
-
${
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
: u$2`
|
|
711
|
+
${this.noIcon
|
|
712
|
+
? undefined
|
|
713
|
+
: u$2`
|
|
698
714
|
<${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
|
|
699
715
|
${this.variant === "custom" ? undefined : u$2`${this.getVariantIcon()}`}
|
|
700
716
|
</${this.iconTag}>
|
|
@@ -716,7 +732,7 @@ class AuroToast extends i$2 {
|
|
|
716
732
|
</${this.buttonTag}>
|
|
717
733
|
</div>
|
|
718
734
|
`
|
|
719
|
-
|
|
735
|
+
: undefined
|
|
720
736
|
}
|
|
721
737
|
`;
|
|
722
738
|
}
|
|
@@ -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},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`
|
|
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,attribute:"disableautohide"},noIcon:{type:Boolean,reflect:!0,attribute:"noicon"},timeTilHide:{type:Number,reflect:!0,attribute:"timetilhide"},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})),this.dispatchEvent(new CustomEvent("toast-close",{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,11 +82,17 @@ 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'];
|
|
85
87
|
/** Prevents the toast from auto-hiding on the default time. */
|
|
86
88
|
"disableAutoHide"?: AuroToast['disableAutoHide'];
|
|
87
89
|
/** Removes icon from the toast UI. */
|
|
90
|
+
"noicon"?: AuroToast['noIcon'];
|
|
91
|
+
/** Removes icon from the toast UI. */
|
|
88
92
|
"noIcon"?: AuroToast['noIcon'];
|
|
89
93
|
/** Sets the time in milliseconds until the toast hides. */
|
|
94
|
+
"timetilhide"?: AuroToast['timeTilHide'];
|
|
95
|
+
/** Sets the time in milliseconds until the toast hides. */
|
|
90
96
|
"timeTilHide"?: AuroToast['timeTilHide'];
|
|
91
97
|
/** The id of the element that triggered the toast.
|
|
92
98
|
When the toast is manually closed, focus will return to this element.
|
|
@@ -102,7 +108,9 @@ Use the trigger attribute instead if you prefer a declarative approach. */
|
|
|
102
108
|
"triggerElement"?: AuroToast['triggerElement'];
|
|
103
109
|
|
|
104
110
|
/** Notifies that the toast has been closed */
|
|
105
|
-
"
|
|
111
|
+
"ontoast-close"?: (e: CustomEvent<{ visible: boolean }>) => void;
|
|
112
|
+
/** @deprecated Use `toast-close` event instead. - ** Deprecated **, use `toast-close` event instead. */
|
|
113
|
+
"ononToastClose"?: (e: CustomEvent<{ visible: boolean }>) => void;
|
|
106
114
|
}
|
|
107
115
|
|
|
108
116
|
|
|
@@ -116,9 +124,9 @@ Use the trigger attribute instead if you prefer a declarative approach. */
|
|
|
116
124
|
*
|
|
117
125
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
118
126
|
*
|
|
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.
|
|
127
|
+
* - `disableautohide`/`disableAutoHide`: Prevents the toast from auto-hiding on the default time.
|
|
128
|
+
* - `noicon`/`noIcon`: Removes icon from the toast UI.
|
|
129
|
+
* - `timetilhide`/`timeTilHide`: Sets the time in milliseconds until the toast hides.
|
|
122
130
|
* - `trigger`: The id of the element that triggered the toast.
|
|
123
131
|
* When the toast is manually closed, focus will return to this element.
|
|
124
132
|
* Takes precedence over the triggerElement property if both are set.
|
|
@@ -132,7 +140,8 @@ Use the trigger attribute instead if you prefer a declarative approach. */
|
|
|
132
140
|
*
|
|
133
141
|
* Events that will be emitted by the component.
|
|
134
142
|
*
|
|
135
|
-
* - `
|
|
143
|
+
* - `toast-close`: Notifies that the toast has been closed
|
|
144
|
+
* - `onToastClose`: ** Deprecated **, use `toast-close` event instead.
|
|
136
145
|
*
|
|
137
146
|
* ## Methods
|
|
138
147
|
*
|
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-BNDwLM9m.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-BNDwLM9m.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-pr147.0",
|
|
11
11
|
"description": "auro-toast HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|