@aurodesignsystem-dev/auro-toast 0.0.0-pr86.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/CHANGELOG.md +279 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +170 -0
- package/demo/api.html +54 -0
- package/demo/api.js +27 -0
- package/demo/api.md +245 -0
- package/demo/api.min.js +98 -0
- package/demo/auro-toaster.min.js +614 -0
- package/demo/index.html +61 -0
- package/demo/index.js +35 -0
- package/demo/index.md +313 -0
- package/demo/index.min.js +142 -0
- package/dist/auro-toaster-DSkkaFZi.js +104 -0
- package/dist/index.d.ts +111 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +85 -0
package/demo/api.html
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3
|
+
See LICENSE in the project root for license information.
|
|
4
|
+
HTML in this document is standardized and NOT to be edited.
|
|
5
|
+
All demo code should be added/edited in ./demo/api.md
|
|
6
|
+
With the exception of adding custom elements if needed for the demo.
|
|
7
|
+
----------------------- DO NOT EDIT -----------------------------
|
|
8
|
+
-->
|
|
9
|
+
|
|
10
|
+
<!DOCTYPE html>
|
|
11
|
+
<html lang="en">
|
|
12
|
+
<head>
|
|
13
|
+
<meta charset="UTF-8" />
|
|
14
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
15
|
+
<title>Auro Web Component Demo | auro-toast</title>
|
|
16
|
+
|
|
17
|
+
<!-- Prism.js Stylesheet -->
|
|
18
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
19
|
+
|
|
20
|
+
<!-- Legacy reference is still needed to support auro-toast's use of legacy token values at this time -->
|
|
21
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
22
|
+
|
|
23
|
+
<!-- Design Token Alaska Theme -->
|
|
24
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
25
|
+
|
|
26
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
27
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
28
|
+
|
|
29
|
+
<!-- Demo Specific Styles -->
|
|
30
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
32
|
+
</head>
|
|
33
|
+
<body class="auro-markdown">
|
|
34
|
+
<main></main>
|
|
35
|
+
|
|
36
|
+
<script type="module">
|
|
37
|
+
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
|
|
38
|
+
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
|
|
39
|
+
fetch('./api.md')
|
|
40
|
+
.then((response) => response.text())
|
|
41
|
+
.then((text) => {
|
|
42
|
+
const rawHtml = marked.parse(text);
|
|
43
|
+
document.querySelector('main').innerHTML = rawHtml;
|
|
44
|
+
Prism.highlightAll();
|
|
45
|
+
});
|
|
46
|
+
</script>
|
|
47
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
|
|
48
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
|
|
49
|
+
<script type="module" data-demo-script="true">
|
|
50
|
+
import { initExamples } from "./api.min.js"
|
|
51
|
+
initExamples();
|
|
52
|
+
</script>
|
|
53
|
+
</body>
|
|
54
|
+
</html>
|
package/demo/api.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { initNoIconExample } from "../apiExamples/noIcon";
|
|
2
|
+
import { initTimeTilHideExample } from "../apiExamples/timeTilHide";
|
|
3
|
+
import { initVariantToastsExample } from "../apiExamples/variant";
|
|
4
|
+
import { initVisibleExample } from "../apiExamples/visible";
|
|
5
|
+
|
|
6
|
+
import "../src/registered";
|
|
7
|
+
/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
|
|
8
|
+
|
|
9
|
+
export function initExamples(initCount) {
|
|
10
|
+
// biome-ignore lint/style/noParameterAssign: legacy code, don't want to refactor right now
|
|
11
|
+
initCount = initCount || 0;
|
|
12
|
+
|
|
13
|
+
try {
|
|
14
|
+
// javascript example function calls to be added here upon creation to test examples
|
|
15
|
+
initVisibleExample();
|
|
16
|
+
initVariantToastsExample();
|
|
17
|
+
initNoIconExample();
|
|
18
|
+
initTimeTilHideExample();
|
|
19
|
+
} catch (_err) {
|
|
20
|
+
if (initCount <= 20) {
|
|
21
|
+
// setTimeout handles issue where content is sometimes loaded after the functions get called
|
|
22
|
+
setTimeout(() => {
|
|
23
|
+
initExamples(initCount + 1);
|
|
24
|
+
}, 100);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
package/demo/api.md
ADDED
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-toast
|
|
5
|
+
|
|
6
|
+
The auro-toast element provides users a way to display short, temporary messages.
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Type | Description |
|
|
11
|
+
|-------------------|-------------------|-----------|--------------------------------------------------|
|
|
12
|
+
| [disableAutoHide](#disableAutoHide) | `disableAutoHide` | `Boolean` | Prevents the toast from auto-hiding on the default time. |
|
|
13
|
+
| [noIcon](#noIcon) | `noIcon` | `Boolean` | Removes icon from the toast UI |
|
|
14
|
+
| [timeTilHide](#timeTilHide) | `timeTilHide` | `Number` | Sets the time in milliseconds until the toast hides. |
|
|
15
|
+
| [variant](#variant) | `variant` | `String` | Component will render visually based on which variant value is set; currently supports `error`, `success`, `custom` |
|
|
16
|
+
| [visible](#visible) | `visible` | `Boolean` | Sets state of toast to visible |
|
|
17
|
+
|
|
18
|
+
## Events
|
|
19
|
+
|
|
20
|
+
| Event | Type | Description |
|
|
21
|
+
|----------------|----------|-----------------------------------------|
|
|
22
|
+
| [onToastClose](#onToastClose) | `object` | Notifies that the toast has been closed |
|
|
23
|
+
|
|
24
|
+
## CSS Shadow Parts
|
|
25
|
+
|
|
26
|
+
| Part | Description |
|
|
27
|
+
|----------------|-------------------------------------|
|
|
28
|
+
| `close-button` | Apply css to the toast close button |
|
|
29
|
+
| `type-icon` | Apply css to the toast type icon |
|
|
30
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
31
|
+
|
|
32
|
+
## API Examples
|
|
33
|
+
|
|
34
|
+
### Property Examples
|
|
35
|
+
|
|
36
|
+
#### visible
|
|
37
|
+
|
|
38
|
+
State of the push notification which determines if it is `visible`.
|
|
39
|
+
|
|
40
|
+
<div class="exampleWrapper">
|
|
41
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/visible.html) -->
|
|
42
|
+
<!-- The below content is automatically added from ./../apiExamples/visible.html -->
|
|
43
|
+
<auro-button id="visibleToastBtn">
|
|
44
|
+
Set visible to true
|
|
45
|
+
</auro-button>
|
|
46
|
+
<auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
|
|
47
|
+
Default toast
|
|
48
|
+
</auro-toast>
|
|
49
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
50
|
+
</div>
|
|
51
|
+
<auro-accordion alignRight>
|
|
52
|
+
<span slot="trigger">See code</span>
|
|
53
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/visible.html) -->
|
|
54
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/visible.html -->
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<auro-button id="visibleToastBtn">
|
|
58
|
+
Set visible to true
|
|
59
|
+
</auro-button>
|
|
60
|
+
<auro-toast id="visibleToast" style="display: block; margin: 0.5rem 0;">
|
|
61
|
+
Default toast
|
|
62
|
+
</auro-toast>
|
|
63
|
+
```
|
|
64
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
65
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
|
|
66
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->
|
|
67
|
+
|
|
68
|
+
```js
|
|
69
|
+
export function showToast(toastID) {
|
|
70
|
+
const toast = document.querySelector(toastID);
|
|
71
|
+
|
|
72
|
+
if (!toast.hasAttribute("visible")) {
|
|
73
|
+
toast.setAttribute("visible", true);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
78
|
+
</auro-accordion>
|
|
79
|
+
|
|
80
|
+
#### variant
|
|
81
|
+
|
|
82
|
+
What the component will render visually based on which variant value is set; currently supports `error`, `success`.
|
|
83
|
+
|
|
84
|
+
<div class="exampleWrapper">
|
|
85
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant.html) -->
|
|
86
|
+
<!-- The below content is automatically added from ./../apiExamples/variant.html -->
|
|
87
|
+
<auro-button id="defaultVariantBtn">
|
|
88
|
+
Show default toast
|
|
89
|
+
</auro-button>
|
|
90
|
+
<auro-toast id="defaultVariant" style="display: block; margin: 0.5rem 0;">
|
|
91
|
+
Default toast
|
|
92
|
+
</auro-toast>
|
|
93
|
+
<auro-button id="errorVariantBtn">
|
|
94
|
+
Show error toast
|
|
95
|
+
</auro-button>
|
|
96
|
+
<auro-toast id="errorVariant" variant="error" style="display: block; margin: 0.5rem 0;">
|
|
97
|
+
Unable to add lap infant. Please try again
|
|
98
|
+
</auro-toast>
|
|
99
|
+
<auro-button id="successVariantBtn">
|
|
100
|
+
Show success toast
|
|
101
|
+
</auro-button>
|
|
102
|
+
<auro-toast id="successVariant" variant="success" style="display: block; margin: 0.5rem 0;">
|
|
103
|
+
Successfully added lap infant
|
|
104
|
+
</auro-toast>
|
|
105
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
106
|
+
</div>
|
|
107
|
+
<auro-accordion alignRight>
|
|
108
|
+
<span slot="trigger">See code</span>
|
|
109
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant.html) -->
|
|
110
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/variant.html -->
|
|
111
|
+
|
|
112
|
+
```html
|
|
113
|
+
<auro-button id="defaultVariantBtn">
|
|
114
|
+
Show default toast
|
|
115
|
+
</auro-button>
|
|
116
|
+
<auro-toast id="defaultVariant" style="display: block; margin: 0.5rem 0;">
|
|
117
|
+
Default toast
|
|
118
|
+
</auro-toast>
|
|
119
|
+
<auro-button id="errorVariantBtn">
|
|
120
|
+
Show error toast
|
|
121
|
+
</auro-button>
|
|
122
|
+
<auro-toast id="errorVariant" variant="error" style="display: block; margin: 0.5rem 0;">
|
|
123
|
+
Unable to add lap infant. Please try again
|
|
124
|
+
</auro-toast>
|
|
125
|
+
<auro-button id="successVariantBtn">
|
|
126
|
+
Show success toast
|
|
127
|
+
</auro-button>
|
|
128
|
+
<auro-toast id="successVariant" variant="success" style="display: block; margin: 0.5rem 0;">
|
|
129
|
+
Successfully added lap infant
|
|
130
|
+
</auro-toast>
|
|
131
|
+
```
|
|
132
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
133
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
|
|
134
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->
|
|
135
|
+
|
|
136
|
+
```js
|
|
137
|
+
export function showToast(toastID) {
|
|
138
|
+
const toast = document.querySelector(toastID);
|
|
139
|
+
|
|
140
|
+
if (!toast.hasAttribute("visible")) {
|
|
141
|
+
toast.setAttribute("visible", true);
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
```
|
|
145
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
146
|
+
</auro-accordion>
|
|
147
|
+
|
|
148
|
+
#### noIcon
|
|
149
|
+
|
|
150
|
+
Using the `noIcon` attribute will set no icon to be visible in the notification.
|
|
151
|
+
|
|
152
|
+
<div class="exampleWrapper">
|
|
153
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noIcon.html) -->
|
|
154
|
+
<!-- The below content is automatically added from ./../apiExamples/noIcon.html -->
|
|
155
|
+
<auro-button id="noIconBtn"> Show toast with no icon </auro-button>
|
|
156
|
+
<auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast </auro-toast>
|
|
157
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
158
|
+
</div>
|
|
159
|
+
<auro-accordion alignRight>
|
|
160
|
+
<span slot="trigger">See code</span>
|
|
161
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noIcon.html) -->
|
|
162
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/noIcon.html -->
|
|
163
|
+
|
|
164
|
+
```html
|
|
165
|
+
<auro-button id="noIconBtn"> Show toast with no icon </auro-button>
|
|
166
|
+
<auro-toast id="noIcon" noIcon style="display: block; margin: 0.5rem 0;"> Default toast </auro-toast>
|
|
167
|
+
```
|
|
168
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
169
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
|
|
170
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->
|
|
171
|
+
|
|
172
|
+
```js
|
|
173
|
+
export function showToast(toastID) {
|
|
174
|
+
const toast = document.querySelector(toastID);
|
|
175
|
+
|
|
176
|
+
if (!toast.hasAttribute("visible")) {
|
|
177
|
+
toast.setAttribute("visible", true);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
```
|
|
181
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
182
|
+
</auro-accordion>
|
|
183
|
+
|
|
184
|
+
#### timeTilHide
|
|
185
|
+
|
|
186
|
+
Using the `timeTilHide` attribute will set a timer in milliseconds for how long the notification will be visible before it automatically hides. The default is `5000` milliseconds.
|
|
187
|
+
|
|
188
|
+
<div class="exampleWrapper">
|
|
189
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/timeTilHide.html) -->
|
|
190
|
+
<!-- The below content is automatically added from ./../apiExamples/timeTilHide.html -->
|
|
191
|
+
<auro-button id="timeTilHideToastBtn">
|
|
192
|
+
Show default notification
|
|
193
|
+
</auro-button>
|
|
194
|
+
<auro-toast timeTilHide="1000" style="display: block; margin: 0.5rem 0;" id="timeTilHideToast">
|
|
195
|
+
Default notification with no error type
|
|
196
|
+
</auro-toast>
|
|
197
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
198
|
+
</div>
|
|
199
|
+
<auro-accordion alignRight>
|
|
200
|
+
<span slot="trigger">See code</span>
|
|
201
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/timeTilHide.html) -->
|
|
202
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/timeTilHide.html -->
|
|
203
|
+
|
|
204
|
+
```html
|
|
205
|
+
<auro-button id="timeTilHideToastBtn">
|
|
206
|
+
Show default notification
|
|
207
|
+
</auro-button>
|
|
208
|
+
<auro-toast timeTilHide="1000" style="display: block; margin: 0.5rem 0;" id="timeTilHideToast">
|
|
209
|
+
Default notification with no error type
|
|
210
|
+
</auro-toast>
|
|
211
|
+
```
|
|
212
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
213
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/showToast.js) -->
|
|
214
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/showToast.js -->
|
|
215
|
+
|
|
216
|
+
```js
|
|
217
|
+
export function showToast(toastID) {
|
|
218
|
+
const toast = document.querySelector(toastID);
|
|
219
|
+
|
|
220
|
+
if (!toast.hasAttribute("visible")) {
|
|
221
|
+
toast.setAttribute("visible", true);
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
```
|
|
225
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
226
|
+
</auro-accordion>
|
|
227
|
+
|
|
228
|
+
### Theme Support
|
|
229
|
+
|
|
230
|
+
The component may be restyled using the following code sample and changing the values of the following token(s).
|
|
231
|
+
|
|
232
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
233
|
+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
234
|
+
|
|
235
|
+
```scss
|
|
236
|
+
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
237
|
+
|
|
238
|
+
:host {
|
|
239
|
+
--ds-auro-toast-close-button-hover-container-color: var(--ds-advanced-color-button-tertiary-background-hover, #{v.$ds-advanced-color-button-tertiary-background-hover});
|
|
240
|
+
--ds-auro-toast-container-color: var(--ds-advanced-color-shared-background-strong, #{v.$ds-advanced-color-shared-background-strong});
|
|
241
|
+
--ds-auro-toast-icon-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
|
|
242
|
+
--ds-auro-toast-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
|
|
243
|
+
}
|
|
244
|
+
```
|
|
245
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
package/demo/api.min.js
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { A as AuroToast, a as AuroToaster } from './auro-toaster.min.js';
|
|
2
|
+
|
|
3
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
4
|
+
|
|
5
|
+
function initNoIconExample() {
|
|
6
|
+
const btn = document.querySelector("#noIconBtn");
|
|
7
|
+
const toast = document.querySelector("#noIcon");
|
|
8
|
+
|
|
9
|
+
btn.addEventListener("click", () => {
|
|
10
|
+
if (!toast.hasAttribute("visible")) {
|
|
11
|
+
toast.setAttribute("visible", true);
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
17
|
+
|
|
18
|
+
function initTimeTilHideExample() {
|
|
19
|
+
const btn = document.querySelector("#timeTilHideToastBtn");
|
|
20
|
+
const toast = document.querySelector("#timeTilHideToast");
|
|
21
|
+
|
|
22
|
+
btn.addEventListener("click", () => {
|
|
23
|
+
if (!toast.hasAttribute("visible")) {
|
|
24
|
+
toast.setAttribute("visible", true);
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
30
|
+
|
|
31
|
+
function initVariantToastsExample() {
|
|
32
|
+
const btn = document.querySelector("#defaultVariantBtn");
|
|
33
|
+
const toast = document.querySelector("#defaultVariant");
|
|
34
|
+
|
|
35
|
+
btn.addEventListener("click", () => {
|
|
36
|
+
if (!toast.hasAttribute("visible")) {
|
|
37
|
+
toast.setAttribute("visible", true);
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
const btnTwo = document.querySelector("#errorVariantBtn");
|
|
42
|
+
const toastTwo = document.querySelector("#errorVariant");
|
|
43
|
+
|
|
44
|
+
btnTwo.addEventListener("click", () => {
|
|
45
|
+
if (!toastTwo.hasAttribute("visible")) {
|
|
46
|
+
toastTwo.setAttribute("visible", true);
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
const btnThree = document.querySelector("#successVariantBtn");
|
|
51
|
+
const toastThree = document.querySelector("#successVariant");
|
|
52
|
+
|
|
53
|
+
btnThree.addEventListener("click", () => {
|
|
54
|
+
if (!toastThree.hasAttribute("visible")) {
|
|
55
|
+
toastThree.setAttribute("visible", true);
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* eslint-disable jsdoc/require-jsdoc */
|
|
61
|
+
|
|
62
|
+
function initVisibleExample() {
|
|
63
|
+
const btn = document.querySelector("#visibleToastBtn");
|
|
64
|
+
const toast = document.querySelector("#visibleToast");
|
|
65
|
+
|
|
66
|
+
btn.addEventListener("click", () => {
|
|
67
|
+
if (!toast.hasAttribute("visible")) {
|
|
68
|
+
toast.setAttribute("visible", true);
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
AuroToast.register();
|
|
74
|
+
AuroToaster.register();
|
|
75
|
+
|
|
76
|
+
/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
|
|
77
|
+
|
|
78
|
+
function initExamples(initCount) {
|
|
79
|
+
// biome-ignore lint/style/noParameterAssign: legacy code, don't want to refactor right now
|
|
80
|
+
initCount = initCount || 0;
|
|
81
|
+
|
|
82
|
+
try {
|
|
83
|
+
// javascript example function calls to be added here upon creation to test examples
|
|
84
|
+
initVisibleExample();
|
|
85
|
+
initVariantToastsExample();
|
|
86
|
+
initNoIconExample();
|
|
87
|
+
initTimeTilHideExample();
|
|
88
|
+
} catch (_err) {
|
|
89
|
+
if (initCount <= 20) {
|
|
90
|
+
// setTimeout handles issue where content is sometimes loaded after the functions get called
|
|
91
|
+
setTimeout(() => {
|
|
92
|
+
initExamples(initCount + 1);
|
|
93
|
+
}, 100);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export { initExamples };
|