@everymatrix/nuts-inbox-widget 1.74.11 → 1.75.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/cjs/nuts-inbox-widget_3.cjs.entry.js +29 -11
  2. package/dist/collection/api/methods/index.js +6 -0
  3. package/dist/collection/cache/notification-cache.js +9 -3
  4. package/dist/collection/components/nuts-notification/nuts-notification.js +14 -8
  5. package/dist/esm/nuts-inbox-widget_3.entry.js +29 -11
  6. package/dist/nuts-inbox-widget/nuts-inbox-widget_3.entry.js +1 -1
  7. package/dist/types/cache/notification-cache.d.ts +1 -0
  8. package/package.json +1 -1
  9. /package/dist/types/Users/{StefanO/Desktop/Proj → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/libs/common/src/storybook/storybook-utils.d.ts +0 -0
  10. /package/dist/types/Users/{StefanO/Desktop/Proj → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/packages/stencil/nuts-inbox-widget/stencil.config.d.ts +0 -0
  11. /package/dist/types/Users/{StefanO/Desktop/Proj → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/packages/stencil/nuts-inbox-widget/stencil.config.dev.d.ts +0 -0
  12. /package/dist/types/Users/{StefanO/Desktop/Proj → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/packages/stencil/nuts-inbox-widget/storybook/main.d.ts +0 -0
  13. /package/dist/types/Users/{StefanO/Desktop/Proj → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/packages/stencil/nuts-inbox-widget/storybook/preview.d.ts +0 -0
  14. /package/dist/types/Users/{StefanO/Desktop/Proj → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/tools/plugins/index.d.ts +0 -0
  15. /package/dist/types/Users/{StefanO/Desktop/Proj → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/tools/plugins/stencil-clean-deps-plugin.d.ts +0 -0
  16. /package/dist/types/Users/{StefanO/Desktop/Proj → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/tools/plugins/vite-chunk-plugin.d.ts +0 -0
  17. /package/dist/types/Users/{StefanO/Desktop/Proj → maria.bumbar/Desktop/Widgets & Template}/widgets-monorepo/packages/stencil/nuts-inbox-widget/.stencil/tools/plugins/vite-clean-deps-plugin.d.ts +0 -0
@@ -4104,6 +4104,12 @@ const initializeSession = async ({ baseUrl, body, sessionId }) => {
4104
4104
  };
4105
4105
  try {
4106
4106
  const res = await fetch(url.href, options);
4107
+ if (!res.ok) {
4108
+ return {
4109
+ token: null,
4110
+ unseenCounter: 0
4111
+ };
4112
+ }
4107
4113
  const { data } = await res.json();
4108
4114
  const newToken = data === null || data === void 0 ? void 0 : data.token;
4109
4115
  headers.append('Widget-Authorization', `Bearer ${newToken}`);
@@ -4267,7 +4273,7 @@ class NotificationCache {
4267
4273
  this.syncCurrentPage();
4268
4274
  }
4269
4275
  updateCache(notifications) {
4270
- this.cache.clear();
4276
+ this.resetCache();
4271
4277
  const pageCount = Math.ceil(notifications.length / this.PAGE_SIZE);
4272
4278
  for (let i = 0; i < pageCount; i++) {
4273
4279
  const pageNotifications = notifications.slice(i * this.PAGE_SIZE, (i + 1) * this.PAGE_SIZE);
@@ -4288,6 +4294,9 @@ class NotificationCache {
4288
4294
  this.updateCache(updatedNotifications);
4289
4295
  }
4290
4296
  addToFront(notification) {
4297
+ if (!this.cache.get(0)) {
4298
+ return;
4299
+ }
4291
4300
  const updatedNotifications = [notification, ...this.getAllFromCache()];
4292
4301
  this.updateCache(updatedNotifications);
4293
4302
  }
@@ -4300,9 +4309,12 @@ class NotificationCache {
4300
4309
  this.updateCache(updatedNotifications);
4301
4310
  }
4302
4311
  clearAll() {
4312
+ this.resetCache();
4313
+ this.setCurrentPage(0);
4314
+ }
4315
+ resetCache() {
4303
4316
  this.cache.clear();
4304
- this.currentPage = 0;
4305
- this.syncCurrentPage();
4317
+ this.cache.set(0, { notifications: [], hasMore: false });
4306
4318
  }
4307
4319
  async loadPageFromApi(page, loader) {
4308
4320
  if (this.cache.has(page)) {
@@ -42374,22 +42386,28 @@ const NutsNotification = class {
42374
42386
  event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
42375
42387
  const unread = this.messageRead;
42376
42388
  const markAsReadBody = {
42377
- messageId: `${this.messageId}`,
42389
+ messageId: this.messageId,
42378
42390
  mark: {
42379
42391
  seen: !unread,
42380
42392
  read: !unread
42381
42393
  }
42382
42394
  };
42383
- const notificationData = await markAsRead({
42395
+ const { messageRead, messageSeen, showSettingsModal } = await markAsRead({
42384
42396
  baseUrl: this.baseUrl,
42385
42397
  body: markAsReadBody,
42386
42398
  token: this.token,
42387
42399
  unread
42388
42400
  });
42389
- this.messageReadEmitter.emit(markAsReadBody);
42390
- this.messageRead = notificationData.messageRead;
42391
- this.messageSeen = notificationData.messageSeen;
42392
- this.showSettingsModal = notificationData.showSettingsModal;
42401
+ this.messageReadEmitter.emit({
42402
+ messageId: this.messageId,
42403
+ mark: {
42404
+ seen: messageSeen,
42405
+ read: messageRead
42406
+ }
42407
+ });
42408
+ this.messageRead = messageRead;
42409
+ this.messageSeen = messageSeen;
42410
+ this.showSettingsModal = showSettingsModal;
42393
42411
  };
42394
42412
  this.deleteNotification = async () => {
42395
42413
  const deleteMessageResponse = await deleteMessage({
@@ -42530,10 +42548,10 @@ const NutsNotification = class {
42530
42548
  ADD_ATTR: ['target'],
42531
42549
  ALLOWED_TAGS: ['b', 'u', 'i', 'br']
42532
42550
  });
42533
- return (index.h("div", { key: '279afad3d2acc4ee86cc381bd1d59e0625fdb055', class: "Wrapper" }, index.h("div", { key: '0352b9daa3da0cfb46b93c45956d52d6668fd0ca', 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: '583209e9dbd0358dece085b567717ddb7815b290', class: "ContentContainer" }, index.h("div", { key: '129e6b29b5161d27771a5fc8d5680ed919c34bd0', innerHTML: sanitizedNotificationBody }), index.h("p", { key: 'ba1cd34a379a348be281977db374794080e8e3ec', class: "Date" }, formatDistanceToNow(new Date(this.date), {
42551
+ return (index.h("div", { key: '358d94581fec81af5bb3027f346c6064d80db0de', class: "Wrapper" }, index.h("div", { key: 'ad5ff48a4b8957c8e5de3a9b766db4588f3fd046', 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: 'd32ac71ae5260d39faafacb227195985b197e2e8', class: "ContentContainer" }, index.h("div", { key: 'ad5d1ba9db8bf9f84836f8787b5c5e23e17179d4', innerHTML: sanitizedNotificationBody }), index.h("p", { key: 'bfd20edda2b7a8a07038da3a16fceb454d0b16f8', class: "Date" }, formatDistanceToNow(new Date(this.date), {
42534
42552
  addSuffix: true,
42535
42553
  locale: dateFnsLocale(this.language)
42536
- }))), index.h("div", { key: '61ae939165abefe752e71907f45c285dcf2a5f6b', class: "RightActionsContainer" }, index.h("div", { key: '29307a2f36682630d9b1dbba05d79cb88ad18902', class: "Settings", onClick: this.toggleSettingsModal }, index.h("svg", { key: '24af08900c8e75d671bbea1fc0c20f2b168fbd22', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '22f67fc5fcde87dc8bd582199eecb0bc41892dee', 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) > MAX_NOTIFICATION_TEXT_LENGTH && (index.h("div", { key: '0a4f7bd20de25d3819439bb33e46bd57e9378d4b', 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)))) : ('')));
42554
+ }))), index.h("div", { key: '09469bd8ba4a0f680c1004cc1015c8de10776791', class: "RightActionsContainer" }, index.h("div", { key: '201c8f47031d61dc05d7b3e33aa1d7ef90bea202', class: "Settings", onClick: this.toggleSettingsModal }, index.h("svg", { key: 'b6dd191937df73ce43a5e3345e5c931a203d0bdd', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '8742031106db8a0de43ab7713edd190a8e638b5b', 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) > MAX_NOTIFICATION_TEXT_LENGTH && (index.h("div", { key: '31d6515c2456a75e38a4be41e24c88f0bb845718', 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)))) : ('')));
42537
42555
  }
42538
42556
  get el() { return index.getElement(this); }
42539
42557
  static get watchers() { return {
@@ -11,6 +11,12 @@ export const initializeSession = async ({ baseUrl, body, sessionId }) => {
11
11
  };
12
12
  try {
13
13
  const res = await fetch(url.href, options);
14
+ if (!res.ok) {
15
+ return {
16
+ token: null,
17
+ unseenCounter: 0
18
+ };
19
+ }
14
20
  const { data } = await res.json();
15
21
  const newToken = data === null || data === void 0 ? void 0 : data.token;
16
22
  headers.append('Widget-Authorization', `Bearer ${newToken}`);
@@ -12,7 +12,7 @@ class NotificationCache {
12
12
  this.syncCurrentPage();
13
13
  }
14
14
  updateCache(notifications) {
15
- this.cache.clear();
15
+ this.resetCache();
16
16
  const pageCount = Math.ceil(notifications.length / this.PAGE_SIZE);
17
17
  for (let i = 0; i < pageCount; i++) {
18
18
  const pageNotifications = notifications.slice(i * this.PAGE_SIZE, (i + 1) * this.PAGE_SIZE);
@@ -33,6 +33,9 @@ class NotificationCache {
33
33
  this.updateCache(updatedNotifications);
34
34
  }
35
35
  addToFront(notification) {
36
+ if (!this.cache.get(0)) {
37
+ return;
38
+ }
36
39
  const updatedNotifications = [notification, ...this.getAllFromCache()];
37
40
  this.updateCache(updatedNotifications);
38
41
  }
@@ -45,9 +48,12 @@ class NotificationCache {
45
48
  this.updateCache(updatedNotifications);
46
49
  }
47
50
  clearAll() {
51
+ this.resetCache();
52
+ this.setCurrentPage(0);
53
+ }
54
+ resetCache() {
48
55
  this.cache.clear();
49
- this.currentPage = 0;
50
- this.syncCurrentPage();
56
+ this.cache.set(0, { notifications: [], hasMore: false });
51
57
  }
52
58
  async loadPageFromApi(page, loader) {
53
59
  if (this.cache.has(page)) {
@@ -59,22 +59,28 @@ export class NutsNotification {
59
59
  event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
60
60
  const unread = this.messageRead;
61
61
  const markAsReadBody = {
62
- messageId: `${this.messageId}`,
62
+ messageId: this.messageId,
63
63
  mark: {
64
64
  seen: !unread,
65
65
  read: !unread
66
66
  }
67
67
  };
68
- const notificationData = await markAsRead({
68
+ const { messageRead, messageSeen, showSettingsModal } = await markAsRead({
69
69
  baseUrl: this.baseUrl,
70
70
  body: markAsReadBody,
71
71
  token: this.token,
72
72
  unread
73
73
  });
74
- this.messageReadEmitter.emit(markAsReadBody);
75
- this.messageRead = notificationData.messageRead;
76
- this.messageSeen = notificationData.messageSeen;
77
- this.showSettingsModal = notificationData.showSettingsModal;
74
+ this.messageReadEmitter.emit({
75
+ messageId: this.messageId,
76
+ mark: {
77
+ seen: messageSeen,
78
+ read: messageRead
79
+ }
80
+ });
81
+ this.messageRead = messageRead;
82
+ this.messageSeen = messageSeen;
83
+ this.showSettingsModal = showSettingsModal;
78
84
  };
79
85
  this.deleteNotification = async () => {
80
86
  const deleteMessageResponse = await deleteMessage({
@@ -215,10 +221,10 @@ export class NutsNotification {
215
221
  ADD_ATTR: ['target'],
216
222
  ALLOWED_TAGS: ['b', 'u', 'i', 'br']
217
223
  });
218
- return (h("div", { key: '279afad3d2acc4ee86cc381bd1d59e0625fdb055', class: "Wrapper" }, h("div", { key: '0352b9daa3da0cfb46b93c45956d52d6668fd0ca', 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: '583209e9dbd0358dece085b567717ddb7815b290', class: "ContentContainer" }, h("div", { key: '129e6b29b5161d27771a5fc8d5680ed919c34bd0', innerHTML: sanitizedNotificationBody }), h("p", { key: 'ba1cd34a379a348be281977db374794080e8e3ec', class: "Date" }, formatDistanceToNow(new Date(this.date), {
224
+ return (h("div", { key: '358d94581fec81af5bb3027f346c6064d80db0de', class: "Wrapper" }, h("div", { key: 'ad5ff48a4b8957c8e5de3a9b766db4588f3fd046', 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: 'd32ac71ae5260d39faafacb227195985b197e2e8', class: "ContentContainer" }, h("div", { key: 'ad5d1ba9db8bf9f84836f8787b5c5e23e17179d4', innerHTML: sanitizedNotificationBody }), h("p", { key: 'bfd20edda2b7a8a07038da3a16fceb454d0b16f8', class: "Date" }, formatDistanceToNow(new Date(this.date), {
219
225
  addSuffix: true,
220
226
  locale: dateFnsLocale(this.language)
221
- }))), h("div", { key: '61ae939165abefe752e71907f45c285dcf2a5f6b', class: "RightActionsContainer" }, h("div", { key: '29307a2f36682630d9b1dbba05d79cb88ad18902', class: "Settings", onClick: this.toggleSettingsModal }, h("svg", { key: '24af08900c8e75d671bbea1fc0c20f2b168fbd22', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '22f67fc5fcde87dc8bd582199eecb0bc41892dee', 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) > MAX_NOTIFICATION_TEXT_LENGTH && (h("div", { key: '0a4f7bd20de25d3819439bb33e46bd57e9378d4b', 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)))) : ('')));
227
+ }))), h("div", { key: '09469bd8ba4a0f680c1004cc1015c8de10776791', class: "RightActionsContainer" }, h("div", { key: '201c8f47031d61dc05d7b3e33aa1d7ef90bea202', class: "Settings", onClick: this.toggleSettingsModal }, h("svg", { key: 'b6dd191937df73ce43a5e3345e5c931a203d0bdd', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8742031106db8a0de43ab7713edd190a8e638b5b', 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) > MAX_NOTIFICATION_TEXT_LENGTH && (h("div", { key: '31d6515c2456a75e38a4be41e24c88f0bb845718', 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)))) : ('')));
222
228
  }
223
229
  static get is() { return "nuts-notification"; }
224
230
  static get originalStyleUrls() {
@@ -4100,6 +4100,12 @@ const initializeSession = async ({ baseUrl, body, sessionId }) => {
4100
4100
  };
4101
4101
  try {
4102
4102
  const res = await fetch(url.href, options);
4103
+ if (!res.ok) {
4104
+ return {
4105
+ token: null,
4106
+ unseenCounter: 0
4107
+ };
4108
+ }
4103
4109
  const { data } = await res.json();
4104
4110
  const newToken = data === null || data === void 0 ? void 0 : data.token;
4105
4111
  headers.append('Widget-Authorization', `Bearer ${newToken}`);
@@ -4263,7 +4269,7 @@ class NotificationCache {
4263
4269
  this.syncCurrentPage();
4264
4270
  }
4265
4271
  updateCache(notifications) {
4266
- this.cache.clear();
4272
+ this.resetCache();
4267
4273
  const pageCount = Math.ceil(notifications.length / this.PAGE_SIZE);
4268
4274
  for (let i = 0; i < pageCount; i++) {
4269
4275
  const pageNotifications = notifications.slice(i * this.PAGE_SIZE, (i + 1) * this.PAGE_SIZE);
@@ -4284,6 +4290,9 @@ class NotificationCache {
4284
4290
  this.updateCache(updatedNotifications);
4285
4291
  }
4286
4292
  addToFront(notification) {
4293
+ if (!this.cache.get(0)) {
4294
+ return;
4295
+ }
4287
4296
  const updatedNotifications = [notification, ...this.getAllFromCache()];
4288
4297
  this.updateCache(updatedNotifications);
4289
4298
  }
@@ -4296,9 +4305,12 @@ class NotificationCache {
4296
4305
  this.updateCache(updatedNotifications);
4297
4306
  }
4298
4307
  clearAll() {
4308
+ this.resetCache();
4309
+ this.setCurrentPage(0);
4310
+ }
4311
+ resetCache() {
4299
4312
  this.cache.clear();
4300
- this.currentPage = 0;
4301
- this.syncCurrentPage();
4313
+ this.cache.set(0, { notifications: [], hasMore: false });
4302
4314
  }
4303
4315
  async loadPageFromApi(page, loader) {
4304
4316
  if (this.cache.has(page)) {
@@ -42370,22 +42382,28 @@ const NutsNotification = class {
42370
42382
  event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
42371
42383
  const unread = this.messageRead;
42372
42384
  const markAsReadBody = {
42373
- messageId: `${this.messageId}`,
42385
+ messageId: this.messageId,
42374
42386
  mark: {
42375
42387
  seen: !unread,
42376
42388
  read: !unread
42377
42389
  }
42378
42390
  };
42379
- const notificationData = await markAsRead({
42391
+ const { messageRead, messageSeen, showSettingsModal } = await markAsRead({
42380
42392
  baseUrl: this.baseUrl,
42381
42393
  body: markAsReadBody,
42382
42394
  token: this.token,
42383
42395
  unread
42384
42396
  });
42385
- this.messageReadEmitter.emit(markAsReadBody);
42386
- this.messageRead = notificationData.messageRead;
42387
- this.messageSeen = notificationData.messageSeen;
42388
- this.showSettingsModal = notificationData.showSettingsModal;
42397
+ this.messageReadEmitter.emit({
42398
+ messageId: this.messageId,
42399
+ mark: {
42400
+ seen: messageSeen,
42401
+ read: messageRead
42402
+ }
42403
+ });
42404
+ this.messageRead = messageRead;
42405
+ this.messageSeen = messageSeen;
42406
+ this.showSettingsModal = showSettingsModal;
42389
42407
  };
42390
42408
  this.deleteNotification = async () => {
42391
42409
  const deleteMessageResponse = await deleteMessage({
@@ -42526,10 +42544,10 @@ const NutsNotification = class {
42526
42544
  ADD_ATTR: ['target'],
42527
42545
  ALLOWED_TAGS: ['b', 'u', 'i', 'br']
42528
42546
  });
42529
- return (h("div", { key: '279afad3d2acc4ee86cc381bd1d59e0625fdb055', class: "Wrapper" }, h("div", { key: '0352b9daa3da0cfb46b93c45956d52d6668fd0ca', 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: '583209e9dbd0358dece085b567717ddb7815b290', class: "ContentContainer" }, h("div", { key: '129e6b29b5161d27771a5fc8d5680ed919c34bd0', innerHTML: sanitizedNotificationBody }), h("p", { key: 'ba1cd34a379a348be281977db374794080e8e3ec', class: "Date" }, formatDistanceToNow(new Date(this.date), {
42547
+ return (h("div", { key: '358d94581fec81af5bb3027f346c6064d80db0de', class: "Wrapper" }, h("div", { key: 'ad5ff48a4b8957c8e5de3a9b766db4588f3fd046', 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: 'd32ac71ae5260d39faafacb227195985b197e2e8', class: "ContentContainer" }, h("div", { key: 'ad5d1ba9db8bf9f84836f8787b5c5e23e17179d4', innerHTML: sanitizedNotificationBody }), h("p", { key: 'bfd20edda2b7a8a07038da3a16fceb454d0b16f8', class: "Date" }, formatDistanceToNow(new Date(this.date), {
42530
42548
  addSuffix: true,
42531
42549
  locale: dateFnsLocale(this.language)
42532
- }))), h("div", { key: '61ae939165abefe752e71907f45c285dcf2a5f6b', class: "RightActionsContainer" }, h("div", { key: '29307a2f36682630d9b1dbba05d79cb88ad18902', class: "Settings", onClick: this.toggleSettingsModal }, h("svg", { key: '24af08900c8e75d671bbea1fc0c20f2b168fbd22', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '22f67fc5fcde87dc8bd582199eecb0bc41892dee', 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) > MAX_NOTIFICATION_TEXT_LENGTH && (h("div", { key: '0a4f7bd20de25d3819439bb33e46bd57e9378d4b', 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$1(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$1('removeMessage', this.language)))) : ('')));
42550
+ }))), h("div", { key: '09469bd8ba4a0f680c1004cc1015c8de10776791', class: "RightActionsContainer" }, h("div", { key: '201c8f47031d61dc05d7b3e33aa1d7ef90bea202', class: "Settings", onClick: this.toggleSettingsModal }, h("svg", { key: 'b6dd191937df73ce43a5e3345e5c931a203d0bdd', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8742031106db8a0de43ab7713edd190a8e638b5b', 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) > MAX_NOTIFICATION_TEXT_LENGTH && (h("div", { key: '31d6515c2456a75e38a4be41e24c88f0bb845718', 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$1(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$1('removeMessage', this.language)))) : ('')));
42533
42551
  }
42534
42552
  get el() { return getElement(this); }
42535
42553
  static get watchers() { return {