@nuralyui/toast 0.0.13 → 0.0.14
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/bundle.js +374 -4
- package/package.json +1 -1
package/bundle.js
CHANGED
|
@@ -3,21 +3,391 @@ import{css as t,LitElement as o,html as a,nothing as r}from"lit";import{property
|
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
5
5
|
* SPDX-License-Identifier: MIT
|
|
6
|
-
*/const u=t
|
|
6
|
+
*/const u=t`
|
|
7
|
+
:host {
|
|
8
|
+
display: block;
|
|
9
|
+
position: fixed;
|
|
10
|
+
z-index: var(--nuraly-z-index-toast);
|
|
11
|
+
pointer-events: none;
|
|
12
|
+
|
|
13
|
+
/* Force CSS custom property inheritance to ensure theme switching works properly */
|
|
14
|
+
color: var(--nuraly-color-text);
|
|
15
|
+
font-family: var(--nuraly-font-family);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Container positioning */
|
|
19
|
+
:host([position="top-right"]) {
|
|
20
|
+
top: var(--nuraly-spacing-4);
|
|
21
|
+
right: var(--nuraly-spacing-4);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
:host([position="top-left"]) {
|
|
25
|
+
top: var(--nuraly-spacing-4);
|
|
26
|
+
left: var(--nuraly-spacing-4);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:host([position="top-center"]) {
|
|
30
|
+
top: var(--nuraly-spacing-4);
|
|
31
|
+
left: 50%;
|
|
32
|
+
transform: translateX(-50%);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host([position="bottom-right"]) {
|
|
36
|
+
bottom: var(--nuraly-spacing-4);
|
|
37
|
+
right: var(--nuraly-spacing-4);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:host([position="bottom-left"]) {
|
|
41
|
+
bottom: var(--nuraly-spacing-4);
|
|
42
|
+
left: var(--nuraly-spacing-4);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
:host([position="bottom-center"]) {
|
|
46
|
+
bottom: var(--nuraly-spacing-4);
|
|
47
|
+
left: 50%;
|
|
48
|
+
transform: translateX(-50%);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.toast-container {
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
gap: var(--nuraly-toast-stack-gap);
|
|
55
|
+
min-width: var(--nuraly-toast-min-width);
|
|
56
|
+
max-width: var(--nuraly-toast-max-width);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.toast {
|
|
60
|
+
display: flex;
|
|
61
|
+
align-items: start;
|
|
62
|
+
gap: var(--nuraly-toast-gap);
|
|
63
|
+
padding: var(--nuraly-toast-padding-vertical) var(--nuraly-toast-padding-horizontal);
|
|
64
|
+
background-color: var(--nuraly-color-background);
|
|
65
|
+
color: var(--nuraly-color-text);
|
|
66
|
+
border: 1px solid var(--nuraly-color-border);
|
|
67
|
+
border-radius: var(--nuraly-border-radius-toast);
|
|
68
|
+
box-shadow: var(--nuraly-shadow-toast);
|
|
69
|
+
pointer-events: auto;
|
|
70
|
+
cursor: default;
|
|
71
|
+
transition: all var(--nuraly-transition-fast) ease;
|
|
72
|
+
position: relative;
|
|
73
|
+
overflow: hidden;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.toast:hover {
|
|
77
|
+
box-shadow: var(--nuraly-shadow-toast-hover);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* Toast type variants */
|
|
81
|
+
.toast--default {
|
|
82
|
+
background-color: var(--nuraly-toast-default-background);
|
|
83
|
+
border-color: var(--nuraly-toast-default-border);
|
|
84
|
+
color: var(--nuraly-toast-default-text);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.toast--success {
|
|
88
|
+
background-color: var(--nuraly-toast-success-background);
|
|
89
|
+
border-color: var(--nuraly-toast-success-border);
|
|
90
|
+
color: var(--nuraly-toast-success-text);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.toast--error {
|
|
94
|
+
background-color: var(--nuraly-toast-error-background);
|
|
95
|
+
border-color: var(--nuraly-toast-error-border);
|
|
96
|
+
color: var(--nuraly-toast-error-text);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.toast--warning {
|
|
100
|
+
background-color: var(--nuraly-toast-warning-background);
|
|
101
|
+
border-color: var(--nuraly-toast-warning-border);
|
|
102
|
+
color: var(--nuraly-toast-warning-text);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.toast--info {
|
|
106
|
+
background-color: var(--nuraly-toast-info-background);
|
|
107
|
+
border-color: var(--nuraly-toast-info-border);
|
|
108
|
+
color: var(--nuraly-toast-info-text);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* Toast icon */
|
|
112
|
+
.toast__icon {
|
|
113
|
+
flex-shrink: 0;
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
margin-top: 0.125rem; /* Slight adjustment for better visual alignment */
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.toast__icon nr-icon {
|
|
121
|
+
color: inherit;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Toast content */
|
|
125
|
+
.toast__content {
|
|
126
|
+
flex: 1;
|
|
127
|
+
display: flex;
|
|
128
|
+
flex-direction: column;
|
|
129
|
+
gap: var(--nuraly-spacing-2);
|
|
130
|
+
min-width: 0;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.toast__text {
|
|
134
|
+
font-size: var(--nuraly-font-size-sm);
|
|
135
|
+
line-height: 1.5;
|
|
136
|
+
word-break: break-word;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/* Toast button */
|
|
140
|
+
.toast__button {
|
|
141
|
+
display: flex;
|
|
142
|
+
align-items: center;
|
|
143
|
+
margin-top: var(--nuraly-spacing-1);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.toast__button nr-button {
|
|
147
|
+
flex-shrink: 0;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* Close button */
|
|
151
|
+
.toast__close {
|
|
152
|
+
flex-shrink: 0;
|
|
153
|
+
min-width: var(--nuraly-toast-close-size);
|
|
154
|
+
min-height: var(--nuraly-toast-close-size);
|
|
155
|
+
padding: 0;
|
|
156
|
+
border: none;
|
|
157
|
+
background: transparent;
|
|
158
|
+
color: currentColor;
|
|
159
|
+
cursor: pointer;
|
|
160
|
+
display: flex;
|
|
161
|
+
align-items: center;
|
|
162
|
+
justify-content: center;
|
|
163
|
+
border-radius: var(--nuraly-border-radius-small);
|
|
164
|
+
transition: all var(--nuraly-transition-fast) ease;
|
|
165
|
+
opacity: var(--nuraly-toast-close-opacity);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.toast__close:hover {
|
|
169
|
+
opacity: var(--nuraly-toast-close-opacity-hover);
|
|
170
|
+
background-color: var(--nuraly-toast-close-hover-background);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.toast__close:focus {
|
|
174
|
+
outline: var(--nuraly-focus-outline);
|
|
175
|
+
outline-offset: var(--nuraly-focus-outline-offset);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.toast__close nr-icon {
|
|
179
|
+
color: inherit;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* Animations */
|
|
183
|
+
@keyframes toast-fade-in {
|
|
184
|
+
from {
|
|
185
|
+
opacity: 0;
|
|
186
|
+
transform: translateY(-1rem);
|
|
187
|
+
}
|
|
188
|
+
to {
|
|
189
|
+
opacity: 1;
|
|
190
|
+
transform: translateY(0);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@keyframes toast-fade-out {
|
|
195
|
+
from {
|
|
196
|
+
opacity: 1;
|
|
197
|
+
transform: translateY(0);
|
|
198
|
+
}
|
|
199
|
+
to {
|
|
200
|
+
opacity: 0;
|
|
201
|
+
transform: translateY(-1rem);
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
@keyframes toast-slide-in-right {
|
|
206
|
+
from {
|
|
207
|
+
opacity: 0;
|
|
208
|
+
transform: translateX(100%);
|
|
209
|
+
}
|
|
210
|
+
to {
|
|
211
|
+
opacity: 1;
|
|
212
|
+
transform: translateX(0);
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
@keyframes toast-slide-out-right {
|
|
217
|
+
from {
|
|
218
|
+
opacity: 1;
|
|
219
|
+
transform: translateX(0);
|
|
220
|
+
}
|
|
221
|
+
to {
|
|
222
|
+
opacity: 0;
|
|
223
|
+
transform: translateX(100%);
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
@keyframes toast-slide-in-left {
|
|
228
|
+
from {
|
|
229
|
+
opacity: 0;
|
|
230
|
+
transform: translateX(-100%);
|
|
231
|
+
}
|
|
232
|
+
to {
|
|
233
|
+
opacity: 1;
|
|
234
|
+
transform: translateX(0);
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
@keyframes toast-slide-out-left {
|
|
239
|
+
from {
|
|
240
|
+
opacity: 1;
|
|
241
|
+
transform: translateX(0);
|
|
242
|
+
}
|
|
243
|
+
to {
|
|
244
|
+
opacity: 0;
|
|
245
|
+
transform: translateX(-100%);
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
@keyframes toast-bounce-in {
|
|
250
|
+
0% {
|
|
251
|
+
opacity: 0;
|
|
252
|
+
transform: scale(0.3);
|
|
253
|
+
}
|
|
254
|
+
50% {
|
|
255
|
+
transform: scale(1.05);
|
|
256
|
+
}
|
|
257
|
+
70% {
|
|
258
|
+
transform: scale(0.9);
|
|
259
|
+
}
|
|
260
|
+
100% {
|
|
261
|
+
opacity: 1;
|
|
262
|
+
transform: scale(1);
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
@keyframes toast-bounce-out {
|
|
267
|
+
0% {
|
|
268
|
+
transform: scale(1);
|
|
269
|
+
}
|
|
270
|
+
25% {
|
|
271
|
+
transform: scale(0.95);
|
|
272
|
+
}
|
|
273
|
+
50% {
|
|
274
|
+
opacity: 1;
|
|
275
|
+
transform: scale(1.1);
|
|
276
|
+
}
|
|
277
|
+
100% {
|
|
278
|
+
opacity: 0;
|
|
279
|
+
transform: scale(0.3);
|
|
280
|
+
}
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
/* Animation classes */
|
|
284
|
+
.toast--fade-in {
|
|
285
|
+
animation: toast-fade-in var(--nuraly-transition-toast) ease;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.toast--fade-out {
|
|
289
|
+
animation: toast-fade-out var(--nuraly-transition-toast) ease;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.toast--slide-in {
|
|
293
|
+
animation: toast-slide-in-right var(--nuraly-transition-toast) ease;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.toast--slide-out {
|
|
297
|
+
animation: toast-slide-out-right var(--nuraly-transition-toast) ease;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
.toast--bounce-in {
|
|
301
|
+
animation: toast-bounce-in var(--nuraly-transition-toast) ease;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.toast--bounce-out {
|
|
305
|
+
animation: toast-bounce-out var(--nuraly-transition-toast) ease;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
/* Position-specific slide animations */
|
|
309
|
+
:host([position="top-left"]) .toast--slide-in,
|
|
310
|
+
:host([position="bottom-left"]) .toast--slide-in {
|
|
311
|
+
animation: toast-slide-in-left var(--nuraly-transition-toast) ease;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
:host([position="top-left"]) .toast--slide-out,
|
|
315
|
+
:host([position="bottom-left"]) .toast--slide-out {
|
|
316
|
+
animation: toast-slide-out-left var(--nuraly-transition-toast) ease;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
/* Progress bar for duration indicator */
|
|
320
|
+
.toast__progress {
|
|
321
|
+
position: absolute;
|
|
322
|
+
bottom: 0;
|
|
323
|
+
left: 0;
|
|
324
|
+
height: var(--nuraly-toast-progress-height);
|
|
325
|
+
background-color: currentColor;
|
|
326
|
+
opacity: var(--nuraly-toast-progress-opacity);
|
|
327
|
+
transition: width linear;
|
|
328
|
+
}
|
|
329
|
+
`
|
|
7
330
|
/**
|
|
8
331
|
* @license
|
|
9
332
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
10
333
|
* SPDX-License-Identifier: MIT
|
|
11
|
-
*/,d="",h=5e3,
|
|
334
|
+
*/,d="",h=5e3,p=5;
|
|
12
335
|
/**
|
|
13
336
|
* @license
|
|
14
337
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
15
338
|
* SPDX-License-Identifier: MIT
|
|
16
339
|
*/
|
|
17
|
-
var
|
|
340
|
+
var y=function(t,o,a,r){for(var s,n=arguments.length,i=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,a):r,e=t.length-1;e>=0;e--)(s=t[e])&&(i=(n<3?s(i):n>3?s(o,a,i):s(o,a))||i);return n>3&&i&&Object.defineProperty(o,a,i),i};let f=class extends(c(o)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-button"],this.position="top-right",this.maxToasts=5,this.defaultDuration=5e3,this.animation="fade",this.stack=!0,this.autoDismiss=!0,this.toasts=[],this.timeouts=new Map}show(t){var o,a,r;const s="string"==typeof t?{text:t}:t,n={id:this.generateId(),timestamp:Date.now(),text:s.text,content:s.content,type:s.type||"default",duration:null!==(o=s.duration)&&void 0!==o?o:this.defaultDuration,autoDismiss:null!==(a=s.autoDismiss)&&void 0!==a?a:this.autoDismiss,closable:null===(r=s.closable)||void 0===r||r,icon:s.icon||this.getDefaultIcon(s.type),customClass:s.customClass,button:s.button,onClose:s.onClose,onClick:s.onClick};if(this.stack?this.toasts.length>=this.maxToasts&&this.removeToast(this.toasts[0].id):this.clearAll(),this.toasts=[...this.toasts,n],this.emitToastEvent("nr-toast-show",n,"show"),n.autoDismiss&&n.duration&&n.duration>0){const t=window.setTimeout((()=>{this.removeToast(n.id)}),n.duration);this.timeouts.set(n.id,t)}return n.id}success(t,o){return this.show({text:t,type:"success",duration:o})}error(t,o){return this.show({text:t,type:"error",duration:o})}warning(t,o){return this.show({text:t,type:"warning",duration:o})}info(t,o){return this.show({text:t,type:"info",duration:o})}removeToast(t){const o=this.toasts.find((o=>o.id===t));if(!o)return;o.removing=!0,this.requestUpdate();const a=this.timeouts.get(t);a&&(clearTimeout(a),this.timeouts.delete(t)),setTimeout((()=>{var a;this.toasts=this.toasts.filter((o=>o.id!==t)),this.emitToastEvent("nr-toast-close",o,"close"),null===(a=o.onClose)||void 0===a||a.call(o)}),300)}clearAll(){this.toasts.forEach((t=>{const o=this.timeouts.get(t.id);o&&clearTimeout(o)})),this.timeouts.clear(),this.toasts=[]}handleToastClick(t){var o;this.emitToastEvent("nr-toast-click",t,"click"),null===(o=t.onClick)||void 0===o||o.call(t)}handleCloseClick(t,o){t.stopPropagation(),this.removeToast(o.id)}getDefaultIcon(t){switch(t){case"success":return"check-circle";case"error":return"x-circle";case"warning":return"alert-triangle";case"info":return"info";default:return""}}generateId(){return`toast-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}getAnimationClass(t){const o=t.removing?"out":"in";return`toast--${this.animation}-${o}`}emitToastEvent(t,o,a){this.dispatchEvent(new CustomEvent(t,{detail:{toast:o,action:a},bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.clearAll()}render(){return a`
|
|
341
|
+
<div class="toast-container">
|
|
342
|
+
${e(this.toasts,(t=>t.id),(t=>this.renderToast(t)))}
|
|
343
|
+
</div>
|
|
344
|
+
`}renderToast(t){const o={toast:!0,[`toast--${t.type}`]:!0,[this.getAnimationClass(t)]:!0,[t.customClass||""]:!!t.customClass};return a`
|
|
345
|
+
<div
|
|
346
|
+
class=${l(o)}
|
|
347
|
+
@click=${()=>this.handleToastClick(t)}
|
|
348
|
+
role="alert"
|
|
349
|
+
aria-live="polite"
|
|
350
|
+
>
|
|
351
|
+
${t.icon?a`
|
|
352
|
+
<div class="toast__icon">
|
|
353
|
+
<nr-icon name=${t.icon} size="medium"></nr-icon>
|
|
354
|
+
</div>
|
|
355
|
+
`:r}
|
|
356
|
+
|
|
357
|
+
<div class="toast__content">
|
|
358
|
+
${t.content?t.content:a`
|
|
359
|
+
<div class="toast__text">${t.text}</div>
|
|
360
|
+
${t.button?this.renderButton(t.button):r}
|
|
361
|
+
`}
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
${t.closable?a`
|
|
365
|
+
<button
|
|
366
|
+
class="toast__close"
|
|
367
|
+
@click=${o=>this.handleCloseClick(o,t)}
|
|
368
|
+
aria-label="Close notification"
|
|
369
|
+
type="button"
|
|
370
|
+
>
|
|
371
|
+
<nr-icon name="x" size="small"></nr-icon>
|
|
372
|
+
</button>
|
|
373
|
+
`:r}
|
|
374
|
+
</div>
|
|
375
|
+
`}renderButton(t){return a`
|
|
376
|
+
<div class="toast__button">
|
|
377
|
+
<nr-button
|
|
378
|
+
type=${t.type||"default"}
|
|
379
|
+
size=${t.size||"small"}
|
|
380
|
+
?disabled=${t.disabled||!1}
|
|
381
|
+
@click=${o=>{o.stopPropagation(),t.onClick(o)}}
|
|
382
|
+
>
|
|
383
|
+
${t.icon?a`<nr-icon slot="icon-left" name=${t.icon}></nr-icon>`:r}
|
|
384
|
+
${t.label}
|
|
385
|
+
</nr-button>
|
|
386
|
+
</div>
|
|
387
|
+
`}};f.styles=u,y([s({type:String,reflect:!0})],f.prototype,"position",void 0),y([s({type:Number})],f.prototype,"maxToasts",void 0),y([s({type:Number})],f.prototype,"defaultDuration",void 0),y([s({type:String})],f.prototype,"animation",void 0),y([s({type:Boolean})],f.prototype,"stack",void 0),y([s({type:Boolean})],f.prototype,"autoDismiss",void 0),y([n()],f.prototype,"toasts",void 0),f=y([i("nr-toast")],f);
|
|
18
388
|
/**
|
|
19
389
|
* @license
|
|
20
390
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
21
391
|
* SPDX-License-Identifier: MIT
|
|
22
392
|
*/
|
|
23
|
-
class m{constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}handleError(t,o){console.error(`[ToastController:${this.constructor.name}] Error in ${o}:`,t),this._host.dispatchEvent(new CustomEvent("nr-toast-error",{detail:{error:t.message,context:o,controller:this.constructor.name},bubbles:!0,composed:!0}))}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}}export{m as BaseToastController,
|
|
393
|
+
class m{constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}handleError(t,o){console.error(`[ToastController:${this.constructor.name}] Error in ${o}:`,t),this._host.dispatchEvent(new CustomEvent("nr-toast-error",{detail:{error:t.message,context:o,controller:this.constructor.name},bubbles:!0,composed:!0}))}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}}export{m as BaseToastController,p as DEFAULT_MAX_TOASTS,h as DEFAULT_TOAST_DURATION,d as EMPTY_STRING,f as NrToastElement};
|