@bravobit/bb-foundation 0.50.2 → 0.50.4
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/auth/lib/acting.service.d.ts +12 -0
- package/auth/lib/auth.session.d.ts +4 -4
- package/auth/public_api.d.ts +1 -0
- package/elements/lib/elements.interfaces.d.ts +7 -2
- package/elements/lib/icon/icon.component.d.ts +1 -0
- package/fesm2022/bravobit-bb-foundation-auth.mjs +62 -20
- package/fesm2022/bravobit-bb-foundation-auth.mjs.map +1 -1
- package/fesm2022/bravobit-bb-foundation-collections.mjs +43 -43
- package/fesm2022/bravobit-bb-foundation-combobox.mjs +15 -15
- package/fesm2022/bravobit-bb-foundation-dashboard.mjs +25 -25
- package/fesm2022/bravobit-bb-foundation-dialog.mjs +34 -34
- package/fesm2022/bravobit-bb-foundation-elements.mjs +102 -90
- package/fesm2022/bravobit-bb-foundation-elements.mjs.map +1 -1
- package/fesm2022/bravobit-bb-foundation-http.mjs +10 -10
- package/fesm2022/bravobit-bb-foundation-localize.mjs +16 -16
- package/fesm2022/bravobit-bb-foundation-masking.mjs +16 -16
- package/fesm2022/bravobit-bb-foundation-notifications.mjs +97 -187
- package/fesm2022/bravobit-bb-foundation-notifications.mjs.map +1 -1
- package/fesm2022/bravobit-bb-foundation-permissions.mjs +10 -10
- package/fesm2022/bravobit-bb-foundation-recaptcha.mjs +10 -10
- package/fesm2022/bravobit-bb-foundation-select.mjs +19 -19
- package/fesm2022/bravobit-bb-foundation-storage.mjs +3 -3
- package/fesm2022/bravobit-bb-foundation-table.mjs +22 -22
- package/fesm2022/bravobit-bb-foundation-tooltip.mjs +10 -10
- package/fesm2022/bravobit-bb-foundation-utils.mjs +16 -16
- package/fesm2022/bravobit-bb-foundation.mjs +21 -21
- package/notifications/lib/notifications-item/notifications-item.component.d.ts +7 -6
- package/notifications/lib/notifications-list/notifications-list.component.d.ts +14 -11
- package/notifications/lib/notifications.animations.d.ts +1 -1
- package/notifications/lib/notifications.interfaces.d.ts +3 -17
- package/notifications/lib/notifications.service.d.ts +6 -9
- package/package.json +7 -7
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, HostBinding,
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
2
|
+
import { InjectionToken, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ViewChild, HostBinding, ApplicationRef, EnvironmentInjector, createEnvironmentInjector, createComponent, Injectable, makeEnvironmentProviders, NgModule } from '@angular/core';
|
|
3
|
+
import { BbLocalize, Localize } from '@bravobit/bb-foundation/localize';
|
|
4
|
+
import { BbTemplate } from '@bravobit/bb-foundation/utils';
|
|
5
|
+
import { WINDOW } from '@bravobit/bb-foundation';
|
|
6
6
|
import * as i1 from '@angular/cdk/platform';
|
|
7
|
-
import {
|
|
7
|
+
import { Platform } from '@angular/cdk/platform';
|
|
8
|
+
import { trigger, transition, query, style, animate } from '@angular/animations';
|
|
9
|
+
import { AsyncPipe, DOCUMENT } from '@angular/common';
|
|
10
|
+
import { map } from 'rxjs/operators';
|
|
8
11
|
import { BehaviorSubject } from 'rxjs';
|
|
9
|
-
import { share } from 'rxjs/operators';
|
|
10
12
|
|
|
11
13
|
var NotificationType;
|
|
12
14
|
(function (NotificationType) {
|
|
@@ -18,33 +20,25 @@ var NotificationType;
|
|
|
18
20
|
})(NotificationType || (NotificationType = {}));
|
|
19
21
|
class NotificationsConfig {
|
|
20
22
|
mode;
|
|
21
|
-
position;
|
|
22
23
|
timeout;
|
|
23
24
|
dismiss;
|
|
24
25
|
localize;
|
|
25
26
|
dismissText;
|
|
26
27
|
}
|
|
27
|
-
|
|
28
|
-
(function (NotificationsPosition) {
|
|
29
|
-
NotificationsPosition["TopRight"] = "flex-start|flex-end";
|
|
30
|
-
NotificationsPosition["BottomRight"] = "flex-end|flex-end";
|
|
31
|
-
NotificationsPosition["TopLeft"] = "flex-start|flex-start";
|
|
32
|
-
NotificationsPosition["BottomLeft"] = "flex-end|flex-start";
|
|
33
|
-
})(NotificationsPosition || (NotificationsPosition = {}));
|
|
34
|
-
class NotificationsData {
|
|
35
|
-
data;
|
|
36
|
-
dismissText;
|
|
37
|
-
position;
|
|
38
|
-
}
|
|
28
|
+
const NOTIFICATIONS_DATA = new InjectionToken('notifications data');
|
|
39
29
|
const NOTIFICATIONS_CONFIG = new InjectionToken('notifications config');
|
|
40
30
|
|
|
41
31
|
class BbNotificationsItem {
|
|
42
32
|
_zone;
|
|
43
33
|
_platform;
|
|
44
34
|
_changeDetection;
|
|
35
|
+
// Dependencies.
|
|
36
|
+
_config = inject(NotificationsConfig, { optional: true });
|
|
37
|
+
_window = inject(WINDOW, { optional: true });
|
|
38
|
+
// Readonly data.
|
|
39
|
+
dismissText = this._config?.dismissText ?? null;
|
|
45
40
|
// Inputs.
|
|
46
|
-
notification;
|
|
47
|
-
dismissButtonText;
|
|
41
|
+
notification = null;
|
|
48
42
|
// Elements.
|
|
49
43
|
progressElementRef;
|
|
50
44
|
// Data.
|
|
@@ -74,9 +68,6 @@ class BbNotificationsItem {
|
|
|
74
68
|
get progressStrokeOffset() {
|
|
75
69
|
return Math.floor(this._circumference - this._progress / 100 * this._circumference);
|
|
76
70
|
}
|
|
77
|
-
get isContentString() {
|
|
78
|
-
return typeof this.notification.content === 'string';
|
|
79
|
-
}
|
|
80
71
|
ngOnInit() {
|
|
81
72
|
// Check if the notification timeout is not 0 and the platform is a browser.
|
|
82
73
|
if (this.notification.timeout <= 0 || !this._platform.isBrowser) {
|
|
@@ -87,164 +78,114 @@ class BbNotificationsItem {
|
|
|
87
78
|
this.startTimeout();
|
|
88
79
|
}
|
|
89
80
|
ngOnDestroy() {
|
|
90
|
-
|
|
91
|
-
|
|
81
|
+
this._timer && this._window?.clearTimeout?.(this._timer);
|
|
82
|
+
}
|
|
83
|
+
callActionAndDestroy(notification, action) {
|
|
84
|
+
action?.callback?.();
|
|
85
|
+
notification?.destroy?.();
|
|
92
86
|
}
|
|
93
|
-
callActionAndDestroy = (notification, action) => {
|
|
94
|
-
// Perform the callback (if it exists).
|
|
95
|
-
action && action.callback && action.callback();
|
|
96
|
-
// Call the destroy method (if it exists).
|
|
97
|
-
notification && notification.destroy && notification.destroy();
|
|
98
|
-
};
|
|
99
87
|
startTimeout() {
|
|
100
|
-
// Calculate the steps of the timeout.
|
|
101
88
|
this._steps = this.notification.timeout / 10;
|
|
102
|
-
// Calculate the speed of the timeout.
|
|
103
89
|
this._speed = this.notification.timeout / this._steps;
|
|
104
|
-
// Get the start time.
|
|
105
90
|
this._startTime = Date.now();
|
|
106
|
-
// Set a new timer outside of Angular.
|
|
107
91
|
this._zone.runOutsideAngular(() => this._timer = this.setTimeout(this.instance, this._speed));
|
|
108
92
|
}
|
|
109
93
|
instance = () => {
|
|
110
|
-
// Calculate the difference.
|
|
111
94
|
this._difference = (Date.now() - this._startTime) - (this._count * this._speed);
|
|
112
|
-
// Add up the count.
|
|
113
95
|
if (this._count++ === this._steps) {
|
|
114
96
|
this.notification.destroy();
|
|
115
97
|
}
|
|
116
|
-
// Add the steps to the progress.
|
|
117
98
|
this._progress += 100 / this._steps;
|
|
118
|
-
// Set a new timer.
|
|
119
99
|
this._timer = this.setTimeout(this.instance, this._speed - this._difference);
|
|
120
|
-
// Run a new change detection cycle.
|
|
121
100
|
this._zone.run(() => this._changeDetection.detectChanges());
|
|
122
101
|
};
|
|
123
|
-
setTimeout
|
|
124
|
-
|
|
125
|
-
if (!window || !window.setTimeout) {
|
|
102
|
+
setTimeout(method, timeout) {
|
|
103
|
+
if (!this._window || !this._window.setTimeout) {
|
|
126
104
|
return null;
|
|
127
105
|
}
|
|
128
|
-
return
|
|
129
|
-
}
|
|
130
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
131
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
106
|
+
return this._window.setTimeout(method, timeout);
|
|
107
|
+
}
|
|
108
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BbNotificationsItem, deps: [{ token: i0.NgZone }, { token: i1.Platform }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BbNotificationsItem, isStandalone: true, selector: "bb-notifications-item", inputs: { notification: "notification" }, host: { attributes: { "role": "alert" }, properties: { "class": "this.getClass" } }, viewQueries: [{ propertyName: "progressElementRef", first: true, predicate: ["progress"], descendants: true }], ngImport: i0, template: "<div class=\"notification-content-wrapper\">\n <div [style.color]=\"notification?.color\"\n [style.background-color]=\"notification?.backgroundColor\"\n class=\"notification-icon-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 20\"\n class=\"notification-icon\">\n <path\n d=\"M8 20c1.1 0 2-.923 2-2.051H6C6 19.077 6.9 20 8 20Zm6-6.154V8.718c0-3.18-1.6-5.744-4.5-6.462v-.718C9.5.718 8.8 0 8 0S6.5.718 6.5 1.538v.718C3.6 2.974 2 5.538 2 8.718v5.128l-2 2.051v1.026h16v-1.026l-2-2.05Z\">\n </path>\n </svg>\n\n @if (notification?.timeout > 0) {\n <svg class=\"notification-progress-ring\"\n viewBox=\"0 0 40 40\"\n role=\"progressbar\">\n <circle #progress\n [attr.stroke-dasharray]=\"progressStrokeArray\"\n [attr.stroke-dashoffset]=\"progressStrokeOffset\"\n [style.stroke]=\"notification?.color\"\n class=\"notification-progress-circle\"\n stroke-width=\"2\"\n fill=\"transparent\"\n r=\"19\"\n cx=\"20\"\n cy=\"20\">\n </circle>\n </svg>\n }\n </div>\n\n <div class=\"notification-content\">\n <ng-template [bbTemplate]=\"notification?.content\">\n @if (notification?.localize) {\n {{ $any(notification?.content) | bbLocalize }}\n } @else {\n {{ notification?.content }}\n }\n </ng-template>\n </div>\n</div>\n\n@if (notification?.actions?.length > 0 || notification?.dismiss) {\n <div class=\"notification-actions\">\n @for (action of notification?.actions; track $index) {\n <button [class.destructive]=\"action?.type === 'cancel'\"\n (click)=\"callActionAndDestroy(notification, action)\"\n type=\"button\"\n class=\"notification-actions-button\">\n <span class=\"notification-actions-button-highlight\">\n @if (notification?.localize) {\n {{ action?.title | bbLocalize }}\n } @else {\n {{ action?.title }}\n }\n </span>\n </button>\n }\n @if (notification?.dismiss) {\n <button (click)=\"notification?.destroy()\"\n class=\"notification-actions-button destructive\"\n type=\"button\">\n <span\n class=\"notification-actions-button-highlight\">{{ notification?.dismissText ?? dismissText }}</span>\n </button>\n }\n </div>\n}\n", styles: [".bb-notifications-item{top:0;left:0;width:100%;display:flex;position:absolute;pointer-events:all;border-radius:.5rem;flex-direction:column;background-color:#fff;box-shadow:0 .375rem .375rem -.375rem #00000026;border:1px solid rgb(214.3982142857,218.6677857143,224.1017857143);transition:margin-top .25s cubic-bezier(0,0,.2,1),transform .25s cubic-bezier(0,0,.2,1)}.bb-notifications-item.success .notification-icon-wrapper{color:#2dc05d;background-color:#ebfaf0}.bb-notifications-item.success .notification-progress-circle{stroke:#36d068}.bb-notifications-item.error .notification-icon-wrapper{color:#f43e3e;background-color:#feeeee}.bb-notifications-item.error .notification-progress-circle{stroke:#f55656}.bb-notifications-item.warning .notification-icon-wrapper{color:#f1ae00;background-color:#fff8e7}.bb-notifications-item.warning .notification-progress-circle{stroke:#ffbc0b}.bb-notifications-item.info .notification-icon-wrapper{color:#099bf6;background-color:#e9f6fe}.bb-notifications-item.info .notification-progress-circle{stroke:#22a5f7}.bb-notifications-item.custom .notification-icon-wrapper{color:#657385;background-color:#f3f5f6}.bb-notifications-item.custom .notification-progress-circle{stroke:#657385}.notification-content-wrapper{gap:.75rem;display:flex;padding:.75rem;align-items:center}.notification-icon-wrapper{width:2rem;height:2rem;display:flex;-webkit-user-select:none;user-select:none;position:relative;border-radius:50%;align-items:center;justify-content:center;color:#657385;background-color:#f3f5f6}.notification-icon{width:100%;height:100%;padding:.5rem;fill:currentColor}.notification-content{flex:1;font-weight:400;line-height:1.8;font-size:.875rem;color:#121212}.notification-content,.notification-actions-button{font-family:inherit}.notification-actions{display:flex;margin:0 1.5rem;-webkit-user-select:none;user-select:none;border-top:1px solid rgb(243.3589285714,244.5830714286,246.1410714286)}.notification-actions-button{flex:1;border:none;color:#22a5f7;cursor:pointer;font-weight:500;text-align:center;font-size:.875rem;padding:.75rem .125rem;background-color:transparent}.notification-actions-button:hover>.notification-actions-button-highlight,.notification-actions-button:focus>.notification-actions-button-highlight{background-color:#22a5f71a}.notification-actions-button:active>.notification-actions-button-highlight{background-color:#22a5f733}.notification-actions-button.destructive{color:#f55656}.notification-actions-button.destructive:hover>.notification-actions-button-highlight,.notification-actions-button.destructive:focus>.notification-actions-button-highlight{background-color:#f556561a}.notification-actions-button.destructive:active>.notification-actions-button-highlight{background-color:#f5565633}.notification-actions-button-highlight{display:inline-flex;border-radius:.75rem;padding:.25rem .75rem;transition:background-color .15s cubic-bezier(0,0,.2,1)}.notification-progress-ring{inset:0;width:100%;height:100%;position:absolute}.notification-progress-circle{transform:rotate(-90deg);transform-origin:50% 50%;stroke:#657385}\n"], dependencies: [{ kind: "pipe", type: BbLocalize, name: "bbLocalize" }, { kind: "directive", type: BbTemplate, selector: "[bbTemplate]", inputs: ["bbTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
132
110
|
}
|
|
133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
111
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BbNotificationsItem, decorators: [{
|
|
134
112
|
type: Component,
|
|
135
|
-
args: [{ selector: 'bb-notifications-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'role': 'alert' }, imports: [
|
|
113
|
+
args: [{ selector: 'bb-notifications-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'role': 'alert' }, imports: [BbLocalize, BbTemplate], template: "<div class=\"notification-content-wrapper\">\n <div [style.color]=\"notification?.color\"\n [style.background-color]=\"notification?.backgroundColor\"\n class=\"notification-icon-wrapper\">\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 16 20\"\n class=\"notification-icon\">\n <path\n d=\"M8 20c1.1 0 2-.923 2-2.051H6C6 19.077 6.9 20 8 20Zm6-6.154V8.718c0-3.18-1.6-5.744-4.5-6.462v-.718C9.5.718 8.8 0 8 0S6.5.718 6.5 1.538v.718C3.6 2.974 2 5.538 2 8.718v5.128l-2 2.051v1.026h16v-1.026l-2-2.05Z\">\n </path>\n </svg>\n\n @if (notification?.timeout > 0) {\n <svg class=\"notification-progress-ring\"\n viewBox=\"0 0 40 40\"\n role=\"progressbar\">\n <circle #progress\n [attr.stroke-dasharray]=\"progressStrokeArray\"\n [attr.stroke-dashoffset]=\"progressStrokeOffset\"\n [style.stroke]=\"notification?.color\"\n class=\"notification-progress-circle\"\n stroke-width=\"2\"\n fill=\"transparent\"\n r=\"19\"\n cx=\"20\"\n cy=\"20\">\n </circle>\n </svg>\n }\n </div>\n\n <div class=\"notification-content\">\n <ng-template [bbTemplate]=\"notification?.content\">\n @if (notification?.localize) {\n {{ $any(notification?.content) | bbLocalize }}\n } @else {\n {{ notification?.content }}\n }\n </ng-template>\n </div>\n</div>\n\n@if (notification?.actions?.length > 0 || notification?.dismiss) {\n <div class=\"notification-actions\">\n @for (action of notification?.actions; track $index) {\n <button [class.destructive]=\"action?.type === 'cancel'\"\n (click)=\"callActionAndDestroy(notification, action)\"\n type=\"button\"\n class=\"notification-actions-button\">\n <span class=\"notification-actions-button-highlight\">\n @if (notification?.localize) {\n {{ action?.title | bbLocalize }}\n } @else {\n {{ action?.title }}\n }\n </span>\n </button>\n }\n @if (notification?.dismiss) {\n <button (click)=\"notification?.destroy()\"\n class=\"notification-actions-button destructive\"\n type=\"button\">\n <span\n class=\"notification-actions-button-highlight\">{{ notification?.dismissText ?? dismissText }}</span>\n </button>\n }\n </div>\n}\n", styles: [".bb-notifications-item{top:0;left:0;width:100%;display:flex;position:absolute;pointer-events:all;border-radius:.5rem;flex-direction:column;background-color:#fff;box-shadow:0 .375rem .375rem -.375rem #00000026;border:1px solid rgb(214.3982142857,218.6677857143,224.1017857143);transition:margin-top .25s cubic-bezier(0,0,.2,1),transform .25s cubic-bezier(0,0,.2,1)}.bb-notifications-item.success .notification-icon-wrapper{color:#2dc05d;background-color:#ebfaf0}.bb-notifications-item.success .notification-progress-circle{stroke:#36d068}.bb-notifications-item.error .notification-icon-wrapper{color:#f43e3e;background-color:#feeeee}.bb-notifications-item.error .notification-progress-circle{stroke:#f55656}.bb-notifications-item.warning .notification-icon-wrapper{color:#f1ae00;background-color:#fff8e7}.bb-notifications-item.warning .notification-progress-circle{stroke:#ffbc0b}.bb-notifications-item.info .notification-icon-wrapper{color:#099bf6;background-color:#e9f6fe}.bb-notifications-item.info .notification-progress-circle{stroke:#22a5f7}.bb-notifications-item.custom .notification-icon-wrapper{color:#657385;background-color:#f3f5f6}.bb-notifications-item.custom .notification-progress-circle{stroke:#657385}.notification-content-wrapper{gap:.75rem;display:flex;padding:.75rem;align-items:center}.notification-icon-wrapper{width:2rem;height:2rem;display:flex;-webkit-user-select:none;user-select:none;position:relative;border-radius:50%;align-items:center;justify-content:center;color:#657385;background-color:#f3f5f6}.notification-icon{width:100%;height:100%;padding:.5rem;fill:currentColor}.notification-content{flex:1;font-weight:400;line-height:1.8;font-size:.875rem;color:#121212}.notification-content,.notification-actions-button{font-family:inherit}.notification-actions{display:flex;margin:0 1.5rem;-webkit-user-select:none;user-select:none;border-top:1px solid rgb(243.3589285714,244.5830714286,246.1410714286)}.notification-actions-button{flex:1;border:none;color:#22a5f7;cursor:pointer;font-weight:500;text-align:center;font-size:.875rem;padding:.75rem .125rem;background-color:transparent}.notification-actions-button:hover>.notification-actions-button-highlight,.notification-actions-button:focus>.notification-actions-button-highlight{background-color:#22a5f71a}.notification-actions-button:active>.notification-actions-button-highlight{background-color:#22a5f733}.notification-actions-button.destructive{color:#f55656}.notification-actions-button.destructive:hover>.notification-actions-button-highlight,.notification-actions-button.destructive:focus>.notification-actions-button-highlight{background-color:#f556561a}.notification-actions-button.destructive:active>.notification-actions-button-highlight{background-color:#f5565633}.notification-actions-button-highlight{display:inline-flex;border-radius:.75rem;padding:.25rem .75rem;transition:background-color .15s cubic-bezier(0,0,.2,1)}.notification-progress-ring{inset:0;width:100%;height:100%;position:absolute}.notification-progress-circle{transform:rotate(-90deg);transform-origin:50% 50%;stroke:#657385}\n"] }]
|
|
136
114
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.Platform }, { type: i0.ChangeDetectorRef }], propDecorators: { notification: [{
|
|
137
115
|
type: Input
|
|
138
|
-
}], dismissButtonText: [{
|
|
139
|
-
type: Input
|
|
140
116
|
}], progressElementRef: [{
|
|
141
117
|
type: ViewChild,
|
|
142
|
-
args: ['progress']
|
|
118
|
+
args: ['progress', { static: false }]
|
|
143
119
|
}], getClass: [{
|
|
144
120
|
type: HostBinding,
|
|
145
121
|
args: ['class']
|
|
146
122
|
}] } });
|
|
147
123
|
|
|
148
|
-
const
|
|
149
|
-
const l = '400ms cubic-bezier(0, 0, .2, 1)';
|
|
150
|
-
const notificationAnimation = trigger('notificationListAnimation', [
|
|
124
|
+
const notificationListAnimation = trigger('notificationListAnimation', [
|
|
151
125
|
transition('* => *', [
|
|
152
|
-
query(':enter',
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
animate(s, style({ transform: 'translateX(0) scale(1)' }))
|
|
160
|
-
])
|
|
161
|
-
]), { optional: true }),
|
|
162
|
-
query(':leave', group([
|
|
163
|
-
// 1. Set the initial state.
|
|
164
|
-
style({ height: '*', opacity: 1, transform: 'translateX(0) scale(1)' }),
|
|
165
|
-
// 2. Start the animation to hide the item.
|
|
166
|
-
stagger(0, [
|
|
167
|
-
animate(s, style({ transform: 'translateX(0) scale(0.95)' })),
|
|
168
|
-
animate(l, style({ opacity: 0, transform: 'translateX({{ to }}%) scale(0.95)' })),
|
|
169
|
-
animate(s, style({ height: 0 }))
|
|
170
|
-
])
|
|
171
|
-
]), { optional: true })
|
|
126
|
+
query(':enter', [
|
|
127
|
+
style({ opacity: 0, transform: 'translateY(-1rem)' }),
|
|
128
|
+
animate('250ms cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: 'none' }))
|
|
129
|
+
], { optional: true }),
|
|
130
|
+
query(':leave', [
|
|
131
|
+
animate('250ms cubic-bezier(0, 0, .2, 1)', style({ opacity: 0 }))
|
|
132
|
+
], { optional: true })
|
|
172
133
|
])
|
|
173
134
|
]);
|
|
174
135
|
|
|
175
136
|
class BbNotificationsList {
|
|
176
|
-
|
|
137
|
+
// Dependencies.
|
|
138
|
+
_data$ = inject(NOTIFICATIONS_DATA);
|
|
177
139
|
// Data.
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
this.
|
|
181
|
-
}
|
|
182
|
-
get horizontalPosition() {
|
|
183
|
-
return this.location.horizontal;
|
|
184
|
-
}
|
|
185
|
-
get verticalPosition() {
|
|
186
|
-
return this.location.vertical;
|
|
187
|
-
}
|
|
188
|
-
get animation() {
|
|
189
|
-
const to = this.horizontalPosition === 'flex-start'
|
|
190
|
-
? -50
|
|
191
|
-
: 50;
|
|
192
|
-
return { to };
|
|
140
|
+
data$;
|
|
141
|
+
ngOnInit() {
|
|
142
|
+
this.setData();
|
|
193
143
|
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
144
|
+
setData() {
|
|
145
|
+
this.data$ = this._data$.pipe(map(notifications => {
|
|
146
|
+
return notifications.map((notification, index) => {
|
|
147
|
+
const scale = Math.max(0.9, 1 - (index * 0.02));
|
|
148
|
+
return {
|
|
149
|
+
notification,
|
|
150
|
+
styles: {
|
|
151
|
+
offset: Math.min(index, 5),
|
|
152
|
+
scale: `scale(${scale})`
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
});
|
|
156
|
+
}));
|
|
197
157
|
}
|
|
198
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
199
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
158
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BbNotificationsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
159
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BbNotificationsList, isStandalone: true, selector: "bb-notifications-list", host: { attributes: { "role": "list" }, classAttribute: "bb-notifications-list" }, ngImport: i0, template: "@if (data$ | async; as data) {\n <div [@notificationListAnimation]=\"data?.length\"\n class=\"notifications-list-wrapper\">\n @for (item of data; track item?.notification?.id) {\n <bb-notifications-item [notification]=\"item?.notification\"\n [style.z-index]=\"item?.notification?.id\"\n [style.margin-top.rem]=\"item?.styles?.offset\"\n [style.transform]=\"item?.styles?.scale\">\n </bb-notifications-item>\n }\n </div>\n}\n", styles: [".bb-notifications-list{inset:0;z-index:1100;display:flex;position:fixed;padding:.75rem;pointer-events:none;align-items:flex-start;justify-content:flex-end}.notifications-list-wrapper{width:100%;gap:.75rem;display:flex;max-width:24rem;position:relative;flex-direction:column}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: BbNotificationsItem, selector: "bb-notifications-item", inputs: ["notification"] }], animations: [notificationListAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
200
160
|
}
|
|
201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BbNotificationsList, decorators: [{
|
|
202
162
|
type: Component,
|
|
203
|
-
args: [{ selector: 'bb-notifications-list', animations: [
|
|
163
|
+
args: [{ selector: 'bb-notifications-list', animations: [notificationListAnimation], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
204
164
|
'class': 'bb-notifications-list',
|
|
205
165
|
'role': 'list'
|
|
206
|
-
}, imports: [AsyncPipe, BbNotificationsItem], template: "
|
|
207
|
-
}]
|
|
208
|
-
type: HostBinding,
|
|
209
|
-
args: ['style.justify-content']
|
|
210
|
-
}], verticalPosition: [{
|
|
211
|
-
type: HostBinding,
|
|
212
|
-
args: ['style.align-items']
|
|
213
|
-
}] } });
|
|
166
|
+
}, imports: [AsyncPipe, BbNotificationsItem], template: "@if (data$ | async; as data) {\n <div [@notificationListAnimation]=\"data?.length\"\n class=\"notifications-list-wrapper\">\n @for (item of data; track item?.notification?.id) {\n <bb-notifications-item [notification]=\"item?.notification\"\n [style.z-index]=\"item?.notification?.id\"\n [style.margin-top.rem]=\"item?.styles?.offset\"\n [style.transform]=\"item?.styles?.scale\">\n </bb-notifications-item>\n }\n </div>\n}\n", styles: [".bb-notifications-list{inset:0;z-index:1100;display:flex;position:fixed;padding:.75rem;pointer-events:none;align-items:flex-start;justify-content:flex-end}.notifications-list-wrapper{width:100%;gap:.75rem;display:flex;max-width:24rem;position:relative;flex-direction:column}\n"] }]
|
|
167
|
+
}] });
|
|
214
168
|
|
|
169
|
+
let nextUniqueId = 0;
|
|
215
170
|
class Notifications {
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
171
|
+
// Dependencies.
|
|
172
|
+
_platform = inject(Platform);
|
|
173
|
+
_applicationRef = inject(ApplicationRef);
|
|
174
|
+
_environmentInjector = inject(EnvironmentInjector);
|
|
175
|
+
_localize = inject(Localize, { optional: true });
|
|
176
|
+
_config = inject(NOTIFICATIONS_CONFIG, { optional: true });
|
|
177
|
+
_document = inject(DOCUMENT, { optional: true });
|
|
221
178
|
// Reference to the list.
|
|
222
|
-
|
|
179
|
+
_componentRef;
|
|
223
180
|
// The default settings for the notifications.
|
|
224
|
-
_defaultMode;
|
|
225
|
-
_defaultTimeout;
|
|
226
|
-
_defaultLocalize;
|
|
227
|
-
_defaultDismiss;
|
|
228
|
-
_defaultDismissText;
|
|
229
|
-
_defaultPosition;
|
|
181
|
+
_defaultMode = this._config?.mode ?? 'prepend';
|
|
182
|
+
_defaultTimeout = this._config?.timeout ?? 8_000;
|
|
183
|
+
_defaultLocalize = this._config?.localize ?? false;
|
|
184
|
+
_defaultDismiss = this._config?.dismiss ?? true;
|
|
185
|
+
_defaultDismissText = this._config?.dismissText ?? 'Dismiss';
|
|
230
186
|
// The data containing the notifications.
|
|
231
187
|
_notifications$ = new BehaviorSubject([]);
|
|
232
|
-
constructor(
|
|
233
|
-
this._platform = _platform;
|
|
234
|
-
this._applicationRef = _applicationRef;
|
|
235
|
-
this._environmentInjector = _environmentInjector;
|
|
236
|
-
this._localize = _localize;
|
|
237
|
-
this._config = _config;
|
|
238
|
-
// Get the config.
|
|
239
|
-
const config = this._config ?? {};
|
|
240
|
-
// Set the config.
|
|
241
|
-
this._defaultMode = this.getProperty(config.mode, 'prepend');
|
|
242
|
-
this._defaultTimeout = this.getProperty(config.timeout, 8000);
|
|
243
|
-
this._defaultLocalize = this.getProperty(config.localize, false);
|
|
244
|
-
this._defaultDismiss = this.getProperty(config.dismiss, true);
|
|
245
|
-
this._defaultDismissText = this.getProperty(config.dismissText, 'Dismiss');
|
|
246
|
-
this._defaultPosition = this.getProperty(config.position, NotificationsPosition.TopRight);
|
|
247
|
-
// Create the element that holds all notifications.
|
|
188
|
+
constructor() {
|
|
248
189
|
this.createElement();
|
|
249
190
|
}
|
|
250
191
|
success(content, actions = [], timeout = this._defaultTimeout) {
|
|
@@ -260,12 +201,8 @@ class Notifications {
|
|
|
260
201
|
return this.create({ content, timeout, actions, type: NotificationType.Info });
|
|
261
202
|
}
|
|
262
203
|
create(notification) {
|
|
263
|
-
// Compose a new notification item.
|
|
264
204
|
const item = this.compose(notification);
|
|
265
|
-
// Add the destroy function to the notification.
|
|
266
205
|
item.destroy = () => this.pull(item);
|
|
267
|
-
// Add the notification to the list
|
|
268
|
-
// and return the item.
|
|
269
206
|
return this.push(item);
|
|
270
207
|
}
|
|
271
208
|
push(notification) {
|
|
@@ -290,22 +227,21 @@ class Notifications {
|
|
|
290
227
|
// Get the current list.
|
|
291
228
|
const newList = this._notifications$
|
|
292
229
|
.getValue()
|
|
293
|
-
.filter(item => item
|
|
230
|
+
.filter(item => item?.id !== notification?.id);
|
|
294
231
|
// Push a new list.
|
|
295
232
|
this._notifications$.next(newList);
|
|
296
233
|
}
|
|
297
234
|
compose(notification) {
|
|
298
235
|
// Attach a random id to the notification.
|
|
299
|
-
notification.id =
|
|
236
|
+
notification.id = ++nextUniqueId % 99999;
|
|
300
237
|
// Set all properties.
|
|
301
|
-
notification.type =
|
|
302
|
-
notification.content =
|
|
303
|
-
notification.
|
|
304
|
-
notification.
|
|
305
|
-
notification.
|
|
306
|
-
notification.dismiss = this.getProperty(notification.dismiss, this._defaultDismiss);
|
|
238
|
+
notification.type = notification?.type ?? NotificationType.Custom;
|
|
239
|
+
notification.content = notification?.content ?? null;
|
|
240
|
+
notification.timeout = notification?.timeout ?? this._defaultTimeout;
|
|
241
|
+
notification.localize = notification?.localize ?? this._defaultLocalize;
|
|
242
|
+
notification.dismiss = notification?.dismiss ?? this._defaultDismiss;
|
|
307
243
|
// Dismiss text localization.
|
|
308
|
-
const dismissText =
|
|
244
|
+
const dismissText = notification.dismissText ?? this._defaultDismissText;
|
|
309
245
|
notification.dismissText = this._defaultLocalize && this._localize
|
|
310
246
|
? this._localize.translate(dismissText)
|
|
311
247
|
: dismissText;
|
|
@@ -314,55 +250,29 @@ class Notifications {
|
|
|
314
250
|
}
|
|
315
251
|
createElement() {
|
|
316
252
|
const environmentInjector = createEnvironmentInjector([
|
|
317
|
-
{
|
|
318
|
-
provide: NotificationsData,
|
|
319
|
-
useValue: {
|
|
320
|
-
data: this._notifications$.pipe(share()),
|
|
321
|
-
dismissText: this._defaultDismissText,
|
|
322
|
-
position: this._defaultPosition
|
|
323
|
-
}
|
|
324
|
-
}
|
|
253
|
+
{ provide: NOTIFICATIONS_DATA, useValue: this._notifications$ }
|
|
325
254
|
], this._environmentInjector);
|
|
326
|
-
|
|
327
|
-
this.
|
|
328
|
-
// Detect the changes.
|
|
329
|
-
this._ref.changeDetectorRef.detectChanges();
|
|
330
|
-
// Attach the component's view to the application
|
|
331
|
-
// so that the change detection will run properly.
|
|
332
|
-
this._applicationRef.attachView(this._ref.hostView);
|
|
333
|
-
// If the platform is not a browser return.
|
|
255
|
+
this._componentRef = createComponent(BbNotificationsList, { environmentInjector });
|
|
256
|
+
this._applicationRef.attachView(this._componentRef.hostView);
|
|
334
257
|
if (!this._platform.isBrowser) {
|
|
335
258
|
return;
|
|
336
259
|
}
|
|
337
260
|
try {
|
|
338
|
-
|
|
339
|
-
document.body.appendChild(this._ref.location.nativeElement);
|
|
261
|
+
this._document.body.appendChild(this._componentRef?.location?.nativeElement);
|
|
340
262
|
}
|
|
341
263
|
catch {
|
|
342
264
|
// Don't do anything, because it must've failed.
|
|
343
265
|
}
|
|
344
266
|
}
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
? defaultValue
|
|
348
|
-
: property;
|
|
349
|
-
};
|
|
350
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: Notifications, deps: [{ token: i1.Platform }, { token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }, { token: i2.Localize, optional: true }, { token: NOTIFICATIONS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
351
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: Notifications, providedIn: 'root' });
|
|
267
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Notifications, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
268
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Notifications, providedIn: 'root' });
|
|
352
269
|
}
|
|
353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Notifications, decorators: [{
|
|
354
271
|
type: Injectable,
|
|
355
272
|
args: [{
|
|
356
273
|
providedIn: 'root'
|
|
357
274
|
}]
|
|
358
|
-
}], ctorParameters: () => [
|
|
359
|
-
type: Optional
|
|
360
|
-
}] }, { type: NotificationsConfig, decorators: [{
|
|
361
|
-
type: Optional
|
|
362
|
-
}, {
|
|
363
|
-
type: Inject,
|
|
364
|
-
args: [NOTIFICATIONS_CONFIG]
|
|
365
|
-
}] }] });
|
|
275
|
+
}], ctorParameters: () => [] });
|
|
366
276
|
|
|
367
277
|
function provideNotificationsConfig(config) {
|
|
368
278
|
return makeEnvironmentProviders([
|
|
@@ -379,11 +289,11 @@ class NotificationsModule {
|
|
|
379
289
|
]
|
|
380
290
|
};
|
|
381
291
|
}
|
|
382
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
383
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.
|
|
384
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.
|
|
292
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NotificationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
293
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: NotificationsModule });
|
|
294
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NotificationsModule });
|
|
385
295
|
}
|
|
386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: NotificationsModule, decorators: [{
|
|
387
297
|
type: NgModule
|
|
388
298
|
}] });
|
|
389
299
|
|
|
@@ -391,5 +301,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
|
|
|
391
301
|
* Generated bundle index. Do not edit.
|
|
392
302
|
*/
|
|
393
303
|
|
|
394
|
-
export { NOTIFICATIONS_CONFIG, NotificationType, Notifications, NotificationsConfig,
|
|
304
|
+
export { NOTIFICATIONS_CONFIG, NOTIFICATIONS_DATA, NotificationType, Notifications, NotificationsConfig, NotificationsModule, provideNotificationsConfig };
|
|
395
305
|
//# sourceMappingURL=bravobit-bb-foundation-notifications.mjs.map
|