@igo2/core 21.0.0-next.17 → 21.0.0-next.19
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/fesm2022/igo2-core-activity.mjs +10 -10
- package/fesm2022/igo2-core-analytics.mjs +3 -3
- package/fesm2022/igo2-core-config.mjs +9 -9
- package/fesm2022/igo2-core-config.mjs.map +1 -1
- package/fesm2022/igo2-core-language.mjs +7 -7
- package/fesm2022/igo2-core-media.mjs +3 -3
- package/fesm2022/igo2-core-message.mjs +337 -169
- package/fesm2022/igo2-core-message.mjs.map +1 -1
- package/fesm2022/igo2-core-network.mjs +3 -3
- package/fesm2022/igo2-core-regex.mjs +3 -3
- package/fesm2022/igo2-core-request.mjs +14 -14
- package/fesm2022/igo2-core-route.mjs +3 -3
- package/fesm2022/igo2-core-storage.mjs +3 -3
- package/fesm2022/igo2-core.mjs +5 -6
- package/fesm2022/igo2-core.mjs.map +1 -1
- package/package.json +2 -3
- package/src/style/style.scss +0 -2
- package/src/theming/themes/_theme.scss +0 -4
- package/style/all-style.css +0 -222
- package/style/style.css +0 -222
- package/theming/prebuilt-themes/blue-theme.css +0 -3
- package/theming/prebuilt-themes/bluedark-theme.css +0 -3
- package/theming/prebuilt-themes/bluedq-theme.css +0 -3
- package/theming/prebuilt-themes/teal-theme.css +0 -3
- package/types/igo2-core-message.d.ts +113 -28
|
@@ -1,168 +1,339 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { ChangeDetectionStrategy, Component, inject, ApplicationRef, createComponent, Injectable, signal, provideAppInitializer } from '@angular/core';
|
|
3
|
+
import { DOCUMENT, NgClass } from '@angular/common';
|
|
4
|
+
import { MatIconButton } from '@angular/material/button';
|
|
5
|
+
import * as i1 from '@angular/material/icon';
|
|
6
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
7
|
+
import { MatProgressBar } from '@angular/material/progress-bar';
|
|
8
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
5
9
|
import { ConfigService } from '@igo2/core/config';
|
|
6
10
|
import { LanguageService } from '@igo2/core/language';
|
|
7
|
-
import { BehaviorSubject
|
|
8
|
-
import { debounceTime, first } from 'rxjs/operators';
|
|
11
|
+
import { BehaviorSubject } from 'rxjs';
|
|
9
12
|
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
var MessageType;
|
|
14
|
+
(function (MessageType) {
|
|
15
|
+
MessageType["ERROR"] = "error";
|
|
16
|
+
MessageType["ALERT"] = "warning";
|
|
17
|
+
// eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values
|
|
18
|
+
MessageType["WARNING"] = "warning";
|
|
19
|
+
MessageType["INFO"] = "info";
|
|
20
|
+
MessageType["SUCCESS"] = "success";
|
|
21
|
+
MessageType["SHOW"] = "show";
|
|
22
|
+
})(MessageType || (MessageType = {}));
|
|
23
|
+
|
|
24
|
+
class ToastContainerComponent {
|
|
25
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: ToastContainerComponent, isStandalone: true, selector: "igo-toast-container", ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{position:fixed;pointer-events:none;z-index:10000;display:flex;flex-direction:column;row-gap:8px}:host.toast-bottom-right{bottom:12px;right:12px;align-items:flex-end}:host.toast-bottom-left{bottom:12px;left:12px;align-items:flex-start}:host.toast-top-right{top:12px;right:12px;align-items:flex-end}:host.toast-top-left{top:12px;left:12px;align-items:flex-start}:host.toast-top-center{top:12px;left:50%;transform:translate(-50%);align-items:center}:host.toast-bottom-center{bottom:12px;left:50%;transform:translate(-50%);align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
27
|
+
}
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ToastContainerComponent, decorators: [{
|
|
29
|
+
type: Component,
|
|
30
|
+
args: [{ selector: 'igo-toast-container', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `<ng-content></ng-content>`, styles: [":host{position:fixed;pointer-events:none;z-index:10000;display:flex;flex-direction:column;row-gap:8px}:host.toast-bottom-right{bottom:12px;right:12px;align-items:flex-end}:host.toast-bottom-left{bottom:12px;left:12px;align-items:flex-start}:host.toast-top-right{top:12px;right:12px;align-items:flex-end}:host.toast-top-left{top:12px;left:12px;align-items:flex-start}:host.toast-top-center{top:12px;left:50%;transform:translate(-50%);align-items:center}:host.toast-bottom-center{bottom:12px;left:50%;transform:translate(-50%);align-items:center}\n"] }]
|
|
31
|
+
}] });
|
|
32
|
+
|
|
33
|
+
const DEFAULT_TOAST_CONFIG = {
|
|
12
34
|
timeOut: 10000,
|
|
13
35
|
extendedTimeOut: 10000,
|
|
14
|
-
titleClass: 'toastr-message-title',
|
|
15
|
-
messageClass: 'toast-message',
|
|
16
36
|
closeButton: true,
|
|
17
37
|
progressBar: true,
|
|
18
|
-
enableHtml: true,
|
|
19
38
|
tapToDismiss: true,
|
|
39
|
+
positionClass: 'toast-bottom-right',
|
|
20
40
|
maxOpened: 4,
|
|
21
41
|
preventDuplicates: true,
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
42
|
+
enableHtml: true,
|
|
43
|
+
disableTimeOut: false,
|
|
44
|
+
showIcon: false,
|
|
45
|
+
freezeProgressOnHover: true
|
|
25
46
|
};
|
|
26
|
-
|
|
27
|
-
|
|
47
|
+
|
|
48
|
+
class ToastService {
|
|
49
|
+
appRef = inject(ApplicationRef);
|
|
50
|
+
document = inject(DOCUMENT);
|
|
51
|
+
toastIdCounter = 0;
|
|
52
|
+
toasts = new Map();
|
|
53
|
+
containerRef = null;
|
|
54
|
+
config = { ...DEFAULT_TOAST_CONFIG };
|
|
55
|
+
lastMessage = '';
|
|
56
|
+
lastTitle = '';
|
|
57
|
+
configure(config) {
|
|
58
|
+
this.config = { ...this.config, ...config };
|
|
59
|
+
}
|
|
60
|
+
success(message, title, options) {
|
|
61
|
+
return this.show('success', message, title, options);
|
|
62
|
+
}
|
|
63
|
+
error(message, title, options) {
|
|
64
|
+
return this.show('error', message, title, options);
|
|
65
|
+
}
|
|
66
|
+
info(message, title, options) {
|
|
67
|
+
return this.show('info', message, title, options);
|
|
68
|
+
}
|
|
69
|
+
warning(message, title, options) {
|
|
70
|
+
return this.show('warning', message, title, options);
|
|
71
|
+
}
|
|
72
|
+
remove(toastId) {
|
|
73
|
+
const ref = this.toasts.get(toastId);
|
|
74
|
+
if (ref) {
|
|
75
|
+
ref.instance.remove();
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
/** Called by ToastComponent when removal animation completes */
|
|
79
|
+
removeToast(toastId) {
|
|
80
|
+
const ref = this.toasts.get(toastId);
|
|
81
|
+
if (ref) {
|
|
82
|
+
this.appRef.detachView(ref.hostView);
|
|
83
|
+
ref.destroy();
|
|
84
|
+
this.toasts.delete(toastId);
|
|
85
|
+
}
|
|
86
|
+
if (this.toasts.size === 0 && this.containerRef) {
|
|
87
|
+
this.appRef.detachView(this.containerRef.hostView);
|
|
88
|
+
this.containerRef.destroy();
|
|
89
|
+
this.containerRef = null;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
getActiveToasts() {
|
|
93
|
+
return Array.from(this.toasts.entries()).map(([id, ref]) => ({
|
|
94
|
+
toastId: id,
|
|
95
|
+
message: ref.instance.message,
|
|
96
|
+
title: ref.instance.title,
|
|
97
|
+
type: ref.instance.type,
|
|
98
|
+
config: ref.instance.config
|
|
99
|
+
}));
|
|
100
|
+
}
|
|
101
|
+
updateToast(toastId, message, title) {
|
|
102
|
+
const ref = this.toasts.get(toastId);
|
|
103
|
+
if (ref) {
|
|
104
|
+
ref.instance.message = message;
|
|
105
|
+
ref.instance.title = title;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
show(type, message, title, options) {
|
|
109
|
+
const mergedConfig = { ...this.config, ...options };
|
|
110
|
+
// Prevent duplicates
|
|
111
|
+
if (mergedConfig.preventDuplicates) {
|
|
112
|
+
if (this.lastMessage === message && this.lastTitle === title) {
|
|
113
|
+
// Return last toast id
|
|
114
|
+
const lastEntry = Array.from(this.toasts.entries()).pop();
|
|
115
|
+
if (lastEntry) {
|
|
116
|
+
return { toastId: lastEntry[0] };
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
// Enforce max opened
|
|
121
|
+
if (mergedConfig.maxOpened && this.toasts.size >= mergedConfig.maxOpened) {
|
|
122
|
+
const firstKey = this.toasts.keys().next().value;
|
|
123
|
+
this.remove(firstKey);
|
|
124
|
+
}
|
|
125
|
+
this.lastMessage = message;
|
|
126
|
+
this.lastTitle = title;
|
|
127
|
+
const toastId = ++this.toastIdCounter;
|
|
128
|
+
const container = this.getOrCreateContainer(mergedConfig.positionClass || 'toast-bottom-right');
|
|
129
|
+
const toastRef = createComponent(ToastComponent, {
|
|
130
|
+
environmentInjector: this.appRef.injector
|
|
131
|
+
});
|
|
132
|
+
toastRef.instance.toastId = toastId;
|
|
133
|
+
toastRef.instance.type = type;
|
|
134
|
+
toastRef.instance.message = message;
|
|
135
|
+
toastRef.instance.title = title;
|
|
136
|
+
toastRef.instance.config = mergedConfig;
|
|
137
|
+
toastRef.instance.enableHtml = mergedConfig.enableHtml ?? true;
|
|
138
|
+
toastRef.instance.showIcon = mergedConfig.showIcon ?? false;
|
|
139
|
+
this.toasts.set(toastId, toastRef);
|
|
140
|
+
this.appRef.attachView(toastRef.hostView);
|
|
141
|
+
container.location.nativeElement.appendChild(toastRef.location.nativeElement);
|
|
142
|
+
return { toastId };
|
|
143
|
+
}
|
|
144
|
+
getOrCreateContainer(positionClass) {
|
|
145
|
+
if (this.containerRef) {
|
|
146
|
+
return this.containerRef;
|
|
147
|
+
}
|
|
148
|
+
this.containerRef = createComponent(ToastContainerComponent, {
|
|
149
|
+
environmentInjector: this.appRef.injector
|
|
150
|
+
});
|
|
151
|
+
this.appRef.attachView(this.containerRef.hostView);
|
|
152
|
+
const el = this.containerRef.location.nativeElement;
|
|
153
|
+
el.classList.add(positionClass);
|
|
154
|
+
this.document.body.appendChild(el);
|
|
155
|
+
return this.containerRef;
|
|
156
|
+
}
|
|
157
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
158
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ToastService, providedIn: 'root' });
|
|
28
159
|
}
|
|
160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ToastService, decorators: [{
|
|
161
|
+
type: Injectable,
|
|
162
|
+
args: [{ providedIn: 'root' }]
|
|
163
|
+
}] });
|
|
29
164
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
165
|
+
class ToastComponent {
|
|
166
|
+
toastService = inject(ToastService);
|
|
167
|
+
sanitizer = inject(DomSanitizer);
|
|
168
|
+
toastId;
|
|
169
|
+
type;
|
|
170
|
+
title = '';
|
|
171
|
+
config;
|
|
172
|
+
enableHtml = false;
|
|
173
|
+
showIcon = false;
|
|
174
|
+
_message = '';
|
|
175
|
+
safeMessage = '';
|
|
176
|
+
get message() {
|
|
177
|
+
return this._message;
|
|
178
|
+
}
|
|
179
|
+
set message(value) {
|
|
180
|
+
this._message = value;
|
|
181
|
+
this.safeMessage = this.sanitizer.bypassSecurityTrustHtml(value);
|
|
182
|
+
}
|
|
183
|
+
progress = signal(100, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
|
|
184
|
+
animationState = signal('inactive', ...(ngDevMode ? [{ debugName: "animationState" }] : /* istanbul ignore next */ []));
|
|
185
|
+
timeoutId = null;
|
|
186
|
+
progressIntervalId = null;
|
|
187
|
+
startTime = 0;
|
|
188
|
+
remainingTime = 0;
|
|
189
|
+
totalTimeOut = 0;
|
|
190
|
+
ngOnInit() {
|
|
191
|
+
this.animationState.set('active');
|
|
192
|
+
if (!this.config.disableTimeOut) {
|
|
193
|
+
this.remainingTime = this.config.timeOut ?? 10000;
|
|
194
|
+
this.totalTimeOut = this.remainingTime;
|
|
195
|
+
this.startTimer();
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
ngOnDestroy() {
|
|
199
|
+
this.clearTimers();
|
|
200
|
+
}
|
|
201
|
+
onEnter() {
|
|
202
|
+
if (!this.config.disableTimeOut) {
|
|
203
|
+
this.remainingTime = (this.progress() / 100) * this.totalTimeOut;
|
|
204
|
+
this.clearTimers();
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
onLeave() {
|
|
208
|
+
if (!this.config.disableTimeOut) {
|
|
209
|
+
if (!this.config.freezeProgressOnHover) {
|
|
210
|
+
const extendedTimeOut = this.config.extendedTimeOut ?? 10000;
|
|
211
|
+
this.remainingTime = extendedTimeOut;
|
|
212
|
+
this.totalTimeOut = extendedTimeOut;
|
|
213
|
+
}
|
|
214
|
+
this.startTimer();
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
onTap() {
|
|
218
|
+
if (this.config.tapToDismiss) {
|
|
219
|
+
this.remove();
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
close(event) {
|
|
223
|
+
event.stopPropagation();
|
|
224
|
+
this.remove();
|
|
225
|
+
}
|
|
226
|
+
remove() {
|
|
227
|
+
this.clearTimers();
|
|
228
|
+
this.animationState.set('removed');
|
|
229
|
+
setTimeout(() => {
|
|
230
|
+
this.toastService.removeToast(this.toastId);
|
|
231
|
+
}, 300);
|
|
232
|
+
}
|
|
233
|
+
startTimer() {
|
|
234
|
+
this.startTime = Date.now();
|
|
235
|
+
const duration = this.remainingTime;
|
|
236
|
+
this.progress.set((duration / this.totalTimeOut) * 100);
|
|
237
|
+
this.progressIntervalId = setInterval(() => {
|
|
238
|
+
const elapsed = Date.now() - this.startTime;
|
|
239
|
+
const remaining = Math.max(0, duration - elapsed);
|
|
240
|
+
this.progress.set((remaining / this.totalTimeOut) * 100);
|
|
241
|
+
}, 50);
|
|
242
|
+
this.timeoutId = setTimeout(() => {
|
|
243
|
+
this.remove();
|
|
244
|
+
}, duration);
|
|
245
|
+
}
|
|
246
|
+
clearTimers() {
|
|
247
|
+
if (this.timeoutId) {
|
|
248
|
+
clearTimeout(this.timeoutId);
|
|
249
|
+
this.timeoutId = null;
|
|
250
|
+
}
|
|
251
|
+
if (this.progressIntervalId) {
|
|
252
|
+
clearInterval(this.progressIntervalId);
|
|
253
|
+
this.progressIntervalId = null;
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ToastComponent, isStandalone: true, selector: "igo-toast", host: { listeners: { "mouseenter": "onEnter()", "mouseleave": "onLeave()", "touchstart": "onEnter()", "touchend": "onLeave()" }, properties: { "class": "animationState()" } }, ngImport: i0, template: "<div\n class=\"igo-toast\"\n [ngClass]=\"'toast-' + type\"\n [attr.tabindex]=\"config.tapToDismiss ? '0' : null\"\n (click)=\"onTap()\"\n (keydown.enter)=\"onTap()\"\n>\n @if (showIcon) {\n <mat-icon class=\"toast-icon\">\n @switch (type) {\n @case ('success') {\n check_circle\n }\n @case ('error') {\n error\n }\n @case ('warning') {\n warning\n }\n @default {\n info\n }\n }\n </mat-icon>\n }\n <div class=\"toast-content\">\n @if (title) {\n <header class=\"toast-title\">{{ title }}</header>\n }\n @if (!enableHtml) {\n <p class=\"toast-message\">{{ message }}</p>\n } @else {\n <p class=\"toast-message\" [innerHTML]=\"safeMessage\"></p>\n }\n </div>\n @if (config.closeButton) {\n <button matIconButton class=\"toast-close-button\" (click)=\"close($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n @if (config.progressBar && !config.disableTimeOut) {\n <mat-progress-bar mode=\"determinate\" [value]=\"progress()\" />\n }\n</div>\n", styles: [":host{display:block;pointer-events:all;opacity:0;transition:opacity .3s ease-out}:host.active{opacity:1;transition:opacity .3s ease-in}:host.inactive,:host.removed{opacity:0}:host ::ng-deep .mdc-linear-progress__bar{transition:transform .15s 0ms cubic-bezier(.4,0,.6,1)}.igo-toast{position:relative;overflow:hidden;padding:12px 16px;border-radius:4px;box-shadow:0 3px 6px -1px #0000001f,0 10px 36px -4px #4d60e84d;color:#fff;min-width:300px;max-width:400px;cursor:pointer;display:flex;align-items:flex-start;gap:12px}.toast-success{background-color:#51a351}.toast-error{background-color:#bd362f}.toast-info{background-color:#2f96b4}.toast-warning{background-color:#f89406}.toast-show{background-color:#2f96b4}.toast-icon{flex-shrink:0;font-size:22px;width:22px;height:22px}.toast-content{flex:1;min-width:0}.toast-title{font-weight:700;font-size:var(--sdg-font-size-h5, 19px);line-height:24px}.toast-message{color:inherit;font-size:13px;word-wrap:break-word;margin-bottom:0!important}.toast-close-button{position:absolute;top:4px;right:4px;opacity:.8;color:inherit}.toast-close-button:hover{opacity:1}mat-progress-bar{position:absolute;bottom:0;left:0;width:100%;--mdc-linear-progress-active-indicator-transition-duration: 0ms;--mdc-linear-progress-active-indicator-color: rgba( 255, 255, 255, .7 ) !important;--mdc-linear-progress-track-color: rgba(255, 255, 255, .3) !important;--mat-progress-bar-active-indicator-color: rgba(255, 255, 255, .7);--mat-progress-bar-track-color: rgba(255, 255, 255, .3);--mdc-linear-progress-track-height: 3px;--mdc-linear-progress-active-indicator-height: 3px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
43
258
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
45
|
-
type:
|
|
46
|
-
args: [{
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ToastComponent, decorators: [{
|
|
260
|
+
type: Component,
|
|
261
|
+
args: [{ selector: 'igo-toast', standalone: true, imports: [NgClass, MatIconModule, MatIconButton, MatProgressBar], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
262
|
+
'[class]': 'animationState()',
|
|
263
|
+
'(mouseenter)': 'onEnter()',
|
|
264
|
+
'(mouseleave)': 'onLeave()',
|
|
265
|
+
'(touchstart)': 'onEnter()',
|
|
266
|
+
'(touchend)': 'onLeave()'
|
|
267
|
+
}, template: "<div\n class=\"igo-toast\"\n [ngClass]=\"'toast-' + type\"\n [attr.tabindex]=\"config.tapToDismiss ? '0' : null\"\n (click)=\"onTap()\"\n (keydown.enter)=\"onTap()\"\n>\n @if (showIcon) {\n <mat-icon class=\"toast-icon\">\n @switch (type) {\n @case ('success') {\n check_circle\n }\n @case ('error') {\n error\n }\n @case ('warning') {\n warning\n }\n @default {\n info\n }\n }\n </mat-icon>\n }\n <div class=\"toast-content\">\n @if (title) {\n <header class=\"toast-title\">{{ title }}</header>\n }\n @if (!enableHtml) {\n <p class=\"toast-message\">{{ message }}</p>\n } @else {\n <p class=\"toast-message\" [innerHTML]=\"safeMessage\"></p>\n }\n </div>\n @if (config.closeButton) {\n <button matIconButton class=\"toast-close-button\" (click)=\"close($event)\">\n <mat-icon>close</mat-icon>\n </button>\n }\n @if (config.progressBar && !config.disableTimeOut) {\n <mat-progress-bar mode=\"determinate\" [value]=\"progress()\" />\n }\n</div>\n", styles: [":host{display:block;pointer-events:all;opacity:0;transition:opacity .3s ease-out}:host.active{opacity:1;transition:opacity .3s ease-in}:host.inactive,:host.removed{opacity:0}:host ::ng-deep .mdc-linear-progress__bar{transition:transform .15s 0ms cubic-bezier(.4,0,.6,1)}.igo-toast{position:relative;overflow:hidden;padding:12px 16px;border-radius:4px;box-shadow:0 3px 6px -1px #0000001f,0 10px 36px -4px #4d60e84d;color:#fff;min-width:300px;max-width:400px;cursor:pointer;display:flex;align-items:flex-start;gap:12px}.toast-success{background-color:#51a351}.toast-error{background-color:#bd362f}.toast-info{background-color:#2f96b4}.toast-warning{background-color:#f89406}.toast-show{background-color:#2f96b4}.toast-icon{flex-shrink:0;font-size:22px;width:22px;height:22px}.toast-content{flex:1;min-width:0}.toast-title{font-weight:700;font-size:var(--sdg-font-size-h5, 19px);line-height:24px}.toast-message{color:inherit;font-size:13px;word-wrap:break-word;margin-bottom:0!important}.toast-close-button{position:absolute;top:4px;right:4px;opacity:.8;color:inherit}.toast-close-button:hover{opacity:1}mat-progress-bar{position:absolute;bottom:0;left:0;width:100%;--mdc-linear-progress-active-indicator-transition-duration: 0ms;--mdc-linear-progress-active-indicator-color: rgba( 255, 255, 255, .7 ) !important;--mdc-linear-progress-track-color: rgba(255, 255, 255, .3) !important;--mat-progress-bar-active-indicator-color: rgba(255, 255, 255, .7);--mat-progress-bar-track-color: rgba(255, 255, 255, .3);--mdc-linear-progress-track-height: 3px;--mdc-linear-progress-active-indicator-height: 3px}\n"] }]
|
|
51
268
|
}] });
|
|
52
269
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
270
|
+
/**
|
|
271
|
+
* Provides the message service with custom toast configuration.
|
|
272
|
+
* Since ToastService is providedIn: 'root', this simply configures it.
|
|
273
|
+
*/
|
|
274
|
+
function provideMessage(config) {
|
|
275
|
+
return provideAppInitializer(() => {
|
|
276
|
+
if (!config) {
|
|
277
|
+
return;
|
|
278
|
+
}
|
|
279
|
+
inject(ToastService).configure(config);
|
|
280
|
+
});
|
|
281
|
+
}
|
|
63
282
|
|
|
64
283
|
class MessageService {
|
|
65
|
-
injector = inject(Injector);
|
|
66
284
|
configService = inject(ConfigService);
|
|
67
285
|
languageService = inject(LanguageService);
|
|
286
|
+
toastService = inject(ToastService);
|
|
68
287
|
messages$ = new BehaviorSubject([]);
|
|
69
288
|
options;
|
|
70
|
-
activeMessageTranslations = [];
|
|
71
289
|
constructor() {
|
|
72
290
|
this.options = this.configService.getConfig('message');
|
|
73
|
-
this.languageService.language$
|
|
74
|
-
.pipe(debounceTime(500), takeUntilDestroyed())
|
|
75
|
-
.subscribe(() => {
|
|
76
|
-
if (this.toastr.toasts.length === 0) {
|
|
77
|
-
this.activeMessageTranslations = [];
|
|
78
|
-
}
|
|
79
|
-
this.toastr.toasts.forEach((toast) => {
|
|
80
|
-
const activeMessageTranslation = this.activeMessageTranslations.find((amt) => amt.id === toast.toastId);
|
|
81
|
-
if (activeMessageTranslation) {
|
|
82
|
-
const translatedTextInterpolateParams = {
|
|
83
|
-
...activeMessageTranslation.textInterpolateParams
|
|
84
|
-
};
|
|
85
|
-
const translatedTitleInterpolateParams = {
|
|
86
|
-
...activeMessageTranslation.titleInterpolateParams
|
|
87
|
-
};
|
|
88
|
-
if (activeMessageTranslation.textInterpolateParams) {
|
|
89
|
-
Object.keys(activeMessageTranslation.textInterpolateParams).forEach((k) => {
|
|
90
|
-
if (k) {
|
|
91
|
-
translatedTextInterpolateParams[k] =
|
|
92
|
-
this.languageService.translate.instant(activeMessageTranslation.textInterpolateParams?.[k]);
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
}
|
|
96
|
-
if (activeMessageTranslation.titleInterpolateParams) {
|
|
97
|
-
Object.keys(activeMessageTranslation.titleInterpolateParams).forEach((k) => {
|
|
98
|
-
if (k) {
|
|
99
|
-
translatedTitleInterpolateParams[k] =
|
|
100
|
-
this.languageService.translate.instant(activeMessageTranslation.titleInterpolateParams?.[k]);
|
|
101
|
-
}
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
forkJoin([
|
|
105
|
-
this.languageService.translate.get(activeMessageTranslation.textKey, translatedTextInterpolateParams),
|
|
106
|
-
this.languageService.translate.get(activeMessageTranslation.titleKey, translatedTitleInterpolateParams)
|
|
107
|
-
])
|
|
108
|
-
.pipe(first())
|
|
109
|
-
.subscribe((res) => {
|
|
110
|
-
const instance = toast.toastRef.componentInstance;
|
|
111
|
-
instance.message = res[0];
|
|
112
|
-
instance.title = res[1];
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
});
|
|
116
|
-
});
|
|
117
|
-
}
|
|
118
|
-
get toastr() {
|
|
119
|
-
return this.injector.get(ToastrService);
|
|
120
291
|
}
|
|
121
292
|
showError(httpError) {
|
|
122
|
-
httpError.error
|
|
123
|
-
|
|
293
|
+
const errorPayload = httpError.error;
|
|
294
|
+
if (errorPayload && typeof errorPayload === 'object') {
|
|
295
|
+
errorPayload.caught = true;
|
|
296
|
+
}
|
|
297
|
+
const message = typeof errorPayload?.message === 'string'
|
|
298
|
+
? errorPayload.message
|
|
299
|
+
: httpError.message;
|
|
300
|
+
const title = typeof errorPayload?.title === 'string'
|
|
301
|
+
? errorPayload.title
|
|
302
|
+
: 'igo.core.message.error';
|
|
303
|
+
return this.error(message, title);
|
|
124
304
|
}
|
|
125
305
|
message(message) {
|
|
126
|
-
const messageType = message.type;
|
|
127
|
-
this.toastr.toastrConfig.iconClasses[messageType] = `toast-${messageType}`;
|
|
128
306
|
this.messages$.next(this.messages$.value.concat([message]));
|
|
129
|
-
const options = message.options
|
|
307
|
+
const options = { ...(message.options ?? {}) };
|
|
130
308
|
const currentDate = new Date();
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
309
|
+
const fromDate = this.parseDate(options.from, new Date('1 jan 1900'));
|
|
310
|
+
const toDate = this.parseDate(options.to, new Date('1 jan 3000'));
|
|
311
|
+
options.from = fromDate;
|
|
312
|
+
options.to = toDate;
|
|
313
|
+
if (message.showIcon !== undefined) {
|
|
314
|
+
options.showIcon = message.showIcon;
|
|
135
315
|
}
|
|
136
|
-
if (
|
|
137
|
-
options.to = new Date(Date.parse(options.to.replace(/-/g, ' ')));
|
|
138
|
-
}
|
|
139
|
-
if (currentDate > options.from && currentDate < options.to) {
|
|
140
|
-
if (message.showIcon === false) {
|
|
141
|
-
this.toastr.toastrConfig.iconClasses[messageType] =
|
|
142
|
-
`toast-${messageType} toast-no-icon`;
|
|
143
|
-
}
|
|
316
|
+
if (currentDate >= fromDate && currentDate <= toDate) {
|
|
144
317
|
message = this.handleTemplate(message);
|
|
145
318
|
if (message.text) {
|
|
146
319
|
let messageShown;
|
|
147
320
|
switch (message.type) {
|
|
148
321
|
case MessageType.SUCCESS:
|
|
149
|
-
messageShown = this.success(message.text, message.title,
|
|
322
|
+
messageShown = this.success(message.text, message.title, options, message.textInterpolateParams, message.titleInterpolateParams);
|
|
150
323
|
break;
|
|
151
324
|
case MessageType.ERROR:
|
|
152
|
-
messageShown = this.error(message.text, message.title,
|
|
325
|
+
messageShown = this.error(message.text, message.title, options, message.textInterpolateParams, message.titleInterpolateParams);
|
|
153
326
|
break;
|
|
154
327
|
case MessageType.INFO:
|
|
155
|
-
messageShown = this.info(message.text, message.title, message.options, message.textInterpolateParams, message.titleInterpolateParams);
|
|
156
|
-
break;
|
|
157
328
|
case MessageType.SHOW:
|
|
158
|
-
messageShown = this.
|
|
329
|
+
messageShown = this.info(message.text, message.title, options, message.textInterpolateParams, message.titleInterpolateParams);
|
|
159
330
|
break;
|
|
160
331
|
case MessageType.ALERT:
|
|
161
332
|
case MessageType.WARNING:
|
|
162
|
-
messageShown = this.alert(message.text, message.title,
|
|
333
|
+
messageShown = this.alert(message.text, message.title, options, message.textInterpolateParams, message.titleInterpolateParams);
|
|
163
334
|
break;
|
|
164
335
|
default:
|
|
165
|
-
messageShown = this.info(message.text, message.title,
|
|
336
|
+
messageShown = this.info(message.text, message.title, options, message.textInterpolateParams, message.titleInterpolateParams);
|
|
166
337
|
break;
|
|
167
338
|
}
|
|
168
339
|
options.id = messageShown.toastId;
|
|
@@ -171,74 +342,71 @@ class MessageService {
|
|
|
171
342
|
}
|
|
172
343
|
}
|
|
173
344
|
success(text, title = 'igo.core.message.success', options = {}, textInterpolateParams, titleInterpolateParams) {
|
|
174
|
-
return this.
|
|
345
|
+
return this.handleToast('success', text, title, options, textInterpolateParams, titleInterpolateParams);
|
|
175
346
|
}
|
|
176
347
|
error(text, title = 'igo.core.message.error', options = {}, textInterpolateParams, titleInterpolateParams) {
|
|
177
|
-
return this.
|
|
348
|
+
return this.handleToast('error', text, title, options, textInterpolateParams, titleInterpolateParams);
|
|
178
349
|
}
|
|
179
350
|
info(text, title = 'igo.core.message.info', options = {}, textInterpolateParams, titleInterpolateParams) {
|
|
180
|
-
return this.
|
|
351
|
+
return this.handleToast('info', text, title, options, textInterpolateParams, titleInterpolateParams);
|
|
181
352
|
}
|
|
182
353
|
alert(text, title = 'igo.core.message.alert', options = {}, textInterpolateParams, titleInterpolateParams) {
|
|
183
|
-
return this.
|
|
354
|
+
return this.handleToast('warning', text, title, options, textInterpolateParams, titleInterpolateParams);
|
|
184
355
|
}
|
|
185
356
|
show(text, title = 'igo.core.message.info', options = {}, textInterpolateParams, titleInterpolateParams) {
|
|
186
|
-
return this.
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
const translatedTextInterpolateParams =
|
|
190
|
-
const
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
const value = textInterpolateParams[k];
|
|
194
|
-
if (value) {
|
|
195
|
-
translatedTextInterpolateParams[k] =
|
|
196
|
-
typeof value === 'string'
|
|
197
|
-
? this.languageService.translate.instant(value)
|
|
198
|
-
: value;
|
|
199
|
-
}
|
|
200
|
-
});
|
|
201
|
-
}
|
|
202
|
-
if (titleInterpolateParams) {
|
|
203
|
-
Object.keys(titleInterpolateParams).forEach((k) => {
|
|
204
|
-
if (k) {
|
|
205
|
-
const value = titleInterpolateParams[k];
|
|
206
|
-
translatedTitlenterpolateParams[k] =
|
|
207
|
-
typeof value === 'string'
|
|
208
|
-
? this.languageService.translate.instant(value)
|
|
209
|
-
: value;
|
|
210
|
-
}
|
|
211
|
-
});
|
|
212
|
-
}
|
|
213
|
-
const message = this.languageService.translate.instant(text, translatedTextInterpolateParams);
|
|
214
|
-
const translatedTitle = this.languageService.translate.instant(title, translatedTitlenterpolateParams);
|
|
357
|
+
return this.handleToast('info', text, title, options, textInterpolateParams, titleInterpolateParams);
|
|
358
|
+
}
|
|
359
|
+
handleToast(type, text, title, options = {}, textInterpolateParams, titleInterpolateParams) {
|
|
360
|
+
const translatedTextInterpolateParams = this.translateInterpolateParams(textInterpolateParams);
|
|
361
|
+
const translatedTitleInterpolateParams = this.translateInterpolateParams(titleInterpolateParams);
|
|
362
|
+
const translatedMessage = this.languageService.translate.instant(text, translatedTextInterpolateParams);
|
|
363
|
+
const translatedTitle = this.languageService.translate.instant(title, translatedTitleInterpolateParams);
|
|
215
364
|
let activeToast;
|
|
216
365
|
switch (type) {
|
|
217
366
|
case 'success':
|
|
218
|
-
activeToast = this.
|
|
367
|
+
activeToast = this.toastService.success(translatedMessage, translatedTitle, options);
|
|
219
368
|
break;
|
|
220
369
|
case 'error':
|
|
221
|
-
activeToast = this.
|
|
370
|
+
activeToast = this.toastService.error(translatedMessage, translatedTitle, options);
|
|
222
371
|
break;
|
|
223
|
-
case 'show':
|
|
224
372
|
case 'info':
|
|
225
|
-
activeToast = this.
|
|
373
|
+
activeToast = this.toastService.info(translatedMessage, translatedTitle, options);
|
|
226
374
|
break;
|
|
227
|
-
case '
|
|
228
|
-
activeToast = this.
|
|
375
|
+
case 'warning':
|
|
376
|
+
activeToast = this.toastService.warning(translatedMessage, translatedTitle, options);
|
|
229
377
|
break;
|
|
230
378
|
}
|
|
231
|
-
this.activeMessageTranslations.push({
|
|
232
|
-
id: activeToast.toastId,
|
|
233
|
-
titleKey: title,
|
|
234
|
-
textKey: text,
|
|
235
|
-
textInterpolateParams,
|
|
236
|
-
titleInterpolateParams
|
|
237
|
-
});
|
|
238
379
|
return activeToast;
|
|
239
380
|
}
|
|
381
|
+
parseDate(value, fallback) {
|
|
382
|
+
if (!value) {
|
|
383
|
+
return fallback;
|
|
384
|
+
}
|
|
385
|
+
if (value instanceof Date) {
|
|
386
|
+
return value;
|
|
387
|
+
}
|
|
388
|
+
const directParse = new Date(value);
|
|
389
|
+
if (!Number.isNaN(directParse.getTime())) {
|
|
390
|
+
return directParse;
|
|
391
|
+
}
|
|
392
|
+
const normalizedParse = new Date(Date.parse(value.replace(/-/g, ' ')));
|
|
393
|
+
return Number.isNaN(normalizedParse.getTime()) ? fallback : normalizedParse;
|
|
394
|
+
}
|
|
395
|
+
translateInterpolateParams(params) {
|
|
396
|
+
if (!params) {
|
|
397
|
+
return {};
|
|
398
|
+
}
|
|
399
|
+
return Object.keys(params).reduce((acc, key) => {
|
|
400
|
+
const value = params[key];
|
|
401
|
+
acc[key] =
|
|
402
|
+
typeof value === 'string'
|
|
403
|
+
? this.languageService.translate.instant(value)
|
|
404
|
+
: value;
|
|
405
|
+
return acc;
|
|
406
|
+
}, {});
|
|
407
|
+
}
|
|
240
408
|
remove(id) {
|
|
241
|
-
this.
|
|
409
|
+
this.toastService.remove(id);
|
|
242
410
|
}
|
|
243
411
|
removeAllAreNotError() {
|
|
244
412
|
for (const mess of this.messages$.value) {
|
|
@@ -261,10 +429,10 @@ class MessageService {
|
|
|
261
429
|
message.title = undefined;
|
|
262
430
|
return message;
|
|
263
431
|
}
|
|
264
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
265
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
432
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
433
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MessageService, providedIn: 'root' });
|
|
266
434
|
}
|
|
267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: MessageService, decorators: [{
|
|
268
436
|
type: Injectable,
|
|
269
437
|
args: [{
|
|
270
438
|
providedIn: 'root'
|
|
@@ -275,5 +443,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
275
443
|
* Generated bundle index. Do not edit.
|
|
276
444
|
*/
|
|
277
445
|
|
|
278
|
-
export {
|
|
446
|
+
export { DEFAULT_TOAST_CONFIG, MessageService, MessageType, ToastComponent, ToastContainerComponent, ToastService, provideMessage };
|
|
279
447
|
//# sourceMappingURL=igo2-core-message.mjs.map
|