@everymatrix/nuts-inbox-widget 1.77.29 → 1.77.31
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 +54 -20
- package/dist/collection/components/nuts-notification/nuts-notification.js +17 -8
- package/dist/collection/utils/utils.js +37 -12
- package/dist/esm/nuts-inbox-widget_3.entry.js +54 -20
- package/dist/nuts-inbox-widget/nuts-inbox-widget_3.entry.js +1 -1
- package/dist/types/utils/utils.d.ts +1 -1
- package/hydrate/index.js +49 -16
- package/hydrate/index.mjs +49 -16
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const truncate: (str: string,
|
|
1
|
+
export declare const truncate: (str: string, maxChars: number, maxLines: number) => string;
|
package/hydrate/index.js
CHANGED
|
@@ -44400,19 +44400,44 @@ function renderAbstractNodeToSVGElement(node, options) {
|
|
|
44400
44400
|
const MAX_NOTIFICATION_TEXT_LENGTH = 200;
|
|
44401
44401
|
const MAX_NOTIFICATION_LINES = 5;
|
|
44402
44402
|
|
|
44403
|
-
const truncate = (str,
|
|
44404
|
-
|
|
44405
|
-
|
|
44406
|
-
|
|
44407
|
-
|
|
44408
|
-
|
|
44409
|
-
|
|
44410
|
-
|
|
44411
|
-
|
|
44412
|
-
|
|
44413
|
-
|
|
44403
|
+
const truncate = (str, maxChars, maxLines) => {
|
|
44404
|
+
var _a, _b, _c;
|
|
44405
|
+
if (!str || maxChars < 0)
|
|
44406
|
+
return "";
|
|
44407
|
+
const parser = new DOMParser();
|
|
44408
|
+
const doc = parser.parseFromString(str, "text/html");
|
|
44409
|
+
let charCount = 0;
|
|
44410
|
+
let lineCount = 0;
|
|
44411
|
+
const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
|
|
44412
|
+
while (walker.nextNode()) {
|
|
44413
|
+
const node = walker.currentNode;
|
|
44414
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
44415
|
+
const text = node.textContent || "";
|
|
44416
|
+
if (charCount + text.length > maxChars) {
|
|
44417
|
+
node.textContent = text.slice(0, maxChars - charCount) + "...";
|
|
44418
|
+
while (node.nextSibling) {
|
|
44419
|
+
(_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node.nextSibling);
|
|
44420
|
+
}
|
|
44421
|
+
break;
|
|
44422
|
+
}
|
|
44423
|
+
charCount += text.length;
|
|
44424
|
+
}
|
|
44425
|
+
else {
|
|
44426
|
+
const tagName = node.nodeName.toLowerCase();
|
|
44427
|
+
if (tagName === "br" || /^h[1-6]$/.test(tagName) || tagName === "p") {
|
|
44428
|
+
lineCount++;
|
|
44429
|
+
if (lineCount >= maxLines) {
|
|
44430
|
+
const ellipsis = doc.createTextNode("...");
|
|
44431
|
+
(_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(ellipsis, node.nextSibling);
|
|
44432
|
+
while (node.nextSibling) {
|
|
44433
|
+
(_c = node.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(node.nextSibling);
|
|
44434
|
+
}
|
|
44435
|
+
break;
|
|
44436
|
+
}
|
|
44437
|
+
}
|
|
44438
|
+
}
|
|
44414
44439
|
}
|
|
44415
|
-
return
|
|
44440
|
+
return doc.body.innerHTML;
|
|
44416
44441
|
};
|
|
44417
44442
|
|
|
44418
44443
|
const nutsNotificationCss = ":host{display:block}p{display:block;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px}.NotificationContainer{animation:show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;transform-origin:top center;padding:15px;position:relative;display:flex;line-height:20px;justify-content:space-between;align-items:flex-start;border-radius:7px;margin:10px 15px;color:var(--emw--color-white, rgb(255, 255, 255));background:var(--emw--color-gray-400, rgb(35, 35, 43));font-weight:400;font-size:14px;gap:8px;cursor:pointer}@keyframes show{100%{opacity:1;transform:none}}.NotificationContainer .AvatarContainer{margin-right:10px;width:40px;min-width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40px;border:1px solid var(--emw--color-gray-200, rgb(82, 82, 102));overflow:hidden}.NotificationContainer .AvatarContainer .Avatar{box-sizing:border-box;position:relative;display:flex;user-select:none;overflow:hidden;width:38px;min-width:38px;height:38px;border-radius:32px;text-decoration:none;border:0px;background-color:transparent;padding:0px;justify-content:center;align-items:center}.NotificationContainer .AvatarContainer .Avatar .AvatarImage{object-fit:cover;width:100%;height:100%;display:block}.NotificationContainer .AvatarContainer .Avatar svg{object-fit:cover;display:block}.NotificationContainer .ContentContainer{display:flex;flex-direction:column;word-break:break-word;text-align:justify}.NotificationContainer .RightActionsContainer{display:flex;flex-direction:column}.NotificationContainer .FlipX{transform:rotateX(180deg) translate(0, 4px)}.NotificationContainer .AccordionArrow{margin-left:4px;transition-duration:0.2s;transition-property:transform}.NotificationContainer .Date{min-width:55px;font-size:12px;font-weight:400;opacity:0.5;line-height:14.4px;color:var(--emw--color-gray-200, rgb(82, 82, 102))}.NotificationContainer .Settings{opacity:0.5;display:inline;cursor:pointer}.Unseen::before{content:\"\";position:absolute;inset:0px;width:5px;border-radius:7px 0px 0px 7px;background:linear-gradient(0deg, var(--emw--color-secondary-20, rgb(255, 81, 47)) 0%, var(--emw--color-secondary, rgb(221, 36, 118)) 100%)}.Unseen:hover .UnseenButton{display:none}.SettingsDropdown{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:50px;top:50px}.SettingsDropdown svg{margin-right:10px}.SettingsDropdown button{font-family:inherit;border:0px;background-color:transparent;outline:0px;width:100%;text-align:left;text-decoration:none;box-sizing:border-box;padding:10px 12px;cursor:pointer;border-radius:7px;display:flex;align-items:center;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px}.SettingsDropdown button:hover{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}.Wrapper{position:relative}";
|
|
@@ -44609,9 +44634,17 @@ class NutsNotification {
|
|
|
44609
44634
|
}
|
|
44610
44635
|
}
|
|
44611
44636
|
connectedCallback() {
|
|
44637
|
+
var _a;
|
|
44612
44638
|
this.messageSeen = this.seen;
|
|
44613
44639
|
this.messageRead = this.read;
|
|
44614
|
-
|
|
44640
|
+
const fullyStrippedContent = DOMPurify.sanitize(this.content, { ALLOWED_TAGS: [] });
|
|
44641
|
+
if ((fullyStrippedContent === null || fullyStrippedContent === void 0 ? void 0 : fullyStrippedContent.length) > this.maxTextLength ||
|
|
44642
|
+
(((_a = this.content) === null || _a === void 0 ? void 0 : _a.match(/<br\s*\/?>|<\/p>|<\/h[1-6]>/gi)) || []).length) {
|
|
44643
|
+
this.displayedContent = truncate(this.content, this.maxTextLength, this.maxLines);
|
|
44644
|
+
}
|
|
44645
|
+
else {
|
|
44646
|
+
this.displayedContent = this.content;
|
|
44647
|
+
}
|
|
44615
44648
|
this.baseUrl = `${this.backendUrl}/v1/${this.operatorId}`;
|
|
44616
44649
|
}
|
|
44617
44650
|
render() {
|
|
@@ -44649,11 +44682,11 @@ class NutsNotification {
|
|
|
44649
44682
|
'blockquote'
|
|
44650
44683
|
]
|
|
44651
44684
|
});
|
|
44652
|
-
return (hAsync("div", { key: '
|
|
44685
|
+
return (hAsync("div", { key: 'cd323dec5da352d3fc988ff5ea6d5ffdf1ac63dc', class: "Wrapper" }, hAsync("div", { key: '43360a47de85a81de9dea47526e3a05abaffd325', class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: this.assignRefToStylingContainer, onClick: this.notificationActionHandler }, this.badge ? (hAsync("div", { class: "AvatarContainer" }, hAsync("div", { class: "Avatar" }, ((_a = systemIcons[this.badge]) === null || _a === void 0 ? void 0 : _a.icon) ? (hAsync("div", { innerHTML: systemIcons[this.badge].icon })) : (hAsync("img", { class: "AvatarImage", src: this.badge }))))) : (''), hAsync("div", { key: 'de5056636fd06587696fd508ad8798c42c209bbd', class: "ContentContainer" }, hAsync("div", { key: '5b2fce80f04fe61a32d6d426c4b96808c6d8f4da', innerHTML: sanitizedNotificationBody }), hAsync("p", { key: 'c64bc6625c14614d665e35c18cba82f58b0f4450', class: "Date" }, formatDistanceToNow(new Date(this.date), {
|
|
44653
44686
|
addSuffix: true,
|
|
44654
44687
|
locale: dateFnsLocale(this.language)
|
|
44655
|
-
}))), hAsync("div", { key: '
|
|
44656
|
-
(((_c = this.content) === null || _c === void 0 ? void 0 : _c.match(/<br\s*\/?>|<\/p>/gi)) || []).length > this.maxLines) && (hAsync("div", { key: '
|
|
44688
|
+
}))), hAsync("div", { key: 'dba3f1c12ec6875c9873c4b12a7dc56bff7e1063', class: "RightActionsContainer" }, hAsync("div", { key: '1f972b847eb6670f103d31f270ed73c1e9c736ba', class: "Settings", onClick: this.toggleSettingsModal }, hAsync("svg", { key: '82bd09c22dc5d80103b30aceaaefa015b15a3ea3', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: 'b1d08fbcf1b17af6aada23bb50d5fb2c049a5f91', d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), (((_b = DOMPurify.sanitize(this.content, { ALLOWED_TAGS: [] })) === null || _b === void 0 ? void 0 : _b.length) > this.maxTextLength ||
|
|
44689
|
+
(((_c = this.content) === null || _c === void 0 ? void 0 : _c.match(/<br\s*\/?>|<\/p>|<\/h[1-6]>/gi)) || []).length > this.maxLines) && (hAsync("div", { key: '5674e3a4b26604e16e6774cff3a8d18a0e12d709', class: "AccordionArrow", innerHTML: systemIcons.arrowDown.icon, ref: this.assignRefToDropdownArrow })))), this.showSettingsModal ? (hAsync("div", { class: "SettingsDropdown" }, hAsync("button", { onClick: this.toggleNotificationRead }, hAsync("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate$1(this.messageRead ? 'markAsUnread' : 'markAsRead', this.language)), hAsync("button", { onClick: this.deleteNotification }, hAsync("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate$1('removeMessage', this.language)))) : ('')));
|
|
44657
44690
|
}
|
|
44658
44691
|
get el() { return getElement(this); }
|
|
44659
44692
|
static get watchers() { return {
|
package/hydrate/index.mjs
CHANGED
|
@@ -44396,19 +44396,44 @@ function renderAbstractNodeToSVGElement(node, options) {
|
|
|
44396
44396
|
const MAX_NOTIFICATION_TEXT_LENGTH = 200;
|
|
44397
44397
|
const MAX_NOTIFICATION_LINES = 5;
|
|
44398
44398
|
|
|
44399
|
-
const truncate = (str,
|
|
44400
|
-
|
|
44401
|
-
|
|
44402
|
-
|
|
44403
|
-
|
|
44404
|
-
|
|
44405
|
-
|
|
44406
|
-
|
|
44407
|
-
|
|
44408
|
-
|
|
44409
|
-
|
|
44399
|
+
const truncate = (str, maxChars, maxLines) => {
|
|
44400
|
+
var _a, _b, _c;
|
|
44401
|
+
if (!str || maxChars < 0)
|
|
44402
|
+
return "";
|
|
44403
|
+
const parser = new DOMParser();
|
|
44404
|
+
const doc = parser.parseFromString(str, "text/html");
|
|
44405
|
+
let charCount = 0;
|
|
44406
|
+
let lineCount = 0;
|
|
44407
|
+
const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
|
|
44408
|
+
while (walker.nextNode()) {
|
|
44409
|
+
const node = walker.currentNode;
|
|
44410
|
+
if (node.nodeType === Node.TEXT_NODE) {
|
|
44411
|
+
const text = node.textContent || "";
|
|
44412
|
+
if (charCount + text.length > maxChars) {
|
|
44413
|
+
node.textContent = text.slice(0, maxChars - charCount) + "...";
|
|
44414
|
+
while (node.nextSibling) {
|
|
44415
|
+
(_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(node.nextSibling);
|
|
44416
|
+
}
|
|
44417
|
+
break;
|
|
44418
|
+
}
|
|
44419
|
+
charCount += text.length;
|
|
44420
|
+
}
|
|
44421
|
+
else {
|
|
44422
|
+
const tagName = node.nodeName.toLowerCase();
|
|
44423
|
+
if (tagName === "br" || /^h[1-6]$/.test(tagName) || tagName === "p") {
|
|
44424
|
+
lineCount++;
|
|
44425
|
+
if (lineCount >= maxLines) {
|
|
44426
|
+
const ellipsis = doc.createTextNode("...");
|
|
44427
|
+
(_b = node.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(ellipsis, node.nextSibling);
|
|
44428
|
+
while (node.nextSibling) {
|
|
44429
|
+
(_c = node.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(node.nextSibling);
|
|
44430
|
+
}
|
|
44431
|
+
break;
|
|
44432
|
+
}
|
|
44433
|
+
}
|
|
44434
|
+
}
|
|
44410
44435
|
}
|
|
44411
|
-
return
|
|
44436
|
+
return doc.body.innerHTML;
|
|
44412
44437
|
};
|
|
44413
44438
|
|
|
44414
44439
|
const nutsNotificationCss = ":host{display:block}p{display:block;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px}.NotificationContainer{animation:show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;transform-origin:top center;padding:15px;position:relative;display:flex;line-height:20px;justify-content:space-between;align-items:flex-start;border-radius:7px;margin:10px 15px;color:var(--emw--color-white, rgb(255, 255, 255));background:var(--emw--color-gray-400, rgb(35, 35, 43));font-weight:400;font-size:14px;gap:8px;cursor:pointer}@keyframes show{100%{opacity:1;transform:none}}.NotificationContainer .AvatarContainer{margin-right:10px;width:40px;min-width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40px;border:1px solid var(--emw--color-gray-200, rgb(82, 82, 102));overflow:hidden}.NotificationContainer .AvatarContainer .Avatar{box-sizing:border-box;position:relative;display:flex;user-select:none;overflow:hidden;width:38px;min-width:38px;height:38px;border-radius:32px;text-decoration:none;border:0px;background-color:transparent;padding:0px;justify-content:center;align-items:center}.NotificationContainer .AvatarContainer .Avatar .AvatarImage{object-fit:cover;width:100%;height:100%;display:block}.NotificationContainer .AvatarContainer .Avatar svg{object-fit:cover;display:block}.NotificationContainer .ContentContainer{display:flex;flex-direction:column;word-break:break-word;text-align:justify}.NotificationContainer .RightActionsContainer{display:flex;flex-direction:column}.NotificationContainer .FlipX{transform:rotateX(180deg) translate(0, 4px)}.NotificationContainer .AccordionArrow{margin-left:4px;transition-duration:0.2s;transition-property:transform}.NotificationContainer .Date{min-width:55px;font-size:12px;font-weight:400;opacity:0.5;line-height:14.4px;color:var(--emw--color-gray-200, rgb(82, 82, 102))}.NotificationContainer .Settings{opacity:0.5;display:inline;cursor:pointer}.Unseen::before{content:\"\";position:absolute;inset:0px;width:5px;border-radius:7px 0px 0px 7px;background:linear-gradient(0deg, var(--emw--color-secondary-20, rgb(255, 81, 47)) 0%, var(--emw--color-secondary, rgb(221, 36, 118)) 100%)}.Unseen:hover .UnseenButton{display:none}.SettingsDropdown{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:50px;top:50px}.SettingsDropdown svg{margin-right:10px}.SettingsDropdown button{font-family:inherit;border:0px;background-color:transparent;outline:0px;width:100%;text-align:left;text-decoration:none;box-sizing:border-box;padding:10px 12px;cursor:pointer;border-radius:7px;display:flex;align-items:center;color:var(--emw--color-white, rgb(255, 255, 255));font-weight:400;font-size:14px}.SettingsDropdown button:hover{background:var(--emw--color-gray-300, rgb(61, 61, 77));transition:300ms}.Wrapper{position:relative}";
|
|
@@ -44605,9 +44630,17 @@ class NutsNotification {
|
|
|
44605
44630
|
}
|
|
44606
44631
|
}
|
|
44607
44632
|
connectedCallback() {
|
|
44633
|
+
var _a;
|
|
44608
44634
|
this.messageSeen = this.seen;
|
|
44609
44635
|
this.messageRead = this.read;
|
|
44610
|
-
|
|
44636
|
+
const fullyStrippedContent = DOMPurify.sanitize(this.content, { ALLOWED_TAGS: [] });
|
|
44637
|
+
if ((fullyStrippedContent === null || fullyStrippedContent === void 0 ? void 0 : fullyStrippedContent.length) > this.maxTextLength ||
|
|
44638
|
+
(((_a = this.content) === null || _a === void 0 ? void 0 : _a.match(/<br\s*\/?>|<\/p>|<\/h[1-6]>/gi)) || []).length) {
|
|
44639
|
+
this.displayedContent = truncate(this.content, this.maxTextLength, this.maxLines);
|
|
44640
|
+
}
|
|
44641
|
+
else {
|
|
44642
|
+
this.displayedContent = this.content;
|
|
44643
|
+
}
|
|
44611
44644
|
this.baseUrl = `${this.backendUrl}/v1/${this.operatorId}`;
|
|
44612
44645
|
}
|
|
44613
44646
|
render() {
|
|
@@ -44645,11 +44678,11 @@ class NutsNotification {
|
|
|
44645
44678
|
'blockquote'
|
|
44646
44679
|
]
|
|
44647
44680
|
});
|
|
44648
|
-
return (hAsync("div", { key: '
|
|
44681
|
+
return (hAsync("div", { key: 'cd323dec5da352d3fc988ff5ea6d5ffdf1ac63dc', class: "Wrapper" }, hAsync("div", { key: '43360a47de85a81de9dea47526e3a05abaffd325', class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: this.assignRefToStylingContainer, onClick: this.notificationActionHandler }, this.badge ? (hAsync("div", { class: "AvatarContainer" }, hAsync("div", { class: "Avatar" }, ((_a = systemIcons[this.badge]) === null || _a === void 0 ? void 0 : _a.icon) ? (hAsync("div", { innerHTML: systemIcons[this.badge].icon })) : (hAsync("img", { class: "AvatarImage", src: this.badge }))))) : (''), hAsync("div", { key: 'de5056636fd06587696fd508ad8798c42c209bbd', class: "ContentContainer" }, hAsync("div", { key: '5b2fce80f04fe61a32d6d426c4b96808c6d8f4da', innerHTML: sanitizedNotificationBody }), hAsync("p", { key: 'c64bc6625c14614d665e35c18cba82f58b0f4450', class: "Date" }, formatDistanceToNow(new Date(this.date), {
|
|
44649
44682
|
addSuffix: true,
|
|
44650
44683
|
locale: dateFnsLocale(this.language)
|
|
44651
|
-
}))), hAsync("div", { key: '
|
|
44652
|
-
(((_c = this.content) === null || _c === void 0 ? void 0 : _c.match(/<br\s*\/?>|<\/p>/gi)) || []).length > this.maxLines) && (hAsync("div", { key: '
|
|
44684
|
+
}))), hAsync("div", { key: 'dba3f1c12ec6875c9873c4b12a7dc56bff7e1063', class: "RightActionsContainer" }, hAsync("div", { key: '1f972b847eb6670f103d31f270ed73c1e9c736ba', class: "Settings", onClick: this.toggleSettingsModal }, hAsync("svg", { key: '82bd09c22dc5d80103b30aceaaefa015b15a3ea3', width: "24", height: "24", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { key: 'b1d08fbcf1b17af6aada23bb50d5fb2c049a5f91', d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), (((_b = DOMPurify.sanitize(this.content, { ALLOWED_TAGS: [] })) === null || _b === void 0 ? void 0 : _b.length) > this.maxTextLength ||
|
|
44685
|
+
(((_c = this.content) === null || _c === void 0 ? void 0 : _c.match(/<br\s*\/?>|<\/p>|<\/h[1-6]>/gi)) || []).length > this.maxLines) && (hAsync("div", { key: '5674e3a4b26604e16e6774cff3a8d18a0e12d709', class: "AccordionArrow", innerHTML: systemIcons.arrowDown.icon, ref: this.assignRefToDropdownArrow })))), this.showSettingsModal ? (hAsync("div", { class: "SettingsDropdown" }, hAsync("button", { onClick: this.toggleNotificationRead }, hAsync("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate$1(this.messageRead ? 'markAsUnread' : 'markAsRead', this.language)), hAsync("button", { onClick: this.deleteNotification }, hAsync("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, hAsync("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate$1('removeMessage', this.language)))) : ('')));
|
|
44653
44686
|
}
|
|
44654
44687
|
get el() { return getElement(this); }
|
|
44655
44688
|
static get watchers() { return {
|