@everymatrix/nuts-inbox-widget 1.77.0 → 1.77.2
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/cjs/loader.cjs.js +1 -1
- package/dist/cjs/nuts-inbox-widget.cjs.js +1 -1
- package/dist/cjs/nuts-inbox-widget_3.cjs.entry.js +55 -15
- package/dist/collection/components/nuts-notification/constants.js +1 -0
- package/dist/collection/components/nuts-notification/nuts-notification.js +79 -12
- package/dist/collection/components/nuts-popover/nuts-popover.js +2 -2
- package/dist/collection/utils/utils.js +10 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/nuts-inbox-widget.js +1 -1
- package/dist/esm/nuts-inbox-widget_3.entry.js +55 -15
- package/dist/nuts-inbox-widget/nuts-inbox-widget.esm.js +1 -1
- package/dist/nuts-inbox-widget/nuts-inbox-widget_3.entry.js +1 -1
- package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/tools/plugins/index.d.ts +1 -0
- package/dist/types/builds/emfe-widgets/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/tools/plugins/lazy-load-chunk-plugin.d.ts +12 -0
- package/dist/types/components/nuts-notification/constants.d.ts +1 -0
- package/dist/types/components/nuts-notification/nuts-notification.d.ts +8 -0
- package/dist/types/components.d.ts +16 -0
- package/dist/types/utils/utils.d.ts +1 -1
- package/hydrate/index.js +53 -12
- package/hydrate/index.mjs +53 -12
- package/package.json +1 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
11
|
+
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"maxTextLength":[514,"max-text-length"],"maxLines":[514,"max-lines"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
22
|
+
return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"maxTextLength":[514,"max-text-length"],"maxLines":[514,"max-lines"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -42317,12 +42317,21 @@ function renderAbstractNodeToSVGElement(node, options) {
|
|
|
42317
42317
|
}
|
|
42318
42318
|
|
|
42319
42319
|
const MAX_NOTIFICATION_TEXT_LENGTH = 200;
|
|
42320
|
+
const MAX_NOTIFICATION_LINES = 5;
|
|
42320
42321
|
|
|
42321
|
-
const truncate = (str, n) => {
|
|
42322
|
+
const truncate = (str, n, l) => {
|
|
42322
42323
|
if (!str || n < 0) {
|
|
42323
42324
|
return;
|
|
42324
42325
|
}
|
|
42325
|
-
|
|
42326
|
+
if (str.length > n) {
|
|
42327
|
+
return str.slice(0, n - 1) + '...';
|
|
42328
|
+
}
|
|
42329
|
+
const matches = [...str.matchAll(/<br\s*\/?>|<\/p>/gi)];
|
|
42330
|
+
if (matches.length >= l) {
|
|
42331
|
+
const cutoffIndex = matches[l - 1].index;
|
|
42332
|
+
return str.slice(0, cutoffIndex) + '...';
|
|
42333
|
+
}
|
|
42334
|
+
return str;
|
|
42326
42335
|
};
|
|
42327
42336
|
|
|
42328
42337
|
const nutsNotificationCss = ":host{display:block}p{display:block;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px}.NotificationContainer{animation:show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;transform-origin:top center;padding:15px;position:relative;display:flex;line-height:20px;justify-content:space-between;align-items:flex-start;border-radius:7px;margin:10px 15px;color:var(--emw--color-white, rgb(255, 255, 255));background:var(--emw--color-gray-400, rgb(35, 35, 43));font-weight:400;font-size:14px;gap:8px;cursor:pointer}@keyframes show{100%{opacity:1;transform:none}}.NotificationContainer .AvatarContainer{margin-right:10px;width:40px;min-width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40px;border:1px solid var(--emw--color-gray-200, rgb(82, 82, 102));overflow:hidden}.NotificationContainer .AvatarContainer .Avatar{box-sizing:border-box;position:relative;display:flex;user-select:none;overflow:hidden;width:38px;min-width:38px;height:38px;border-radius:32px;text-decoration:none;border:0px;background-color:transparent;padding:0px;justify-content:center;align-items:center}.NotificationContainer .AvatarContainer .Avatar .AvatarImage{object-fit:cover;width:100%;height:100%;display:block}.NotificationContainer .AvatarContainer .Avatar svg{object-fit:cover;display:block}.NotificationContainer .ContentContainer{display:flex;flex-direction:column;word-break:break-word;text-align:justify}.NotificationContainer .RightActionsContainer{display:flex;flex-direction:column}.NotificationContainer .FlipX{transform:rotateX(180deg) translate(0, 4px)}.NotificationContainer .AccordionArrow{margin-left:4px;transition-duration:0.2s;transition-property:transform}.NotificationContainer .Date{min-width:55px;font-size:12px;font-weight:400;opacity:0.5;line-height:14.4px;color:var(--emw--color-gray-200, rgb(82, 82, 102))}.NotificationContainer .Settings{opacity:0.5;display:inline;cursor:pointer}.Unseen::before{content:\"\";position:absolute;inset:0px;width:5px;border-radius:7px 0px 0px 7px;background:linear-gradient(0deg, var(--emw--color-secondary-20, rgb(255, 81, 47)) 0%, var(--emw--color-secondary, rgb(221, 36, 118)) 100%)}.Unseen:hover .UnseenButton{display:none}.SettingsDropdown{z-index:999;position:absolute;background:var(--emw--color-gray-400, rgb(41, 41, 51));box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 20px;border-radius:7px;padding:4px;border:none;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;width:max-content;display:flex;flex-direction:column;right:50px;top:50px}.SettingsDropdown svg{margin-right:10px}.SettingsDropdown button{font-family:inherit;border:0px;background-color:transparent;outline:0px;width:100%;text-align:left;text-decoration:none;box-sizing:border-box;padding:10px 12px;cursor:pointer;border-radius:7px;display:flex;align-items:center;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px}.SettingsDropdown button:hover{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}.Wrapper{position:relative}";
|
|
@@ -42419,7 +42428,7 @@ const NutsNotification = class {
|
|
|
42419
42428
|
this.messageDeteled.emit(this.messageId);
|
|
42420
42429
|
};
|
|
42421
42430
|
this.notificationActionHandler = () => {
|
|
42422
|
-
var _a, _b, _c;
|
|
42431
|
+
var _a, _b, _c, _d;
|
|
42423
42432
|
if (this.notificationAction == 'default' || !this.notificationAction) {
|
|
42424
42433
|
if (this.redirectUrl.length > 0) {
|
|
42425
42434
|
window.location.href = this.redirectUrl;
|
|
@@ -42428,15 +42437,16 @@ const NutsNotification = class {
|
|
|
42428
42437
|
if (this.notificationAction == 'postMessage') {
|
|
42429
42438
|
window.postMessage({ type: 'NotificationRedirect', url: this.redirectUrl }, window.location.href);
|
|
42430
42439
|
}
|
|
42431
|
-
if (((_a = this.content) === null || _a === void 0 ? void 0 : _a.length) <=
|
|
42440
|
+
if (((_a = this.content) === null || _a === void 0 ? void 0 : _a.length) <= this.maxTextLength &&
|
|
42441
|
+
(((_b = this.content) === null || _b === void 0 ? void 0 : _b.match(/<br\s*\/?>|<\/p>/gi)) || []).length <= this.maxLines) {
|
|
42432
42442
|
return;
|
|
42433
42443
|
}
|
|
42434
|
-
if (((
|
|
42444
|
+
if (((_c = this.displayedContent) === null || _c === void 0 ? void 0 : _c.length) !== ((_d = this.content) === null || _d === void 0 ? void 0 : _d.length) && this.displayedContent !== this.content) {
|
|
42435
42445
|
this.displayedContent = this.content;
|
|
42436
42446
|
this.dropdownArrowRef.classList.add('FlipX');
|
|
42437
42447
|
return;
|
|
42438
42448
|
}
|
|
42439
|
-
this.displayedContent = truncate(this.content,
|
|
42449
|
+
this.displayedContent = truncate(this.content, this.maxTextLength, this.maxLines);
|
|
42440
42450
|
this.dropdownArrowRef.classList.remove('FlipX');
|
|
42441
42451
|
};
|
|
42442
42452
|
this.setClientStyling = () => {
|
|
@@ -42484,6 +42494,8 @@ const NutsNotification = class {
|
|
|
42484
42494
|
this.clientStylingUrl = undefined;
|
|
42485
42495
|
this.translationUrl = '';
|
|
42486
42496
|
this.clientStyling = '';
|
|
42497
|
+
this.maxTextLength = MAX_NOTIFICATION_TEXT_LENGTH;
|
|
42498
|
+
this.maxLines = MAX_NOTIFICATION_LINES;
|
|
42487
42499
|
this.showSettingsModal = false;
|
|
42488
42500
|
this.messageSeen = false;
|
|
42489
42501
|
this.messageRead = false;
|
|
@@ -42528,6 +42540,8 @@ const NutsNotification = class {
|
|
|
42528
42540
|
// end custom styling area
|
|
42529
42541
|
}
|
|
42530
42542
|
async componentWillLoad() {
|
|
42543
|
+
this.maxTextLength = Number(this.maxTextLength);
|
|
42544
|
+
this.maxLines = Number(this.maxLines);
|
|
42531
42545
|
if (this.translationUrl.length > 2) {
|
|
42532
42546
|
await getTranslations(this.translationUrl);
|
|
42533
42547
|
}
|
|
@@ -42535,23 +42549,49 @@ const NutsNotification = class {
|
|
|
42535
42549
|
connectedCallback() {
|
|
42536
42550
|
this.messageSeen = this.seen;
|
|
42537
42551
|
this.messageRead = this.read;
|
|
42538
|
-
this.displayedContent = truncate(this.content,
|
|
42552
|
+
this.displayedContent = truncate(this.content, this.maxTextLength, this.maxLines);
|
|
42539
42553
|
this.baseUrl = `${this.backendUrl}/v1/${this.operatorId}`;
|
|
42540
42554
|
}
|
|
42541
42555
|
render() {
|
|
42542
|
-
var _a, _b;
|
|
42556
|
+
var _a, _b, _c;
|
|
42543
42557
|
const sanitizedNotificationBody = DOMPurify.sanitize(this.displayedContent, {
|
|
42544
42558
|
ALLOW_UNKNOWN_PROTOCOLS: true,
|
|
42545
42559
|
ADD_ATTR: ['target', 'rel'],
|
|
42546
|
-
ALLOWED_TAGS: [
|
|
42547
|
-
'
|
|
42548
|
-
'
|
|
42560
|
+
ALLOWED_TAGS: [
|
|
42561
|
+
'b',
|
|
42562
|
+
'u',
|
|
42563
|
+
'i',
|
|
42564
|
+
'br',
|
|
42565
|
+
'a',
|
|
42566
|
+
'em',
|
|
42567
|
+
'h1',
|
|
42568
|
+
'h2',
|
|
42569
|
+
'h3',
|
|
42570
|
+
'h4',
|
|
42571
|
+
'h5',
|
|
42572
|
+
'h6',
|
|
42573
|
+
'strong',
|
|
42574
|
+
'p',
|
|
42575
|
+
'i',
|
|
42576
|
+
'small',
|
|
42577
|
+
'mark',
|
|
42578
|
+
'del',
|
|
42579
|
+
'b',
|
|
42580
|
+
's',
|
|
42581
|
+
'ins',
|
|
42582
|
+
'sub',
|
|
42583
|
+
'sup',
|
|
42584
|
+
'var',
|
|
42585
|
+
'cite',
|
|
42586
|
+
'q',
|
|
42587
|
+
'blockquote'
|
|
42549
42588
|
]
|
|
42550
42589
|
});
|
|
42551
|
-
return (index.h("div", { key: '
|
|
42590
|
+
return (index.h("div", { key: 'a74957d743897164ff0f3b3d17707a8db5f433fd', class: "Wrapper" }, index.h("div", { key: '7dd78a87e080e8ca578620356b2cff9acc9fd64c', class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: this.assignRefToStylingContainer, onClick: this.notificationActionHandler }, this.badge ? (index.h("div", { class: "AvatarContainer" }, index.h("div", { class: "Avatar" }, ((_a = systemIcons[this.badge]) === null || _a === void 0 ? void 0 : _a.icon) ? (index.h("div", { innerHTML: systemIcons[this.badge].icon })) : (index.h("img", { class: "AvatarImage", src: this.badge }))))) : (''), index.h("div", { key: 'ea80f329d9994c429bc6c66f2f414daf7e0771b0', class: "ContentContainer" }, index.h("div", { key: 'b817eecb9732eeb3b19c438c0fbe6398c822dcf0', innerHTML: sanitizedNotificationBody }), index.h("p", { key: 'cb2c821ba968bb6e95c5703e94c296857822ae77', class: "Date" }, formatDistanceToNow(new Date(this.date), {
|
|
42552
42591
|
addSuffix: true,
|
|
42553
42592
|
locale: dateFnsLocale(this.language)
|
|
42554
|
-
}))), index.h("div", { key: '
|
|
42593
|
+
}))), index.h("div", { key: 'd35902296022dff85e84d2484846a724f4b098af', class: "RightActionsContainer" }, index.h("div", { key: 'b3f4f5d0452d89e58bf64a10d42140ad0d000f98', class: "Settings", onClick: this.toggleSettingsModal }, index.h("svg", { key: 'f5dab069aeb97ed7e7055277518b9850e47aa017', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '79398e37d9fa8fa5fb856d739caaa6b3e343c79a', d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), (((_b = this.content) === null || _b === void 0 ? void 0 : _b.length) > this.maxTextLength ||
|
|
42594
|
+
(((_c = this.content) === null || _c === void 0 ? void 0 : _c.match(/<br\s*\/?>|<\/p>/gi)) || []).length > this.maxLines) && (index.h("div", { key: 'a75570887a9b7441b38c7cacf63ba525a17e795c', class: "AccordionArrow", innerHTML: systemIcons.arrowDown.icon, ref: this.assignRefToDropdownArrow })))), this.showSettingsModal ? (index.h("div", { class: "SettingsDropdown" }, index.h("button", { onClick: this.toggleNotificationRead }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate$1(this.messageRead ? 'markAsUnread' : 'markAsRead', this.language)), index.h("button", { onClick: this.deleteNotification }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate$1('removeMessage', this.language)))) : ('')));
|
|
42555
42595
|
}
|
|
42556
42596
|
get el() { return index.getElement(this); }
|
|
42557
42597
|
static get watchers() { return {
|
|
@@ -42748,8 +42788,8 @@ const NutsPopover = class {
|
|
|
42748
42788
|
extraSVGAttrs: { width: '30px', height: '30px', fill: '#A1A1B2' }
|
|
42749
42789
|
}) })) : ((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (this.notifications.map((item) => {
|
|
42750
42790
|
var _a;
|
|
42751
|
-
return (index.h("nuts-notification", { "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, key: item.id, "user-id": this.userId, "operator-id": this.operatorId, content: item.content, "message-id": item.id, badge: ((_a = item.actor) === null || _a === void 0 ? void 0 : _a.data) || '', sessionId: this.sessionId, date: item.createdAt, read: item.read, seen: item.seen, language: this.language, "notification-action": this.notificationAction, token: this.token, "backend-url": this.backendUrl, "redirect-url": item.cta.data.url, "translation-url": this.translationUrl }));
|
|
42752
|
-
})) : (index.h("div", { class: "NoMessages" }, index.h("svg", { width: "120", height: "108", viewBox: "0 0 120 108", fill: "none" }, index.h("circle", { cx: "11.3191", cy: "30.7872", r: "6.31915", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("ellipse", { cx: "60.117", cy: "27.9787", rx: "5.96809", ry: "5.61702", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M79.5424 49.4934C79.5424 44.1598 77.6437 39.0446 74.2641 35.2732C70.8844 31.5017 66.3006 29.3829 61.5211 29.3829C56.7415 29.3829 52.1578 31.5017 48.7781 35.2732C45.3985 39.0446 43.4998 44.1598 43.4998 49.4934C43.4998 72.9557 34.4892 79.6592 34.4892 79.6592H88.553C88.553 79.6592 79.5424 72.9557 79.5424 49.4934Z", fill: "#292933" }), index.h("path", { d: "M68.8995 81.7552C68.1496 83.551 67.0731 85.0417 65.778 86.0779C64.4828 87.1141 63.0144 87.6595 61.5198 87.6595C60.0252 87.6595 58.5568 87.1141 57.2617 86.0779C55.9665 85.0417 54.8901 83.551 54.1401 81.7552", fill: "#292933" }), index.h("path", { d: "M81.2976 50.2203C81.2976 68.2545 87.2222 76.7327 90.2814 79.9083C90.7671 80.4126 90.3802 81.4764 89.68 81.4764C88.0927 81.4764 86.5488 81.4764 85.0422 81.4764M68.5814 82.946C67.6854 84.8068 66.3993 86.3513 64.8518 87.425C63.3044 88.4987 61.5499 89.0638 59.7641 89.0638C57.9783 89.0638 56.2239 88.4987 54.6765 87.425C53.129 86.3513 51.8429 84.8068 50.9468 82.946M79.712 42.3723C78.6394 39.8192 77.0439 37.4727 74.991 35.4861C70.953 31.5783 65.4763 29.3829 59.7656 29.3829C54.055 29.3829 48.5783 31.5783 44.5403 35.4861C43.3681 36.6205 42.345 37.8722 41.4832 39.2127C40.4958 40.7487 39.7202 42.4013 39.1747 44.1276C38.5563 46.0847 38.2337 48.1364 38.2337 50.2203C38.2337 53.2503 38.0665 56.0106 37.7737 58.5212M34.8401 70.7608C32.9874 75.4551 30.7688 78.331 29.2526 79.9055C28.767 80.4099 29.155 81.4764 29.8551 81.4764C47.1962 81.4764 59.3571 81.4764 74.1593 81.4764", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M55.6345 59.0737C55.1665 59.7144 54.4949 60.2462 53.6868 60.6159C52.8787 60.9855 51.9625 61.1801 51.0299 61.1801C50.0973 61.1801 49.1811 60.9855 48.373 60.6159C47.5649 60.2462 46.8933 59.7144 46.4254 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M73.1877 59.0737C72.7197 59.7144 72.0481 60.2462 71.24 60.6159C70.4319 60.9855 69.5157 61.1801 68.5831 61.1801C67.6506 61.1801 66.7344 60.9855 65.9263 60.6159C65.1182 60.2462 64.4465 59.7144 63.9786 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("circle", { cx: "107.511", cy: "56.0638", r: "7.02128", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("circle", { cx: "16.4252", cy: "58.1703", r: "4.21277", fill: "#3D3D4D" }), index.h("ellipse", { cx: "59.9573", cy: "104.511", rx: "25.2766", ry: "2.80851", fill: "#3D3D4D" }), index.h("path", { d: "M81.5317 18.1489H88.553L81.5317 25.1702H88.553", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M96.6807 2H106.51L96.6807 11.8298H106.51", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", null, translate$1('noMessages', this.language)))))), !this.isLoading && (index.h("div", { key: '
|
|
42791
|
+
return (index.h("nuts-notification", { "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, key: item.id, "user-id": this.userId, "operator-id": this.operatorId, content: item.content, "message-id": item.id, badge: ((_a = item.actor) === null || _a === void 0 ? void 0 : _a.data) || '', sessionId: this.sessionId, date: item.createdAt, read: item.read, seen: item.seen, language: this.language, "notification-action": this.notificationAction, token: this.token, "backend-url": this.backendUrl, "redirect-url": item.cta.data.url, "translation-url": this.translationUrl, "max-text-length": 200, "max-lines": 5 }));
|
|
42792
|
+
})) : (index.h("div", { class: "NoMessages" }, index.h("svg", { width: "120", height: "108", viewBox: "0 0 120 108", fill: "none" }, index.h("circle", { cx: "11.3191", cy: "30.7872", r: "6.31915", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("ellipse", { cx: "60.117", cy: "27.9787", rx: "5.96809", ry: "5.61702", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M79.5424 49.4934C79.5424 44.1598 77.6437 39.0446 74.2641 35.2732C70.8844 31.5017 66.3006 29.3829 61.5211 29.3829C56.7415 29.3829 52.1578 31.5017 48.7781 35.2732C45.3985 39.0446 43.4998 44.1598 43.4998 49.4934C43.4998 72.9557 34.4892 79.6592 34.4892 79.6592H88.553C88.553 79.6592 79.5424 72.9557 79.5424 49.4934Z", fill: "#292933" }), index.h("path", { d: "M68.8995 81.7552C68.1496 83.551 67.0731 85.0417 65.778 86.0779C64.4828 87.1141 63.0144 87.6595 61.5198 87.6595C60.0252 87.6595 58.5568 87.1141 57.2617 86.0779C55.9665 85.0417 54.8901 83.551 54.1401 81.7552", fill: "#292933" }), index.h("path", { d: "M81.2976 50.2203C81.2976 68.2545 87.2222 76.7327 90.2814 79.9083C90.7671 80.4126 90.3802 81.4764 89.68 81.4764C88.0927 81.4764 86.5488 81.4764 85.0422 81.4764M68.5814 82.946C67.6854 84.8068 66.3993 86.3513 64.8518 87.425C63.3044 88.4987 61.5499 89.0638 59.7641 89.0638C57.9783 89.0638 56.2239 88.4987 54.6765 87.425C53.129 86.3513 51.8429 84.8068 50.9468 82.946M79.712 42.3723C78.6394 39.8192 77.0439 37.4727 74.991 35.4861C70.953 31.5783 65.4763 29.3829 59.7656 29.3829C54.055 29.3829 48.5783 31.5783 44.5403 35.4861C43.3681 36.6205 42.345 37.8722 41.4832 39.2127C40.4958 40.7487 39.7202 42.4013 39.1747 44.1276C38.5563 46.0847 38.2337 48.1364 38.2337 50.2203C38.2337 53.2503 38.0665 56.0106 37.7737 58.5212M34.8401 70.7608C32.9874 75.4551 30.7688 78.331 29.2526 79.9055C28.767 80.4099 29.155 81.4764 29.8551 81.4764C47.1962 81.4764 59.3571 81.4764 74.1593 81.4764", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M55.6345 59.0737C55.1665 59.7144 54.4949 60.2462 53.6868 60.6159C52.8787 60.9855 51.9625 61.1801 51.0299 61.1801C50.0973 61.1801 49.1811 60.9855 48.373 60.6159C47.5649 60.2462 46.8933 59.7144 46.4254 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M73.1877 59.0737C72.7197 59.7144 72.0481 60.2462 71.24 60.6159C70.4319 60.9855 69.5157 61.1801 68.5831 61.1801C67.6506 61.1801 66.7344 60.9855 65.9263 60.6159C65.1182 60.2462 64.4465 59.7144 63.9786 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("circle", { cx: "107.511", cy: "56.0638", r: "7.02128", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("circle", { cx: "16.4252", cy: "58.1703", r: "4.21277", fill: "#3D3D4D" }), index.h("ellipse", { cx: "59.9573", cy: "104.511", rx: "25.2766", ry: "2.80851", fill: "#3D3D4D" }), index.h("path", { d: "M81.5317 18.1489H88.553L81.5317 25.1702H88.553", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M96.6807 2H106.51L96.6807 11.8298H106.51", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", null, translate$1('noMessages', this.language)))))), !this.isLoading && (index.h("div", { key: 'ac051bc217b20856ee2fbb05c164740a2ce15034', class: "Pagination" }, index.h("div", { key: '4103c2541b1534674f4a395782b57cb7f412e635', class: "Button" }, index.h("button", { key: 'b5ea8a82ad305692ba6b7e27de3156df8755b41a', disabled: this.isNotificationsLoading || this.currentPage <= 0, onClick: this.prevPage }, index.h("svg", { key: '84a373abf56f161f2f566c617c2227d713bfbad5', class: "svg-icon", viewBox: "0 0 20 20" }, index.h("path", { key: 'a8c8e4d65eb525f98db3a9f3770c64a4cff44b0e', d: "M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z" })), translate$1('prev', this.language))), index.h("div", { key: '20b18543fe251fe1f2b67e002fa07ec9be8146e7', class: "Button" }, index.h("button", { key: '797168392bd58e443953ccac835e33660956ea27', disabled: this.isNotificationsLoading || !this.hasMore, onClick: this.nextPage }, translate$1('next', this.language), index.h("svg", { key: '3602fbc69f946074355405ec83075069bb3787c1', class: "svg-icon", viewBox: "0 0 20 20" }, index.h("path", { key: '679cc4531c96fe91bbdc027acfee1eb71240495d', d: "M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z" }))))))));
|
|
42753
42793
|
}
|
|
42754
42794
|
static get watchers() { return {
|
|
42755
42795
|
"unseenCount": ["unseenCountHandler"],
|
|
@@ -5,7 +5,7 @@ import * as dateFnsLocales from "date-fns/locale";
|
|
|
5
5
|
import DOMPurify from "dompurify";
|
|
6
6
|
import { WarningFilled, InfoCircleFilled, CheckCircleFilled, CloseCircleFilled, UpCircleFilled, QuestionCircleFilled, DownOutlined } from "@ant-design/icons-svg";
|
|
7
7
|
import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
|
|
8
|
-
import { MAX_NOTIFICATION_TEXT_LENGTH } from "./constants";
|
|
8
|
+
import { MAX_NOTIFICATION_LINES, MAX_NOTIFICATION_TEXT_LENGTH } from "./constants";
|
|
9
9
|
import { truncate } from "../../utils/utils";
|
|
10
10
|
import { deleteMessage, markAsRead } from "../../api/methods";
|
|
11
11
|
const systemIcons = {
|
|
@@ -95,7 +95,7 @@ export class NutsNotification {
|
|
|
95
95
|
this.messageDeteled.emit(this.messageId);
|
|
96
96
|
};
|
|
97
97
|
this.notificationActionHandler = () => {
|
|
98
|
-
var _a, _b, _c;
|
|
98
|
+
var _a, _b, _c, _d;
|
|
99
99
|
if (!Build.isBrowser)
|
|
100
100
|
return;
|
|
101
101
|
if (this.notificationAction == 'default' || !this.notificationAction) {
|
|
@@ -106,15 +106,16 @@ export class NutsNotification {
|
|
|
106
106
|
if (this.notificationAction == 'postMessage') {
|
|
107
107
|
window.postMessage({ type: 'NotificationRedirect', url: this.redirectUrl }, window.location.href);
|
|
108
108
|
}
|
|
109
|
-
if (((_a = this.content) === null || _a === void 0 ? void 0 : _a.length) <=
|
|
109
|
+
if (((_a = this.content) === null || _a === void 0 ? void 0 : _a.length) <= this.maxTextLength &&
|
|
110
|
+
(((_b = this.content) === null || _b === void 0 ? void 0 : _b.match(/<br\s*\/?>|<\/p>/gi)) || []).length <= this.maxLines) {
|
|
110
111
|
return;
|
|
111
112
|
}
|
|
112
|
-
if (((
|
|
113
|
+
if (((_c = this.displayedContent) === null || _c === void 0 ? void 0 : _c.length) !== ((_d = this.content) === null || _d === void 0 ? void 0 : _d.length) && this.displayedContent !== this.content) {
|
|
113
114
|
this.displayedContent = this.content;
|
|
114
115
|
this.dropdownArrowRef.classList.add('FlipX');
|
|
115
116
|
return;
|
|
116
117
|
}
|
|
117
|
-
this.displayedContent = truncate(this.content,
|
|
118
|
+
this.displayedContent = truncate(this.content, this.maxTextLength, this.maxLines);
|
|
118
119
|
this.dropdownArrowRef.classList.remove('FlipX');
|
|
119
120
|
};
|
|
120
121
|
this.setClientStyling = () => {
|
|
@@ -162,6 +163,8 @@ export class NutsNotification {
|
|
|
162
163
|
this.clientStylingUrl = undefined;
|
|
163
164
|
this.translationUrl = '';
|
|
164
165
|
this.clientStyling = '';
|
|
166
|
+
this.maxTextLength = MAX_NOTIFICATION_TEXT_LENGTH;
|
|
167
|
+
this.maxLines = MAX_NOTIFICATION_LINES;
|
|
165
168
|
this.showSettingsModal = false;
|
|
166
169
|
this.messageSeen = false;
|
|
167
170
|
this.messageRead = false;
|
|
@@ -206,6 +209,8 @@ export class NutsNotification {
|
|
|
206
209
|
// end custom styling area
|
|
207
210
|
}
|
|
208
211
|
async componentWillLoad() {
|
|
212
|
+
this.maxTextLength = Number(this.maxTextLength);
|
|
213
|
+
this.maxLines = Number(this.maxLines);
|
|
209
214
|
if (this.translationUrl.length > 2) {
|
|
210
215
|
await getTranslations(this.translationUrl);
|
|
211
216
|
}
|
|
@@ -213,23 +218,49 @@ export class NutsNotification {
|
|
|
213
218
|
connectedCallback() {
|
|
214
219
|
this.messageSeen = this.seen;
|
|
215
220
|
this.messageRead = this.read;
|
|
216
|
-
this.displayedContent = truncate(this.content,
|
|
221
|
+
this.displayedContent = truncate(this.content, this.maxTextLength, this.maxLines);
|
|
217
222
|
this.baseUrl = `${this.backendUrl}/v1/${this.operatorId}`;
|
|
218
223
|
}
|
|
219
224
|
render() {
|
|
220
|
-
var _a, _b;
|
|
225
|
+
var _a, _b, _c;
|
|
221
226
|
const sanitizedNotificationBody = DOMPurify.sanitize(this.displayedContent, {
|
|
222
227
|
ALLOW_UNKNOWN_PROTOCOLS: true,
|
|
223
228
|
ADD_ATTR: ['target', 'rel'],
|
|
224
|
-
ALLOWED_TAGS: [
|
|
225
|
-
'
|
|
226
|
-
'
|
|
229
|
+
ALLOWED_TAGS: [
|
|
230
|
+
'b',
|
|
231
|
+
'u',
|
|
232
|
+
'i',
|
|
233
|
+
'br',
|
|
234
|
+
'a',
|
|
235
|
+
'em',
|
|
236
|
+
'h1',
|
|
237
|
+
'h2',
|
|
238
|
+
'h3',
|
|
239
|
+
'h4',
|
|
240
|
+
'h5',
|
|
241
|
+
'h6',
|
|
242
|
+
'strong',
|
|
243
|
+
'p',
|
|
244
|
+
'i',
|
|
245
|
+
'small',
|
|
246
|
+
'mark',
|
|
247
|
+
'del',
|
|
248
|
+
'b',
|
|
249
|
+
's',
|
|
250
|
+
'ins',
|
|
251
|
+
'sub',
|
|
252
|
+
'sup',
|
|
253
|
+
'var',
|
|
254
|
+
'cite',
|
|
255
|
+
'q',
|
|
256
|
+
'blockquote'
|
|
227
257
|
]
|
|
228
258
|
});
|
|
229
|
-
return (h("div", { key: '
|
|
259
|
+
return (h("div", { key: 'a74957d743897164ff0f3b3d17707a8db5f433fd', class: "Wrapper" }, h("div", { key: '7dd78a87e080e8ca578620356b2cff9acc9fd64c', class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: this.assignRefToStylingContainer, onClick: this.notificationActionHandler }, this.badge ? (h("div", { class: "AvatarContainer" }, h("div", { class: "Avatar" }, ((_a = systemIcons[this.badge]) === null || _a === void 0 ? void 0 : _a.icon) ? (h("div", { innerHTML: systemIcons[this.badge].icon })) : (h("img", { class: "AvatarImage", src: this.badge }))))) : (''), h("div", { key: 'ea80f329d9994c429bc6c66f2f414daf7e0771b0', class: "ContentContainer" }, h("div", { key: 'b817eecb9732eeb3b19c438c0fbe6398c822dcf0', innerHTML: sanitizedNotificationBody }), h("p", { key: 'cb2c821ba968bb6e95c5703e94c296857822ae77', class: "Date" }, formatDistanceToNow(new Date(this.date), {
|
|
230
260
|
addSuffix: true,
|
|
231
261
|
locale: dateFnsLocale(this.language)
|
|
232
|
-
}))), h("div", { key: '
|
|
262
|
+
}))), h("div", { key: 'd35902296022dff85e84d2484846a724f4b098af', class: "RightActionsContainer" }, h("div", { key: 'b3f4f5d0452d89e58bf64a10d42140ad0d000f98', class: "Settings", onClick: this.toggleSettingsModal }, h("svg", { key: 'f5dab069aeb97ed7e7055277518b9850e47aa017', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '79398e37d9fa8fa5fb856d739caaa6b3e343c79a', d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), (((_b = this.content) === null || _b === void 0 ? void 0 : _b.length) > this.maxTextLength ||
|
|
263
|
+
(((_c = this.content) === null || _c === void 0 ? void 0 : _c.match(/<br\s*\/?>|<\/p>/gi)) || []).length > this.maxLines) && (h("div", { key: 'a75570887a9b7441b38c7cacf63ba525a17e795c', class: "AccordionArrow", innerHTML: systemIcons.arrowDown.icon, ref: this.assignRefToDropdownArrow })))), this.showSettingsModal ? (h("div", { class: "SettingsDropdown" }, h("button", { onClick: this.toggleNotificationRead }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate(this.messageRead ? 'markAsUnread' : 'markAsRead', this.language)), h("button", { onClick: this.deleteNotification }, h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate('removeMessage', this.language)))) : ('')));
|
|
233
264
|
}
|
|
234
265
|
static get is() { return "nuts-notification"; }
|
|
235
266
|
static get originalStyleUrls() {
|
|
@@ -568,6 +599,42 @@ export class NutsNotification {
|
|
|
568
599
|
"attribute": "client-styling",
|
|
569
600
|
"reflect": true,
|
|
570
601
|
"defaultValue": "''"
|
|
602
|
+
},
|
|
603
|
+
"maxTextLength": {
|
|
604
|
+
"type": "number",
|
|
605
|
+
"mutable": false,
|
|
606
|
+
"complexType": {
|
|
607
|
+
"original": "number",
|
|
608
|
+
"resolved": "number",
|
|
609
|
+
"references": {}
|
|
610
|
+
},
|
|
611
|
+
"required": false,
|
|
612
|
+
"optional": false,
|
|
613
|
+
"docs": {
|
|
614
|
+
"tags": [],
|
|
615
|
+
"text": "Max length of notification text before truncating"
|
|
616
|
+
},
|
|
617
|
+
"attribute": "max-text-length",
|
|
618
|
+
"reflect": true,
|
|
619
|
+
"defaultValue": "MAX_NOTIFICATION_TEXT_LENGTH"
|
|
620
|
+
},
|
|
621
|
+
"maxLines": {
|
|
622
|
+
"type": "number",
|
|
623
|
+
"mutable": false,
|
|
624
|
+
"complexType": {
|
|
625
|
+
"original": "number",
|
|
626
|
+
"resolved": "number",
|
|
627
|
+
"references": {}
|
|
628
|
+
},
|
|
629
|
+
"required": false,
|
|
630
|
+
"optional": false,
|
|
631
|
+
"docs": {
|
|
632
|
+
"tags": [],
|
|
633
|
+
"text": "Max number of lines before truncating"
|
|
634
|
+
},
|
|
635
|
+
"attribute": "max-lines",
|
|
636
|
+
"reflect": true,
|
|
637
|
+
"defaultValue": "MAX_NOTIFICATION_LINES"
|
|
571
638
|
}
|
|
572
639
|
};
|
|
573
640
|
}
|
|
@@ -183,8 +183,8 @@ export class NutsPopover {
|
|
|
183
183
|
extraSVGAttrs: { width: '30px', height: '30px', fill: '#A1A1B2' }
|
|
184
184
|
}) })) : ((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (this.notifications.map((item) => {
|
|
185
185
|
var _a;
|
|
186
|
-
return (h("nuts-notification", { "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, key: item.id, "user-id": this.userId, "operator-id": this.operatorId, content: item.content, "message-id": item.id, badge: ((_a = item.actor) === null || _a === void 0 ? void 0 : _a.data) || '', sessionId: this.sessionId, date: item.createdAt, read: item.read, seen: item.seen, language: this.language, "notification-action": this.notificationAction, token: this.token, "backend-url": this.backendUrl, "redirect-url": item.cta.data.url, "translation-url": this.translationUrl }));
|
|
187
|
-
})) : (h("div", { class: "NoMessages" }, h("svg", { width: "120", height: "108", viewBox: "0 0 120 108", fill: "none" }, h("circle", { cx: "11.3191", cy: "30.7872", r: "6.31915", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("ellipse", { cx: "60.117", cy: "27.9787", rx: "5.96809", ry: "5.61702", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M79.5424 49.4934C79.5424 44.1598 77.6437 39.0446 74.2641 35.2732C70.8844 31.5017 66.3006 29.3829 61.5211 29.3829C56.7415 29.3829 52.1578 31.5017 48.7781 35.2732C45.3985 39.0446 43.4998 44.1598 43.4998 49.4934C43.4998 72.9557 34.4892 79.6592 34.4892 79.6592H88.553C88.553 79.6592 79.5424 72.9557 79.5424 49.4934Z", fill: "#292933" }), h("path", { d: "M68.8995 81.7552C68.1496 83.551 67.0731 85.0417 65.778 86.0779C64.4828 87.1141 63.0144 87.6595 61.5198 87.6595C60.0252 87.6595 58.5568 87.1141 57.2617 86.0779C55.9665 85.0417 54.8901 83.551 54.1401 81.7552", fill: "#292933" }), h("path", { d: "M81.2976 50.2203C81.2976 68.2545 87.2222 76.7327 90.2814 79.9083C90.7671 80.4126 90.3802 81.4764 89.68 81.4764C88.0927 81.4764 86.5488 81.4764 85.0422 81.4764M68.5814 82.946C67.6854 84.8068 66.3993 86.3513 64.8518 87.425C63.3044 88.4987 61.5499 89.0638 59.7641 89.0638C57.9783 89.0638 56.2239 88.4987 54.6765 87.425C53.129 86.3513 51.8429 84.8068 50.9468 82.946M79.712 42.3723C78.6394 39.8192 77.0439 37.4727 74.991 35.4861C70.953 31.5783 65.4763 29.3829 59.7656 29.3829C54.055 29.3829 48.5783 31.5783 44.5403 35.4861C43.3681 36.6205 42.345 37.8722 41.4832 39.2127C40.4958 40.7487 39.7202 42.4013 39.1747 44.1276C38.5563 46.0847 38.2337 48.1364 38.2337 50.2203C38.2337 53.2503 38.0665 56.0106 37.7737 58.5212M34.8401 70.7608C32.9874 75.4551 30.7688 78.331 29.2526 79.9055C28.767 80.4099 29.155 81.4764 29.8551 81.4764C47.1962 81.4764 59.3571 81.4764 74.1593 81.4764", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M55.6345 59.0737C55.1665 59.7144 54.4949 60.2462 53.6868 60.6159C52.8787 60.9855 51.9625 61.1801 51.0299 61.1801C50.0973 61.1801 49.1811 60.9855 48.373 60.6159C47.5649 60.2462 46.8933 59.7144 46.4254 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M73.1877 59.0737C72.7197 59.7144 72.0481 60.2462 71.24 60.6159C70.4319 60.9855 69.5157 61.1801 68.5831 61.1801C67.6506 61.1801 66.7344 60.9855 65.9263 60.6159C65.1182 60.2462 64.4465 59.7144 63.9786 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "107.511", cy: "56.0638", r: "7.02128", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "16.4252", cy: "58.1703", r: "4.21277", fill: "#3D3D4D" }), h("ellipse", { cx: "59.9573", cy: "104.511", rx: "25.2766", ry: "2.80851", fill: "#3D3D4D" }), h("path", { d: "M81.5317 18.1489H88.553L81.5317 25.1702H88.553", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M96.6807 2H106.51L96.6807 11.8298H106.51", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", null, translate('noMessages', this.language)))))), !this.isLoading && (h("div", { key: '
|
|
186
|
+
return (h("nuts-notification", { "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, key: item.id, "user-id": this.userId, "operator-id": this.operatorId, content: item.content, "message-id": item.id, badge: ((_a = item.actor) === null || _a === void 0 ? void 0 : _a.data) || '', sessionId: this.sessionId, date: item.createdAt, read: item.read, seen: item.seen, language: this.language, "notification-action": this.notificationAction, token: this.token, "backend-url": this.backendUrl, "redirect-url": item.cta.data.url, "translation-url": this.translationUrl, "max-text-length": 200, "max-lines": 5 }));
|
|
187
|
+
})) : (h("div", { class: "NoMessages" }, h("svg", { width: "120", height: "108", viewBox: "0 0 120 108", fill: "none" }, h("circle", { cx: "11.3191", cy: "30.7872", r: "6.31915", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("ellipse", { cx: "60.117", cy: "27.9787", rx: "5.96809", ry: "5.61702", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M79.5424 49.4934C79.5424 44.1598 77.6437 39.0446 74.2641 35.2732C70.8844 31.5017 66.3006 29.3829 61.5211 29.3829C56.7415 29.3829 52.1578 31.5017 48.7781 35.2732C45.3985 39.0446 43.4998 44.1598 43.4998 49.4934C43.4998 72.9557 34.4892 79.6592 34.4892 79.6592H88.553C88.553 79.6592 79.5424 72.9557 79.5424 49.4934Z", fill: "#292933" }), h("path", { d: "M68.8995 81.7552C68.1496 83.551 67.0731 85.0417 65.778 86.0779C64.4828 87.1141 63.0144 87.6595 61.5198 87.6595C60.0252 87.6595 58.5568 87.1141 57.2617 86.0779C55.9665 85.0417 54.8901 83.551 54.1401 81.7552", fill: "#292933" }), h("path", { d: "M81.2976 50.2203C81.2976 68.2545 87.2222 76.7327 90.2814 79.9083C90.7671 80.4126 90.3802 81.4764 89.68 81.4764C88.0927 81.4764 86.5488 81.4764 85.0422 81.4764M68.5814 82.946C67.6854 84.8068 66.3993 86.3513 64.8518 87.425C63.3044 88.4987 61.5499 89.0638 59.7641 89.0638C57.9783 89.0638 56.2239 88.4987 54.6765 87.425C53.129 86.3513 51.8429 84.8068 50.9468 82.946M79.712 42.3723C78.6394 39.8192 77.0439 37.4727 74.991 35.4861C70.953 31.5783 65.4763 29.3829 59.7656 29.3829C54.055 29.3829 48.5783 31.5783 44.5403 35.4861C43.3681 36.6205 42.345 37.8722 41.4832 39.2127C40.4958 40.7487 39.7202 42.4013 39.1747 44.1276C38.5563 46.0847 38.2337 48.1364 38.2337 50.2203C38.2337 53.2503 38.0665 56.0106 37.7737 58.5212M34.8401 70.7608C32.9874 75.4551 30.7688 78.331 29.2526 79.9055C28.767 80.4099 29.155 81.4764 29.8551 81.4764C47.1962 81.4764 59.3571 81.4764 74.1593 81.4764", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M55.6345 59.0737C55.1665 59.7144 54.4949 60.2462 53.6868 60.6159C52.8787 60.9855 51.9625 61.1801 51.0299 61.1801C50.0973 61.1801 49.1811 60.9855 48.373 60.6159C47.5649 60.2462 46.8933 59.7144 46.4254 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M73.1877 59.0737C72.7197 59.7144 72.0481 60.2462 71.24 60.6159C70.4319 60.9855 69.5157 61.1801 68.5831 61.1801C67.6506 61.1801 66.7344 60.9855 65.9263 60.6159C65.1182 60.2462 64.4465 59.7144 63.9786 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "107.511", cy: "56.0638", r: "7.02128", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "16.4252", cy: "58.1703", r: "4.21277", fill: "#3D3D4D" }), h("ellipse", { cx: "59.9573", cy: "104.511", rx: "25.2766", ry: "2.80851", fill: "#3D3D4D" }), h("path", { d: "M81.5317 18.1489H88.553L81.5317 25.1702H88.553", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M96.6807 2H106.51L96.6807 11.8298H106.51", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", null, translate('noMessages', this.language)))))), !this.isLoading && (h("div", { key: 'ac051bc217b20856ee2fbb05c164740a2ce15034', class: "Pagination" }, h("div", { key: '4103c2541b1534674f4a395782b57cb7f412e635', class: "Button" }, h("button", { key: 'b5ea8a82ad305692ba6b7e27de3156df8755b41a', disabled: this.isNotificationsLoading || this.currentPage <= 0, onClick: this.prevPage }, h("svg", { key: '84a373abf56f161f2f566c617c2227d713bfbad5', class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { key: 'a8c8e4d65eb525f98db3a9f3770c64a4cff44b0e', d: "M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z" })), translate('prev', this.language))), h("div", { key: '20b18543fe251fe1f2b67e002fa07ec9be8146e7', class: "Button" }, h("button", { key: '797168392bd58e443953ccac835e33660956ea27', disabled: this.isNotificationsLoading || !this.hasMore, onClick: this.nextPage }, translate('next', this.language), h("svg", { key: '3602fbc69f946074355405ec83075069bb3787c1', class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { key: '679cc4531c96fe91bbdc027acfee1eb71240495d', d: "M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z" }))))))));
|
|
188
188
|
}
|
|
189
189
|
static get is() { return "nuts-popover"; }
|
|
190
190
|
static get originalStyleUrls() {
|
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
export const truncate = (str, n) => {
|
|
1
|
+
export const truncate = (str, n, l) => {
|
|
2
2
|
if (!str || n < 0) {
|
|
3
3
|
return;
|
|
4
4
|
}
|
|
5
|
-
|
|
5
|
+
if (str.length > n) {
|
|
6
|
+
return str.slice(0, n - 1) + '...';
|
|
7
|
+
}
|
|
8
|
+
const matches = [...str.matchAll(/<br\s*\/?>|<\/p>/gi)];
|
|
9
|
+
if (matches.length >= l) {
|
|
10
|
+
const cutoffIndex = matches[l - 1].index;
|
|
11
|
+
return str.slice(0, cutoffIndex) + '...';
|
|
12
|
+
}
|
|
13
|
+
return str;
|
|
6
14
|
};
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["nuts-inbox-widget_3",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
8
|
+
return bootstrapLazy([["nuts-inbox-widget_3",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"maxTextLength":[514,"max-text-length"],"maxLines":[514,"max-lines"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -16,5 +16,5 @@ var patchBrowser = () => {
|
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(async (options) => {
|
|
18
18
|
await globalScripts();
|
|
19
|
-
return bootstrapLazy([["nuts-inbox-widget_3",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
19
|
+
return bootstrapLazy([["nuts-inbox-widget_3",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"subscriberId":[513,"subscriber-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"notificationAction":[513,"notification-action"],"translationUrl":[513,"translation-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]},[[8,"click","clickOutsideHandle"],[0,"allNotificationsRead","resetUnseenCount"],[8,"closePopover","closePopoverHandler"]],{"subscriberId":["initializeHandler"],"operatorId":["initializeHandler"],"applicationIdentifier":["initializeHandler"],"deviceId":["initializeHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"sessionId":[513,"session-id"],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStylingUrl":[513,"client-styling-url"],"notificationAction":[513,"notification-action"],"clientStyling":[1537,"client-styling"],"translationUrl":[513,"translation-url"],"notifications":[32],"isLoading":[32],"isNotificationsLoading":[32],"showMarkAll":[32],"limitStylingAppends":[32],"showDeleteAllPopup":[32],"hasMore":[32]},[[8,"messageDeleted","messageDeletedHandler"],[8,"messageRead","messageReadHandler"],[8,"click","clickOutsideHandle"]],{"unseenCount":["unseenCountHandler"],"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"sessionId":[513,"session-id"],"subscriberId":[513,"subscriber-id"],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"redirectUrl":[513,"redirect-url"],"notificationAction":[513,"notification-action"],"clientStylingUrl":[513,"client-styling-url"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"maxTextLength":[514,"max-text-length"],"maxLines":[514,"max-lines"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32],"displayedContent":[32],"limitStylingAppends":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"],[8,"click","clickOutsideHandle"]],{"clientStyling":["handleStylingChange"],"clientStylingUrl":["handleStylingUrlChange"],"translationUrl":["handleNewTranslations"]}]]]], options);
|
|
20
20
|
});
|