@everymatrix/nuts-inbox-widget 1.73.23 → 1.73.24

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 (7) hide show
  1. package/dist/cjs/nuts-inbox-widget_3.cjs.entry.js +20 -7
  2. package/dist/collection/components/nuts-inbox-widget/nuts-inbox-widget.js +1 -1
  3. package/dist/collection/components/nuts-popover/nuts-popover.css +17 -0
  4. package/dist/collection/components/nuts-popover/nuts-popover.js +15 -6
  5. package/dist/esm/nuts-inbox-widget_3.entry.js +20 -7
  6. package/dist/nuts-inbox-widget/nuts-inbox-widget_3.entry.js +1 -1
  7. package/package.json +1 -1
package/dist/cjs/nuts-inbox-widget_3.cjs.entry.js CHANGED
@@ -4439,7 +4439,7 @@ const NutsInboxWidget = class {
4439
4439
  return (index.h("div", { onClick: this.togglePopover, class: "BellIcon" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", class: "bi bi-bell", viewBox: "0 0 16 16" }, ' ', index.h("path", { d: "M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" }), ' '), this.unseenCount > 0 ? (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: "nc-bell-button-dot css-0 css-1eg2znq" }, index.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" }), index.h("defs", null, index.h("linearGradient", { id: "paint0_linear_1722_2699", x1: "8", y1: "13", x2: "8", y2: "3", gradientUnits: "userSpaceOnUse" }, index.h("stop", { "stop-color": "#FF512F" }), index.h("stop", { offset: "1", "stop-color": "#DD2476" }))))) : ('')));
4440
4440
  }
4441
4441
  render() {
4442
- return (index.h("div", { key: '787bb05f5d9899db7ffb3ec0e4af11f3942d22f0', ref: this.assignRefToStylingContainer, class: "Wrapper" }, index.h("div", { key: 'dbb13d5d8b49a2a0f0b4cf937bac1040ce49c1c0', ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.popoverVisible && (index.h("nuts-popover", { key: 'f69d320f49d55b352e388af91949a03adf09cc9f', "notification-action": this.notificationAction, sessionId: this.sessionId, "unseen-count": this.unseenCount, token: this.token, "backend-url": this.backendUrl, "operator-id": this.operatorId, "user-id": this.userId, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }))));
4442
+ return (index.h("div", { key: '787bb05f5d9899db7ffb3ec0e4af11f3942d22f0', ref: this.assignRefToStylingContainer, class: "Wrapper" }, index.h("div", { key: 'dbb13d5d8b49a2a0f0b4cf937bac1040ce49c1c0', ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.token && this.popoverVisible && (index.h("nuts-popover", { key: 'aa12d06f28c728994474a1e246ee9d0634494b7d', "notification-action": this.notificationAction, sessionId: this.sessionId, "unseen-count": this.unseenCount, token: this.token, "backend-url": this.backendUrl, "operator-id": this.operatorId, "user-id": this.userId, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }))));
4443
4443
  }
4444
4444
  get el() { return index.getElement(this); }
4445
4445
  static get watchers() { return {
@@ -42180,6 +42180,10 @@ const DownOutlined$1 = DownOutlined;
42180
42180
  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" };
42181
42181
  const InfoCircleFilled$1 = InfoCircleFilled;
42182
42182
 
42183
+ // This icon file is generated automatically.
42184
+ var LoadingOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "0 0 1024 1024", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" } }] }, "name": "loading", "theme": "outlined" };
42185
+ const LoadingOutlined$1 = LoadingOutlined;
42186
+
42183
42187
  // This icon file is generated automatically.
42184
42188
  var QuestionCircleFilled = { "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 64zm0 708c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 00-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z" } }] }, "name": "question-circle", "theme": "filled" };
42185
42189
  const QuestionCircleFilled$1 = QuestionCircleFilled;
@@ -42472,7 +42476,7 @@ const NutsNotification = class {
42472
42476
  };
42473
42477
  NutsNotification.style = NutsNotificationStyle0;
42474
42478
 
42475
- const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emw--color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emw--color-gray-300, rgb(30, 30, 38));margin:0px;font-family:inherit;color:var(--emw--color-gray-200, rgb(51, 55, 55));direction:ltr;width:420px;z-index:999;position:absolute;right:0}.Popover .Header{display:flex;padding:0 20px 10px 20px;align-items:center;box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emw--color-white, rgb(255, 255, 255));font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px;display:flex;align-items:center;gap:5px}.Popover .Header .Title .UnseenCounter{margin-right:5px;display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:var(--emw--border-radius-medium, 10px);letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emw--color-secondary-20, rgb(255, 81, 47)) 0%, var(--emw--color-secondary, rgb(221, 36, 118)) 100%);font-family:inherit;line-height:14px;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .Header .ActionButtons{margin-left:auto;display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll,.Popover .Header .ClosePopover{font-style:normal;border:none;background:transparent;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .DeleteAll svg,.Popover .Header .ClosePopover svg{width:25px;height:25px}.Popover .Header .DeleteAll:hover,.Popover .Header .ClosePopover:hover{opacity:0.7;transition:250ms}.Popover .Header .ClosePopover div{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll svg{width:30px;height:30px}.Popover .Header .DeleteAll.Active{opacity:1}.Popover .Header .DeleteAll:disabled{opacity:0.5;cursor:not-allowed}.Popover .DeleteAllDropdown{z-index:999;position:absolute;background:var(--emw--color-gray-400, rgb(41, 41, 51));box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 20px;border-radius:7px;padding:4px;border:none;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;width:max-content;display:flex;flex-direction:column;right:100px;top:50px}.Popover .DeleteAllDropdown svg{margin-right:10px}.Popover .DeleteAllDropdown button{font-family:inherit;border:0px;background-color:transparent;outline:0px;width:100%;text-align:left;text-decoration:none;box-sizing:border-box;padding:10px 12px;cursor:pointer;border-radius:7px;display:flex;align-items:center;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px}.Popover .DeleteAllDropdown button:hover{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}.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(--emw--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(--emw--color-white, rgb(255, 255, 255));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(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}";
42479
+ const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emw--color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emw--color-gray-300, rgb(30, 30, 38));margin:0px;font-family:inherit;color:var(--emw--color-gray-200, rgb(51, 55, 55));direction:ltr;width:420px;z-index:999;position:absolute;right:0}.Popover .Header{display:flex;padding:0 20px 10px 20px;align-items:center;box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emw--color-white, rgb(255, 255, 255));font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px;display:flex;align-items:center;gap:5px}.Popover .Header .Title .UnseenCounter{margin-right:5px;display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:var(--emw--border-radius-medium, 10px);letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emw--color-secondary-20, rgb(255, 81, 47)) 0%, var(--emw--color-secondary, rgb(221, 36, 118)) 100%);font-family:inherit;line-height:14px;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .Header .ActionButtons{margin-left:auto;display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll,.Popover .Header .ClosePopover{font-style:normal;border:none;background:transparent;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .DeleteAll svg,.Popover .Header .ClosePopover svg{width:25px;height:25px}.Popover .Header .DeleteAll:hover,.Popover .Header .ClosePopover:hover{opacity:0.7;transition:250ms}.Popover .Header .ClosePopover div{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll svg{width:30px;height:30px}.Popover .Header .DeleteAll.Active{opacity:1}.Popover .Header .DeleteAll:disabled{opacity:0.5;cursor:not-allowed}.Popover .DeleteAllDropdown{z-index:999;position:absolute;background:var(--emw--color-gray-400, rgb(41, 41, 51));box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 20px;border-radius:7px;padding:4px;border:none;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;width:max-content;display:flex;flex-direction:column;right:100px;top:50px}.Popover .DeleteAllDropdown svg{margin-right:10px}.Popover .DeleteAllDropdown button{font-family:inherit;border:0px;background-color:transparent;outline:0px;width:100%;text-align:left;text-decoration:none;box-sizing:border-box;padding:10px 12px;cursor:pointer;border-radius:7px;display:flex;align-items:center;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px}.Popover .DeleteAllDropdown button:hover{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}.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(--emw--color-white, #fff);opacity:0.7}.Popover .Loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.Popover .Loading svg{animation:spin 1s linear infinite;transform-origin:center}.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(--emw--color-white, rgb(255, 255, 255));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(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}@keyframes spin{100%{transform:rotate(360deg)}}";
42476
42480
  const NutsPopoverStyle0 = nutsPopoverCss;
42477
42481
 
42478
42482
  const NutsPopover = class {
@@ -42569,7 +42573,14 @@ const NutsPopover = class {
42569
42573
  this.notifications = this.notifications.filter((item) => {
42570
42574
  return item.id != event.detail;
42571
42575
  });
42572
- this.triggerGetNotifications();
42576
+ this.triggerGetNotifications().then(() => {
42577
+ var _a;
42578
+ if (((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.currentPage > 0) {
42579
+ // move back a page if no notifications
42580
+ this.currentPage--;
42581
+ this.triggerGetNotifications();
42582
+ }
42583
+ });
42573
42584
  }
42574
42585
  allMessagesDeletedHandler() {
42575
42586
  this.notifications = [];
@@ -42629,7 +42640,7 @@ const NutsPopover = class {
42629
42640
  }
42630
42641
  async triggerGetNotifications() {
42631
42642
  this.isNotificationsLoading = true;
42632
- getNotifications({
42643
+ return getNotifications({
42633
42644
  baseUrl: this.baseUrl,
42634
42645
  token: this.token,
42635
42646
  page: this.currentPage
@@ -42652,12 +42663,14 @@ const NutsPopover = class {
42652
42663
  render() {
42653
42664
  var _a, _b, _c;
42654
42665
  const hasMore = this.hasMore || ((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.length) > 10;
42655
- return (index.h("div", { key: '94960f5609a5dd4f9a318b052e99896da2670bbb', class: "Popover", ref: this.assignRefToStylingContainer }, index.h("div", { key: 'cb40bd7d3db8d9ce4fab632e5460ea562882f809', class: "Header" }, index.h("div", { key: '058ea6897706dd84ba25d06f91fe8a2bfc1fd01b', class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? index.h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (index.h("div", { key: '32d7c170433047c845ff9dd2218e7c87e1290ff4', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate$1('markAllAsRead', this.language))), index.h("div", { key: '4aff88677c6bf58cca1eb73eda1da1f58c75ce71', class: "ActionButtons" }, index.h("button", { key: '5590daa75d8905058f776207e45b910438cbfa3e', class: `DeleteAll${this.showDeleteAllPopup ? ' Active' : ''}`, onClick: this.showDeletePopup, disabled: !((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) }, index.h("svg", { key: '3a76d4a165150da3929654e3e261c89ecfea1563', width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'a7a3cedc1e9f785cc26cb413dbaf183c49ed02f8', 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" }))), index.h("button", { key: '71e571b7f006bbcbcdac05ddd204f7b5dbdad04e', class: "ClosePopover", onClick: this.closePopover }, index.h("div", { key: 'ef1eeb7359b3957a14ddabd04db94e385da975eb', innerHTML: renderIconDefinitionToSVGElement(CloseCircleOutlined$1, {
42666
+ return (index.h("div", { key: '94ea0833d61cc14b27c7e62efca7955f528dbf39', class: "Popover", ref: this.assignRefToStylingContainer }, index.h("div", { key: '700acb84baa0ac6111c6f2090e26e18e3839b3ef', class: "Header" }, index.h("div", { key: '798c392f1e8642e77bb3dbd96979c771cc629b77', class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? index.h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (index.h("div", { key: '034d38968d303d4b6e6e6663a614092d08cf4e53', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate$1('markAllAsRead', this.language))), index.h("div", { key: '96ebc2cd685221d47589a9a5fd3b8c0a238765f4', class: "ActionButtons" }, index.h("button", { key: '7ae8cdb4cf7922c1e472608f3865f05c617a3e7d', class: `DeleteAll${this.showDeleteAllPopup ? ' Active' : ''}`, onClick: this.showDeletePopup, disabled: !((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) }, index.h("svg", { key: 'ecc35d83ffb2e2696ffb18012a1f83d1f9c49be0', width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'ea0f49425921128d61446823699a6d14f4a15722', 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" }))), index.h("button", { key: '6fb692e0e025e4f8c3ccb353ece7db4dc597c281', class: "ClosePopover", onClick: this.closePopover }, index.h("div", { key: 'a88958ec18cf210b0b2214c4f82885d9b573650e', innerHTML: renderIconDefinitionToSVGElement(CloseCircleOutlined$1, {
42656
42667
  extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' }
42657
- }) }))), this.showDeleteAllPopup && (index.h("div", { key: 'd0b41220c1f8621a60aecd33dd9898c04600951b', class: "DeleteAllDropdown", ref: (el) => (this.dropdownRef = el) }, index.h("button", { key: 'af20f31747b4998eeff55a028fde7c9fe11149a9', onClick: this.deleteAllNotifications }, translate$1('deleteAllMessages', this.language))))), index.h("div", { key: '61f995dcbf74c027b0f70c84ef8dbc35e66c782f', class: "NotificationList" }, !this.isLoading && ((_c = this.notifications) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (this.notifications.map((item) => {
42668
+ }) }))), this.showDeleteAllPopup && (index.h("div", { key: 'cd836e052cc0d3d08a97e7300d509b2c5424488a', class: "DeleteAllDropdown", ref: (el) => (this.dropdownRef = el) }, index.h("button", { key: 'd93854f9b264cb91c911c78275785875adebc77b', onClick: this.deleteAllNotifications }, translate$1('deleteAllMessages', this.language))))), !this.isLoading && (index.h("div", { key: '035828ba1b3cfcbc84b1bd40018eebe01360a9f0', class: "NotificationList" }, this.isNotificationsLoading ? (index.h("div", { class: "Loading", innerHTML: renderIconDefinitionToSVGElement(LoadingOutlined$1, {
42669
+ extraSVGAttrs: { width: '30px', height: '30px', fill: '#A1A1B2' }
42670
+ }) })) : ((_c = this.notifications) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (this.notifications.map((item) => {
42658
42671
  var _a;
42659
42672
  return (index.h("nuts-notification", { "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, key: item.id, "user-id": this.userId, "operator-id": this.operatorId, content: item.content, "message-id": item.id, badge: ((_a = item.actor) === null || _a === void 0 ? void 0 : _a.data) || '', sessionId: this.sessionId, date: item.createdAt, read: item.read, seen: item.seen, language: this.language, "notification-action": this.notificationAction, token: this.token, "backend-url": this.backendUrl, "redirect-url": item.cta.data.url, "translation-url": this.translationUrl }));
42660
- })) : (index.h("div", { class: "NoMessages" }, index.h("svg", { width: "120", height: "108", viewBox: "0 0 120 108", fill: "none" }, index.h("circle", { cx: "11.3191", cy: "30.7872", r: "6.31915", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("ellipse", { cx: "60.117", cy: "27.9787", rx: "5.96809", ry: "5.61702", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M79.5424 49.4934C79.5424 44.1598 77.6437 39.0446 74.2641 35.2732C70.8844 31.5017 66.3006 29.3829 61.5211 29.3829C56.7415 29.3829 52.1578 31.5017 48.7781 35.2732C45.3985 39.0446 43.4998 44.1598 43.4998 49.4934C43.4998 72.9557 34.4892 79.6592 34.4892 79.6592H88.553C88.553 79.6592 79.5424 72.9557 79.5424 49.4934Z", fill: "#292933" }), index.h("path", { d: "M68.8995 81.7552C68.1496 83.551 67.0731 85.0417 65.778 86.0779C64.4828 87.1141 63.0144 87.6595 61.5198 87.6595C60.0252 87.6595 58.5568 87.1141 57.2617 86.0779C55.9665 85.0417 54.8901 83.551 54.1401 81.7552", fill: "#292933" }), index.h("path", { d: "M81.2976 50.2203C81.2976 68.2545 87.2222 76.7327 90.2814 79.9083C90.7671 80.4126 90.3802 81.4764 89.68 81.4764C88.0927 81.4764 86.5488 81.4764 85.0422 81.4764M68.5814 82.946C67.6854 84.8068 66.3993 86.3513 64.8518 87.425C63.3044 88.4987 61.5499 89.0638 59.7641 89.0638C57.9783 89.0638 56.2239 88.4987 54.6765 87.425C53.129 86.3513 51.8429 84.8068 50.9468 82.946M79.712 42.3723C78.6394 39.8192 77.0439 37.4727 74.991 35.4861C70.953 31.5783 65.4763 29.3829 59.7656 29.3829C54.055 29.3829 48.5783 31.5783 44.5403 35.4861C43.3681 36.6205 42.345 37.8722 41.4832 39.2127C40.4958 40.7487 39.7202 42.4013 39.1747 44.1276C38.5563 46.0847 38.2337 48.1364 38.2337 50.2203C38.2337 53.2503 38.0665 56.0106 37.7737 58.5212M34.8401 70.7608C32.9874 75.4551 30.7688 78.331 29.2526 79.9055C28.767 80.4099 29.155 81.4764 29.8551 81.4764C47.1962 81.4764 59.3571 81.4764 74.1593 81.4764", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M55.6345 59.0737C55.1665 59.7144 54.4949 60.2462 53.6868 60.6159C52.8787 60.9855 51.9625 61.1801 51.0299 61.1801C50.0973 61.1801 49.1811 60.9855 48.373 60.6159C47.5649 60.2462 46.8933 59.7144 46.4254 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M73.1877 59.0737C72.7197 59.7144 72.0481 60.2462 71.24 60.6159C70.4319 60.9855 69.5157 61.1801 68.5831 61.1801C67.6506 61.1801 66.7344 60.9855 65.9263 60.6159C65.1182 60.2462 64.4465 59.7144 63.9786 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("circle", { cx: "107.511", cy: "56.0638", r: "7.02128", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("circle", { cx: "16.4252", cy: "58.1703", r: "4.21277", fill: "#3D3D4D" }), index.h("ellipse", { cx: "59.9573", cy: "104.511", rx: "25.2766", ry: "2.80851", fill: "#3D3D4D" }), index.h("path", { d: "M81.5317 18.1489H88.553L81.5317 25.1702H88.553", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M96.6807 2H106.51L96.6807 11.8298H106.51", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", null, translate$1('noMessages', this.language))))), !this.isLoading && (index.h("div", { key: '65cf0c44a9c280e0124a157641d87f3cfe86f044', class: "Pagination" }, index.h("div", { key: 'fdbd9a5e01bc05a0eda65385d914a9ae3df38770', class: "Button" }, index.h("button", { key: 'ff49010496c01de7b501037c8d50f9e1abf59726', disabled: this.currentPage <= 0, onClick: this.prevPage }, index.h("svg", { key: '1da4701f89af5f1072f0faba9e2c7775bd761044', class: "svg-icon", viewBox: "0 0 20 20" }, index.h("path", { key: 'e66f3da84a565461a92839b883cb05c5b62242ad', d: "M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z" })), translate$1('prev', this.language))), index.h("div", { key: '7f24dbe58cf922a17ea57e03dee020afbacd879f', class: "Button" }, index.h("button", { key: 'fe8515e9bc6c35c3c6032745415b3f8b405fe4bb', disabled: this.isNotificationsLoading || !hasMore, onClick: this.nextPage }, translate$1('next', this.language), index.h("svg", { key: '9bb9aa49db50905f571bb0b70159c813742dd37c', class: "svg-icon", viewBox: "0 0 20 20" }, index.h("path", { key: '4a84d3e9108bba79370cae2df4224252ef3d2733', 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" }))))))));
42673
+ })) : (index.h("div", { class: "NoMessages" }, index.h("svg", { width: "120", height: "108", viewBox: "0 0 120 108", fill: "none" }, index.h("circle", { cx: "11.3191", cy: "30.7872", r: "6.31915", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("ellipse", { cx: "60.117", cy: "27.9787", rx: "5.96809", ry: "5.61702", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M79.5424 49.4934C79.5424 44.1598 77.6437 39.0446 74.2641 35.2732C70.8844 31.5017 66.3006 29.3829 61.5211 29.3829C56.7415 29.3829 52.1578 31.5017 48.7781 35.2732C45.3985 39.0446 43.4998 44.1598 43.4998 49.4934C43.4998 72.9557 34.4892 79.6592 34.4892 79.6592H88.553C88.553 79.6592 79.5424 72.9557 79.5424 49.4934Z", fill: "#292933" }), index.h("path", { d: "M68.8995 81.7552C68.1496 83.551 67.0731 85.0417 65.778 86.0779C64.4828 87.1141 63.0144 87.6595 61.5198 87.6595C60.0252 87.6595 58.5568 87.1141 57.2617 86.0779C55.9665 85.0417 54.8901 83.551 54.1401 81.7552", fill: "#292933" }), index.h("path", { d: "M81.2976 50.2203C81.2976 68.2545 87.2222 76.7327 90.2814 79.9083C90.7671 80.4126 90.3802 81.4764 89.68 81.4764C88.0927 81.4764 86.5488 81.4764 85.0422 81.4764M68.5814 82.946C67.6854 84.8068 66.3993 86.3513 64.8518 87.425C63.3044 88.4987 61.5499 89.0638 59.7641 89.0638C57.9783 89.0638 56.2239 88.4987 54.6765 87.425C53.129 86.3513 51.8429 84.8068 50.9468 82.946M79.712 42.3723C78.6394 39.8192 77.0439 37.4727 74.991 35.4861C70.953 31.5783 65.4763 29.3829 59.7656 29.3829C54.055 29.3829 48.5783 31.5783 44.5403 35.4861C43.3681 36.6205 42.345 37.8722 41.4832 39.2127C40.4958 40.7487 39.7202 42.4013 39.1747 44.1276C38.5563 46.0847 38.2337 48.1364 38.2337 50.2203C38.2337 53.2503 38.0665 56.0106 37.7737 58.5212M34.8401 70.7608C32.9874 75.4551 30.7688 78.331 29.2526 79.9055C28.767 80.4099 29.155 81.4764 29.8551 81.4764C47.1962 81.4764 59.3571 81.4764 74.1593 81.4764", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M55.6345 59.0737C55.1665 59.7144 54.4949 60.2462 53.6868 60.6159C52.8787 60.9855 51.9625 61.1801 51.0299 61.1801C50.0973 61.1801 49.1811 60.9855 48.373 60.6159C47.5649 60.2462 46.8933 59.7144 46.4254 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M73.1877 59.0737C72.7197 59.7144 72.0481 60.2462 71.24 60.6159C70.4319 60.9855 69.5157 61.1801 68.5831 61.1801C67.6506 61.1801 66.7344 60.9855 65.9263 60.6159C65.1182 60.2462 64.4465 59.7144 63.9786 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("circle", { cx: "107.511", cy: "56.0638", r: "7.02128", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("circle", { cx: "16.4252", cy: "58.1703", r: "4.21277", fill: "#3D3D4D" }), index.h("ellipse", { cx: "59.9573", cy: "104.511", rx: "25.2766", ry: "2.80851", fill: "#3D3D4D" }), index.h("path", { d: "M81.5317 18.1489H88.553L81.5317 25.1702H88.553", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { d: "M96.6807 2H106.51L96.6807 11.8298H106.51", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), index.h("p", null, translate$1('noMessages', this.language)))))), !this.isLoading && (index.h("div", { key: '1525888bd00ffa71370ba18b970e0ca4bac933a8', class: "Pagination" }, index.h("div", { key: 'ed8293d962993acf50cdfe8ab0ef1bbc89370ac5', class: "Button" }, index.h("button", { key: 'a36e8389f65da5305ae86263071f154478777107', disabled: this.isNotificationsLoading || this.currentPage <= 0, onClick: this.prevPage }, index.h("svg", { key: '4ac14009be9c16525c86392c82fd03c89c25679c', class: "svg-icon", viewBox: "0 0 20 20" }, index.h("path", { key: 'c00f83ae7eed53eae706b424ea2d866f06a5d48e', d: "M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z" })), translate$1('prev', this.language))), index.h("div", { key: '44763bb7c8e2112ec018582b22cafab9d33c9c97', class: "Button" }, index.h("button", { key: '30afeee5c548d20118a05c1e33d7d0511320eb81', disabled: this.isNotificationsLoading || !hasMore, onClick: this.nextPage }, translate$1('next', this.language), index.h("svg", { key: '5ae4576782c8b92fdda4315cd1402f61e67d55bd', class: "svg-icon", viewBox: "0 0 20 20" }, index.h("path", { key: '6f4a955f30cd90222dd9bb3641023cdad5c0b354', 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" }))))))));
42661
42674
  }
42662
42675
  static get watchers() { return {
42663
42676
  "unseenCount": ["unseenCountHandler"],
package/dist/collection/components/nuts-inbox-widget/nuts-inbox-widget.js CHANGED
@@ -181,7 +181,7 @@ export class NutsInboxWidget {
181
181
  return (h("div", { onClick: this.togglePopover, class: "BellIcon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", class: "bi bi-bell", viewBox: "0 0 16 16" }, ' ', h("path", { d: "M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" }), ' '), this.unseenCount > 0 ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: "nc-bell-button-dot css-0 css-1eg2znq" }, 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" }))))) : ('')));
182
182
  }
183
183
  render() {
184
- return (h("div", { key: '787bb05f5d9899db7ffb3ec0e4af11f3942d22f0', ref: this.assignRefToStylingContainer, class: "Wrapper" }, h("div", { key: 'dbb13d5d8b49a2a0f0b4cf937bac1040ce49c1c0', ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.popoverVisible && (h("nuts-popover", { key: 'f69d320f49d55b352e388af91949a03adf09cc9f', "notification-action": this.notificationAction, sessionId: this.sessionId, "unseen-count": this.unseenCount, token: this.token, "backend-url": this.backendUrl, "operator-id": this.operatorId, "user-id": this.userId, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }))));
184
+ return (h("div", { key: '787bb05f5d9899db7ffb3ec0e4af11f3942d22f0', ref: this.assignRefToStylingContainer, class: "Wrapper" }, h("div", { key: 'dbb13d5d8b49a2a0f0b4cf937bac1040ce49c1c0', ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.token && this.popoverVisible && (h("nuts-popover", { key: 'aa12d06f28c728994474a1e246ee9d0634494b7d', "notification-action": this.notificationAction, sessionId: this.sessionId, "unseen-count": this.unseenCount, token: this.token, "backend-url": this.backendUrl, "operator-id": this.operatorId, "user-id": this.userId, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }))));
185
185
  }
186
186
  static get is() { return "nuts-inbox-widget"; }
187
187
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/nuts-popover/nuts-popover.css CHANGED
@@ -183,6 +183,17 @@
183
183
  color: var(--emw--color-white, #fff);
184
184
  opacity: 0.7;
185
185
  }
186
+ .Popover .Loading {
187
+ display: flex;
188
+ align-items: center;
189
+ justify-content: center;
190
+ width: 100%;
191
+ height: 100%;
192
+ }
193
+ .Popover .Loading svg {
194
+ animation: spin 1s linear infinite;
195
+ transform-origin: center;
196
+ }
186
197
  .Popover .Pagination {
187
198
  display: flex;
188
199
  justify-content: space-around;
@@ -222,4 +233,10 @@
222
233
  .Popover .Pagination .Button button:hover:enabled {
223
234
  background: var(--emw--color-gray-300, rgb(61, 61, 77));
224
235
  transition: 300ms;
236
+ }
237
+
238
+ @keyframes spin {
239
+ 100% {
240
+ transform: rotate(360deg);
241
+ }
225
242
  }
package/dist/collection/components/nuts-popover/nuts-popover.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { h } from "@stencil/core";
2
2
  import { translate, getTranslations } from "../../utils/locale.utils";
3
3
  import { deleteAll, getNotifications, markAllAsRead } from "../../api/methods";
4
- import { CloseCircleOutlined } from "@ant-design/icons-svg";
4
+ import { CloseCircleOutlined, LoadingOutlined } from "@ant-design/icons-svg";
5
5
  import { renderIconDefinitionToSVGElement } from "@ant-design/icons-svg/es/helpers";
6
6
  export class NutsPopover {
7
7
  constructor() {
@@ -93,7 +93,14 @@ export class NutsPopover {
93
93
  this.notifications = this.notifications.filter((item) => {
94
94
  return item.id != event.detail;
95
95
  });
96
- this.triggerGetNotifications();
96
+ this.triggerGetNotifications().then(() => {
97
+ var _a;
98
+ if (((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.currentPage > 0) {
99
+ // move back a page if no notifications
100
+ this.currentPage--;
101
+ this.triggerGetNotifications();
102
+ }
103
+ });
97
104
  }
98
105
  allMessagesDeletedHandler() {
99
106
  this.notifications = [];
@@ -153,7 +160,7 @@ export class NutsPopover {
153
160
  }
154
161
  async triggerGetNotifications() {
155
162
  this.isNotificationsLoading = true;
156
- getNotifications({
163
+ return getNotifications({
157
164
  baseUrl: this.baseUrl,
158
165
  token: this.token,
159
166
  page: this.currentPage
@@ -176,12 +183,14 @@ export class NutsPopover {
176
183
  render() {
177
184
  var _a, _b, _c;
178
185
  const hasMore = this.hasMore || ((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.length) > 10;
179
- return (h("div", { key: '94960f5609a5dd4f9a318b052e99896da2670bbb', class: "Popover", ref: this.assignRefToStylingContainer }, h("div", { key: 'cb40bd7d3db8d9ce4fab632e5460ea562882f809', class: "Header" }, h("div", { key: '058ea6897706dd84ba25d06f91fe8a2bfc1fd01b', class: "Title" }, translate('notifications', this.language), this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (h("div", { key: '32d7c170433047c845ff9dd2218e7c87e1290ff4', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate('markAllAsRead', this.language))), h("div", { key: '4aff88677c6bf58cca1eb73eda1da1f58c75ce71', class: "ActionButtons" }, h("button", { key: '5590daa75d8905058f776207e45b910438cbfa3e', class: `DeleteAll${this.showDeleteAllPopup ? ' Active' : ''}`, onClick: this.showDeletePopup, disabled: !((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) }, h("svg", { key: '3a76d4a165150da3929654e3e261c89ecfea1563', width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a7a3cedc1e9f785cc26cb413dbaf183c49ed02f8', 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" }))), h("button", { key: '71e571b7f006bbcbcdac05ddd204f7b5dbdad04e', class: "ClosePopover", onClick: this.closePopover }, h("div", { key: 'ef1eeb7359b3957a14ddabd04db94e385da975eb', innerHTML: renderIconDefinitionToSVGElement(CloseCircleOutlined, {
186
+ return (h("div", { key: '94ea0833d61cc14b27c7e62efca7955f528dbf39', class: "Popover", ref: this.assignRefToStylingContainer }, h("div", { key: '700acb84baa0ac6111c6f2090e26e18e3839b3ef', class: "Header" }, h("div", { key: '798c392f1e8642e77bb3dbd96979c771cc629b77', class: "Title" }, translate('notifications', this.language), this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (h("div", { key: '034d38968d303d4b6e6e6663a614092d08cf4e53', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate('markAllAsRead', this.language))), h("div", { key: '96ebc2cd685221d47589a9a5fd3b8c0a238765f4', class: "ActionButtons" }, h("button", { key: '7ae8cdb4cf7922c1e472608f3865f05c617a3e7d', class: `DeleteAll${this.showDeleteAllPopup ? ' Active' : ''}`, onClick: this.showDeletePopup, disabled: !((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) }, h("svg", { key: 'ecc35d83ffb2e2696ffb18012a1f83d1f9c49be0', width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ea0f49425921128d61446823699a6d14f4a15722', 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" }))), h("button", { key: '6fb692e0e025e4f8c3ccb353ece7db4dc597c281', class: "ClosePopover", onClick: this.closePopover }, h("div", { key: 'a88958ec18cf210b0b2214c4f82885d9b573650e', innerHTML: renderIconDefinitionToSVGElement(CloseCircleOutlined, {
180
187
  extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' }
181
- }) }))), this.showDeleteAllPopup && (h("div", { key: 'd0b41220c1f8621a60aecd33dd9898c04600951b', class: "DeleteAllDropdown", ref: (el) => (this.dropdownRef = el) }, h("button", { key: 'af20f31747b4998eeff55a028fde7c9fe11149a9', onClick: this.deleteAllNotifications }, translate('deleteAllMessages', this.language))))), h("div", { key: '61f995dcbf74c027b0f70c84ef8dbc35e66c782f', class: "NotificationList" }, !this.isLoading && ((_c = this.notifications) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (this.notifications.map((item) => {
188
+ }) }))), this.showDeleteAllPopup && (h("div", { key: 'cd836e052cc0d3d08a97e7300d509b2c5424488a', class: "DeleteAllDropdown", ref: (el) => (this.dropdownRef = el) }, h("button", { key: 'd93854f9b264cb91c911c78275785875adebc77b', onClick: this.deleteAllNotifications }, translate('deleteAllMessages', this.language))))), !this.isLoading && (h("div", { key: '035828ba1b3cfcbc84b1bd40018eebe01360a9f0', class: "NotificationList" }, this.isNotificationsLoading ? (h("div", { class: "Loading", innerHTML: renderIconDefinitionToSVGElement(LoadingOutlined, {
189
+ extraSVGAttrs: { width: '30px', height: '30px', fill: '#A1A1B2' }
190
+ }) })) : ((_c = this.notifications) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (this.notifications.map((item) => {
182
191
  var _a;
183
192
  return (h("nuts-notification", { "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, key: item.id, "user-id": this.userId, "operator-id": this.operatorId, content: item.content, "message-id": item.id, badge: ((_a = item.actor) === null || _a === void 0 ? void 0 : _a.data) || '', sessionId: this.sessionId, date: item.createdAt, read: item.read, seen: item.seen, language: this.language, "notification-action": this.notificationAction, token: this.token, "backend-url": this.backendUrl, "redirect-url": item.cta.data.url, "translation-url": this.translationUrl }));
184
- })) : (h("div", { class: "NoMessages" }, h("svg", { width: "120", height: "108", viewBox: "0 0 120 108", fill: "none" }, h("circle", { cx: "11.3191", cy: "30.7872", r: "6.31915", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("ellipse", { cx: "60.117", cy: "27.9787", rx: "5.96809", ry: "5.61702", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M79.5424 49.4934C79.5424 44.1598 77.6437 39.0446 74.2641 35.2732C70.8844 31.5017 66.3006 29.3829 61.5211 29.3829C56.7415 29.3829 52.1578 31.5017 48.7781 35.2732C45.3985 39.0446 43.4998 44.1598 43.4998 49.4934C43.4998 72.9557 34.4892 79.6592 34.4892 79.6592H88.553C88.553 79.6592 79.5424 72.9557 79.5424 49.4934Z", fill: "#292933" }), h("path", { d: "M68.8995 81.7552C68.1496 83.551 67.0731 85.0417 65.778 86.0779C64.4828 87.1141 63.0144 87.6595 61.5198 87.6595C60.0252 87.6595 58.5568 87.1141 57.2617 86.0779C55.9665 85.0417 54.8901 83.551 54.1401 81.7552", fill: "#292933" }), h("path", { d: "M81.2976 50.2203C81.2976 68.2545 87.2222 76.7327 90.2814 79.9083C90.7671 80.4126 90.3802 81.4764 89.68 81.4764C88.0927 81.4764 86.5488 81.4764 85.0422 81.4764M68.5814 82.946C67.6854 84.8068 66.3993 86.3513 64.8518 87.425C63.3044 88.4987 61.5499 89.0638 59.7641 89.0638C57.9783 89.0638 56.2239 88.4987 54.6765 87.425C53.129 86.3513 51.8429 84.8068 50.9468 82.946M79.712 42.3723C78.6394 39.8192 77.0439 37.4727 74.991 35.4861C70.953 31.5783 65.4763 29.3829 59.7656 29.3829C54.055 29.3829 48.5783 31.5783 44.5403 35.4861C43.3681 36.6205 42.345 37.8722 41.4832 39.2127C40.4958 40.7487 39.7202 42.4013 39.1747 44.1276C38.5563 46.0847 38.2337 48.1364 38.2337 50.2203C38.2337 53.2503 38.0665 56.0106 37.7737 58.5212M34.8401 70.7608C32.9874 75.4551 30.7688 78.331 29.2526 79.9055C28.767 80.4099 29.155 81.4764 29.8551 81.4764C47.1962 81.4764 59.3571 81.4764 74.1593 81.4764", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M55.6345 59.0737C55.1665 59.7144 54.4949 60.2462 53.6868 60.6159C52.8787 60.9855 51.9625 61.1801 51.0299 61.1801C50.0973 61.1801 49.1811 60.9855 48.373 60.6159C47.5649 60.2462 46.8933 59.7144 46.4254 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M73.1877 59.0737C72.7197 59.7144 72.0481 60.2462 71.24 60.6159C70.4319 60.9855 69.5157 61.1801 68.5831 61.1801C67.6506 61.1801 66.7344 60.9855 65.9263 60.6159C65.1182 60.2462 64.4465 59.7144 63.9786 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "107.511", cy: "56.0638", r: "7.02128", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "16.4252", cy: "58.1703", r: "4.21277", fill: "#3D3D4D" }), h("ellipse", { cx: "59.9573", cy: "104.511", rx: "25.2766", ry: "2.80851", fill: "#3D3D4D" }), h("path", { d: "M81.5317 18.1489H88.553L81.5317 25.1702H88.553", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M96.6807 2H106.51L96.6807 11.8298H106.51", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", null, translate('noMessages', this.language))))), !this.isLoading && (h("div", { key: '65cf0c44a9c280e0124a157641d87f3cfe86f044', class: "Pagination" }, h("div", { key: 'fdbd9a5e01bc05a0eda65385d914a9ae3df38770', class: "Button" }, h("button", { key: 'ff49010496c01de7b501037c8d50f9e1abf59726', disabled: this.currentPage <= 0, onClick: this.prevPage }, h("svg", { key: '1da4701f89af5f1072f0faba9e2c7775bd761044', class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { key: 'e66f3da84a565461a92839b883cb05c5b62242ad', d: "M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z" })), translate('prev', this.language))), h("div", { key: '7f24dbe58cf922a17ea57e03dee020afbacd879f', class: "Button" }, h("button", { key: 'fe8515e9bc6c35c3c6032745415b3f8b405fe4bb', disabled: this.isNotificationsLoading || !hasMore, onClick: this.nextPage }, translate('next', this.language), h("svg", { key: '9bb9aa49db50905f571bb0b70159c813742dd37c', class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { key: '4a84d3e9108bba79370cae2df4224252ef3d2733', 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" }))))))));
193
+ })) : (h("div", { class: "NoMessages" }, h("svg", { width: "120", height: "108", viewBox: "0 0 120 108", fill: "none" }, h("circle", { cx: "11.3191", cy: "30.7872", r: "6.31915", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("ellipse", { cx: "60.117", cy: "27.9787", rx: "5.96809", ry: "5.61702", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M79.5424 49.4934C79.5424 44.1598 77.6437 39.0446 74.2641 35.2732C70.8844 31.5017 66.3006 29.3829 61.5211 29.3829C56.7415 29.3829 52.1578 31.5017 48.7781 35.2732C45.3985 39.0446 43.4998 44.1598 43.4998 49.4934C43.4998 72.9557 34.4892 79.6592 34.4892 79.6592H88.553C88.553 79.6592 79.5424 72.9557 79.5424 49.4934Z", fill: "#292933" }), h("path", { d: "M68.8995 81.7552C68.1496 83.551 67.0731 85.0417 65.778 86.0779C64.4828 87.1141 63.0144 87.6595 61.5198 87.6595C60.0252 87.6595 58.5568 87.1141 57.2617 86.0779C55.9665 85.0417 54.8901 83.551 54.1401 81.7552", fill: "#292933" }), h("path", { d: "M81.2976 50.2203C81.2976 68.2545 87.2222 76.7327 90.2814 79.9083C90.7671 80.4126 90.3802 81.4764 89.68 81.4764C88.0927 81.4764 86.5488 81.4764 85.0422 81.4764M68.5814 82.946C67.6854 84.8068 66.3993 86.3513 64.8518 87.425C63.3044 88.4987 61.5499 89.0638 59.7641 89.0638C57.9783 89.0638 56.2239 88.4987 54.6765 87.425C53.129 86.3513 51.8429 84.8068 50.9468 82.946M79.712 42.3723C78.6394 39.8192 77.0439 37.4727 74.991 35.4861C70.953 31.5783 65.4763 29.3829 59.7656 29.3829C54.055 29.3829 48.5783 31.5783 44.5403 35.4861C43.3681 36.6205 42.345 37.8722 41.4832 39.2127C40.4958 40.7487 39.7202 42.4013 39.1747 44.1276C38.5563 46.0847 38.2337 48.1364 38.2337 50.2203C38.2337 53.2503 38.0665 56.0106 37.7737 58.5212M34.8401 70.7608C32.9874 75.4551 30.7688 78.331 29.2526 79.9055C28.767 80.4099 29.155 81.4764 29.8551 81.4764C47.1962 81.4764 59.3571 81.4764 74.1593 81.4764", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M55.6345 59.0737C55.1665 59.7144 54.4949 60.2462 53.6868 60.6159C52.8787 60.9855 51.9625 61.1801 51.0299 61.1801C50.0973 61.1801 49.1811 60.9855 48.373 60.6159C47.5649 60.2462 46.8933 59.7144 46.4254 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M73.1877 59.0737C72.7197 59.7144 72.0481 60.2462 71.24 60.6159C70.4319 60.9855 69.5157 61.1801 68.5831 61.1801C67.6506 61.1801 66.7344 60.9855 65.9263 60.6159C65.1182 60.2462 64.4465 59.7144 63.9786 59.0737", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "107.511", cy: "56.0638", r: "7.02128", stroke: "#3D3D4D", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("circle", { cx: "16.4252", cy: "58.1703", r: "4.21277", fill: "#3D3D4D" }), h("ellipse", { cx: "59.9573", cy: "104.511", rx: "25.2766", ry: "2.80851", fill: "#3D3D4D" }), h("path", { d: "M81.5317 18.1489H88.553L81.5317 25.1702H88.553", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M96.6807 2H106.51L96.6807 11.8298H106.51", stroke: "#828299", "stroke-width": "3.5", "stroke-linecap": "round", "stroke-linejoin": "round" })), h("p", null, translate('noMessages', this.language)))))), !this.isLoading && (h("div", { key: '1525888bd00ffa71370ba18b970e0ca4bac933a8', class: "Pagination" }, h("div", { key: 'ed8293d962993acf50cdfe8ab0ef1bbc89370ac5', class: "Button" }, h("button", { key: 'a36e8389f65da5305ae86263071f154478777107', disabled: this.isNotificationsLoading || this.currentPage <= 0, onClick: this.prevPage }, h("svg", { key: '4ac14009be9c16525c86392c82fd03c89c25679c', class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { key: 'c00f83ae7eed53eae706b424ea2d866f06a5d48e', d: "M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z" })), translate('prev', this.language))), h("div", { key: '44763bb7c8e2112ec018582b22cafab9d33c9c97', class: "Button" }, h("button", { key: '30afeee5c548d20118a05c1e33d7d0511320eb81', disabled: this.isNotificationsLoading || !hasMore, onClick: this.nextPage }, translate('next', this.language), h("svg", { key: '5ae4576782c8b92fdda4315cd1402f61e67d55bd', class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { key: '6f4a955f30cd90222dd9bb3641023cdad5c0b354', 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" }))))))));
185
194
  }
186
195
  static get is() { return "nuts-popover"; }
187
196
  static get originalStyleUrls() {
package/dist/esm/nuts-inbox-widget_3.entry.js CHANGED
@@ -4435,7 +4435,7 @@ const NutsInboxWidget = class {
4435
4435
  return (h("div", { onClick: this.togglePopover, class: "BellIcon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", fill: "currentColor", class: "bi bi-bell", viewBox: "0 0 16 16" }, ' ', h("path", { d: "M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" }), ' '), this.unseenCount > 0 ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: "nc-bell-button-dot css-0 css-1eg2znq" }, 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" }))))) : ('')));
4436
4436
  }
4437
4437
  render() {
4438
- return (h("div", { key: '787bb05f5d9899db7ffb3ec0e4af11f3942d22f0', ref: this.assignRefToStylingContainer, class: "Wrapper" }, h("div", { key: 'dbb13d5d8b49a2a0f0b4cf937bac1040ce49c1c0', ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.popoverVisible && (h("nuts-popover", { key: 'f69d320f49d55b352e388af91949a03adf09cc9f', "notification-action": this.notificationAction, sessionId: this.sessionId, "unseen-count": this.unseenCount, token: this.token, "backend-url": this.backendUrl, "operator-id": this.operatorId, "user-id": this.userId, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }))));
4438
+ return (h("div", { key: '787bb05f5d9899db7ffb3ec0e4af11f3942d22f0', ref: this.assignRefToStylingContainer, class: "Wrapper" }, h("div", { key: 'dbb13d5d8b49a2a0f0b4cf937bac1040ce49c1c0', ref: this.assignRefToBell, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.token && this.popoverVisible && (h("nuts-popover", { key: 'aa12d06f28c728994474a1e246ee9d0634494b7d', "notification-action": this.notificationAction, sessionId: this.sessionId, "unseen-count": this.unseenCount, token: this.token, "backend-url": this.backendUrl, "operator-id": this.operatorId, "user-id": this.userId, language: this.language, "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, "translation-url": this.translationUrl }))));
4439
4439
  }
4440
4440
  get el() { return getElement(this); }
4441
4441
  static get watchers() { return {
@@ -42176,6 +42176,10 @@ const DownOutlined$1 = DownOutlined;
42176
42176
  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" };
42177
42177
  const InfoCircleFilled$1 = InfoCircleFilled;
42178
42178
 
42179
+ // This icon file is generated automatically.
42180
+ var LoadingOutlined = { "icon": { "tag": "svg", "attrs": { "viewBox": "0 0 1024 1024", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" } }] }, "name": "loading", "theme": "outlined" };
42181
+ const LoadingOutlined$1 = LoadingOutlined;
42182
+
42179
42183
  // This icon file is generated automatically.
42180
42184
  var QuestionCircleFilled = { "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 64zm0 708c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40zm62.9-219.5a48.3 48.3 0 00-30.9 44.8V620c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-21.5c0-23.1 6.7-45.9 19.9-64.9 12.9-18.6 30.9-32.8 52.1-40.9 34-13.1 56-41.6 56-72.7 0-44.1-43.1-80-96-80s-96 35.9-96 80v7.6c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V420c0-39.3 17.2-76 48.4-103.3C430.4 290.4 470 276 512 276s81.6 14.5 111.6 40.7C654.8 344 672 380.7 672 420c0 57.8-38.1 109.8-97.1 132.5z" } }] }, "name": "question-circle", "theme": "filled" };
42181
42185
  const QuestionCircleFilled$1 = QuestionCircleFilled;
@@ -42468,7 +42472,7 @@ const NutsNotification = class {
42468
42472
  };
42469
42473
  NutsNotification.style = NutsNotificationStyle0;
42470
42474
 
42471
- const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emw--color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emw--color-gray-300, rgb(30, 30, 38));margin:0px;font-family:inherit;color:var(--emw--color-gray-200, rgb(51, 55, 55));direction:ltr;width:420px;z-index:999;position:absolute;right:0}.Popover .Header{display:flex;padding:0 20px 10px 20px;align-items:center;box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emw--color-white, rgb(255, 255, 255));font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px;display:flex;align-items:center;gap:5px}.Popover .Header .Title .UnseenCounter{margin-right:5px;display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:var(--emw--border-radius-medium, 10px);letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emw--color-secondary-20, rgb(255, 81, 47)) 0%, var(--emw--color-secondary, rgb(221, 36, 118)) 100%);font-family:inherit;line-height:14px;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .Header .ActionButtons{margin-left:auto;display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll,.Popover .Header .ClosePopover{font-style:normal;border:none;background:transparent;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .DeleteAll svg,.Popover .Header .ClosePopover svg{width:25px;height:25px}.Popover .Header .DeleteAll:hover,.Popover .Header .ClosePopover:hover{opacity:0.7;transition:250ms}.Popover .Header .ClosePopover div{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll svg{width:30px;height:30px}.Popover .Header .DeleteAll.Active{opacity:1}.Popover .Header .DeleteAll:disabled{opacity:0.5;cursor:not-allowed}.Popover .DeleteAllDropdown{z-index:999;position:absolute;background:var(--emw--color-gray-400, rgb(41, 41, 51));box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 20px;border-radius:7px;padding:4px;border:none;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;width:max-content;display:flex;flex-direction:column;right:100px;top:50px}.Popover .DeleteAllDropdown svg{margin-right:10px}.Popover .DeleteAllDropdown button{font-family:inherit;border:0px;background-color:transparent;outline:0px;width:100%;text-align:left;text-decoration:none;box-sizing:border-box;padding:10px 12px;cursor:pointer;border-radius:7px;display:flex;align-items:center;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px}.Popover .DeleteAllDropdown button:hover{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}.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(--emw--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(--emw--color-white, rgb(255, 255, 255));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(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}";
42475
+ const nutsPopoverCss = ":host{display:block}.Popover{padding:15px 0px;border-radius:7px;box-shadow:var(--emw--color-gray-400, rgba(0, 0, 0, 0.2)) 0px 5px 20px;background:var(--emw--color-gray-300, rgb(30, 30, 38));margin:0px;font-family:inherit;color:var(--emw--color-gray-200, rgb(51, 55, 55));direction:ltr;width:420px;z-index:999;position:absolute;right:0}.Popover .Header{display:flex;padding:0 20px 10px 20px;align-items:center;box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 5px -5px}.Popover .Header .Title{color:var(--emw--color-white, rgb(255, 255, 255));font-size:20px;font-style:normal;font-weight:700;line-height:24px;text-align:center;padding-left:10px;display:flex;align-items:center;gap:5px}.Popover .Header .Title .UnseenCounter{margin-right:5px;display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;border-radius:var(--emw--border-radius-medium, 10px);letter-spacing:0.25px;text-overflow:ellipsis;overflow:hidden;padding:0px;width:25px;height:20px;pointer-events:none;border:none;background:linear-gradient(0deg, var(--emw--color-secondary-20, rgb(255, 81, 47)) 0%, var(--emw--color-secondary, rgb(221, 36, 118)) 100%);font-family:inherit;line-height:14px;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:bold;font-size:12px}.Popover .Header .MarkAsRead{font-size:14px;font-style:normal;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .MarkAsRead:hover{opacity:0.7;transition:250ms}.Popover .Header .ActionButtons{margin-left:auto;display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll,.Popover .Header .ClosePopover{font-style:normal;border:none;background:transparent;font-weight:400;line-height:17px;color:var(--emw--color-gray-150, rgb(130, 130, 153));cursor:pointer;pointer-events:auto;opacity:0.5}.Popover .Header .DeleteAll svg,.Popover .Header .ClosePopover svg{width:25px;height:25px}.Popover .Header .DeleteAll:hover,.Popover .Header .ClosePopover:hover{opacity:0.7;transition:250ms}.Popover .Header .ClosePopover div{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll{display:flex;align-items:center;justify-content:center}.Popover .Header .DeleteAll svg{width:30px;height:30px}.Popover .Header .DeleteAll.Active{opacity:1}.Popover .Header .DeleteAll:disabled{opacity:0.5;cursor:not-allowed}.Popover .DeleteAllDropdown{z-index:999;position:absolute;background:var(--emw--color-gray-400, rgb(41, 41, 51));box-shadow:var(--emw--color-gray-20, rgba(0, 0, 0, 0.2)) 0px 5px 20px;border-radius:7px;padding:4px;border:none;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;width:max-content;display:flex;flex-direction:column;right:100px;top:50px}.Popover .DeleteAllDropdown svg{margin-right:10px}.Popover .DeleteAllDropdown button{font-family:inherit;border:0px;background-color:transparent;outline:0px;width:100%;text-align:left;text-decoration:none;box-sizing:border-box;padding:10px 12px;cursor:pointer;border-radius:7px;display:flex;align-items:center;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px}.Popover .DeleteAllDropdown button:hover{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}.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(--emw--color-white, #fff);opacity:0.7}.Popover .Loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.Popover .Loading svg{animation:spin 1s linear infinite;transform-origin:center}.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(--emw--color-white, rgb(255, 255, 255));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(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}@keyframes spin{100%{transform:rotate(360deg)}}";
42472
42476
  const NutsPopoverStyle0 = nutsPopoverCss;
42473
42477
 
42474
42478
  const NutsPopover = class {
@@ -42565,7 +42569,14 @@ const NutsPopover = class {
42565
42569
  this.notifications = this.notifications.filter((item) => {
42566
42570
  return item.id != event.detail;
42567
42571
  });
42568
- this.triggerGetNotifications();
42572
+ this.triggerGetNotifications().then(() => {
42573
+ var _a;
42574
+ if (((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.length) === 0 && this.currentPage > 0) {
42575
+ // move back a page if no notifications
42576
+ this.currentPage--;
42577
+ this.triggerGetNotifications();
42578
+ }
42579
+ });
42569
42580
  }
42570
42581
  allMessagesDeletedHandler() {
42571
42582
  this.notifications = [];
@@ -42625,7 +42636,7 @@ const NutsPopover = class {
42625
42636
  }
42626
42637
  async triggerGetNotifications() {
42627
42638
  this.isNotificationsLoading = true;
42628
- getNotifications({
42639
+ return getNotifications({
42629
42640
  baseUrl: this.baseUrl,
42630
42641
  token: this.token,
42631
42642
  page: this.currentPage
@@ -42648,12 +42659,14 @@ const NutsPopover = class {
42648
42659
  render() {
42649
42660
  var _a, _b, _c;
42650
42661
  const hasMore = this.hasMore || ((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.length) > 10;
42651
- return (h("div", { key: '94960f5609a5dd4f9a318b052e99896da2670bbb', class: "Popover", ref: this.assignRefToStylingContainer }, h("div", { key: 'cb40bd7d3db8d9ce4fab632e5460ea562882f809', class: "Header" }, h("div", { key: '058ea6897706dd84ba25d06f91fe8a2bfc1fd01b', class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (h("div", { key: '32d7c170433047c845ff9dd2218e7c87e1290ff4', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate$1('markAllAsRead', this.language))), h("div", { key: '4aff88677c6bf58cca1eb73eda1da1f58c75ce71', class: "ActionButtons" }, h("button", { key: '5590daa75d8905058f776207e45b910438cbfa3e', class: `DeleteAll${this.showDeleteAllPopup ? ' Active' : ''}`, onClick: this.showDeletePopup, disabled: !((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) }, h("svg", { key: '3a76d4a165150da3929654e3e261c89ecfea1563', width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a7a3cedc1e9f785cc26cb413dbaf183c49ed02f8', 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" }))), h("button", { key: '71e571b7f006bbcbcdac05ddd204f7b5dbdad04e', class: "ClosePopover", onClick: this.closePopover }, h("div", { key: 'ef1eeb7359b3957a14ddabd04db94e385da975eb', innerHTML: renderIconDefinitionToSVGElement(CloseCircleOutlined$1, {
42662
+ return (h("div", { key: '94ea0833d61cc14b27c7e62efca7955f528dbf39', class: "Popover", ref: this.assignRefToStylingContainer }, h("div", { key: '700acb84baa0ac6111c6f2090e26e18e3839b3ef', class: "Header" }, h("div", { key: '798c392f1e8642e77bb3dbd96979c771cc629b77', class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (h("div", { key: '034d38968d303d4b6e6e6663a614092d08cf4e53', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate$1('markAllAsRead', this.language))), h("div", { key: '96ebc2cd685221d47589a9a5fd3b8c0a238765f4', class: "ActionButtons" }, h("button", { key: '7ae8cdb4cf7922c1e472608f3865f05c617a3e7d', class: `DeleteAll${this.showDeleteAllPopup ? ' Active' : ''}`, onClick: this.showDeletePopup, disabled: !((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) }, h("svg", { key: 'ecc35d83ffb2e2696ffb18012a1f83d1f9c49be0', width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ea0f49425921128d61446823699a6d14f4a15722', 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" }))), h("button", { key: '6fb692e0e025e4f8c3ccb353ece7db4dc597c281', class: "ClosePopover", onClick: this.closePopover }, h("div", { key: 'a88958ec18cf210b0b2214c4f82885d9b573650e', innerHTML: renderIconDefinitionToSVGElement(CloseCircleOutlined$1, {
42652
42663
  extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' }
42653
- }) }))), this.showDeleteAllPopup && (h("div", { key: 'd0b41220c1f8621a60aecd33dd9898c04600951b', class: "DeleteAllDropdown", ref: (el) => (this.dropdownRef = el) }, h("button", { key: 'af20f31747b4998eeff55a028fde7c9fe11149a9', onClick: this.deleteAllNotifications }, translate$1('deleteAllMessages', this.language))))), h("div", { key: '61f995dcbf74c027b0f70c84ef8dbc35e66c782f', class: "NotificationList" }, !this.isLoading && ((_c = this.notifications) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (this.notifications.map((item) => {
42664
+ }) }))), this.showDeleteAllPopup && (h("div", { key: 'cd836e052cc0d3d08a97e7300d509b2c5424488a', class: "DeleteAllDropdown", ref: (el) => (this.dropdownRef = el) }, h("button", { key: 'd93854f9b264cb91c911c78275785875adebc77b', onClick: this.deleteAllNotifications }, translate$1('deleteAllMessages', this.language))))), !this.isLoading && (h("div", { key: '035828ba1b3cfcbc84b1bd40018eebe01360a9f0', class: "NotificationList" }, this.isNotificationsLoading ? (h("div", { class: "Loading", innerHTML: renderIconDefinitionToSVGElement(LoadingOutlined$1, {
42665
+ extraSVGAttrs: { width: '30px', height: '30px', fill: '#A1A1B2' }
42666
+ }) })) : ((_c = this.notifications) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (this.notifications.map((item) => {
42654
42667
  var _a;
42655
42668
  return (h("nuts-notification", { "client-styling": this.clientStyling, "client-styling-url": this.clientStylingUrl, key: item.id, "user-id": this.userId, "operator-id": this.operatorId, content: item.content, "message-id": item.id, badge: ((_a = item.actor) === null || _a === void 0 ? void 0 : _a.data) || '', sessionId: this.sessionId, date: item.createdAt, read: item.read, seen: item.seen, language: this.language, "notification-action": this.notificationAction, token: this.token, "backend-url": this.backendUrl, "redirect-url": item.cta.data.url, "translation-url": this.translationUrl }));
42656
- })) : (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 && (h("div", { key: '65cf0c44a9c280e0124a157641d87f3cfe86f044', class: "Pagination" }, h("div", { key: 'fdbd9a5e01bc05a0eda65385d914a9ae3df38770', class: "Button" }, h("button", { key: 'ff49010496c01de7b501037c8d50f9e1abf59726', disabled: this.currentPage <= 0, onClick: this.prevPage }, h("svg", { key: '1da4701f89af5f1072f0faba9e2c7775bd761044', class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { key: 'e66f3da84a565461a92839b883cb05c5b62242ad', 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", { key: '7f24dbe58cf922a17ea57e03dee020afbacd879f', class: "Button" }, h("button", { key: 'fe8515e9bc6c35c3c6032745415b3f8b405fe4bb', disabled: this.isNotificationsLoading || !hasMore, onClick: this.nextPage }, translate$1('next', this.language), h("svg", { key: '9bb9aa49db50905f571bb0b70159c813742dd37c', class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { key: '4a84d3e9108bba79370cae2df4224252ef3d2733', 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" }))))))));
42669
+ })) : (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 && (h("div", { key: '1525888bd00ffa71370ba18b970e0ca4bac933a8', class: "Pagination" }, h("div", { key: 'ed8293d962993acf50cdfe8ab0ef1bbc89370ac5', class: "Button" }, h("button", { key: 'a36e8389f65da5305ae86263071f154478777107', disabled: this.isNotificationsLoading || this.currentPage <= 0, onClick: this.prevPage }, h("svg", { key: '4ac14009be9c16525c86392c82fd03c89c25679c', class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { key: 'c00f83ae7eed53eae706b424ea2d866f06a5d48e', 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", { key: '44763bb7c8e2112ec018582b22cafab9d33c9c97', class: "Button" }, h("button", { key: '30afeee5c548d20118a05c1e33d7d0511320eb81', disabled: this.isNotificationsLoading || !hasMore, onClick: this.nextPage }, translate$1('next', this.language), h("svg", { key: '5ae4576782c8b92fdda4315cd1402f61e67d55bd', class: "svg-icon", viewBox: "0 0 20 20" }, h("path", { key: '6f4a955f30cd90222dd9bb3641023cdad5c0b354', 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" }))))))));
42657
42670
  }
42658
42671
  static get watchers() { return {
42659
42672
  "unseenCount": ["unseenCountHandler"],