@everymatrix/nuts-inbox-widget 0.0.9 → 1.44.0

package/dist/components/nuts-notification2.js

@@ -8,19 +8,27 @@ const TRANSLATIONS = {
     noMessages: 'Nothing new to see here yet',
     markAllAsRead: 'Mark all as read',
     markAsRead: 'Mark as read',
-    removeMessage: 'Remove the message'
+    markAsUnread: 'Mark as unread',
+    removeMessage: 'Remove the message',
+    next: 'Next',
+    prev: 'Previous',
   },
   hu: {
     notifications: 'értesítéseket',
     noMessages: 'Itt még semmi újat nem látni',
     markAllAsRead: 'összes megjelölése olvasottként',
     markAsRead: 'Jelöld olvasottként',
-    removeMessage: 'Távolítsa el az üzenetet'
-  }
+    markAsUnread: 'Megjelölés olvasatlanként',
+    removeMessage: 'Távolítsa el az üzenetet',
+    next: 'Következő',
+    prev: 'Előző',
+  },
 };
 const translate$1 = (key, customLang, values) => {
   const lang = customLang;
-  let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+  let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang)
+    ? lang
+    : DEFAULT_LANGUAGE][key];
   if (values !== undefined) {
     for (const [key, value] of Object.entries(values.values)) {
       const regex = new RegExp(`{${key}}`, 'g');
@@ -45,6 +53,159 @@ const getTranslations = (url) => {
   });
 };
 
+const initializeSession = async ({ baseUrl, body, headers, }) => {
+  var _a;
+  const url = new URL(`${baseUrl}/widgets/session/initialize`);
+  const localHeaders = new Headers(headers);
+  localHeaders.append('Content-Type', 'application/json');
+  const options = {
+    method: 'POST',
+    body: JSON.stringify(body),
+    headers: localHeaders,
+  };
+  try {
+    const res = await fetch(url.href, options);
+    const data = await res.json();
+    const newToken = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.token;
+    headers.append('Widget-Authorization', `Bearer ${newToken}`);
+    const unseenCounter = await getUnseenCount({
+      baseUrl,
+      headers,
+    });
+    return {
+      token: newToken,
+      unseenCounter,
+    };
+  }
+  catch (error) {
+    console.log(error);
+    return {
+      token: null,
+      unseenCounter: 0,
+    };
+  }
+};
+const getUnseenCount = async ({ baseUrl, headers, }) => {
+  var _a;
+  const url = new URL(`${baseUrl}/widgets/notifications/unseen?limit=100`);
+  const options = {
+    method: 'GET',
+    headers,
+  };
+  try {
+    const res = await fetch(url.href, options);
+    const data = await res.json();
+    const unseenCount = ((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.count) || 0;
+    return unseenCount;
+  }
+  catch (error) {
+    console.log(error);
+    return 0;
+  }
+};
+const deleteMessage = async ({ baseUrl, headers, messageId, }) => {
+  const url = new URL(`${baseUrl}/widgets/messages/${messageId}`);
+  const options = {
+    method: 'DELETE',
+    headers,
+  };
+  try {
+    await fetch(url.href, options);
+    return false;
+  }
+  catch (error) {
+    console.log(error);
+    return true;
+  }
+};
+const markAsRead = async ({ baseUrl, body, headers, unread, }) => {
+  const url = new URL(`${baseUrl}/widgets/messages/markAs`);
+  const localHeaders = new Headers(headers);
+  localHeaders.append('Content-Type', 'application/json');
+  const options = {
+    method: 'POST',
+    headers: localHeaders,
+    body: JSON.stringify(body),
+  };
+  try {
+    const res = await fetch(url.href, options);
+    const data = await res.json();
+    return {
+      messageSeen: data.data[0].seen,
+      messageRead: data.data[0].read,
+      showSettingsModal: false,
+    };
+  }
+  catch (err) {
+    console.error('err', err);
+    return {
+      messageSeen: unread,
+      messageRead: unread,
+      showSettingsModal: true,
+    };
+  }
+};
+const getNotifications = async ({ baseUrl, headers, page, }) => {
+  const url = new URL(`${baseUrl}/widgets/notifications/feed`);
+  url.searchParams.append('page', page.toString());
+  const options = {
+    method: 'GET',
+    headers,
+  };
+  try {
+    const res = await fetch(url.href, options);
+    const data = await res.json();
+    return {
+      isLoading: false,
+      numberOfNotifications: data.totalCount,
+      notifications: data.data,
+    };
+  }
+  catch (error) {
+    console.log(error);
+    return {
+      isLoading: false,
+      numberOfNotifications: 0,
+      notifications: [],
+    };
+  }
+};
+const markAllAsRead = async ({ baseUrl, headers, }) => {
+  const url = new URL(`${baseUrl}/widgets/messages/read`);
+  const localHeaders = new Headers(headers);
+  localHeaders.append('Content-Type', 'application/json');
+  const options = {
+    method: 'POST',
+    body: JSON.stringify({}),
+    headers: localHeaders,
+  };
+  try {
+    await fetch(url.href, options);
+    return true;
+  }
+  catch (error) {
+    console.log(error);
+    return false;
+  }
+};
+
+const createAuthHeaders = (token, sessionId, admin) => {
+  const headers = new Headers();
+  if (token) {
+    headers.append('Widget-Authorization', `Bearer ${token}`);
+  }
+  if (admin) {
+    headers.append('Authorization', sessionId);
+  }
+  return headers;
+};
+const truncate = (str, n) => {
+  if (!str || n < 0) {
+    return;
+  }
+  return str.length > n ? str.slice(0, n - 1) + '...' : str;
+};
+
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -35671,6 +35832,9 @@ var CheckCircleFilled = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 8
 // This icon file is generated automatically.
 var CloseCircleFilled = { "icon": { "tag": "svg", "attrs": { "fill-rule": "evenodd", "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" } }] }, "name": "close-circle", "theme": "filled" };
 
+// This icon file is generated automatically.
+var DownOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" } }] }, "name": "down", "theme": "outlined" };
+
 // This icon file is generated automatically.
 var InfoCircleFilled = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" } }] }, "name": "info-circle", "theme": "filled" };
 
@@ -35728,26 +35892,45 @@ function renderAbstractNodeToSVGElement(node, options) {
     return "<".concat(node.tag).concat(attrsToken, " />");
 }
 
-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;opacity:0;transform-origin:top center;padding:15px;position:relative;display:flex;line-height:20px;justify-content:flex-start;align-items:center;border-radius:7px;margin:10px 15px;color:var(--emfe-w-color-white, white);background:var(--emfe-w-color-gray-400, #23232b);font-weight:400;font-size:14px}@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(--emfe-w-color-gray-200, #525266);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}.NotificationContainer .Date{min-width:55px;font-size:12px;font-weight:400;opacity:0.5;line-height:14.4px;color:var(--emfe-w-color-gray-200, #525266)}.NotificationContainer .Settings{opacity:0;margin-left:auto;cursor:pointer}.NotificationContainer:hover .Settings{opacity:0.5}.Unseen::before{content:\"\";position:absolute;inset:0px;width:5px;border-radius:7px 0px 0px 7px;background:linear-gradient(0deg, var(--emfe-w-color-secondary-20, #ff512f) 0%, var(--emfe-w-color-secondary, #dd2476) 100%)}.Unseen:hover .UnseenButton{opacity:0;width:0px}.SettingsDropdown{z-index:999;position:absolute;background:var(--emfe-w-color-gray-400, #292933);box-shadow:var(--emfe-w-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;margin-left:195px;margin-top:-30px}.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(--emfe-w-color-white, white);font-weight:400;font-size:14px}.SettingsDropdown button:hover{background:var(--emfe-w-color-gray-300, #3d3d4d);transition:300ms}";
+const MAX_NOTIFICATION_TEXT_LENGTH = 150;
+
+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;opacity:0;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(--emfe-w-color-white, white);background:var(--emfe-w-color-gray-400, #23232b);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(--emfe-w-color-gray-200, #525266);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-all}.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(--emfe-w-color-gray-200, #525266)}.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(--emfe-w-color-secondary-20, #ff512f) 0%, var(--emfe-w-color-secondary, #dd2476) 100%)}.Unseen:hover .UnseenButton{display:none}.SettingsDropdown{z-index:999;position:absolute;background:var(--emfe-w-color-gray-400, #292933);box-shadow:var(--emfe-w-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(--emfe-w-color-white, white);font-weight:400;font-size:14px}.SettingsDropdown button:hover{background:var(--emfe-w-color-gray-300, #3d3d4d);transition:300ms}.Wrapper{position:relative}";
 
 const systemIcons = {
   warning: {
-    icon: renderIconDefinitionToSVGElement(WarningFilled, { extraSVGAttrs: { width: '20px', height: '20px', fill: '#FFF000' } }),
+    icon: renderIconDefinitionToSVGElement(WarningFilled, {
+      extraSVGAttrs: { width: '20px', height: '20px', fill: '#FFF000' },
+    }),
   },
   info: {
-    icon: renderIconDefinitionToSVGElement(InfoCircleFilled, { extraSVGAttrs: { width: '20px', height: '20px', fill: '#0000FF' } }),
+    icon: renderIconDefinitionToSVGElement(InfoCircleFilled, {
+      extraSVGAttrs: { width: '20px', height: '20px', fill: '#0000FF' },
+    }),
   },
   up: {
-    icon: renderIconDefinitionToSVGElement(UpCircleFilled, { extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' } }),
+    icon: renderIconDefinitionToSVGElement(UpCircleFilled, {
+      extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' },
+    }),
   },
   question: {
-    icon: renderIconDefinitionToSVGElement(QuestionCircleFilled, { extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' } }),
+    icon: renderIconDefinitionToSVGElement(QuestionCircleFilled, {
+      extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' },
+    }),
   },
   success: {
-    icon: renderIconDefinitionToSVGElement(CheckCircleFilled, { extraSVGAttrs: { width: '20px', height: '20px', fill: '#4D9980' } }),
+    icon: renderIconDefinitionToSVGElement(CheckCircleFilled, {
+      extraSVGAttrs: { width: '20px', height: '20px', fill: '#4D9980' },
+    }),
   },
   error: {
-    icon: renderIconDefinitionToSVGElement(CloseCircleFilled, { extraSVGAttrs: { width: '20px', height: '20px', fill: '#E54545' } }),
+    icon: renderIconDefinitionToSVGElement(CloseCircleFilled, {
+      extraSVGAttrs: { width: '20px', height: '20px', fill: '#E54545' },
+    }),
+  },
+  arrowDown: {
+    icon: renderIconDefinitionToSVGElement(DownOutlined, {
+      extraSVGAttrs: { width: '16px', height: '16px', fill: '#A1A1B2' },
+    }),
   },
 };
 const dateFnsLocale = (lang) => {
@@ -35770,6 +35953,68 @@ const NutsNotification = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.showSettingsModal = false;
     this.messageSeen = false;
     this.messageRead = false;
+    this.toggleSettingsModal = (e) => {
+      e.stopImmediatePropagation();
+      this.showSettingsModal = !this.showSettingsModal;
+      this.settingsOpened.emit(this.messageId);
+    };
+    this.toggleNotificationRead = async (event) => {
+      event === null || event === void 0 ? void 0 : event.stopImmediatePropagation();
+      const unread = this.messageRead;
+      const markAsReadBody = {
+        messageId: `${this.messageId}`,
+        mark: {
+          seen: !unread,
+          read: !unread,
+        },
+      };
+      const notificationData = await markAsRead({
+        baseUrl: this.baseUrl,
+        body: markAsReadBody,
+        headers: this.defaultHeaders,
+        unread,
+      });
+      this.messageRead = notificationData.messageRead;
+      this.messageSeen = notificationData.messageSeen;
+      this.showSettingsModal = notificationData.showSettingsModal;
+    };
+    this.deleteNotification = async () => {
+      const deleteMessageResponse = await deleteMessage({
+        baseUrl: this.baseUrl,
+        headers: this.defaultHeaders,
+        messageId: this.messageId,
+      });
+      this.showSettingsModal = deleteMessageResponse;
+      if (deleteMessageResponse) {
+        return;
+      }
+      this.messageDeteled.emit(this.messageId);
+    };
+    this.notificationActionHandler = () => {
+      var _a, _b, _c;
+      if (this.notificationAction == 'default' || !this.notificationAction) {
+        if (this.redirectUrl.length > 0) {
+          window.location.href = this.redirectUrl;
+        }
+      }
+      if (this.notificationAction == 'postMessage') {
+        window.postMessage({ type: 'NotificationRedirect', url: this.redirectUrl }, window.location.href);
+      }
+      if (!this.messageRead) {
+        this.toggleNotificationRead();
+      }
+      if (((_a = this.content) === null || _a === void 0 ? void 0 : _a.length) <= MAX_NOTIFICATION_TEXT_LENGTH) {
+        return;
+      }
+      if (((_b = this.displayedContent) === null || _b === void 0 ? void 0 : _b.length) !== ((_c = this.content) === null || _c === void 0 ? void 0 : _c.length) &&
+        this.displayedContent !== this.content) {
+        this.displayedContent = this.content;
+        this.dropdownArrowRef.classList.add('FlipX');
+        return;
+      }
+      this.displayedContent = truncate(this.content, MAX_NOTIFICATION_TEXT_LENGTH);
+      this.dropdownArrowRef.classList.remove('FlipX');
+    };
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -35782,12 +36027,20 @@ const NutsNotification = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
         .then((res) => res.text())
         .then((data) => {
         cssFile.innerHTML = data;
-        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+        setTimeout(() => {
+          this.stylingContainer.prepend(cssFile);
+        }, 1);
       })
         .catch((err) => {
         console.log('error ', err);
       });
     };
+    this.assignRefToStylingContainer = (ref) => {
+      this.stylingContainer = ref;
+    };
+    this.assignRefToDropdownArrow = (ref) => {
+      this.dropdownArrowRef = ref;
+    };
   }
   allNotificationsReadHandler() {
     this.messageSeen = true;
@@ -35809,78 +36062,16 @@ const NutsNotification = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   connectedCallback() {
     this.messageSeen = this.seen;
     this.messageRead = this.read;
-  }
-  deleteMessage(messageId) {
-    let url = new URL(`${this.backendUrl}/v1/widgets/messages/${messageId}`);
-    const headers = new Headers();
-    headers.append('Authorization', `Bearer ${this.token || ''}`);
-    const options = {
-      method: 'DELETE',
-      headers,
-    };
-    fetch(url.href, options)
-      .then((res) => res.json())
-      .then(() => {
-      this.showSettingsModal = false;
-      this.messageDeteled.emit(messageId);
-    })
-      .catch((err) => {
-      console.error('err', err);
-    });
-  }
-  markAsRead(messageId) {
-    let url = new URL(`${this.backendUrl}/v1/widgets/messages/markAs`);
-    const headers = new Headers();
-    headers.append('Authorization', `Bearer ${this.token || ''}`);
-    headers.append('Content-Type', 'application/json');
-    const body = {
-      messageId: `${messageId}`,
-      mark: {
-        seen: true,
-        read: true
-      }
-    };
-    const options = {
-      method: 'POST',
-      headers,
-      body: JSON.stringify(body)
-    };
-    fetch(url.href, options)
-      .then((res) => res.json())
-      .then((response) => {
-      this.messageSeen = response.data[0].seen;
-      this.messageRead = response.data[0].read;
-      this.showSettingsModal = false;
-    })
-      .catch((err) => {
-      console.error('err', err);
-    });
-  }
-  toggleSettingsModal(e) {
-    e.stopImmediatePropagation();
-    this.showSettingsModal = !this.showSettingsModal;
-    if (this.showSettingsModal) {
-      let rect = this.settingsButtonRef.getBoundingClientRect();
-      this.settingsModalRef.style.left = `${rect.left}px`;
-      this.settingsModalRef.style.top = `${rect.top}px`;
-      this.settingsOpened.emit(this.messageId);
-    }
-  }
-  notificationActionHandler() {
-    if (this.notificationAction == 'default' || !this.notificationAction) {
-      if (this.redirectUrl.length > 0) {
-        window.location.href = this.redirectUrl;
-      }
-    }
-    if (this.notificationAction == 'postMessage') {
-      window.postMessage({ type: 'NotificationRedirect', url: this.redirectUrl }, window.location.href);
-    }
+    this.displayedContent = truncate(this.content, MAX_NOTIFICATION_TEXT_LENGTH);
+    this.defaultHeaders = createAuthHeaders(this.token, this.sessionId, this.admin);
+    this.baseUrl = `${this.backendUrl}/v1/${this.operatorId}`;
   }
   render() {
-    var _a;
-    return (h("div", null, h("div", { class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: el => this.stylingContainer = el, 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", { class: "ContentContainer" }, h("p", null, this.content), h("p", { class: "Date" }, formatDistanceToNow(new Date(this.date), { addSuffix: true, locale: dateFnsLocale(this.language) }))), h("div", { class: "Settings", onClick: (e) => this.toggleSettingsModal(e), ref: el => this.settingsButtonRef = el }, h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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" }))), this.messageSeen ? '' : h("div", { class: "UnseenButton" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 16 16", fill: "none" }, h("rect", { x: "1.5", y: "1.5", width: "13", height: "13", rx: "6.5", fill: "url(#paint0_linear_1722_2699)", stroke: "#1E1E26", "stroke-width": "3" }), h("defs", null, h("linearGradient", { id: "paint0_linear_1722_2699", x1: "8", y1: "13", x2: "8", y2: "3", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": "#FF512F" }), h("stop", { offset: "1", "stop-color": "#DD2476" })))))), this.showSettingsModal ? h("div", { class: "SettingsDropdown", ref: el => this.settingsModalRef = el }, h("button", { onClick: () => this.markAsRead(this.messageId) }, 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('markAsRead', this.language)), h("button", { onClick: () => this.deleteMessage(this.messageId) }, 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))) : ''));
+    var _a, _b;
+    return (h("div", { class: "Wrapper" }, h("div", { 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", { class: "ContentContainer" }, h("p", null, this.displayedContent), h("p", { class: "Date" }, formatDistanceToNow(new Date(this.date), {
+      addSuffix: true,
+      locale: dateFnsLocale(this.language),
+    }))), h("div", { class: "RightActionsContainer" }, h("div", { class: "Settings", onClick: this.toggleSettingsModal }, h("svg", { width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { 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", { 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)))) : ('')));
   }
   static get watchers() { return {
     "translationUrl": ["handleNewTranslations"]
@@ -35894,6 +36085,8 @@ const NutsNotification = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "read": [516],
     "seen": [516],
     "language": [513],
+    "sessionId": [513, "session-id"],
+    "admin": [516],
     "userId": [513, "user-id"],
     "messageId": [513, "message-id"],
     "operatorId": [513, "operator-id"],
@@ -35906,7 +36099,8 @@ const NutsNotification = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "clientStyling": [1537, "client-styling"],
     "showSettingsModal": [32],
     "messageSeen": [32],
-    "messageRead": [32]
+    "messageRead": [32],
+    "displayedContent": [32]
   }, [[8, "allNotificationsRead", "allNotificationsReadHandler"], [8, "settingsOpened", "settingsOpenedHandler"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -35922,4 +36116,4 @@ function defineCustomElement() {
   } });
 }
 
-export { NutsNotification as N, defineCustomElement as d, getTranslations as g, translate$1 as t };
+export { NutsNotification as N, getNotifications as a, createAuthHeaders as c, defineCustomElement as d, getTranslations as g, initializeSession as i, markAllAsRead as m, translate$1 as t };