@everymatrix/nuts-inbox-widget 1.73.21 → 1.73.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/nuts-inbox-widget_3.cjs.entry.js +5 -4
- package/dist/collection/components/nuts-inbox-widget/nuts-inbox-widget.js +2 -1
- package/dist/collection/components/nuts-popover/nuts-popover.css +19 -6
- package/dist/collection/components/nuts-popover/nuts-popover.js +2 -2
- package/dist/esm/nuts-inbox-widget_3.entry.js +5 -4
- package/dist/nuts-inbox-widget/nuts-inbox-widget_3.entry.js +1 -1
- package/package.json +1 -1
|
@@ -4354,6 +4354,7 @@ const NutsInboxWidget = class {
|
|
|
4354
4354
|
}
|
|
4355
4355
|
closePopoverHandler() {
|
|
4356
4356
|
this.popoverVisible = false;
|
|
4357
|
+
window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
|
|
4357
4358
|
}
|
|
4358
4359
|
positionIcon() {
|
|
4359
4360
|
if (this.bellIconPosition == 'left') {
|
|
@@ -4440,7 +4441,7 @@ const NutsInboxWidget = class {
|
|
|
4440
4441
|
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" }))))) : ('')));
|
|
4441
4442
|
}
|
|
4442
4443
|
render() {
|
|
4443
|
-
return (index.h("div", { key: '
|
|
4444
|
+
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 }))));
|
|
4444
4445
|
}
|
|
4445
4446
|
get el() { return index.getElement(this); }
|
|
4446
4447
|
static get watchers() { return {
|
|
@@ -42473,7 +42474,7 @@ const NutsNotification = class {
|
|
|
42473
42474
|
};
|
|
42474
42475
|
NutsNotification.style = NutsNotificationStyle0;
|
|
42475
42476
|
|
|
42476
|
-
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 .DeleteAll,.Popover .Header .
|
|
42477
|
+
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}";
|
|
42477
42478
|
const NutsPopoverStyle0 = nutsPopoverCss;
|
|
42478
42479
|
|
|
42479
42480
|
const NutsPopover = class {
|
|
@@ -42666,9 +42667,9 @@ const NutsPopover = class {
|
|
|
42666
42667
|
}
|
|
42667
42668
|
render() {
|
|
42668
42669
|
var _a, _b, _c;
|
|
42669
|
-
return (index.h("div", { key: '475fae425a652a600597b607f1805139591daef4', class: "Popover", ref: this.assignRefToStylingContainer }, index.h("div", { key: 'f56b473cd1a0342e65811d969a9b8ecdfb2500c5', class: "Header" }, index.h("div", { key: 'df40bb6dc654a27d2ddd6dcb0411351c1e9f918e', class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? index.h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (index.h("div", { key: '9f4805c808d142d8ce09b01ce8d3a46e74120bd0', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate$1('markAllAsRead', this.language))), index.h("button", { key: '
|
|
42670
|
+
return (index.h("div", { key: '475fae425a652a600597b607f1805139591daef4', class: "Popover", ref: this.assignRefToStylingContainer }, index.h("div", { key: 'f56b473cd1a0342e65811d969a9b8ecdfb2500c5', class: "Header" }, index.h("div", { key: 'df40bb6dc654a27d2ddd6dcb0411351c1e9f918e', class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? index.h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (index.h("div", { key: '9f4805c808d142d8ce09b01ce8d3a46e74120bd0', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate$1('markAllAsRead', this.language))), index.h("div", { key: 'a48ea2aadf5a2066d773b51ba36accfade3a5065', class: "ActionButtons" }, index.h("button", { key: '575aaec9c96f4c20b589391a67cf5883e17b8236', class: `DeleteAll${this.showDeleteAllPopup ? ' Active' : ''}`, onClick: this.showDeletePopup, disabled: !((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.length) }, index.h("svg", { key: '501ad3838b23f1c522fc79ca3eb7f67e092594af', width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'ef0f00fdf9ec60ab1706744093f3f4bef8d1f7fd', 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: '0633c6664285b0957ae47405a326e1778be7daa4', class: "ClosePopover", onClick: this.closePopover }, index.h("div", { key: '0bbe68217df27ea693718b7450a01b9372a3eeb8', innerHTML: renderIconDefinitionToSVGElement(CloseCircleOutlined$1, {
|
|
42670
42671
|
extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' }
|
|
42671
|
-
}) })), this.showDeleteAllPopup && (index.h("div", { key: '
|
|
42672
|
+
}) }))), this.showDeleteAllPopup && (index.h("div", { key: '045510529b091eb368da1c4a8904198175a05480', class: "DeleteAllDropdown", ref: (el) => (this.dropdownRef = el) }, index.h("button", { key: 'f622f1f1a206253ad46c16536b00637e83ac72ff', onClick: this.deleteAllNotifications }, translate$1('deleteAllMessages', this.language))))), index.h("div", { key: 'c027f895d6ee4227614bde8bee6d4f2e9d02642a', class: "NotificationList" }, !this.isLoading &&
|
|
42672
42673
|
(((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (this.notifications.map((item) => {
|
|
42673
42674
|
var _a;
|
|
42674
42675
|
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 }));
|
|
@@ -94,6 +94,7 @@ export class NutsInboxWidget {
|
|
|
94
94
|
}
|
|
95
95
|
closePopoverHandler() {
|
|
96
96
|
this.popoverVisible = false;
|
|
97
|
+
window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
|
|
97
98
|
}
|
|
98
99
|
positionIcon() {
|
|
99
100
|
if (this.bellIconPosition == 'left') {
|
|
@@ -180,7 +181,7 @@ export class NutsInboxWidget {
|
|
|
180
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" }))))) : ('')));
|
|
181
182
|
}
|
|
182
183
|
render() {
|
|
183
|
-
return (h("div", { key: '
|
|
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
185
|
}
|
|
185
186
|
static get is() { return "nuts-inbox-widget"; }
|
|
186
187
|
static get encapsulation() { return "shadow"; }
|
|
@@ -75,8 +75,14 @@
|
|
|
75
75
|
opacity: 0.7;
|
|
76
76
|
transition: 250ms;
|
|
77
77
|
}
|
|
78
|
+
.Popover .Header .ActionButtons {
|
|
79
|
+
margin-left: auto;
|
|
80
|
+
display: flex;
|
|
81
|
+
align-items: center;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
}
|
|
78
84
|
.Popover .Header .DeleteAll,
|
|
79
|
-
.Popover .Header .
|
|
85
|
+
.Popover .Header .ClosePopover {
|
|
80
86
|
font-style: normal;
|
|
81
87
|
border: none;
|
|
82
88
|
background: transparent;
|
|
@@ -88,15 +94,25 @@
|
|
|
88
94
|
opacity: 0.5;
|
|
89
95
|
}
|
|
90
96
|
.Popover .Header .DeleteAll svg,
|
|
91
|
-
.Popover .Header .
|
|
97
|
+
.Popover .Header .ClosePopover svg {
|
|
92
98
|
width: 25px;
|
|
93
99
|
height: 25px;
|
|
94
100
|
}
|
|
95
101
|
.Popover .Header .DeleteAll:hover,
|
|
96
|
-
.Popover .Header .
|
|
102
|
+
.Popover .Header .ClosePopover:hover {
|
|
97
103
|
opacity: 0.7;
|
|
98
104
|
transition: 250ms;
|
|
99
105
|
}
|
|
106
|
+
.Popover .Header .ClosePopover div {
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
}
|
|
111
|
+
.Popover .Header .DeleteAll {
|
|
112
|
+
display: flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
}
|
|
100
116
|
.Popover .Header .DeleteAll svg {
|
|
101
117
|
width: 30px;
|
|
102
118
|
height: 30px;
|
|
@@ -108,9 +124,6 @@
|
|
|
108
124
|
opacity: 0.5;
|
|
109
125
|
cursor: not-allowed;
|
|
110
126
|
}
|
|
111
|
-
.Popover .Header .Close {
|
|
112
|
-
margin-left: auto;
|
|
113
|
-
}
|
|
114
127
|
.Popover .DeleteAllDropdown {
|
|
115
128
|
z-index: 999;
|
|
116
129
|
position: absolute;
|
|
@@ -189,9 +189,9 @@ export class NutsPopover {
|
|
|
189
189
|
}
|
|
190
190
|
render() {
|
|
191
191
|
var _a, _b, _c;
|
|
192
|
-
return (h("div", { key: '475fae425a652a600597b607f1805139591daef4', class: "Popover", ref: this.assignRefToStylingContainer }, h("div", { key: 'f56b473cd1a0342e65811d969a9b8ecdfb2500c5', class: "Header" }, h("div", { key: 'df40bb6dc654a27d2ddd6dcb0411351c1e9f918e', class: "Title" }, translate('notifications', this.language), this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (h("div", { key: '9f4805c808d142d8ce09b01ce8d3a46e74120bd0', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate('markAllAsRead', this.language))), h("button", { key: '
|
|
192
|
+
return (h("div", { key: '475fae425a652a600597b607f1805139591daef4', class: "Popover", ref: this.assignRefToStylingContainer }, h("div", { key: 'f56b473cd1a0342e65811d969a9b8ecdfb2500c5', class: "Header" }, h("div", { key: 'df40bb6dc654a27d2ddd6dcb0411351c1e9f918e', class: "Title" }, translate('notifications', this.language), this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (h("div", { key: '9f4805c808d142d8ce09b01ce8d3a46e74120bd0', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate('markAllAsRead', this.language))), h("div", { key: 'a48ea2aadf5a2066d773b51ba36accfade3a5065', class: "ActionButtons" }, h("button", { key: '575aaec9c96f4c20b589391a67cf5883e17b8236', class: `DeleteAll${this.showDeleteAllPopup ? ' Active' : ''}`, onClick: this.showDeletePopup, disabled: !((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.length) }, h("svg", { key: '501ad3838b23f1c522fc79ca3eb7f67e092594af', width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ef0f00fdf9ec60ab1706744093f3f4bef8d1f7fd', 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: '0633c6664285b0957ae47405a326e1778be7daa4', class: "ClosePopover", onClick: this.closePopover }, h("div", { key: '0bbe68217df27ea693718b7450a01b9372a3eeb8', innerHTML: renderIconDefinitionToSVGElement(CloseCircleOutlined, {
|
|
193
193
|
extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' }
|
|
194
|
-
}) })), this.showDeleteAllPopup && (h("div", { key: '
|
|
194
|
+
}) }))), this.showDeleteAllPopup && (h("div", { key: '045510529b091eb368da1c4a8904198175a05480', class: "DeleteAllDropdown", ref: (el) => (this.dropdownRef = el) }, h("button", { key: 'f622f1f1a206253ad46c16536b00637e83ac72ff', onClick: this.deleteAllNotifications }, translate('deleteAllMessages', this.language))))), h("div", { key: 'c027f895d6ee4227614bde8bee6d4f2e9d02642a', class: "NotificationList" }, !this.isLoading &&
|
|
195
195
|
(((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (this.notifications.map((item) => {
|
|
196
196
|
var _a;
|
|
197
197
|
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 }));
|
|
@@ -4350,6 +4350,7 @@ const NutsInboxWidget = class {
|
|
|
4350
4350
|
}
|
|
4351
4351
|
closePopoverHandler() {
|
|
4352
4352
|
this.popoverVisible = false;
|
|
4353
|
+
window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
|
|
4353
4354
|
}
|
|
4354
4355
|
positionIcon() {
|
|
4355
4356
|
if (this.bellIconPosition == 'left') {
|
|
@@ -4436,7 +4437,7 @@ const NutsInboxWidget = class {
|
|
|
4436
4437
|
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" }))))) : ('')));
|
|
4437
4438
|
}
|
|
4438
4439
|
render() {
|
|
4439
|
-
return (h("div", { key: '
|
|
4440
|
+
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 }))));
|
|
4440
4441
|
}
|
|
4441
4442
|
get el() { return getElement(this); }
|
|
4442
4443
|
static get watchers() { return {
|
|
@@ -42469,7 +42470,7 @@ const NutsNotification = class {
|
|
|
42469
42470
|
};
|
|
42470
42471
|
NutsNotification.style = NutsNotificationStyle0;
|
|
42471
42472
|
|
|
42472
|
-
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 .DeleteAll,.Popover .Header .
|
|
42473
|
+
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}";
|
|
42473
42474
|
const NutsPopoverStyle0 = nutsPopoverCss;
|
|
42474
42475
|
|
|
42475
42476
|
const NutsPopover = class {
|
|
@@ -42662,9 +42663,9 @@ const NutsPopover = class {
|
|
|
42662
42663
|
}
|
|
42663
42664
|
render() {
|
|
42664
42665
|
var _a, _b, _c;
|
|
42665
|
-
return (h("div", { key: '475fae425a652a600597b607f1805139591daef4', class: "Popover", ref: this.assignRefToStylingContainer }, h("div", { key: 'f56b473cd1a0342e65811d969a9b8ecdfb2500c5', class: "Header" }, h("div", { key: 'df40bb6dc654a27d2ddd6dcb0411351c1e9f918e', class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (h("div", { key: '9f4805c808d142d8ce09b01ce8d3a46e74120bd0', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate$1('markAllAsRead', this.language))), h("button", { key: '
|
|
42666
|
+
return (h("div", { key: '475fae425a652a600597b607f1805139591daef4', class: "Popover", ref: this.assignRefToStylingContainer }, h("div", { key: 'f56b473cd1a0342e65811d969a9b8ecdfb2500c5', class: "Header" }, h("div", { key: 'df40bb6dc654a27d2ddd6dcb0411351c1e9f918e', class: "Title" }, translate$1('notifications', this.language), this.unseenCount > 0 ? h("div", { class: "UnseenCounter" }, this.unseenCount) : ''), this.showMarkAll && (h("div", { key: '9f4805c808d142d8ce09b01ce8d3a46e74120bd0', class: "MarkAsRead", onClick: this.markAllNotificationsAsRead }, translate$1('markAllAsRead', this.language))), h("div", { key: 'a48ea2aadf5a2066d773b51ba36accfade3a5065', class: "ActionButtons" }, h("button", { key: '575aaec9c96f4c20b589391a67cf5883e17b8236', class: `DeleteAll${this.showDeleteAllPopup ? ' Active' : ''}`, onClick: this.showDeletePopup, disabled: !((_a = this.notifications) === null || _a === void 0 ? void 0 : _a.length) }, h("svg", { key: '501ad3838b23f1c522fc79ca3eb7f67e092594af', width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ef0f00fdf9ec60ab1706744093f3f4bef8d1f7fd', 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: '0633c6664285b0957ae47405a326e1778be7daa4', class: "ClosePopover", onClick: this.closePopover }, h("div", { key: '0bbe68217df27ea693718b7450a01b9372a3eeb8', innerHTML: renderIconDefinitionToSVGElement(CloseCircleOutlined$1, {
|
|
42666
42667
|
extraSVGAttrs: { width: '20px', height: '20px', fill: '#A1A1B2' }
|
|
42667
|
-
}) })), this.showDeleteAllPopup && (h("div", { key: '
|
|
42668
|
+
}) }))), this.showDeleteAllPopup && (h("div", { key: '045510529b091eb368da1c4a8904198175a05480', class: "DeleteAllDropdown", ref: (el) => (this.dropdownRef = el) }, h("button", { key: 'f622f1f1a206253ad46c16536b00637e83ac72ff', onClick: this.deleteAllNotifications }, translate$1('deleteAllMessages', this.language))))), h("div", { key: 'c027f895d6ee4227614bde8bee6d4f2e9d02642a', class: "NotificationList" }, !this.isLoading &&
|
|
42668
42669
|
(((_b = this.notifications) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (this.notifications.map((item) => {
|
|
42669
42670
|
var _a;
|
|
42670
42671
|
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 }));
|