toast-message-display 18.0.17 → 20.0.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 +114 -810
- package/fesm2022/toast-message-display.mjs +134 -200
- package/fesm2022/toast-message-display.mjs.map +1 -1
- package/package.json +9 -5
- package/toast-message-display-20.0.0.tgz +0 -0
- package/types/toast-message-display.d.ts +22 -42
- package/toast-message-display-18.0.17.tgz +0 -0
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, Pipe,
|
|
3
|
-
import
|
|
4
|
-
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i1$1 from '@angular/forms';
|
|
6
|
-
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
|
|
2
|
+
import { Injectable, inject, Pipe, input, output, computed, Optional, Inject, ViewEncapsulation, Component, signal, makeEnvironmentProviders, effect } from '@angular/core';
|
|
3
|
+
import { MatSnackBar, MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
|
|
7
4
|
import * as i1 from '@angular/material/icon';
|
|
8
5
|
import { MatIconModule } from '@angular/material/icon';
|
|
9
|
-
import { MatSnackBar, MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
|
|
10
6
|
import * as i2 from '@angular/material/button';
|
|
11
7
|
import { MatButtonModule } from '@angular/material/button';
|
|
12
|
-
import
|
|
8
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
9
|
+
import { TitleCasePipe } from '@angular/common';
|
|
10
|
+
import * as i1$1 from '@angular/forms';
|
|
11
|
+
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
|
|
12
|
+
import * as i2$1 from '@angular/material/toolbar';
|
|
13
13
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
14
14
|
import * as i5 from '@angular/material/menu';
|
|
15
15
|
import { MatMenuModule } from '@angular/material/menu';
|
|
@@ -17,8 +17,6 @@ import * as i6 from '@angular/material/radio';
|
|
|
17
17
|
import { MatRadioModule } from '@angular/material/radio';
|
|
18
18
|
import * as i7 from '@angular/material/divider';
|
|
19
19
|
import { MatDividerModule } from '@angular/material/divider';
|
|
20
|
-
import { DomSanitizer } from '@angular/platform-browser';
|
|
21
|
-
import { take } from 'rxjs/operators';
|
|
22
20
|
|
|
23
21
|
var ToastColors;
|
|
24
22
|
(function (ToastColors) {
|
|
@@ -74,10 +72,10 @@ class ColorConversionService {
|
|
|
74
72
|
parseInt(result[3], 16)
|
|
75
73
|
] : [];
|
|
76
74
|
}
|
|
77
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
78
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
75
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorConversionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
76
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorConversionService, providedIn: 'root' }); }
|
|
79
77
|
}
|
|
80
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorConversionService, decorators: [{
|
|
81
79
|
type: Injectable,
|
|
82
80
|
args: [{
|
|
83
81
|
providedIn: 'root'
|
|
@@ -164,10 +162,10 @@ class TextColorService {
|
|
|
164
162
|
}
|
|
165
163
|
return ctx?.fillStyle;
|
|
166
164
|
}
|
|
167
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
168
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
165
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TextColorService, deps: [{ token: ColorConversionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
166
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TextColorService, providedIn: 'root' }); }
|
|
169
167
|
}
|
|
170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: TextColorService, decorators: [{
|
|
171
169
|
type: Injectable,
|
|
172
170
|
args: [{
|
|
173
171
|
providedIn: 'root'
|
|
@@ -181,79 +179,50 @@ class SafeHtmlPipe {
|
|
|
181
179
|
transform(html) {
|
|
182
180
|
return this.sanitizer.bypassSecurityTrustHtml(html);
|
|
183
181
|
}
|
|
184
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
185
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
182
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
183
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.1", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
|
|
186
184
|
}
|
|
187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SafeHtmlPipe, decorators: [{
|
|
188
186
|
type: Pipe,
|
|
189
187
|
args: [{
|
|
190
|
-
name: 'safeHtml'
|
|
191
|
-
standalone: false
|
|
188
|
+
name: 'safeHtml'
|
|
192
189
|
}]
|
|
193
190
|
}] });
|
|
194
191
|
|
|
195
192
|
class ToastUIComponent {
|
|
196
193
|
constructor(data) {
|
|
197
194
|
this.data = data;
|
|
198
|
-
this.
|
|
199
|
-
|
|
195
|
+
this.options = input(ToastDisplay.adapt(), /* @ts-ignore */
|
|
196
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
197
|
+
this.close = output();
|
|
200
198
|
this.textColorService = inject(TextColorService);
|
|
201
199
|
this.snackBar = inject(MatSnackBar);
|
|
202
|
-
this.
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
--toast-bg-color: ${this.color};
|
|
211
|
-
--toast-text-color: ${this.textColor};
|
|
212
|
-
`);
|
|
213
|
-
}
|
|
214
|
-
const surface = document.querySelector('.mdc-snackbar__surface');
|
|
215
|
-
if (surface) {
|
|
216
|
-
surface.style.backgroundColor = this.color;
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
else {
|
|
220
|
-
document.documentElement.style.setProperty('--toast-bg-color', this.color);
|
|
221
|
-
document.documentElement.style.setProperty('--toast-text-color', this.textColor);
|
|
222
|
-
const hostElement = document.querySelector('.mat-snack-bar-container');
|
|
223
|
-
if (hostElement) {
|
|
224
|
-
hostElement.style.backgroundColor = this.color;
|
|
225
|
-
hostElement.style.color = this.textColor;
|
|
226
|
-
const actionButton = hostElement.querySelector('.mat-button, .mat-snack-bar-action');
|
|
227
|
-
if (actionButton) {
|
|
228
|
-
actionButton.style.color = this.textColor;
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
}
|
|
233
|
-
get color() {
|
|
234
|
-
return this.options.color || '#2196f3';
|
|
235
|
-
}
|
|
236
|
-
get textColor() {
|
|
237
|
-
return this.textColorService.textColorForBgColor(this.color, '#FFFFFF', '#000000');
|
|
200
|
+
this.displayOptions = computed(() => {
|
|
201
|
+
return this.data ? ToastDisplay.adapt(this.data) : this.options();
|
|
202
|
+
}, /* @ts-ignore */
|
|
203
|
+
...(ngDevMode ? [{ debugName: "displayOptions" }] : /* istanbul ignore next */ []));
|
|
204
|
+
this.color = computed(() => this.displayOptions().color || '#2196f3', /* @ts-ignore */
|
|
205
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
206
|
+
this.textColor = computed(() => this.textColorService.textColorForBgColor(this.color(), '#FFFFFF', '#000000'), /* @ts-ignore */
|
|
207
|
+
...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
|
|
238
208
|
}
|
|
239
209
|
onCloseToast(options) {
|
|
240
210
|
this.snackBar.dismiss();
|
|
241
|
-
|
|
211
|
+
if (options)
|
|
212
|
+
this.close.emit(options);
|
|
242
213
|
}
|
|
243
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
244
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
214
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastUIComponent, deps: [{ token: MAT_SNACK_BAR_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
215
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ToastUIComponent, isStandalone: true, selector: "app-toast-ui", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div\n class=\"toast-grid-container\"\n [class.has-icon]=\"displayOptions().icon\"\n [class.has-action]=\"displayOptions().action\"\n >\n @if (displayOptions().icon) {\n <mat-icon\n class=\"toast-icon\"\n [style.color]=\"textColor()\"\n >\n {{ displayOptions().icon }}\n </mat-icon>\n }\n\n <div\n class=\"toast-message\"\n [style.color]=\"textColor()\"\n [innerHTML]=\"displayOptions().message | safeHtml\"\n >\n </div>\n\n @if (displayOptions().action) {\n <button\n class=\"toast-action-button\"\n mat-button\n (click)=\"onCloseToast(displayOptions())\"\n [style.color]=\"textColor()\"\n >\n @if (displayOptions().action !== '-') {\n {{ displayOptions().action }}\n } @else {\n <mat-icon>close</mat-icon>\n }\n </button>\n }\n</div>\n", styles: [".mat-mdc-snack-bar-container{--mat-snackbar-container-color: var(--toast-bg-color, #fff);--mat-mdc-snack-bar-button-color: var(--toast-text-color, #fff);--mat-snackbar-supporting-text-color: var(--toast-text-color, #000)}.mat-mdc-snack-bar-container .mdc-snackbar__surface{max-width:100%!important;width:100%}.mat-mdc-snackbar-surface{padding-right:0}.cdk-overlay-pane{width:100%}.cdk-overlay-container{position:fixed;top:0;left:0;width:100%;z-index:1000}.toast-grid-container{display:grid;grid-template-columns:1fr}.toast-grid-container.has-action{grid-template-columns:1fr auto}.toast-grid-container.has-icon{grid-template-columns:minmax(0,44px) 1fr}.toast-grid-container.has-icon.has-action{grid-template-columns:minmax(0,44px) 1fr auto}.toast-grid-container>*{display:inline-flex;overflow:hidden;align-items:center}.toast-icon{margin-top:.25rem;grid-column:1;display:flex;align-items:center;justify-content:center;max-width:44px;overflow:hidden}.toast-message{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;flex-grow:1}.toast-action-button{justify-self:end}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
245
216
|
}
|
|
246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastUIComponent, decorators: [{
|
|
247
218
|
type: Component,
|
|
248
|
-
args: [{ selector: 'app-toast-ui', encapsulation: ViewEncapsulation.None,
|
|
219
|
+
args: [{ selector: 'app-toast-ui', encapsulation: ViewEncapsulation.None, imports: [MatIconModule, MatButtonModule, SafeHtmlPipe], template: "<div\n class=\"toast-grid-container\"\n [class.has-icon]=\"displayOptions().icon\"\n [class.has-action]=\"displayOptions().action\"\n >\n @if (displayOptions().icon) {\n <mat-icon\n class=\"toast-icon\"\n [style.color]=\"textColor()\"\n >\n {{ displayOptions().icon }}\n </mat-icon>\n }\n\n <div\n class=\"toast-message\"\n [style.color]=\"textColor()\"\n [innerHTML]=\"displayOptions().message | safeHtml\"\n >\n </div>\n\n @if (displayOptions().action) {\n <button\n class=\"toast-action-button\"\n mat-button\n (click)=\"onCloseToast(displayOptions())\"\n [style.color]=\"textColor()\"\n >\n @if (displayOptions().action !== '-') {\n {{ displayOptions().action }}\n } @else {\n <mat-icon>close</mat-icon>\n }\n </button>\n }\n</div>\n", styles: [".mat-mdc-snack-bar-container{--mat-snackbar-container-color: var(--toast-bg-color, #fff);--mat-mdc-snack-bar-button-color: var(--toast-text-color, #fff);--mat-snackbar-supporting-text-color: var(--toast-text-color, #000)}.mat-mdc-snack-bar-container .mdc-snackbar__surface{max-width:100%!important;width:100%}.mat-mdc-snackbar-surface{padding-right:0}.cdk-overlay-pane{width:100%}.cdk-overlay-container{position:fixed;top:0;left:0;width:100%;z-index:1000}.toast-grid-container{display:grid;grid-template-columns:1fr}.toast-grid-container.has-action{grid-template-columns:1fr auto}.toast-grid-container.has-icon{grid-template-columns:minmax(0,44px) 1fr}.toast-grid-container.has-icon.has-action{grid-template-columns:minmax(0,44px) 1fr auto}.toast-grid-container>*{display:inline-flex;overflow:hidden;align-items:center}.toast-icon{margin-top:.25rem;grid-column:1;display:flex;align-items:center;justify-content:center;max-width:44px;overflow:hidden}.toast-message{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;flex-grow:1}.toast-action-button{justify-self:end}\n"] }]
|
|
249
220
|
}], ctorParameters: () => [{ type: ToastDisplay, decorators: [{
|
|
221
|
+
type: Optional
|
|
222
|
+
}, {
|
|
250
223
|
type: Inject,
|
|
251
224
|
args: [MAT_SNACK_BAR_DATA]
|
|
252
|
-
}] }], propDecorators: { close: [{
|
|
253
|
-
type: Output
|
|
254
|
-
}], options: [{
|
|
255
|
-
type: Input
|
|
256
|
-
}] } });
|
|
225
|
+
}] }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
|
|
257
226
|
|
|
258
227
|
var HorizontalAlignment;
|
|
259
228
|
(function (HorizontalAlignment) {
|
|
@@ -268,17 +237,6 @@ var VerticalAlignment;
|
|
|
268
237
|
VerticalAlignment["BOTTOM"] = "bottom";
|
|
269
238
|
})(VerticalAlignment || (VerticalAlignment = {}));
|
|
270
239
|
|
|
271
|
-
class ToastMessage {
|
|
272
|
-
constructor(error = '', action = '', icon = 'error') {
|
|
273
|
-
this.error = error;
|
|
274
|
-
this.action = action;
|
|
275
|
-
this.icon = icon;
|
|
276
|
-
}
|
|
277
|
-
static adapt(item) {
|
|
278
|
-
return new ToastMessage(item?.error, item?.action, item?.icon);
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
|
|
282
240
|
class ToastOptions {
|
|
283
241
|
constructor(duration, horizontalPosition = HorizontalAlignment.CENTER, verticalPosition = VerticalAlignment.TOP, data) {
|
|
284
242
|
this.duration = duration;
|
|
@@ -292,79 +250,25 @@ class ToastOptions {
|
|
|
292
250
|
}
|
|
293
251
|
}
|
|
294
252
|
|
|
295
|
-
class ToastMessageInlineComponent {
|
|
296
|
-
constructor() {
|
|
297
|
-
this.close = new EventEmitter();
|
|
298
|
-
this.textColorService = inject(TextColorService);
|
|
299
|
-
this.toastList = [];
|
|
300
|
-
this.dismissToasts = [];
|
|
301
|
-
this.duration = -1;
|
|
302
|
-
this.position = VerticalAlignment.TOP;
|
|
303
|
-
}
|
|
304
|
-
set toast(value) {
|
|
305
|
-
if (!value)
|
|
306
|
-
return;
|
|
307
|
-
const toast = ToastDisplay.adapt(value);
|
|
308
|
-
if (!toast.action) {
|
|
309
|
-
this.dismissToasts.push(toast);
|
|
310
|
-
this.expireTime(toast, this.duration);
|
|
311
|
-
}
|
|
312
|
-
this.toastList.push(toast);
|
|
313
|
-
}
|
|
314
|
-
get option() {
|
|
315
|
-
return (this.toastList.length > 0) ? this.toastList[0] : null;
|
|
316
|
-
}
|
|
317
|
-
get color() {
|
|
318
|
-
return (this.option) ? this.option.color : '';
|
|
319
|
-
}
|
|
320
|
-
get textColor() {
|
|
321
|
-
return (this.option) ? this.textColorService.textColorForBgColor(this.option.color, '#FFFFFF', '#000000') : '';
|
|
322
|
-
}
|
|
323
|
-
onCloseToast(toast) {
|
|
324
|
-
this.toastList = this.toastList.filter(item => item.id !== toast?.id);
|
|
325
|
-
this.close.emit(toast);
|
|
326
|
-
}
|
|
327
|
-
expireTime(toast, duration) {
|
|
328
|
-
if (duration <= 0)
|
|
329
|
-
return;
|
|
330
|
-
const boundRemove = this.removeToast.bind(this, toast);
|
|
331
|
-
setTimeout(boundRemove, duration * 1000);
|
|
332
|
-
}
|
|
333
|
-
removeToast(toast) {
|
|
334
|
-
this.dismissToasts = this.dismissToasts.filter(t => t.id !== toast.id);
|
|
335
|
-
this.toastList = this.toastList.filter(t => t.id !== toast.id);
|
|
336
|
-
}
|
|
337
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
338
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToastMessageInlineComponent, selector: "app-toast-message-display-inline", inputs: { toast: "toast", duration: "duration", position: "position" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"toast-inline-list\" [class.position-bottom]=\"position === 'bottom'\">\n @for (toast of toastList; track toast) {\n <div [style.background-color]=\"toast.color\" class=\"inline\">\n <app-toast-ui\n [options]=\"toast\"\n class=\"toast-inline-item\"\n (close)=\"onCloseToast(toast)\"\n ></app-toast-ui>\n </div>\n }\n</div>\n", styles: [".toast-inline-list{display:flex;flex-direction:column;gap:.5rem}.toast-inline-list.position-bottom{flex-direction:column-reverse}.toast-inline-item{flex:1}.inline{padding:.75rem;border-radius:.25rem}\n"], dependencies: [{ kind: "component", type: ToastUIComponent, selector: "app-toast-ui", inputs: ["options"], outputs: ["close"] }] }); }
|
|
339
|
-
}
|
|
340
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageInlineComponent, decorators: [{
|
|
341
|
-
type: Component,
|
|
342
|
-
args: [{ selector: 'app-toast-message-display-inline', standalone: false, template: "<div class=\"toast-inline-list\" [class.position-bottom]=\"position === 'bottom'\">\n @for (toast of toastList; track toast) {\n <div [style.background-color]=\"toast.color\" class=\"inline\">\n <app-toast-ui\n [options]=\"toast\"\n class=\"toast-inline-item\"\n (close)=\"onCloseToast(toast)\"\n ></app-toast-ui>\n </div>\n }\n</div>\n", styles: [".toast-inline-list{display:flex;flex-direction:column;gap:.5rem}.toast-inline-list.position-bottom{flex-direction:column-reverse}.toast-inline-item{flex:1}.inline{padding:.75rem;border-radius:.25rem}\n"] }]
|
|
343
|
-
}], propDecorators: { close: [{
|
|
344
|
-
type: Output
|
|
345
|
-
}], toast: [{
|
|
346
|
-
type: Input
|
|
347
|
-
}], duration: [{
|
|
348
|
-
type: Input
|
|
349
|
-
}], position: [{
|
|
350
|
-
type: Input
|
|
351
|
-
}] } });
|
|
352
|
-
|
|
353
253
|
class ToastMessageDisplayService {
|
|
354
254
|
constructor() {
|
|
355
255
|
this.snackBar = inject(MatSnackBar);
|
|
356
|
-
this.toastQueue = []
|
|
357
|
-
|
|
256
|
+
this.toastQueue = signal([], /* @ts-ignore */
|
|
257
|
+
...(ngDevMode ? [{ debugName: "toastQueue" }] : /* istanbul ignore next */ []));
|
|
258
|
+
this.isToastVisible = signal(false, /* @ts-ignore */
|
|
259
|
+
...(ngDevMode ? [{ debugName: "isToastVisible" }] : /* istanbul ignore next */ []));
|
|
358
260
|
this.defaultDuration = 3;
|
|
359
261
|
}
|
|
360
262
|
toastMessage(options = ToastDisplay.adapt(), duration, vertical) {
|
|
361
|
-
this.toastQueue.
|
|
263
|
+
this.toastQueue.update(queue => [...queue, { options, duration, vertical }]);
|
|
362
264
|
this.showNextToast();
|
|
363
265
|
}
|
|
364
266
|
showNextToast() {
|
|
365
|
-
if (this.isToastVisible || this.toastQueue.length === 0)
|
|
267
|
+
if (this.isToastVisible() || this.toastQueue().length === 0)
|
|
366
268
|
return;
|
|
367
|
-
const
|
|
269
|
+
const queue = this.toastQueue();
|
|
270
|
+
const { options, duration, vertical } = queue[0];
|
|
271
|
+
this.toastQueue.set(queue.slice(1));
|
|
368
272
|
const vertPosition = (vertical) ? vertical : 'top';
|
|
369
273
|
const durationDismiss = (!options.action) ? this.defaultDuration : duration;
|
|
370
274
|
const displayOptions = ToastOptions.adapt({
|
|
@@ -373,14 +277,13 @@ class ToastMessageDisplayService {
|
|
|
373
277
|
verticalPosition: vertPosition,
|
|
374
278
|
data: options,
|
|
375
279
|
});
|
|
376
|
-
this.isToastVisible
|
|
280
|
+
this.isToastVisible.set(true);
|
|
377
281
|
this.snackBarRef = this.snackBar.openFromComponent(ToastUIComponent, displayOptions);
|
|
378
282
|
if (this.snackBarRef) {
|
|
379
283
|
this.snackBarRef
|
|
380
284
|
.afterDismissed()
|
|
381
|
-
.pipe(take(1))
|
|
382
285
|
.subscribe(() => {
|
|
383
|
-
this.isToastVisible
|
|
286
|
+
this.isToastVisible.set(false);
|
|
384
287
|
this.showNextToast();
|
|
385
288
|
});
|
|
386
289
|
}
|
|
@@ -388,16 +291,89 @@ class ToastMessageDisplayService {
|
|
|
388
291
|
console.error('Snackbar reference is undefined. Unable to subscribe to dismissal event.');
|
|
389
292
|
}
|
|
390
293
|
}
|
|
391
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
392
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
294
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastMessageDisplayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
295
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastMessageDisplayService, providedIn: 'root' }); }
|
|
393
296
|
}
|
|
394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastMessageDisplayService, decorators: [{
|
|
395
298
|
type: Injectable,
|
|
396
299
|
args: [{
|
|
397
300
|
providedIn: 'root'
|
|
398
301
|
}]
|
|
399
302
|
}] });
|
|
400
303
|
|
|
304
|
+
function provideToast() {
|
|
305
|
+
return makeEnvironmentProviders([
|
|
306
|
+
ToastMessageDisplayService
|
|
307
|
+
]);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
class ToastMessage {
|
|
311
|
+
constructor(error = '', action = '', icon = 'error') {
|
|
312
|
+
this.error = error;
|
|
313
|
+
this.action = action;
|
|
314
|
+
this.icon = icon;
|
|
315
|
+
}
|
|
316
|
+
static adapt(item) {
|
|
317
|
+
return new ToastMessage(item?.error, item?.action, item?.icon);
|
|
318
|
+
}
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
class ToastMessageInlineComponent {
|
|
322
|
+
constructor() {
|
|
323
|
+
this.close = output();
|
|
324
|
+
this.textColorService = inject(TextColorService);
|
|
325
|
+
this.toastList = [];
|
|
326
|
+
this.dismissToasts = [];
|
|
327
|
+
this.toast = input(null, /* @ts-ignore */
|
|
328
|
+
...(ngDevMode ? [{ debugName: "toast" }] : /* istanbul ignore next */ []));
|
|
329
|
+
this.duration = input(-1, /* @ts-ignore */
|
|
330
|
+
...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
|
|
331
|
+
this.position = input(VerticalAlignment.TOP, /* @ts-ignore */
|
|
332
|
+
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
333
|
+
effect(() => {
|
|
334
|
+
const value = this.toast();
|
|
335
|
+
if (!value)
|
|
336
|
+
return;
|
|
337
|
+
const toast = ToastDisplay.adapt(value);
|
|
338
|
+
if (!toast.action) {
|
|
339
|
+
this.dismissToasts.push(toast);
|
|
340
|
+
this.expireTime(toast, this.duration());
|
|
341
|
+
}
|
|
342
|
+
this.toastList.push(toast);
|
|
343
|
+
});
|
|
344
|
+
}
|
|
345
|
+
get option() {
|
|
346
|
+
return (this.toastList.length > 0) ? this.toastList[0] : null;
|
|
347
|
+
}
|
|
348
|
+
get color() {
|
|
349
|
+
return (this.option) ? this.option.color : '';
|
|
350
|
+
}
|
|
351
|
+
get textColor() {
|
|
352
|
+
return (this.option) ? this.textColorService.textColorForBgColor(this.option.color, '#FFFFFF', '#000000') : '';
|
|
353
|
+
}
|
|
354
|
+
onCloseToast(toast) {
|
|
355
|
+
this.toastList = this.toastList.filter(item => item.id !== toast?.id);
|
|
356
|
+
if (toast)
|
|
357
|
+
this.close.emit(toast);
|
|
358
|
+
}
|
|
359
|
+
expireTime(toast, duration) {
|
|
360
|
+
if (duration <= 0)
|
|
361
|
+
return;
|
|
362
|
+
const boundRemove = this.removeToast.bind(this, toast);
|
|
363
|
+
setTimeout(boundRemove, duration * 1000);
|
|
364
|
+
}
|
|
365
|
+
removeToast(toast) {
|
|
366
|
+
this.dismissToasts = this.dismissToasts.filter(t => t.id !== toast.id);
|
|
367
|
+
this.toastList = this.toastList.filter(t => t.id !== toast.id);
|
|
368
|
+
}
|
|
369
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastMessageInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ToastMessageInlineComponent, isStandalone: true, selector: "app-toast-message-display-inline", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"toast-inline-list\" [class.position-bottom]=\"position() === 'bottom'\">\n @for (toast of toastList; track toast) {\n <div [style.background-color]=\"toast.color\" class=\"inline\">\n <app-toast-ui\n [options]=\"toast\"\n class=\"toast-inline-item\"\n (close)=\"onCloseToast(toast)\"\n ></app-toast-ui>\n </div>\n }\n</div>\n", styles: [".toast-inline-list{display:flex;flex-direction:column;gap:.5rem}.toast-inline-list.position-bottom{flex-direction:column-reverse}.toast-inline-item{flex:1}.inline{padding:.75rem;border-radius:.25rem}\n"], dependencies: [{ kind: "component", type: ToastUIComponent, selector: "app-toast-ui", inputs: ["options"], outputs: ["close"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
371
|
+
}
|
|
372
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastMessageInlineComponent, decorators: [{
|
|
373
|
+
type: Component,
|
|
374
|
+
args: [{ selector: 'app-toast-message-display-inline', encapsulation: ViewEncapsulation.None, imports: [ToastUIComponent, MatIconModule, MatButtonModule, SafeHtmlPipe], template: "<div class=\"toast-inline-list\" [class.position-bottom]=\"position() === 'bottom'\">\n @for (toast of toastList; track toast) {\n <div [style.background-color]=\"toast.color\" class=\"inline\">\n <app-toast-ui\n [options]=\"toast\"\n class=\"toast-inline-item\"\n (close)=\"onCloseToast(toast)\"\n ></app-toast-ui>\n </div>\n }\n</div>\n", styles: [".toast-inline-list{display:flex;flex-direction:column;gap:.5rem}.toast-inline-list.position-bottom{flex-direction:column-reverse}.toast-inline-item{flex:1}.inline{padding:.75rem;border-radius:.25rem}\n"] }]
|
|
375
|
+
}], ctorParameters: () => [], propDecorators: { close: [{ type: i0.Output, args: ["close"] }], toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
|
|
376
|
+
|
|
401
377
|
class ToastDemoComponent {
|
|
402
378
|
constructor() {
|
|
403
379
|
this.random = () => {
|
|
@@ -497,66 +473,24 @@ class ToastDemoComponent {
|
|
|
497
473
|
onClosedToast(toast) {
|
|
498
474
|
console.log(toast);
|
|
499
475
|
}
|
|
500
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
501
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
476
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
477
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: ToastDemoComponent, isStandalone: true, selector: "app-toast-display-demo", ngImport: i0, template: "<mat-toolbar class=\"demo-toolbar\">\n <div>Toast Message Demo</div>\n <div class=\"demo-toolbar-title\">\n <button\n mat-stroked-button\n [matMenuTriggerFor]=\"menu\"\n matIconPrefix\n >\n {{ type | titlecase }}\n <mat-icon>layers</mat-icon>\n </button>\n </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n <button\n mat-menu-item\n (click)=\"onSelectType('basic')\"\n >\n Basic\n </button>\n <button\n mat-menu-item\n (click)=\"onSelectType('icon')\"\n >\n Icon\n </button>\n <button\n mat-menu-item\n (click)=\"onSelectType('action')\"\n >\n Action\n </button>\n</mat-menu>\n\n<div class=\"demo-container\">\n <span>\n @switch (type) {\n @case ('icon') {\n <div>\n <div class=\"demo-section\">\n <h3 class=\"demo-title\">Toast with Icon</h3>\n <div class=\"demo-button-row\">\n <button\n mat-stroked-button\n (click)=\"onBasic('SUCCESS', 'favorite_border')\"\n >\n Icon - SUCCESS\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('ERROR', 'dashboard')\"\n >\n Icon - ERROR\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('INFO', 'event')\"\n >\n Icon - INFO\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('WARN', 'paid')\"\n >\n Icon - WARN\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('WARN', 'notifications')\"\n >\n Icon - NOTIFY\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('WARN', 'movie_filter')\"\n >\n Icon - GENERAL\n </button>\n </div>\n </div>\n </div>\n }\n @case ('action') {\n <div>\n <div class=\"demo-section\">\n <h3 class=\"demo-title\">Toast with Icon and Action</h3>\n <div class=\"demo-button-row\">\n <button\n mat-stroked-button\n (click)=\"onBasic('SUCCESS', 'favorite_border', 'Dismiss')\"\n >\n Action - SUCCESS\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('ERROR', 'dashboard', 'Dismiss')\"\n >\n Action - ERROR\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('INFO', 'event', 'Dismiss')\"\n >\n Action - INFO\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('WARN', 'paid', 'Dismiss')\"\n >\n Action - WARN\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('NOTIFY', 'notifications', 'Dismiss')\"\n >\n Action - NOTIFY\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('GENERAL', 'movie_filter', 'Dismiss')\"\n >\n Action - GENERAL\n </button>\n </div>\n </div>\n </div>\n }\n @default {\n <div>\n <div class=\"demo-section\">\n <h3 class=\"demo-title\">Basic Toast</h3>\n <div class=\"demo-button-row\">\n <button\n mat-stroked-button\n (click)=\"onBasic('SUCCESS')\"\n >\n Basic - SUCCESS\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('ERROR')\"\n >\n Basic - ERROR\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('INFO')\"\n >\n Basic - INFO\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('WARN')\"\n >\n Basic - WARN\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('NOTIFY')\"\n >\n Basic - NOTIFY\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('GENERAL')\"\n >\n Basic - GENERAL\n </button>\n </div>\n </div>\n </div>\n }\n }\n </span>\n <div class=\"demo-position-controls\">\n <mat-radio-group [formControl]=\"position\" class=\"demo-radio-group\">\n <mat-radio-button value=\"top\">Top Position</mat-radio-button>\n <mat-radio-button value=\"bottom\">Bottom Position</mat-radio-button>\n </mat-radio-group>\n </div>\n</div>\n\n<div class=\"demo-divider\">\n <mat-divider></mat-divider>\n</div>\n\n<div class=\"demo-container\">\n <button mat-stroked-button (click)=\"onInline()\" class=\"demo-inline-button\">\n Add Inline Toast Message\n </button>\n <app-toast-message-display-inline\n [toast]=\"pickToastSample\"\n [duration]=\"5\"\n (close)=\"onClosedToast($event)\"\n ></app-toast-message-display-inline>\n</div>\n", styles: [".bold{font-size:22px;font-weight:700}.demo-toolbar{display:flex}.demo-toolbar-title{flex:1;text-align:end}.demo-container{margin:1rem}.demo-section{display:flex;gap:1rem;flex-direction:column}.demo-title{flex:1;margin-bottom:0}.demo-button-row{display:flex;gap:.5rem}.demo-position-controls{display:flex;margin-top:1rem}.demo-radio-group{display:flex;gap:2rem}.demo-divider{margin-top:1rem;margin-bottom:1rem}.demo-inline-button{margin-bottom:2rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: ToastMessageInlineComponent, selector: "app-toast-message-display-inline", inputs: ["toast", "duration", "position"], outputs: ["close"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
|
|
502
478
|
}
|
|
503
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ToastDemoComponent, decorators: [{
|
|
504
480
|
type: Component,
|
|
505
|
-
args: [{ selector: 'app-toast-display-demo',
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
class ToastMessageDisplayModule {
|
|
509
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
510
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayModule, declarations: [SafeHtmlPipe,
|
|
511
|
-
ToastUIComponent,
|
|
512
|
-
ToastDemoComponent,
|
|
513
|
-
ToastMessageInlineComponent], imports: [CommonModule,
|
|
514
|
-
ReactiveFormsModule,
|
|
515
|
-
MatIconModule,
|
|
516
|
-
MatSnackBarModule,
|
|
517
|
-
MatButtonModule,
|
|
518
|
-
MatToolbarModule,
|
|
519
|
-
MatMenuModule,
|
|
520
|
-
MatRadioModule,
|
|
521
|
-
MatDividerModule], exports: [ToastUIComponent,
|
|
522
|
-
ToastDemoComponent,
|
|
523
|
-
ToastMessageInlineComponent] }); }
|
|
524
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayModule, imports: [CommonModule,
|
|
525
|
-
ReactiveFormsModule,
|
|
526
|
-
MatIconModule,
|
|
527
|
-
MatSnackBarModule,
|
|
528
|
-
MatButtonModule,
|
|
529
|
-
MatToolbarModule,
|
|
530
|
-
MatMenuModule,
|
|
531
|
-
MatRadioModule,
|
|
532
|
-
MatDividerModule] }); }
|
|
533
|
-
}
|
|
534
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastMessageDisplayModule, decorators: [{
|
|
535
|
-
type: NgModule,
|
|
536
|
-
args: [{
|
|
537
|
-
imports: [
|
|
538
|
-
CommonModule,
|
|
481
|
+
args: [{ selector: 'app-toast-display-demo', imports: [
|
|
482
|
+
TitleCasePipe,
|
|
539
483
|
ReactiveFormsModule,
|
|
484
|
+
MatToolbarModule,
|
|
540
485
|
MatIconModule,
|
|
541
|
-
MatSnackBarModule,
|
|
542
486
|
MatButtonModule,
|
|
543
|
-
MatToolbarModule,
|
|
544
487
|
MatMenuModule,
|
|
545
488
|
MatRadioModule,
|
|
489
|
+
MatSnackBarModule,
|
|
546
490
|
MatDividerModule,
|
|
547
|
-
],
|
|
548
|
-
declarations: [
|
|
549
|
-
SafeHtmlPipe,
|
|
550
|
-
ToastUIComponent,
|
|
551
|
-
ToastDemoComponent,
|
|
552
|
-
ToastMessageInlineComponent,
|
|
553
|
-
],
|
|
554
|
-
exports: [
|
|
555
|
-
ToastUIComponent,
|
|
556
|
-
ToastDemoComponent,
|
|
557
491
|
ToastMessageInlineComponent,
|
|
558
|
-
|
|
559
|
-
}]
|
|
492
|
+
SafeHtmlPipe
|
|
493
|
+
], template: "<mat-toolbar class=\"demo-toolbar\">\n <div>Toast Message Demo</div>\n <div class=\"demo-toolbar-title\">\n <button\n mat-stroked-button\n [matMenuTriggerFor]=\"menu\"\n matIconPrefix\n >\n {{ type | titlecase }}\n <mat-icon>layers</mat-icon>\n </button>\n </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n <button\n mat-menu-item\n (click)=\"onSelectType('basic')\"\n >\n Basic\n </button>\n <button\n mat-menu-item\n (click)=\"onSelectType('icon')\"\n >\n Icon\n </button>\n <button\n mat-menu-item\n (click)=\"onSelectType('action')\"\n >\n Action\n </button>\n</mat-menu>\n\n<div class=\"demo-container\">\n <span>\n @switch (type) {\n @case ('icon') {\n <div>\n <div class=\"demo-section\">\n <h3 class=\"demo-title\">Toast with Icon</h3>\n <div class=\"demo-button-row\">\n <button\n mat-stroked-button\n (click)=\"onBasic('SUCCESS', 'favorite_border')\"\n >\n Icon - SUCCESS\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('ERROR', 'dashboard')\"\n >\n Icon - ERROR\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('INFO', 'event')\"\n >\n Icon - INFO\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('WARN', 'paid')\"\n >\n Icon - WARN\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('WARN', 'notifications')\"\n >\n Icon - NOTIFY\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('WARN', 'movie_filter')\"\n >\n Icon - GENERAL\n </button>\n </div>\n </div>\n </div>\n }\n @case ('action') {\n <div>\n <div class=\"demo-section\">\n <h3 class=\"demo-title\">Toast with Icon and Action</h3>\n <div class=\"demo-button-row\">\n <button\n mat-stroked-button\n (click)=\"onBasic('SUCCESS', 'favorite_border', 'Dismiss')\"\n >\n Action - SUCCESS\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('ERROR', 'dashboard', 'Dismiss')\"\n >\n Action - ERROR\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('INFO', 'event', 'Dismiss')\"\n >\n Action - INFO\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('WARN', 'paid', 'Dismiss')\"\n >\n Action - WARN\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('NOTIFY', 'notifications', 'Dismiss')\"\n >\n Action - NOTIFY\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('GENERAL', 'movie_filter', 'Dismiss')\"\n >\n Action - GENERAL\n </button>\n </div>\n </div>\n </div>\n }\n @default {\n <div>\n <div class=\"demo-section\">\n <h3 class=\"demo-title\">Basic Toast</h3>\n <div class=\"demo-button-row\">\n <button\n mat-stroked-button\n (click)=\"onBasic('SUCCESS')\"\n >\n Basic - SUCCESS\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('ERROR')\"\n >\n Basic - ERROR\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('INFO')\"\n >\n Basic - INFO\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('WARN')\"\n >\n Basic - WARN\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('NOTIFY')\"\n >\n Basic - NOTIFY\n </button>\n <button\n mat-stroked-button\n (click)=\"onBasic('GENERAL')\"\n >\n Basic - GENERAL\n </button>\n </div>\n </div>\n </div>\n }\n }\n </span>\n <div class=\"demo-position-controls\">\n <mat-radio-group [formControl]=\"position\" class=\"demo-radio-group\">\n <mat-radio-button value=\"top\">Top Position</mat-radio-button>\n <mat-radio-button value=\"bottom\">Bottom Position</mat-radio-button>\n </mat-radio-group>\n </div>\n</div>\n\n<div class=\"demo-divider\">\n <mat-divider></mat-divider>\n</div>\n\n<div class=\"demo-container\">\n <button mat-stroked-button (click)=\"onInline()\" class=\"demo-inline-button\">\n Add Inline Toast Message\n </button>\n <app-toast-message-display-inline\n [toast]=\"pickToastSample\"\n [duration]=\"5\"\n (close)=\"onClosedToast($event)\"\n ></app-toast-message-display-inline>\n</div>\n", styles: [".bold{font-size:22px;font-weight:700}.demo-toolbar{display:flex}.demo-toolbar-title{flex:1;text-align:end}.demo-container{margin:1rem}.demo-section{display:flex;gap:1rem;flex-direction:column}.demo-title{flex:1;margin-bottom:0}.demo-button-row{display:flex;gap:.5rem}.demo-position-controls{display:flex;margin-top:1rem}.demo-radio-group{display:flex;gap:2rem}.demo-divider{margin-top:1rem;margin-bottom:1rem}.demo-inline-button{margin-bottom:2rem}\n"] }]
|
|
560
494
|
}] });
|
|
561
495
|
|
|
562
496
|
/*
|
|
@@ -567,5 +501,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
567
501
|
* Generated bundle index. Do not edit.
|
|
568
502
|
*/
|
|
569
503
|
|
|
570
|
-
export { HorizontalAlignment, ToastColors, ToastDemoComponent, ToastDisplay, ToastMessage,
|
|
504
|
+
export { HorizontalAlignment, ToastColors, ToastDemoComponent, ToastDisplay, ToastMessage, ToastMessageDisplayService, ToastMessageInlineComponent, ToastOptions, ToastUIComponent, VerticalAlignment, provideToast };
|
|
571
505
|
//# sourceMappingURL=toast-message-display.mjs.map
|