npm - @everymatrix/nuts-inbox-widget - Versions diffs - 0.0.9 → 0.0.10 - Mend

@everymatrix/nuts-inbox-widget 0.0.9 → 0.0.10

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 (12) hide show

package/dist/cjs/nuts-inbox-widget_3.cjs.entry.js CHANGED Viewed

@@ -43,14 +43,18 @@ const TRANSLATIONS = {
     noMessages: 'Nothing new to see here yet',
     markAllAsRead: 'Mark all as read',
     markAsRead: 'Mark as read',
-    removeMessage: 'Remove the message'
+    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'
+    removeMessage: 'Távolítsa el az üzenetet',
+    next: 'Következő',
+    prev: 'Előző'
   }
 };
 const translate$1 = (key, customLang, values) => {
@@ -40098,7 +40102,7 @@ const NutsNotification = class {
 };
 NutsNotification.style = nutsNotificationCss;
-const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emfe-w-color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emfe-w-color-gray-300, #1e1e26);margin:0px;font-family:inherit;color:var(--emfe-w-color-gray-200, #333737);direction:ltr;width:420px;z-index:999}.Popover .Header{display:flex;justify-content:space-between;padding:0 20px 10px 20px;box-shadow:var(--emfe-w-color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emfe-w-color-white, white);font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px}.Popover .Header .Title .UnseenCounter{text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:10px;letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;margin-left:10px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emfe-w-color-secondary-20, #ff512f) 0%, var(--emfe-w-color-secondary, #dd2476) 100%);font-family:inherit;line-height:14px;color:var(--emfe-w-color-white, white);font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{margin-top:5px;margin-right:10px;font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emfe-w-color-gray-150, #828299);cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .NotificationList{height:400px;overflow:auto}.Popover .NotificationList .NoMessages{display:flex;justify-content:center;flex-direction:column;align-items:center;height:100%}.Popover .NotificationList .NoMessages p{color:var(--emfe-w-color-white, #fff);opacity:0.7}";
+const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emfe-w-color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emfe-w-color-gray-300, #1e1e26);margin:0px;font-family:inherit;color:var(--emfe-w-color-gray-200, #333737);direction:ltr;width:420px;z-index:999}.Popover .Header{display:flex;justify-content:space-between;padding:0 20px 10px 20px;box-shadow:var(--emfe-w-color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emfe-w-color-white, white);font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px}.Popover .Header .Title .UnseenCounter{text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:10px;letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;margin-left:10px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emfe-w-color-secondary-20, #ff512f) 0%, var(--emfe-w-color-secondary, #dd2476) 100%);font-family:inherit;line-height:14px;color:var(--emfe-w-color-white, white);font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{margin-top:5px;margin-right:10px;font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emfe-w-color-gray-150, #828299);cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .NotificationList{height:400px;overflow:auto;box-shadow:0px 20px 10px -20px rgba(0, 0, 0, 0.45) inset, 0px -20px 10px -20px rgba(0, 0, 0, 0.45) inset}.Popover .NotificationList .NoMessages{display:flex;justify-content:center;flex-direction:column;align-items:center;height:100%}.Popover .NotificationList .NoMessages p{color:var(--emfe-w-color-white, #fff);opacity:0.7}.Popover .Pagination{display:flex;justify-content:space-around;margin-top:13px}.Popover .Pagination .Button{width:43%}.Popover .Pagination .Button 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;justify-content:center}.Popover .Pagination .Button button svg{width:15px;height:15px;fill:white}.Popover .Pagination .Button button:disabled{cursor:default;opacity:0.5}.Popover .Pagination .Button button:hover:enabled{background:var(--emfe-w-color-gray-300, #3d3d4d);transition:300ms}";
 const NutsPopover = class {
   constructor(hostRef) {
@@ -40114,6 +40118,8 @@ const NutsPopover = class {
     this.translationUrl = '';
     this.isLoading = true;
     this.showMarkAll = false;
+    this.numberOfNotifications = 0;
+    this.currentPage = 0;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -40137,7 +40143,7 @@ const NutsPopover = class {
     this.notifications = this.notifications.filter((item) => {
       return item._id != event.detail;
     });
-    this.getNotifications();
+    this.getNotifications(this.currentPage);
   }
   newNotificationHandler(event) {
     this.notifications = [event.detail, ...this.notifications];
@@ -40161,12 +40167,12 @@ const NutsPopover = class {
       await getTranslations(this.translationUrl);
     }
   }
-  getNotifications() {
+  getNotifications(page) {
     let url = new URL(`${this.backendUrl}/v1/widgets/notifications/feed`);
     const headers = new Headers();
     headers.append('Authorization', `Bearer ${this.token || ''}`);
     headers.append('Content-Type', 'application/json');
-    url.searchParams.append('page', '0');
+    url.searchParams.append('page', page.toString());
     const options = {
       method: 'GET',
       headers,
@@ -40175,6 +40181,7 @@ const NutsPopover = class {
       .then((res) => res.json())
       .then((response) => {
       this.isLoading = false;
+      this.numberOfNotifications = response.totalCount;
       this.notifications = response.data;
     });
   }
@@ -40196,8 +40203,14 @@ const NutsPopover = class {
       console.error('err', err);
     });
   }
+  nextPage() {
+    this.getNotifications(++this.currentPage);
+  }
+  prevPage() {
+    this.getNotifications(--this.currentPage);
+  }
   connectedCallback() {
-    this.getNotifications();
+    this.getNotifications(this.currentPage);
     if (this.unseenCount != 0) {
       this.showMarkAll = true;
     }
@@ -40206,7 +40219,9 @@ const NutsPopover = class {
     return (index.h("div", { class: "Popover", ref: el => this.stylingContainer = el }, index.h("div", { class: "Header" }, index.h("div", { class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? index.h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll ? index.h("div", { class: "MarkAsRead", onClick: () => this.markAllAsRead() }, translate$1('markAllAsRead', this.language)) : ''), index.h("div", { class: "NotificationList" }, !this.isLoading && (this.notifications.length > 0 ? this.notifications.map((item) => {
       var _a;
       return (index.h("nuts-notification", { "client-styling": this.clientStyling, 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) || '', 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 }));
-    }) : 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)))))));
+    }) : 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 && this.numberOfNotifications > 10 ?
+      index.h("div", { class: "Pagination" }, index.h("div", { class: "Button" }, index.h("button", { disabled: this.currentPage <= 0, onClick: () => this.prevPage() }, index.h("svg", { class: "svg-icon", viewBox: "0 0 20 20" }, index.h("path", { 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", { class: "Button" }, index.h("button", { disabled: (this.currentPage + 1) * 10 > this.numberOfNotifications, onClick: () => this.nextPage() }, translate$1('next', this.language), index.h("svg", { class: "svg-icon", viewBox: "0 0 20 20" }, index.h("path", { 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" })))))
+      : ''));
   }
   static get watchers() { return {
     "unseenCount": ["unseenCountHandler"],

package/dist/collection/components/nuts-popover/nuts-popover.css CHANGED Viewed

@@ -72,6 +72,7 @@
 .Popover .NotificationList {
   height: 400px;
   overflow: auto;
+  box-shadow: 0px 20px 10px -20px rgba(0, 0, 0, 0.45) inset, 0px -20px 10px -20px rgba(0, 0, 0, 0.45) inset;
 }
 .Popover .NotificationList .NoMessages {
   display: flex;
@@ -83,4 +84,44 @@
 .Popover .NotificationList .NoMessages p {
   color: var(--emfe-w-color-white, #fff);
   opacity: 0.7;
+}
+.Popover .Pagination {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 13px;
+}
+.Popover .Pagination .Button {
+  width: 43%;
+}
+.Popover .Pagination .Button 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;
+  justify-content: center;
+}
+.Popover .Pagination .Button button svg {
+  width: 15px;
+  height: 15px;
+  fill: white;
+}
+.Popover .Pagination .Button button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+.Popover .Pagination .Button button:hover:enabled {
+  background: var(--emfe-w-color-gray-300, #3d3d4d);
+  transition: 300ms;
 }

package/dist/collection/components/nuts-popover/nuts-popover.js CHANGED Viewed

@@ -12,6 +12,8 @@ export class NutsPopover {
     this.translationUrl = '';
     this.isLoading = true;
     this.showMarkAll = false;
+    this.numberOfNotifications = 0;
+    this.currentPage = 0;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -35,7 +37,7 @@ export class NutsPopover {
     this.notifications = this.notifications.filter((item) => {
       return item._id != event.detail;
     });
-    this.getNotifications();
+    this.getNotifications(this.currentPage);
   }
   newNotificationHandler(event) {
     this.notifications = [event.detail, ...this.notifications];
@@ -59,12 +61,12 @@ export class NutsPopover {
       await getTranslations(this.translationUrl);
     }
   }
-  getNotifications() {
+  getNotifications(page) {
     let url = new URL(`${this.backendUrl}/v1/widgets/notifications/feed`);
     const headers = new Headers();
     headers.append('Authorization', `Bearer ${this.token || ''}`);
     headers.append('Content-Type', 'application/json');
-    url.searchParams.append('page', '0');
+    url.searchParams.append('page', page.toString());
     const options = {
       method: 'GET',
       headers,
@@ -73,6 +75,7 @@ export class NutsPopover {
       .then((res) => res.json())
       .then((response) => {
       this.isLoading = false;
+      this.numberOfNotifications = response.totalCount;
       this.notifications = response.data;
     });
   }
@@ -94,8 +97,14 @@ export class NutsPopover {
       console.error('err', err);
     });
   }
+  nextPage() {
+    this.getNotifications(++this.currentPage);
+  }
+  prevPage() {
+    this.getNotifications(--this.currentPage);
+  }
   connectedCallback() {
-    this.getNotifications();
+    this.getNotifications(this.currentPage);
     if (this.unseenCount != 0) {
       this.showMarkAll = true;
     }
@@ -124,7 +133,20 @@ export class NutsPopover {
           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)))))));
+        h("p", null, translate('noMessages', this.language))))),
+      !this.isLoading && this.numberOfNotifications > 10 ?
+        h("div", { class: "Pagination" },
+          h("div", { class: "Button" },
+            h("button", { disabled: this.currentPage <= 0, onClick: () => this.prevPage() },
+              h("svg", { class: "svg-icon", viewBox: "0 0 20 20" },
+                h("path", { 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", { class: "Button" },
+            h("button", { disabled: (this.currentPage + 1) * 10 > this.numberOfNotifications, onClick: () => this.nextPage() },
+              translate('next', this.language),
+              h("svg", { class: "svg-icon", viewBox: "0 0 20 20" },
+                h("path", { 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" })))))
+        : ''));
   }
   static get is() { return "nuts-popover"; }
   static get originalStyleUrls() { return {

package/dist/collection/utils/locale.utils.js CHANGED Viewed

@@ -6,14 +6,18 @@ const TRANSLATIONS = {
     noMessages: 'Nothing new to see here yet',
     markAllAsRead: 'Mark all as read',
     markAsRead: 'Mark as read',
-    removeMessage: 'Remove the message'
+    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'
+    removeMessage: 'Távolítsa el az üzenetet',
+    next: 'Következő',
+    prev: 'Előző'
   }
 };
 export const translate = (key, customLang, values) => {

package/dist/components/nuts-notification2.js CHANGED Viewed

@@ -8,14 +8,18 @@ const TRANSLATIONS = {
     noMessages: 'Nothing new to see here yet',
     markAllAsRead: 'Mark all as read',
     markAsRead: 'Mark as read',
-    removeMessage: 'Remove the message'
+    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'
+    removeMessage: 'Távolítsa el az üzenetet',
+    next: 'Következő',
+    prev: 'Előző'
   }
 };
 const translate$1 = (key, customLang, values) => {

package/dist/components/nuts-popover2.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { g as getTranslations, t as translate, d as defineCustomElement$1 } from './nuts-notification2.js';
-const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emfe-w-color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emfe-w-color-gray-300, #1e1e26);margin:0px;font-family:inherit;color:var(--emfe-w-color-gray-200, #333737);direction:ltr;width:420px;z-index:999}.Popover .Header{display:flex;justify-content:space-between;padding:0 20px 10px 20px;box-shadow:var(--emfe-w-color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emfe-w-color-white, white);font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px}.Popover .Header .Title .UnseenCounter{text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:10px;letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;margin-left:10px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emfe-w-color-secondary-20, #ff512f) 0%, var(--emfe-w-color-secondary, #dd2476) 100%);font-family:inherit;line-height:14px;color:var(--emfe-w-color-white, white);font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{margin-top:5px;margin-right:10px;font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emfe-w-color-gray-150, #828299);cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .NotificationList{height:400px;overflow:auto}.Popover .NotificationList .NoMessages{display:flex;justify-content:center;flex-direction:column;align-items:center;height:100%}.Popover .NotificationList .NoMessages p{color:var(--emfe-w-color-white, #fff);opacity:0.7}";
+const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emfe-w-color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emfe-w-color-gray-300, #1e1e26);margin:0px;font-family:inherit;color:var(--emfe-w-color-gray-200, #333737);direction:ltr;width:420px;z-index:999}.Popover .Header{display:flex;justify-content:space-between;padding:0 20px 10px 20px;box-shadow:var(--emfe-w-color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emfe-w-color-white, white);font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px}.Popover .Header .Title .UnseenCounter{text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:10px;letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;margin-left:10px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emfe-w-color-secondary-20, #ff512f) 0%, var(--emfe-w-color-secondary, #dd2476) 100%);font-family:inherit;line-height:14px;color:var(--emfe-w-color-white, white);font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{margin-top:5px;margin-right:10px;font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emfe-w-color-gray-150, #828299);cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .NotificationList{height:400px;overflow:auto;box-shadow:0px 20px 10px -20px rgba(0, 0, 0, 0.45) inset, 0px -20px 10px -20px rgba(0, 0, 0, 0.45) inset}.Popover .NotificationList .NoMessages{display:flex;justify-content:center;flex-direction:column;align-items:center;height:100%}.Popover .NotificationList .NoMessages p{color:var(--emfe-w-color-white, #fff);opacity:0.7}.Popover .Pagination{display:flex;justify-content:space-around;margin-top:13px}.Popover .Pagination .Button{width:43%}.Popover .Pagination .Button 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;justify-content:center}.Popover .Pagination .Button button svg{width:15px;height:15px;fill:white}.Popover .Pagination .Button button:disabled{cursor:default;opacity:0.5}.Popover .Pagination .Button button:hover:enabled{background:var(--emfe-w-color-gray-300, #3d3d4d);transition:300ms}";
 const NutsPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,6 +18,8 @@ const NutsPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.translationUrl = '';
     this.isLoading = true;
     this.showMarkAll = false;
+    this.numberOfNotifications = 0;
+    this.currentPage = 0;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -41,7 +43,7 @@ const NutsPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.notifications = this.notifications.filter((item) => {
       return item._id != event.detail;
     });
-    this.getNotifications();
+    this.getNotifications(this.currentPage);
   }
   newNotificationHandler(event) {
     this.notifications = [event.detail, ...this.notifications];
@@ -65,12 +67,12 @@ const NutsPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       await getTranslations(this.translationUrl);
     }
   }
-  getNotifications() {
+  getNotifications(page) {
     let url = new URL(`${this.backendUrl}/v1/widgets/notifications/feed`);
     const headers = new Headers();
     headers.append('Authorization', `Bearer ${this.token || ''}`);
     headers.append('Content-Type', 'application/json');
-    url.searchParams.append('page', '0');
+    url.searchParams.append('page', page.toString());
     const options = {
       method: 'GET',
       headers,
@@ -79,6 +81,7 @@ const NutsPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       .then((res) => res.json())
       .then((response) => {
       this.isLoading = false;
+      this.numberOfNotifications = response.totalCount;
       this.notifications = response.data;
     });
   }
@@ -100,8 +103,14 @@ const NutsPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       console.error('err', err);
     });
   }
+  nextPage() {
+    this.getNotifications(++this.currentPage);
+  }
+  prevPage() {
+    this.getNotifications(--this.currentPage);
+  }
   connectedCallback() {
-    this.getNotifications();
+    this.getNotifications(this.currentPage);
     if (this.unseenCount != 0) {
       this.showMarkAll = true;
     }
@@ -110,7 +119,9 @@ const NutsPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h("div", { class: "Popover", ref: el => this.stylingContainer = el }, h("div", { class: "Header" }, h("div", { class: "Title" }, translate('notifications', this.language), this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll ? h("div", { class: "MarkAsRead", onClick: () => this.markAllAsRead() }, translate('markAllAsRead', this.language)) : ''), h("div", { class: "NotificationList" }, !this.isLoading && (this.notifications.length > 0 ? this.notifications.map((item) => {
       var _a;
       return (h("nuts-notification", { "client-styling": this.clientStyling, 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) || '', 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 }));
-    }) : 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)))))));
+    }) : 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 && this.numberOfNotifications > 10 ?
+      h("div", { class: "Pagination" }, h("div", { class: "Button" }, h("button", { disabled: this.currentPage <= 0, onClick: () => this.prevPage() }, h("svg", { class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { 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", { class: "Button" }, h("button", { disabled: (this.currentPage + 1) * 10 > this.numberOfNotifications, onClick: () => this.nextPage() }, translate('next', this.language), h("svg", { class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { 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" })))))
+      : ''));
   }
   static get watchers() { return {
     "unseenCount": ["unseenCountHandler"],

package/dist/esm/nuts-inbox-widget_3.entry.js CHANGED Viewed

@@ -39,14 +39,18 @@ const TRANSLATIONS = {
     noMessages: 'Nothing new to see here yet',
     markAllAsRead: 'Mark all as read',
     markAsRead: 'Mark as read',
-    removeMessage: 'Remove the message'
+    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'
+    removeMessage: 'Távolítsa el az üzenetet',
+    next: 'Következő',
+    prev: 'Előző'
   }
 };
 const translate$1 = (key, customLang, values) => {
@@ -40094,7 +40098,7 @@ const NutsNotification = class {
 };
 NutsNotification.style = nutsNotificationCss;
-const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emfe-w-color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emfe-w-color-gray-300, #1e1e26);margin:0px;font-family:inherit;color:var(--emfe-w-color-gray-200, #333737);direction:ltr;width:420px;z-index:999}.Popover .Header{display:flex;justify-content:space-between;padding:0 20px 10px 20px;box-shadow:var(--emfe-w-color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emfe-w-color-white, white);font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px}.Popover .Header .Title .UnseenCounter{text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:10px;letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;margin-left:10px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emfe-w-color-secondary-20, #ff512f) 0%, var(--emfe-w-color-secondary, #dd2476) 100%);font-family:inherit;line-height:14px;color:var(--emfe-w-color-white, white);font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{margin-top:5px;margin-right:10px;font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emfe-w-color-gray-150, #828299);cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .NotificationList{height:400px;overflow:auto}.Popover .NotificationList .NoMessages{display:flex;justify-content:center;flex-direction:column;align-items:center;height:100%}.Popover .NotificationList .NoMessages p{color:var(--emfe-w-color-white, #fff);opacity:0.7}";
+const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emfe-w-color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emfe-w-color-gray-300, #1e1e26);margin:0px;font-family:inherit;color:var(--emfe-w-color-gray-200, #333737);direction:ltr;width:420px;z-index:999}.Popover .Header{display:flex;justify-content:space-between;padding:0 20px 10px 20px;box-shadow:var(--emfe-w-color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emfe-w-color-white, white);font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px}.Popover .Header .Title .UnseenCounter{text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:10px;letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;margin-left:10px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emfe-w-color-secondary-20, #ff512f) 0%, var(--emfe-w-color-secondary, #dd2476) 100%);font-family:inherit;line-height:14px;color:var(--emfe-w-color-white, white);font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{margin-top:5px;margin-right:10px;font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emfe-w-color-gray-150, #828299);cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .NotificationList{height:400px;overflow:auto;box-shadow:0px 20px 10px -20px rgba(0, 0, 0, 0.45) inset, 0px -20px 10px -20px rgba(0, 0, 0, 0.45) inset}.Popover .NotificationList .NoMessages{display:flex;justify-content:center;flex-direction:column;align-items:center;height:100%}.Popover .NotificationList .NoMessages p{color:var(--emfe-w-color-white, #fff);opacity:0.7}.Popover .Pagination{display:flex;justify-content:space-around;margin-top:13px}.Popover .Pagination .Button{width:43%}.Popover .Pagination .Button 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;justify-content:center}.Popover .Pagination .Button button svg{width:15px;height:15px;fill:white}.Popover .Pagination .Button button:disabled{cursor:default;opacity:0.5}.Popover .Pagination .Button button:hover:enabled{background:var(--emfe-w-color-gray-300, #3d3d4d);transition:300ms}";
 const NutsPopover = class {
   constructor(hostRef) {
@@ -40110,6 +40114,8 @@ const NutsPopover = class {
     this.translationUrl = '';
     this.isLoading = true;
     this.showMarkAll = false;
+    this.numberOfNotifications = 0;
+    this.currentPage = 0;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
       sheet.innerHTML = this.clientStyling;
@@ -40133,7 +40139,7 @@ const NutsPopover = class {
     this.notifications = this.notifications.filter((item) => {
       return item._id != event.detail;
     });
-    this.getNotifications();
+    this.getNotifications(this.currentPage);
   }
   newNotificationHandler(event) {
     this.notifications = [event.detail, ...this.notifications];
@@ -40157,12 +40163,12 @@ const NutsPopover = class {
       await getTranslations(this.translationUrl);
     }
   }
-  getNotifications() {
+  getNotifications(page) {
     let url = new URL(`${this.backendUrl}/v1/widgets/notifications/feed`);
     const headers = new Headers();
     headers.append('Authorization', `Bearer ${this.token || ''}`);
     headers.append('Content-Type', 'application/json');
-    url.searchParams.append('page', '0');
+    url.searchParams.append('page', page.toString());
     const options = {
       method: 'GET',
       headers,
@@ -40171,6 +40177,7 @@ const NutsPopover = class {
       .then((res) => res.json())
       .then((response) => {
       this.isLoading = false;
+      this.numberOfNotifications = response.totalCount;
       this.notifications = response.data;
     });
   }
@@ -40192,8 +40199,14 @@ const NutsPopover = class {
       console.error('err', err);
     });
   }
+  nextPage() {
+    this.getNotifications(++this.currentPage);
+  }
+  prevPage() {
+    this.getNotifications(--this.currentPage);
+  }
   connectedCallback() {
-    this.getNotifications();
+    this.getNotifications(this.currentPage);
     if (this.unseenCount != 0) {
       this.showMarkAll = true;
     }
@@ -40202,7 +40215,9 @@ const NutsPopover = class {
     return (h("div", { class: "Popover", ref: el => this.stylingContainer = el }, h("div", { class: "Header" }, h("div", { class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll ? h("div", { class: "MarkAsRead", onClick: () => this.markAllAsRead() }, translate$1('markAllAsRead', this.language)) : ''), h("div", { class: "NotificationList" }, !this.isLoading && (this.notifications.length > 0 ? this.notifications.map((item) => {
       var _a;
       return (h("nuts-notification", { "client-styling": this.clientStyling, 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) || '', 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 }));
-    }) : 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$1('noMessages', this.language)))))));
+    }) : 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$1('noMessages', this.language))))), !this.isLoading && this.numberOfNotifications > 10 ?
+      h("div", { class: "Pagination" }, h("div", { class: "Button" }, h("button", { disabled: this.currentPage <= 0, onClick: () => this.prevPage() }, h("svg", { class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { 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))), h("div", { class: "Button" }, h("button", { disabled: (this.currentPage + 1) * 10 > this.numberOfNotifications, onClick: () => this.nextPage() }, translate$1('next', this.language), h("svg", { class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { 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" })))))
+      : ''));
   }
   static get watchers() { return {
     "unseenCount": ["unseenCountHandler"],

package/dist/nuts-inbox-widget/nuts-inbox-widget.esm.js CHANGED Viewed

	@@ -1 +1 @@
1	- import{p as n,b as i}from"./p-11f92a64.js";(()=>{const i=import.meta.url,e={};return""!==i&&(e.resourcesUrl=new URL(".",i).href),n(e)})().then((n=>i([["p-~~4788b3e5~~",[[1,"nuts-inbox-widget",{backendUrl:[513,"backend-url"],socketUrl:[513,"socket-url"],userId:[513,"user-id"],sessionId:[513,"session-id"],operatorId:[513,"operator-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]}],[0,"nuts-popover",{language:[513],userId:[513,"user-id"],operatorId:[513,"operator-id"],token:[513],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],showMarkAll:[32]},[[8,"messageDeleted","messageDeteledHandler"],[8,"newNotification","newNotificationHandler"]]],[0,"nuts-notification",{badge:[513],content:[513],date:[513],showSettings:[516,"show-settings"],read:[516],seen:[516],language:[513],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]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"]]]]]],n)));
1	+ import{p as n,b as i}from"./p-11f92a64.js";(()=>{const i=import.meta.url,e={};return""!==i&&(e.resourcesUrl=new URL(".",i).href),n(e)})().then((n=>i([["p-7f09d87e",[[1,"nuts-inbox-widget",{backendUrl:[513,"backend-url"],socketUrl:[513,"socket-url"],userId:[513,"user-id"],sessionId:[513,"session-id"],operatorId:[513,"operator-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]}],[0,"nuts-popover",{language:[513],userId:[513,"user-id"],operatorId:[513,"operator-id"],token:[513],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],showMarkAll:[32]},[[8,"messageDeleted","messageDeteledHandler"],[8,"newNotification","newNotificationHandler"]]],[0,"nuts-notification",{badge:[513],content:[513],date:[513],showSettings:[516,"show-settings"],read:[516],seen:[516],language:[513],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]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"]]]]]],n)));