@genesislcap/foundation-notifications 14.70.2 → 14.70.4-es2021.1
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/dist/esm/banner/banner-builder.js +2 -2
- package/dist/esm/banner/banner-launcher.js +1 -2
- package/dist/esm/dialog/dialog-builder.js +2 -2
- package/dist/esm/notification-builder.js +12 -12
- package/dist/esm/notification-launcher.js +1 -1
- package/dist/esm/notification-util.js +5 -8
- package/dist/esm/snackbar/snackbar-builder.js +2 -2
- package/dist/esm/toast/toast-builder.js +6 -6
- package/dist/esm/toast/toast-launcher.js +10 -11
- package/package.json +5 -5
|
@@ -34,10 +34,10 @@ export class BannerBuilder {
|
|
|
34
34
|
build() {
|
|
35
35
|
let banner = {};
|
|
36
36
|
if (this.dismissingAction) {
|
|
37
|
-
banner =
|
|
37
|
+
banner = { dismissingAction: this.dismissingAction, ...banner };
|
|
38
38
|
}
|
|
39
39
|
if (this.confirmingActions) {
|
|
40
|
-
banner =
|
|
40
|
+
banner = { confirmingActions: this.confirmingActions, ...banner };
|
|
41
41
|
}
|
|
42
42
|
return banner;
|
|
43
43
|
}
|
|
@@ -8,11 +8,10 @@ import { getBannerAnchor } from '../notification-util';
|
|
|
8
8
|
* @returns
|
|
9
9
|
* */
|
|
10
10
|
export const showBanner = (notificationStructure, tagName, notificationBoundary) => {
|
|
11
|
-
var _a;
|
|
12
11
|
const tagPrefix = tagName.split('-')[0];
|
|
13
12
|
const banner = document.createElement(`${tagPrefix}-banner`);
|
|
14
13
|
const container = getBannerAnchor(notificationBoundary);
|
|
15
|
-
if (
|
|
14
|
+
if (container?.children?.length > 0) {
|
|
16
15
|
banner.style.position = 'absolute';
|
|
17
16
|
banner.style.top = '0';
|
|
18
17
|
banner.style.left = '0';
|
|
@@ -34,10 +34,10 @@ export class DialogBuilder {
|
|
|
34
34
|
build() {
|
|
35
35
|
let dialog = {};
|
|
36
36
|
if (this.dismissingAction) {
|
|
37
|
-
dialog =
|
|
37
|
+
dialog = { dismissingAction: this.dismissingAction, ...dialog };
|
|
38
38
|
}
|
|
39
39
|
if (this.confirmingActions) {
|
|
40
|
-
dialog =
|
|
40
|
+
dialog = { confirmingActions: this.confirmingActions, ...dialog };
|
|
41
41
|
}
|
|
42
42
|
return dialog;
|
|
43
43
|
}
|
|
@@ -111,30 +111,30 @@ export class NotificationBuilder {
|
|
|
111
111
|
};
|
|
112
112
|
let config = {};
|
|
113
113
|
if (this.createdAt) {
|
|
114
|
-
notificationStructure =
|
|
114
|
+
notificationStructure = { createdAt: this.createdAt, ...notificationStructure };
|
|
115
115
|
}
|
|
116
116
|
if (this.logLevel in LogLevel) {
|
|
117
|
-
notificationStructure =
|
|
117
|
+
notificationStructure = { logLevel: this.logLevel, ...notificationStructure };
|
|
118
118
|
}
|
|
119
119
|
if (this.alert) {
|
|
120
|
-
config =
|
|
121
|
-
notificationStructure =
|
|
120
|
+
config = { alert: this.alert, ...config };
|
|
121
|
+
notificationStructure = { config, ...notificationStructure };
|
|
122
122
|
}
|
|
123
123
|
if (this.toast) {
|
|
124
|
-
config =
|
|
125
|
-
notificationStructure =
|
|
124
|
+
config = { toast: this.toast, ...config };
|
|
125
|
+
notificationStructure = { config, ...notificationStructure };
|
|
126
126
|
}
|
|
127
127
|
if (this.banner) {
|
|
128
|
-
config =
|
|
129
|
-
notificationStructure =
|
|
128
|
+
config = { banner: this.banner, ...config };
|
|
129
|
+
notificationStructure = { config, ...notificationStructure };
|
|
130
130
|
}
|
|
131
131
|
if (this.snackbar) {
|
|
132
|
-
config =
|
|
133
|
-
notificationStructure =
|
|
132
|
+
config = { snackbar: this.snackbar, ...config };
|
|
133
|
+
notificationStructure = { config, ...notificationStructure };
|
|
134
134
|
}
|
|
135
135
|
if (this.dialog) {
|
|
136
|
-
config =
|
|
137
|
-
notificationStructure =
|
|
136
|
+
config = { dialog: this.dialog, ...config };
|
|
137
|
+
notificationStructure = { config, ...notificationStructure };
|
|
138
138
|
}
|
|
139
139
|
return notificationStructure;
|
|
140
140
|
}
|
|
@@ -27,7 +27,7 @@ export const showNotification = (notificationStructure, tagName, notificationBou
|
|
|
27
27
|
message: getNotificationDetails(notificationStructure),
|
|
28
28
|
level: getLoglevel(notificationStructure),
|
|
29
29
|
});
|
|
30
|
-
const keys = Object.keys(
|
|
30
|
+
const keys = Object.keys(notificationStructure?.config || {});
|
|
31
31
|
keys.forEach((key) => {
|
|
32
32
|
if (notificationTypeToComponentMap[key]) {
|
|
33
33
|
notificationTypeToComponentMap[key](notificationStructure, tagName, notificationBoundary);
|
|
@@ -6,9 +6,8 @@ import { LogLevel } from '@genesislcap/foundation-utils';
|
|
|
6
6
|
* @returns The title and body concatenated as a string, or default values ('Error: Something went wrong') if not present
|
|
7
7
|
*/
|
|
8
8
|
export const getNotificationDetails = (details) => {
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
const body = (_b = details === null || details === void 0 ? void 0 : details.body) !== null && _b !== void 0 ? _b : 'Something went wrong';
|
|
9
|
+
const title = details?.title ?? 'Error';
|
|
10
|
+
const body = details?.body ?? 'Something went wrong';
|
|
12
11
|
return `${title}: ${body}`;
|
|
13
12
|
};
|
|
14
13
|
/**
|
|
@@ -18,8 +17,7 @@ export const getNotificationDetails = (details) => {
|
|
|
18
17
|
* @returns The log level or the default value (LogLevel.Debug) if not present
|
|
19
18
|
*/
|
|
20
19
|
export const getLoglevel = (details) => {
|
|
21
|
-
|
|
22
|
-
return (details === null || details === void 0 ? void 0 : details.logLevel) || ((_a = details === null || details === void 0 ? void 0 : details.config) === null || _a === void 0 ? void 0 : _a.logLevel) || LogLevel.Debug;
|
|
20
|
+
return details?.logLevel || details?.config?.logLevel || LogLevel.Debug;
|
|
23
21
|
};
|
|
24
22
|
/**
|
|
25
23
|
* Get/Create the error container in the DOM
|
|
@@ -47,14 +45,13 @@ export const getNotificationContainer = (id, tagName) => {
|
|
|
47
45
|
* @returns
|
|
48
46
|
*/
|
|
49
47
|
export const getBannerAnchor = (element) => {
|
|
50
|
-
var _a, _b;
|
|
51
48
|
while (element && !(element instanceof ShadowRoot)) {
|
|
52
|
-
const anchor =
|
|
49
|
+
const anchor = element?.getRootNode()?.getElementById('banner-anchor');
|
|
53
50
|
if (anchor) {
|
|
54
51
|
anchor.style.position = 'relative';
|
|
55
52
|
return anchor;
|
|
56
53
|
}
|
|
57
|
-
element =
|
|
54
|
+
element = element?.getRootNode()?.host;
|
|
58
55
|
}
|
|
59
56
|
return createBannerContainer();
|
|
60
57
|
};
|
|
@@ -33,10 +33,10 @@ export class SnackbarBuilder {
|
|
|
33
33
|
build() {
|
|
34
34
|
let snackbar = {};
|
|
35
35
|
if (this.confirmingActions) {
|
|
36
|
-
snackbar =
|
|
36
|
+
snackbar = { confirmingActions: this.confirmingActions, ...snackbar };
|
|
37
37
|
}
|
|
38
38
|
if (this.type !== undefined) {
|
|
39
|
-
snackbar =
|
|
39
|
+
snackbar = { type: this.type, ...snackbar };
|
|
40
40
|
}
|
|
41
41
|
return snackbar;
|
|
42
42
|
}
|
|
@@ -69,22 +69,22 @@ export class ToastBuilder {
|
|
|
69
69
|
build() {
|
|
70
70
|
let toast = {};
|
|
71
71
|
if (this.position) {
|
|
72
|
-
toast =
|
|
72
|
+
toast = { position: this.position, ...toast };
|
|
73
73
|
}
|
|
74
74
|
if (this.autoClose) {
|
|
75
|
-
toast =
|
|
75
|
+
toast = { autoClose: this.autoClose, ...toast };
|
|
76
76
|
}
|
|
77
77
|
if (this.closeTimeout) {
|
|
78
|
-
toast =
|
|
78
|
+
toast = { closeTimeout: this.closeTimeout, ...toast };
|
|
79
79
|
}
|
|
80
80
|
if (this.type) {
|
|
81
|
-
toast =
|
|
81
|
+
toast = { type: this.type, ...toast };
|
|
82
82
|
}
|
|
83
83
|
if (this.details) {
|
|
84
|
-
toast =
|
|
84
|
+
toast = { details: this.details, ...toast };
|
|
85
85
|
}
|
|
86
86
|
if (this.buttons) {
|
|
87
|
-
toast =
|
|
87
|
+
toast = { buttons: this.buttons, ...toast };
|
|
88
88
|
}
|
|
89
89
|
return toast;
|
|
90
90
|
}
|
|
@@ -7,12 +7,11 @@ import { getNotificationContainer } from '../notification-util';
|
|
|
7
7
|
* @returns
|
|
8
8
|
* */
|
|
9
9
|
export const showToast = (notificationStructure, tagName) => {
|
|
10
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
11
10
|
const tagPrefix = tagName.split('-')[0];
|
|
12
11
|
const container = getNotificationContainer('notify-container', tagName);
|
|
13
12
|
if (container) {
|
|
14
13
|
container.style.position = 'fixed';
|
|
15
|
-
switch (
|
|
14
|
+
switch (notificationStructure?.config?.toast?.position) {
|
|
16
15
|
case 'top-left':
|
|
17
16
|
container.style.top = '0';
|
|
18
17
|
container.style.left = '0';
|
|
@@ -36,13 +35,13 @@ export const showToast = (notificationStructure, tagName) => {
|
|
|
36
35
|
toastTitle.textContent = notificationStructure.title;
|
|
37
36
|
const toastDetails = document.createElement('div');
|
|
38
37
|
toastDetails.setAttribute('slot', 'content');
|
|
39
|
-
toastDetails.textContent =
|
|
38
|
+
toastDetails.textContent = notificationStructure?.body || '';
|
|
40
39
|
const toastDate = document.createElement('div');
|
|
41
40
|
toastDate.setAttribute('slot', 'date');
|
|
42
|
-
toastDate.textContent =
|
|
41
|
+
toastDate.textContent = notificationStructure?.createdAt?.toLocaleTimeString() || '';
|
|
43
42
|
let toastBottom;
|
|
44
|
-
if (
|
|
45
|
-
|
|
43
|
+
if (notificationStructure?.config?.toast?.buttons &&
|
|
44
|
+
notificationStructure?.config?.toast?.buttons?.length) {
|
|
46
45
|
toastBottom = document.createElement('div');
|
|
47
46
|
toastBottom.setAttribute('slot', 'bottom');
|
|
48
47
|
notificationStructure.config.toast.buttons.forEach((button) => {
|
|
@@ -64,12 +63,12 @@ export const showToast = (notificationStructure, tagName) => {
|
|
|
64
63
|
toastBottom.appendChild(buttonElement);
|
|
65
64
|
});
|
|
66
65
|
}
|
|
67
|
-
toastNotify.setAttribute('notify',
|
|
68
|
-
|
|
69
|
-
? toastNotify.setAttribute('auto-close', `${
|
|
66
|
+
toastNotify.setAttribute('notify', notificationStructure?.config?.toast?.type || '');
|
|
67
|
+
notificationStructure?.config?.toast?.autoClose
|
|
68
|
+
? toastNotify.setAttribute('auto-close', `${notificationStructure?.config?.toast?.autoClose}`)
|
|
70
69
|
: '';
|
|
71
|
-
|
|
72
|
-
? toastNotify.setAttribute('close-timeout', `${
|
|
70
|
+
notificationStructure?.config?.toast?.closeTimeout
|
|
71
|
+
? toastNotify.setAttribute('close-timeout', `${notificationStructure?.config?.toast?.closeTimeout}`)
|
|
73
72
|
: '';
|
|
74
73
|
toastNotify.appendChild(toastTitle);
|
|
75
74
|
toastNotify.appendChild(toastDetails);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/foundation-notifications",
|
|
3
3
|
"description": "Genesis Foundation UI Notifications Utils",
|
|
4
|
-
"version": "14.70.
|
|
4
|
+
"version": "14.70.4-es2021.1",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -37,12 +37,12 @@
|
|
|
37
37
|
"test:debug": "genx test --debug"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@genesislcap/foundation-testing": "14.70.
|
|
41
|
-
"@genesislcap/genx": "14.70.
|
|
40
|
+
"@genesislcap/foundation-testing": "14.70.4-es2021.1",
|
|
41
|
+
"@genesislcap/genx": "14.70.4-es2021.1",
|
|
42
42
|
"rimraf": "^3.0.2"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@genesislcap/foundation-utils": "14.70.
|
|
45
|
+
"@genesislcap/foundation-utils": "14.70.4-es2021.1",
|
|
46
46
|
"@microsoft/fast-element": "^1.7.0",
|
|
47
47
|
"tslib": "^2.3.1"
|
|
48
48
|
},
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"publishConfig": {
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "5d0d8ee36cfd068cfc6211033b326d0a978cfc05"
|
|
58
58
|
}
|