@everymatrix/nuts-inbox-widget 0.0.3 → 0.0.5

package/dist/cjs/{index-305bcf58.js → index-8aa58524.js}

@@ -772,7 +772,11 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
+    const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
         {

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-305bcf58.js');
+const index = require('./index-8aa58524.js');
 
 /*
  Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"notifications":[32],"isLoading":[32],"showMarkAll":[32]},[[8,"messageDeleted","messageDeteledHandler"],[8,"newNotification","newNotificationHandler"]]],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"]]]]]], options);
+  return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"notifications":[32],"isLoading":[32],"showMarkAll":[32]},[[8,"messageDeleted","messageDeteledHandler"],[8,"newNotification","newNotificationHandler"]]],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"]]]]]], options);
   });
 };
 

package/dist/cjs/nuts-inbox-widget.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-305bcf58.js');
+const index = require('./index-8aa58524.js');
 
 /*
  Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"notifications":[32],"isLoading":[32],"showMarkAll":[32]},[[8,"messageDeleted","messageDeteledHandler"],[8,"newNotification","newNotificationHandler"]]],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"]]]]]], options);
+  return index.bootstrapLazy([["nuts-inbox-widget_3.cjs",[[1,"nuts-inbox-widget",{"backendUrl":[513,"backend-url"],"socketUrl":[513,"socket-url"],"userId":[513,"user-id"],"sessionId":[513,"session-id"],"operatorId":[513,"operator-id"],"deviceId":[513,"device-id"],"language":[513],"environment":[513],"applicationIdentifier":[513,"application-identifier"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"bellIconPosition":[513,"bell-icon-position"],"isLoading":[32],"popoverVisible":[32],"unseenCount":[32]}],[0,"nuts-popover",{"language":[513],"userId":[513,"user-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"unseenCount":[514,"unseen-count"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"notifications":[32],"isLoading":[32],"showMarkAll":[32]},[[8,"messageDeleted","messageDeteledHandler"],[8,"newNotification","newNotificationHandler"]]],[0,"nuts-notification",{"badge":[513],"content":[513],"date":[513],"showSettings":[516,"show-settings"],"read":[516],"seen":[516],"language":[513],"userId":[513,"user-id"],"messageId":[513,"message-id"],"operatorId":[513,"operator-id"],"token":[513],"backendUrl":[513,"backend-url"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"showSettingsModal":[32],"messageSeen":[32],"messageRead":[32]},[[8,"allNotificationsRead","allNotificationsReadHandler"],[8,"settingsOpened","settingsOpenedHandler"]]]]]], options);
 });

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-305bcf58.js');
+const index = require('./index-8aa58524.js');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -3983,7 +3983,7 @@ function isExcluded(target, excudedNodes) {
     return false;
 }
 
-const nutsInboxWidgetCss = ":host{display:block;font-family:\"Roboto\", \"Arial\", sans-serif}.BellIconWrapper{width:40px;height:40px}.BellIcon{width:40px;height:40px;display:flex}";
+const nutsInboxWidgetCss = ":host{display:block;font-family:\"Roboto\", \"Arial\", sans-serif}.BellIconWrapper{width:100%;height:40px;display:flex}.BellIcon{width:40px;height:40px;display:flex}";
 
 const NutsInboxWidget = class {
   constructor(hostRef) {
@@ -4002,9 +4002,13 @@ const NutsInboxWidget = class {
      * Client custom styling via inline styles
      */
     this.clientStyling = '';
+    /**
+     * Position of the widget (possible values: `left` and `right`) - this changes the `justify-content` property of the `.BellIconWrapper` class
+     */
+    this.bellIconPosition = 'left';
     this.isLoading = true;
     this.popoverVisible = false;
-    this.ntsEndpoint = 'http://localhost:3000';
+    this.ssEndpoint = 'https://nts.everymatrix.com/ss';
     this.token = null;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
@@ -4042,9 +4046,18 @@ const NutsInboxWidget = class {
   }
   clickOutsideHandle() {
     this.popoverVisible = false;
+    window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
+  }
+  positionIcon() {
+    if (this.bellIconPosition == 'left') {
+      this.bellIconRef.style.justifyContent = 'flex-start';
+    }
+    if (this.bellIconPosition == 'right') {
+      this.bellIconRef.style.justifyContent = 'flex-end';
+    }
   }
   callSS() {
-    const url = new URL(`${this.ntsEndpoint}/v1/${this.operatorId}/subscribers/${this.userId}`);
+    const url = new URL(`${this.ssEndpoint}/v1/${this.operatorId}/subscribers/${this.userId}`);
     if (this.deviceId) {
       url.searchParams.append('deviceToken', this.deviceId);
     }
@@ -4147,11 +4160,14 @@ const NutsInboxWidget = class {
       this.setClientStylingURL();
     }
   }
+  componentDidRender() {
+    this.positionIcon();
+  }
   renderBellIcon() {
     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" })))) : ''));
   }
   render() {
-    return (index.h("div", { class: "BellIconWrapper", ref: el => this.stylingContainer = el }, !this.isLoading && this.renderBellIcon(), this.popoverVisible && index.h("nuts-popover", { "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 })));
+    return (index.h("div", { ref: el => this.stylingContainer = el, class: "Wrapper" }, index.h("div", { ref: el => this.bellIconRef = el, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.popoverVisible && index.h("nuts-popover", { "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 })));
   }
   static get watchers() { return {
     "userId": ["paramChangeHandler", "initializeHandler"],
@@ -5342,7 +5358,7 @@ function formatDistanceToNow(dirtyDate, options) {
 }
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['hr', 'en'];
+const SUPPORTED_LANGUAGES = ['hu', 'en'];
 const TRANSLATIONS = {
   en: {
     notifications: 'Notifications',
@@ -5351,7 +5367,7 @@ const TRANSLATIONS = {
     markAsRead: 'Mark as read',
     removeMessage: 'Remove the message'
   },
-  hr: {
+  hu: {
     notifications: 'értesítéseket',
     noMessages: 'Itt még semmi újat nem látni',
     markAllAsRead: 'összes megjelölése olvasottként',
@@ -39812,7 +39828,7 @@ const dateFnsLocales = /*#__PURE__*/Object.freeze({
     zhTW: locale
 });
 
-const nutsNotificationCss = ":host{display:block}p{display:block;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px}.NotificationContainer{animation:show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;opacity:0;transform-origin:top center;padding:15px;position:relative;display:flex;line-height:20px;justify-content:flex-start;align-items:center;border-radius:7px;margin:10px 15px;color:white;background:#23232b;font-weight:400;font-size:14px}@keyframes show{100%{opacity:1;transform:none}}.NotificationContainer .AvatarContainer{margin-right:10px;width:40px;min-width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40px;border:1px solid #525266;overflow:hidden}.NotificationContainer .AvatarContainer .Avatar{box-sizing:border-box;position:relative;display:block;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}.NotificationContainer .AvatarContainer .Avatar .AvatarImage{object-fit:cover;width:100%;height:100%;display:block}.NotificationContainer .ContentContainer{display:flex;flex-direction:column}.NotificationContainer .Date{min-width:55px;font-size:12px;font-weight:400;opacity:0.5;line-height:14.4px;color:#525266}.NotificationContainer .Settings{opacity:0;margin-left:auto;cursor:pointer}.NotificationContainer .SettingsDropdown{z-index:999;position:absolute;background:#292933;box-shadow:rgba(0, 0, 0, 0.2) 0px 5px 20px;border-radius:7px;padding:4px;border:none;left:190px;top:40px;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;z-index:300;width:max-content;display:flex;flex-direction:column}.NotificationContainer .SettingsDropdown svg{margin-right:10px}.NotificationContainer .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:white;font-weight:400;font-size:14px}.NotificationContainer .SettingsDropdown button:hover{background:#3d3d4d;transition:300ms}.NotificationContainer:hover .Settings{opacity:0.5}.Unseen::before{content:\"\";position:absolute;inset:0px;width:5px;border-radius:7px 0px 0px 7px;background:linear-gradient(0deg, #ff512f 0%, #dd2476 100%)}.Unseen:hover .UnseenButton{opacity:0;width:0px}";
+const nutsNotificationCss = ":host{display:block}p{display:block;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px}.NotificationContainer{animation:show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;opacity:0;transform-origin:top center;padding:15px;position:relative;display:flex;line-height:20px;justify-content:flex-start;align-items:center;border-radius:7px;margin:10px 15px;color:white;background:#23232b;font-weight:400;font-size:14px}@keyframes show{100%{opacity:1;transform:none}}.NotificationContainer .AvatarContainer{margin-right:10px;width:40px;min-width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40px;border:1px solid #525266;overflow:hidden}.NotificationContainer .AvatarContainer .Avatar{box-sizing:border-box;position:relative;display:block;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}.NotificationContainer .AvatarContainer .Avatar .AvatarImage{object-fit:cover;width:100%;height:100%;display:block}.NotificationContainer .ContentContainer{display:flex;flex-direction:column}.NotificationContainer .Date{min-width:55px;font-size:12px;font-weight:400;opacity:0.5;line-height:14.4px;color:#525266}.NotificationContainer .Settings{opacity:0;margin-left:auto;cursor:pointer}.NotificationContainer:hover .Settings{opacity:0.5}.Unseen::before{content:\"\";position:absolute;inset:0px;width:5px;border-radius:7px 0px 0px 7px;background:linear-gradient(0deg, #ff512f 0%, #dd2476 100%)}.Unseen:hover .UnseenButton{opacity:0;width:0px}.SettingsDropdown{z-index:999;position:absolute;background:#292933;box-shadow:rgba(0, 0, 0, 0.2) 0px 5px 20px;border-radius:7px;padding:4px;border:none;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;width:max-content;display:flex;flex-direction:column;margin-left:195px;margin-top:-30px}.SettingsDropdown svg{margin-right:10px}.SettingsDropdown button{font-family:inherit;border:0px;background-color:transparent;outline:0px;width:100%;text-align:left;text-decoration:none;box-sizing:border-box;padding:10px 12px;cursor:pointer;border-radius:7px;display:flex;align-items:center;color:white;font-weight:400;font-size:14px}.SettingsDropdown button:hover{background:#3d3d4d;transition:300ms}";
 
 const dateFnsLocale = (lang) => {
   return lang in dateFnsLocales ? dateFnsLocales[lang] : locale$1s;
@@ -39907,11 +39923,14 @@ const NutsNotification = class {
   toggleSettingsModal() {
     this.showSettingsModal = !this.showSettingsModal;
     if (this.showSettingsModal) {
+      let rect = this.settingsButtonRef.getBoundingClientRect();
+      this.settingsModalRef.style.left = `${rect.left}px`;
+      this.settingsModalRef.style.top = `${rect.top}px`;
       this.settingsOpened.emit(this.messageId);
     }
   }
   render() {
-    return (index.h("div", { class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: el => this.stylingContainer = el }, this.badge ? index.h("div", { class: "AvatarContainer" }, index.h("div", { class: "Avatar" }, index.h("img", { class: "AvatarImage", src: this.badge }))) : '', index.h("div", { class: "ContentContainer" }, index.h("p", null, this.content), index.h("p", { class: "Date" }, formatDistanceToNow(new Date(this.date), { addSuffix: true, locale: dateFnsLocale(this.language) }))), index.h("div", { class: "Settings", onClick: () => this.toggleSettingsModal() }, index.h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), this.showSettingsModal ? index.h("div", { class: "SettingsDropdown" }, index.h("button", { onClick: () => this.markAsRead(this.messageId) }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate$1('markAsRead', this.language)), index.h("button", { onClick: () => this.deleteMessage(this.messageId) }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate$1('removeMessage', this.language))) : '', this.messageSeen ? '' : index.h("div", { class: "UnseenButton" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 16 16", fill: "none" }, 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" })))))));
+    return (index.h("div", null, index.h("div", { class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: el => this.stylingContainer = el }, this.badge ? index.h("div", { class: "AvatarContainer" }, index.h("div", { class: "Avatar" }, index.h("img", { class: "AvatarImage", src: this.badge }))) : '', index.h("div", { class: "ContentContainer" }, index.h("p", null, this.content), index.h("p", { class: "Date" }, formatDistanceToNow(new Date(this.date), { addSuffix: true, locale: dateFnsLocale(this.language) }))), index.h("div", { class: "Settings", onClick: () => this.toggleSettingsModal(), ref: el => this.settingsButtonRef = el }, index.h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), this.messageSeen ? '' : index.h("div", { class: "UnseenButton" }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 16 16", fill: "none" }, 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" })))))), this.showSettingsModal ? index.h("div", { class: "SettingsDropdown", ref: el => this.settingsModalRef = el }, index.h("button", { onClick: () => this.markAsRead(this.messageId) }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate$1('markAsRead', this.language)), index.h("button", { onClick: () => this.deleteMessage(this.messageId) }, index.h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate$1('removeMessage', this.language))) : ''));
   }
 };
 NutsNotification.style = nutsNotificationCss;

package/dist/collection/components/nuts-inbox-widget/nuts-inbox-widget.css

@@ -4,8 +4,9 @@
 }
 
 .BellIconWrapper {
-  width: 40px;
+  width: 100%;
   height: 40px;
+  display: flex;
 }
 
 .BellIcon {

package/dist/collection/components/nuts-inbox-widget/nuts-inbox-widget.js

@@ -16,9 +16,13 @@ export class NutsInboxWidget {
      * Client custom styling via inline styles
      */
     this.clientStyling = '';
+    /**
+     * Position of the widget (possible values: `left` and `right`) - this changes the `justify-content` property of the `.BellIconWrapper` class
+     */
+    this.bellIconPosition = 'left';
     this.isLoading = true;
     this.popoverVisible = false;
-    this.ntsEndpoint = 'http://localhost:3000';
+    this.ssEndpoint = 'https://nts.everymatrix.com/ss';
     this.token = null;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
@@ -56,9 +60,18 @@ export class NutsInboxWidget {
   }
   clickOutsideHandle() {
     this.popoverVisible = false;
+    window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
+  }
+  positionIcon() {
+    if (this.bellIconPosition == 'left') {
+      this.bellIconRef.style.justifyContent = 'flex-start';
+    }
+    if (this.bellIconPosition == 'right') {
+      this.bellIconRef.style.justifyContent = 'flex-end';
+    }
   }
   callSS() {
-    const url = new URL(`${this.ntsEndpoint}/v1/${this.operatorId}/subscribers/${this.userId}`);
+    const url = new URL(`${this.ssEndpoint}/v1/${this.operatorId}/subscribers/${this.userId}`);
     if (this.deviceId) {
       url.searchParams.append('deviceToken', this.deviceId);
     }
@@ -161,6 +174,9 @@ export class NutsInboxWidget {
       this.setClientStylingURL();
     }
   }
+  componentDidRender() {
+    this.positionIcon();
+  }
   renderBellIcon() {
     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" },
@@ -175,8 +191,8 @@ export class NutsInboxWidget {
             h("stop", { offset: "1", "stop-color": "#DD2476" })))) : ''));
   }
   render() {
-    return (h("div", { class: "BellIconWrapper", ref: el => this.stylingContainer = el },
-      !this.isLoading && this.renderBellIcon(),
+    return (h("div", { ref: el => this.stylingContainer = el, class: "Wrapper" },
+      h("div", { ref: el => this.bellIconRef = el, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()),
       this.popoverVisible && h("nuts-popover", { "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 })));
   }
   static get is() { return "nuts-inbox-widget"; }
@@ -377,6 +393,24 @@ export class NutsInboxWidget {
       },
       "attribute": "client-styling-url",
       "reflect": true
+    },
+    "bellIconPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Position of the widget (possible values: `left` and `right`) - this changes the `justify-content` property of the `.BellIconWrapper` class"
+      },
+      "attribute": "bell-icon-position",
+      "reflect": true,
+      "defaultValue": "'left'"
     }
   }; }
   static get states() { return {

package/dist/collection/components/nuts-notification/nuts-notification.css

@@ -84,7 +84,25 @@ p {
   margin-left: auto;
   cursor: pointer;
 }
-.NotificationContainer .SettingsDropdown {
+.NotificationContainer:hover .Settings {
+  opacity: 0.5;
+}
+
+.Unseen::before {
+  content: "";
+  position: absolute;
+  inset: 0px;
+  width: 5px;
+  border-radius: 7px 0px 0px 7px;
+  background: linear-gradient(0deg, #ff512f 0%, #dd2476 100%);
+}
+
+.Unseen:hover .UnseenButton {
+  opacity: 0;
+  width: 0px;
+}
+
+.SettingsDropdown {
   z-index: 999;
   position: absolute;
   background: #292933;
@@ -92,21 +110,20 @@ p {
   border-radius: 7px;
   padding: 4px;
   border: none;
-  left: 190px;
-  top: 40px;
   transition-property: opacity;
   transition-duration: 150ms;
   transition-timing-function: ease;
   opacity: 1;
-  z-index: 300;
   width: max-content;
   display: flex;
   flex-direction: column;
+  margin-left: 195px;
+  margin-top: -30px;
 }
-.NotificationContainer .SettingsDropdown svg {
+.SettingsDropdown svg {
   margin-right: 10px;
 }
-.NotificationContainer .SettingsDropdown button {
+.SettingsDropdown button {
   font-family: inherit;
   border: 0px;
   background-color: transparent;
@@ -124,24 +141,7 @@ p {
   font-weight: 400;
   font-size: 14px;
 }
-.NotificationContainer .SettingsDropdown button:hover {
+.SettingsDropdown button:hover {
   background: #3d3d4d;
   transition: 300ms;
-}
-.NotificationContainer:hover .Settings {
-  opacity: 0.5;
-}
-
-.Unseen::before {
-  content: "";
-  position: absolute;
-  inset: 0px;
-  width: 5px;
-  border-radius: 7px 0px 0px 7px;
-  background: linear-gradient(0deg, #ff512f 0%, #dd2476 100%);
-}
-
-.Unseen:hover .UnseenButton {
-  opacity: 0;
-  width: 0px;
 }

package/dist/collection/components/nuts-notification/nuts-notification.js

@@ -91,23 +91,33 @@ export class NutsNotification {
   }
   toggleSettingsModal() {
     this.showSettingsModal = !this.showSettingsModal;
-    ;
     if (this.showSettingsModal) {
+      let rect = this.settingsButtonRef.getBoundingClientRect();
+      this.settingsModalRef.style.left = `${rect.left}px`;
+      this.settingsModalRef.style.top = `${rect.top}px`;
       this.settingsOpened.emit(this.messageId);
     }
   }
   render() {
-    return (h("div", { class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: el => this.stylingContainer = el },
-      this.badge ? h("div", { class: "AvatarContainer" },
-        h("div", { class: "Avatar" },
-          h("img", { class: "AvatarImage", src: this.badge }))) : '',
-      h("div", { class: "ContentContainer" },
-        h("p", null, this.content),
-        h("p", { class: "Date" }, formatDistanceToNow(new Date(this.date), { addSuffix: true, locale: dateFnsLocale(this.language) }))),
-      h("div", { class: "Settings", onClick: () => this.toggleSettingsModal() },
-        h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-          h("path", { d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))),
-      this.showSettingsModal ? h("div", { class: "SettingsDropdown" },
+    return (h("div", null,
+      h("div", { class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: el => this.stylingContainer = el },
+        this.badge ? h("div", { class: "AvatarContainer" },
+          h("div", { class: "Avatar" },
+            h("img", { class: "AvatarImage", src: this.badge }))) : '',
+        h("div", { class: "ContentContainer" },
+          h("p", null, this.content),
+          h("p", { class: "Date" }, formatDistanceToNow(new Date(this.date), { addSuffix: true, locale: dateFnsLocale(this.language) }))),
+        h("div", { class: "Settings", onClick: () => this.toggleSettingsModal(), ref: el => this.settingsButtonRef = el },
+          h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))),
+        this.messageSeen ? '' : h("div", { class: "UnseenButton" },
+          h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 16 16", fill: "none" },
+            h("rect", { x: "1.5", y: "1.5", width: "13", height: "13", rx: "6.5", fill: "url(#paint0_linear_1722_2699)", stroke: "#1E1E26", "stroke-width": "3" }),
+            h("defs", null,
+              h("linearGradient", { id: "paint0_linear_1722_2699", x1: "8", y1: "13", x2: "8", y2: "3", gradientUnits: "userSpaceOnUse" },
+                h("stop", { "stop-color": "#FF512F" }),
+                h("stop", { offset: "1", "stop-color": "#DD2476" })))))),
+      this.showSettingsModal ? h("div", { class: "SettingsDropdown", ref: el => this.settingsModalRef = el },
         h("button", { onClick: () => this.markAsRead(this.messageId) },
           h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             h("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })),
@@ -115,14 +125,7 @@ export class NutsNotification {
         h("button", { onClick: () => this.deleteMessage(this.messageId) },
           h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             h("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })),
-          translate('removeMessage', this.language))) : '',
-      this.messageSeen ? '' : h("div", { class: "UnseenButton" },
-        h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 16 16", fill: "none" },
-          h("rect", { x: "1.5", y: "1.5", width: "13", height: "13", rx: "6.5", fill: "url(#paint0_linear_1722_2699)", stroke: "#1E1E26", "stroke-width": "3" }),
-          h("defs", null,
-            h("linearGradient", { id: "paint0_linear_1722_2699", x1: "8", y1: "13", x2: "8", y2: "3", gradientUnits: "userSpaceOnUse" },
-              h("stop", { "stop-color": "#FF512F" }),
-              h("stop", { offset: "1", "stop-color": "#DD2476" })))))));
+          translate('removeMessage', this.language))) : ''));
   }
   static get is() { return "nuts-notification"; }
   static get originalStyleUrls() { return {

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

@@ -1,5 +1,5 @@
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['hr', 'en'];
+const SUPPORTED_LANGUAGES = ['hu', 'en'];
 const TRANSLATIONS = {
   en: {
     notifications: 'Notifications',
@@ -8,7 +8,7 @@ const TRANSLATIONS = {
     markAsRead: 'Mark as read',
     removeMessage: 'Remove the message'
   },
-  hr: {
+  hu: {
     notifications: 'értesítéseket',
     noMessages: 'Itt még semmi újat nem látni',
     markAllAsRead: 'összes megjelölése olvasottként',

package/dist/components/nuts-inbox-widget.js

@@ -3985,7 +3985,7 @@ function isExcluded(target, excudedNodes) {
     return false;
 }
 
-const nutsInboxWidgetCss = ":host{display:block;font-family:\"Roboto\", \"Arial\", sans-serif}.BellIconWrapper{width:40px;height:40px}.BellIcon{width:40px;height:40px;display:flex}";
+const nutsInboxWidgetCss = ":host{display:block;font-family:\"Roboto\", \"Arial\", sans-serif}.BellIconWrapper{width:100%;height:40px;display:flex}.BellIcon{width:40px;height:40px;display:flex}";
 
 const NutsInboxWidget$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -4006,9 +4006,13 @@ const NutsInboxWidget$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      * Client custom styling via inline styles
      */
     this.clientStyling = '';
+    /**
+     * Position of the widget (possible values: `left` and `right`) - this changes the `justify-content` property of the `.BellIconWrapper` class
+     */
+    this.bellIconPosition = 'left';
     this.isLoading = true;
     this.popoverVisible = false;
-    this.ntsEndpoint = 'http://localhost:3000';
+    this.ssEndpoint = 'https://nts.everymatrix.com/ss';
     this.token = null;
     this.setClientStyling = () => {
       let sheet = document.createElement('style');
@@ -4046,9 +4050,18 @@ const NutsInboxWidget$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   clickOutsideHandle() {
     this.popoverVisible = false;
+    window.postMessage({ type: 'nuts-popover-isVisible', value: this.popoverVisible }, window.location.href);
+  }
+  positionIcon() {
+    if (this.bellIconPosition == 'left') {
+      this.bellIconRef.style.justifyContent = 'flex-start';
+    }
+    if (this.bellIconPosition == 'right') {
+      this.bellIconRef.style.justifyContent = 'flex-end';
+    }
   }
   callSS() {
-    const url = new URL(`${this.ntsEndpoint}/v1/${this.operatorId}/subscribers/${this.userId}`);
+    const url = new URL(`${this.ssEndpoint}/v1/${this.operatorId}/subscribers/${this.userId}`);
     if (this.deviceId) {
       url.searchParams.append('deviceToken', this.deviceId);
     }
@@ -4151,11 +4164,14 @@ const NutsInboxWidget$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       this.setClientStylingURL();
     }
   }
+  componentDidRender() {
+    this.positionIcon();
+  }
   renderBellIcon() {
     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" })))) : ''));
   }
   render() {
-    return (h("div", { class: "BellIconWrapper", ref: el => this.stylingContainer = el }, !this.isLoading && this.renderBellIcon(), this.popoverVisible && h("nuts-popover", { "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 })));
+    return (h("div", { ref: el => this.stylingContainer = el, class: "Wrapper" }, h("div", { ref: el => this.bellIconRef = el, class: "BellIconWrapper" }, !this.isLoading && this.renderBellIcon()), this.popoverVisible && h("nuts-popover", { "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 })));
   }
   static get watchers() { return {
     "userId": ["paramChangeHandler", "initializeHandler"],
@@ -4177,6 +4193,7 @@ const NutsInboxWidget$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "applicationIdentifier": [513, "application-identifier"],
     "clientStyling": [1537, "client-styling"],
     "clientStylingUrl": [513, "client-styling-url"],
+    "bellIconPosition": [513, "bell-icon-position"],
     "isLoading": [32],
     "popoverVisible": [32],
     "unseenCount": [32]

package/dist/components/nuts-notification2.js

@@ -1173,7 +1173,7 @@ function formatDistanceToNow(dirtyDate, options) {
 }
 
 const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['hr', 'en'];
+const SUPPORTED_LANGUAGES = ['hu', 'en'];
 const TRANSLATIONS = {
   en: {
     notifications: 'Notifications',
@@ -1182,7 +1182,7 @@ const TRANSLATIONS = {
     markAsRead: 'Mark as read',
     removeMessage: 'Remove the message'
   },
-  hr: {
+  hu: {
     notifications: 'értesítéseket',
     noMessages: 'Itt még semmi újat nem látni',
     markAllAsRead: 'összes megjelölése olvasottként',
@@ -35643,7 +35643,7 @@ const dateFnsLocales = /*#__PURE__*/Object.freeze({
   zhTW: locale
 });
 
-const nutsNotificationCss = ":host{display:block}p{display:block;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px}.NotificationContainer{animation:show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;opacity:0;transform-origin:top center;padding:15px;position:relative;display:flex;line-height:20px;justify-content:flex-start;align-items:center;border-radius:7px;margin:10px 15px;color:white;background:#23232b;font-weight:400;font-size:14px}@keyframes show{100%{opacity:1;transform:none}}.NotificationContainer .AvatarContainer{margin-right:10px;width:40px;min-width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40px;border:1px solid #525266;overflow:hidden}.NotificationContainer .AvatarContainer .Avatar{box-sizing:border-box;position:relative;display:block;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}.NotificationContainer .AvatarContainer .Avatar .AvatarImage{object-fit:cover;width:100%;height:100%;display:block}.NotificationContainer .ContentContainer{display:flex;flex-direction:column}.NotificationContainer .Date{min-width:55px;font-size:12px;font-weight:400;opacity:0.5;line-height:14.4px;color:#525266}.NotificationContainer .Settings{opacity:0;margin-left:auto;cursor:pointer}.NotificationContainer .SettingsDropdown{z-index:999;position:absolute;background:#292933;box-shadow:rgba(0, 0, 0, 0.2) 0px 5px 20px;border-radius:7px;padding:4px;border:none;left:190px;top:40px;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;z-index:300;width:max-content;display:flex;flex-direction:column}.NotificationContainer .SettingsDropdown svg{margin-right:10px}.NotificationContainer .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:white;font-weight:400;font-size:14px}.NotificationContainer .SettingsDropdown button:hover{background:#3d3d4d;transition:300ms}.NotificationContainer:hover .Settings{opacity:0.5}.Unseen::before{content:\"\";position:absolute;inset:0px;width:5px;border-radius:7px 0px 0px 7px;background:linear-gradient(0deg, #ff512f 0%, #dd2476 100%)}.Unseen:hover .UnseenButton{opacity:0;width:0px}";
+const nutsNotificationCss = ":host{display:block}p{display:block;margin-block-start:0em;margin-block-end:0em;margin-inline-start:0px;margin-inline-end:0px}.NotificationContainer{animation:show 600ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;opacity:0;transform-origin:top center;padding:15px;position:relative;display:flex;line-height:20px;justify-content:flex-start;align-items:center;border-radius:7px;margin:10px 15px;color:white;background:#23232b;font-weight:400;font-size:14px}@keyframes show{100%{opacity:1;transform:none}}.NotificationContainer .AvatarContainer{margin-right:10px;width:40px;min-width:40px;height:40px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:40px;border:1px solid #525266;overflow:hidden}.NotificationContainer .AvatarContainer .Avatar{box-sizing:border-box;position:relative;display:block;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}.NotificationContainer .AvatarContainer .Avatar .AvatarImage{object-fit:cover;width:100%;height:100%;display:block}.NotificationContainer .ContentContainer{display:flex;flex-direction:column}.NotificationContainer .Date{min-width:55px;font-size:12px;font-weight:400;opacity:0.5;line-height:14.4px;color:#525266}.NotificationContainer .Settings{opacity:0;margin-left:auto;cursor:pointer}.NotificationContainer:hover .Settings{opacity:0.5}.Unseen::before{content:\"\";position:absolute;inset:0px;width:5px;border-radius:7px 0px 0px 7px;background:linear-gradient(0deg, #ff512f 0%, #dd2476 100%)}.Unseen:hover .UnseenButton{opacity:0;width:0px}.SettingsDropdown{z-index:999;position:absolute;background:#292933;box-shadow:rgba(0, 0, 0, 0.2) 0px 5px 20px;border-radius:7px;padding:4px;border:none;transition-property:opacity;transition-duration:150ms;transition-timing-function:ease;opacity:1;width:max-content;display:flex;flex-direction:column;margin-left:195px;margin-top:-30px}.SettingsDropdown svg{margin-right:10px}.SettingsDropdown button{font-family:inherit;border:0px;background-color:transparent;outline:0px;width:100%;text-align:left;text-decoration:none;box-sizing:border-box;padding:10px 12px;cursor:pointer;border-radius:7px;display:flex;align-items:center;color:white;font-weight:400;font-size:14px}.SettingsDropdown button:hover{background:#3d3d4d;transition:300ms}";
 
 const dateFnsLocale = (lang) => {
   return lang in dateFnsLocales ? dateFnsLocales[lang] : locale$1s;
@@ -35739,11 +35739,14 @@ const NutsNotification = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   toggleSettingsModal() {
     this.showSettingsModal = !this.showSettingsModal;
     if (this.showSettingsModal) {
+      let rect = this.settingsButtonRef.getBoundingClientRect();
+      this.settingsModalRef.style.left = `${rect.left}px`;
+      this.settingsModalRef.style.top = `${rect.top}px`;
       this.settingsOpened.emit(this.messageId);
     }
   }
   render() {
-    return (h("div", { class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: el => this.stylingContainer = el }, this.badge ? h("div", { class: "AvatarContainer" }, h("div", { class: "Avatar" }, h("img", { class: "AvatarImage", src: this.badge }))) : '', h("div", { class: "ContentContainer" }, h("p", null, this.content), h("p", { class: "Date" }, formatDistanceToNow(new Date(this.date), { addSuffix: true, locale: dateFnsLocale(this.language) }))), h("div", { class: "Settings", onClick: () => this.toggleSettingsModal() }, h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), this.showSettingsModal ? h("div", { class: "SettingsDropdown" }, h("button", { onClick: () => this.markAsRead(this.messageId) }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate$1('markAsRead', this.language)), h("button", { onClick: () => this.deleteMessage(this.messageId) }, h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate$1('removeMessage', this.language))) : '', this.messageSeen ? '' : h("div", { class: "UnseenButton" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 16 16", fill: "none" }, h("rect", { x: "1.5", y: "1.5", width: "13", height: "13", rx: "6.5", fill: "url(#paint0_linear_1722_2699)", stroke: "#1E1E26", "stroke-width": "3" }), h("defs", null, h("linearGradient", { id: "paint0_linear_1722_2699", x1: "8", y1: "13", x2: "8", y2: "3", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": "#FF512F" }), h("stop", { offset: "1", "stop-color": "#DD2476" })))))));
+    return (h("div", null, h("div", { class: 'NotificationContainer' + (this.messageSeen ? '' : ' Unseen'), ref: el => this.stylingContainer = el }, this.badge ? h("div", { class: "AvatarContainer" }, h("div", { class: "Avatar" }, h("img", { class: "AvatarImage", src: this.badge }))) : '', h("div", { class: "ContentContainer" }, h("p", null, this.content), h("p", { class: "Date" }, formatDistanceToNow(new Date(this.date), { addSuffix: true, locale: dateFnsLocale(this.language) }))), h("div", { class: "Settings", onClick: () => this.toggleSettingsModal(), ref: el => this.settingsButtonRef = el }, h("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M20.625 15.5C20.625 16.5547 21.4453 17.375 22.5 17.375C23.5156 17.375 24.375 16.5547 24.375 15.5C24.375 14.4844 23.5156 13.625 22.5 13.625C21.4453 13.625 20.625 14.4844 20.625 15.5ZM9.375 15.5C9.375 14.4844 8.51562 13.625 7.5 13.625C6.44531 13.625 5.625 14.4844 5.625 15.5C5.625 16.5547 6.44531 17.375 7.5 17.375C8.51562 17.375 9.375 16.5547 9.375 15.5ZM16.875 15.5C16.875 14.4844 16.0156 13.625 15 13.625C13.9453 13.625 13.125 14.4844 13.125 15.5C13.125 16.5547 13.9453 17.375 15 17.375C16.0156 17.375 16.875 16.5547 16.875 15.5Z", fill: "currentColor" }))), this.messageSeen ? '' : h("div", { class: "UnseenButton" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 16 16", fill: "none" }, h("rect", { x: "1.5", y: "1.5", width: "13", height: "13", rx: "6.5", fill: "url(#paint0_linear_1722_2699)", stroke: "#1E1E26", "stroke-width": "3" }), h("defs", null, h("linearGradient", { id: "paint0_linear_1722_2699", x1: "8", y1: "13", x2: "8", y2: "3", gradientUnits: "userSpaceOnUse" }, h("stop", { "stop-color": "#FF512F" }), h("stop", { offset: "1", "stop-color": "#DD2476" })))))), this.showSettingsModal ? h("div", { class: "SettingsDropdown", ref: el => this.settingsModalRef = el }, h("button", { onClick: () => this.markAsRead(this.messageId) }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M14.9434 5.17969C14.2109 4.59375 13.625 4.125 10.1387 1.60547C9.64062 1.25391 8.67383 0.375 8 0.375V0.404297C7.9707 0.404297 7.9707 0.375 7.9707 0.375C7.29688 0.375 6.33008 1.25391 5.83203 1.60547C2.3457 4.125 1.75977 4.59375 1.02734 5.17969C0.675781 5.44336 0.5 5.85352 0.5 6.26367V13.9688C0.5 14.7598 1.11523 15.375 1.90625 15.375H14.0938C14.8555 15.375 15.5 14.7598 15.5 13.9688V6.26367C15.5 5.85352 15.2949 5.44336 14.9434 5.17969ZM9.37695 11.1562C8.9668 11.4785 8.46875 11.6543 8 11.6543C7.50195 11.6543 7.00391 11.4785 6.59375 11.1562L2.375 7.8457V6.49805C2.99023 6 3.72266 5.44336 6.94531 3.12891C7.0332 3.04102 7.15039 2.95312 7.26758 2.86523C7.41406 2.74805 7.73633 2.48438 8 2.33789C8.23438 2.48438 8.55664 2.74805 8.70312 2.86523C8.82031 2.95312 8.9375 3.04102 9.02539 3.12891C12.2188 5.44336 12.9805 6 13.625 6.49805V7.8457L9.37695 11.1562Z", fill: "currentColor" })), translate$1('markAsRead', this.language)), h("button", { onClick: () => this.deleteMessage(this.messageId) }, h("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M4.375 15.4375C4.375 16.1758 4.94922 16.75 5.6875 16.75H13.5625C14.2734 16.75 14.875 16.1758 14.875 15.4375V6.25H4.375V15.4375ZM11.8125 8.4375C11.8125 8.21875 12.0039 8 12.25 8C12.4688 8 12.6875 8.21875 12.6875 8.4375V14.5625C12.6875 14.8086 12.4688 15 12.25 15C12.0039 15 11.8125 14.8086 11.8125 14.5625V8.4375ZM9.1875 8.4375C9.1875 8.21875 9.37891 8 9.625 8C9.84375 8 10.0625 8.21875 10.0625 8.4375V14.5625C10.0625 14.8086 9.84375 15 9.625 15C9.37891 15 9.1875 14.8086 9.1875 14.5625V8.4375ZM6.5625 8.4375C6.5625 8.21875 6.75391 8 7 8C7.21875 8 7.4375 8.21875 7.4375 8.4375V14.5625C7.4375 14.8086 7.21875 15 7 15C6.75391 15 6.5625 14.8086 6.5625 14.5625V8.4375ZM15.3125 3.625H12.25L11.9219 2.99609C11.8398 2.85938 11.7031 2.75 11.5391 2.75H7.68359C7.51953 2.75 7.38281 2.85938 7.30078 2.99609L7 3.625H3.9375C3.69141 3.625 3.5 3.84375 3.5 4.0625V4.9375C3.5 5.18359 3.69141 5.375 3.9375 5.375H15.3125C15.5312 5.375 15.75 5.18359 15.75 4.9375V4.0625C15.75 3.84375 15.5312 3.625 15.3125 3.625Z", fill: "currentColor" })), translate$1('removeMessage', this.language))) : ''));
   }
   static get style() { return nutsNotificationCss; }
 }, [0, "nuts-notification", {

package/dist/esm/{index-4e49d940.js → index-5bd134e8.js}

@@ -750,7 +750,11 @@ const postUpdateComponent = (hostRef) => {
     const tagName = hostRef.$cmpMeta$.$tagName$;
     const elm = hostRef.$hostElement$;
     const endPostUpdate = createTime('postUpdate', tagName);
+    const instance = hostRef.$lazyInstance$ ;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
         {