@acorex/modules 20.0.25 → 20.2.0-next.0

package/fesm2022/acorex-modules-notification-management.mjs

@@ -71,10 +71,10 @@ class AXMNotificationManagementChannelEntityServiceImpl extends AXMNotificationM
     constructor() {
         super(`${RootConfig.module.name}.${RootConfig.entities.channel.name}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementChannelEntityServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementChannelEntityServiceImpl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementChannelEntityServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementChannelEntityServiceImpl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementChannelEntityServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementChannelEntityServiceImpl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -821,16 +821,19 @@ class AXMNotificationEntityServiceImpl extends AXMNotificationEntityService {
     markAsRead(payload) {
         throw new Error('Method not implemented.');
     }
+    markAllAsRead() {
+        throw new Error('Method not implemented.');
+    }
     create(payload) {
         throw new Error('Method not implemented.');
     }
     constructor() {
         super(`${RootConfig.module.name}.${RootConfig.entities.notification.name}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationEntityServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationEntityServiceImpl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationEntityServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationEntityServiceImpl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationEntityServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationEntityServiceImpl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1058,10 +1061,10 @@ class AXMNotificationManagementTemplateEntityServiceImpl extends AXMNotification
     constructor() {
         super(`${RootConfig.module.name}.${RootConfig.entities.template.name}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementTemplateEntityServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementTemplateEntityServiceImpl }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementTemplateEntityServiceImpl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementTemplateEntityServiceImpl }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementTemplateEntityServiceImpl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementTemplateEntityServiceImpl, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -1363,16 +1366,16 @@ var template_entity = /*#__PURE__*/Object.freeze({
 });
 
 class AXMNotificationManagementTemplateEntityModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementTemplateEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementTemplateEntityModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementTemplateEntityModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementTemplateEntityModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementTemplateEntityModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementTemplateEntityModule, providers: [
             {
                 provide: AXMNotificationManagementTemplateEntityService,
                 useClass: AXMNotificationManagementTemplateEntityServiceImpl,
             },
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementTemplateEntityModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementTemplateEntityModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -1445,6 +1448,85 @@ class AXMNotificationManagmentModuleMenuProvider {
     }
 }
 
+//#region ----   Core Imports   ----
+/**
+ * Service to display OS-level notifications using the browser's Notification API.
+ */
+class AXMOsNotificationService {
+    constructor() {
+        this.isSupported = signal(false, ...(ngDevMode ? [{ debugName: "isSupported" }] : []));
+        this.permission = signal(false, ...(ngDevMode ? [{ debugName: "permission" }] : []));
+        this.isSupported.set('Notification' in window);
+    }
+    /**
+     * Requests permission from the user to display desktop notifications.
+     * @returns A promise that resolves to true if permission is granted, false otherwise.
+     */
+    async requestPermission() {
+        if (!this.isSupported()) {
+            console.warn('This browser does not support desktop notifications.');
+            return false;
+        }
+        switch (Notification.permission) {
+            case 'granted':
+                this.permission.set(true);
+                return true;
+            case 'default':
+                const permission = await Notification.requestPermission();
+                this.permission.set(permission === 'granted');
+                return this.permission();
+            default:
+                this.permission.set(false);
+                return false;
+        }
+    }
+    /**
+     * Shows a desktop notification.
+     * This method should be called after ensuring permission has been granted via requestPermission().
+     *
+     * @param title The title of the notification.
+     * @param options Optional notification options including an onClick handler and window focusing.
+     * @returns The Notification object if displayed, otherwise null.
+     */
+    show(title, options) {
+        if (!this.isSupported()) {
+            console.warn('This browser does not support desktop notifications.');
+            return null;
+        }
+        if (!this.permission()) {
+            console.warn(`Notification permission is ${Notification.permission}. Call requestPermission() first.`);
+            return null;
+        }
+        const notification = new Notification(title, options);
+        if (options?.onClick) {
+            notification.onclick = () => {
+                if (options.activeWindow) {
+                    window.focus();
+                }
+                options.onClick();
+            };
+        }
+        return notification;
+    }
+    /**
+     * Dismisses all active notifications or a specific one.
+     * @param notification Optional. Pass a specific notification to close it; otherwise closes all.
+     */
+    dismiss(notification) {
+        if (notification) {
+            notification.close();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMOsNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMOsNotificationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMOsNotificationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Signal store that provides a reactive interface for notification-related operations
  * Acts as a layer between notification components and the entity service
@@ -1453,17 +1535,18 @@ class AXMNotificationConnectorService {
     // Effects
     constructor() {
         this.notificationService = inject(AXMNotificationEntityService);
+        this.osNotificationService = inject(AXMOsNotificationService);
         // State signals
-        this.isLoading = signal(false);
-        this.error = signal(null);
-        this.notifications = signal([]);
-        this.totalCount = signal(0);
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
+        this.totalCount = signal(0, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
         // Public computed signals
-        this.loading = computed(() => this.isLoading());
-        this.errorMessage = computed(() => this.error());
-        this.notificationList = computed(() => this.notifications());
-        this.total = computed(() => this.totalCount());
-        this.unreadCount = computed(() => this.notifications().filter((notification) => notification.readAt === null).length);
+        this.loading = computed(() => this.isLoading(), ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.errorMessage = computed(() => this.error(), ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+        this.notificationList = computed(() => this.notifications(), ...(ngDevMode ? [{ debugName: "notificationList" }] : []));
+        this.total = computed(() => this.totalCount(), ...(ngDevMode ? [{ debugName: "total" }] : []));
+        this.unreadCount = computed(() => this.notifications().filter((notification) => notification.readAt === null).length, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
         // Auto-fetch notifications when service is initialized
         effect(() => {
             this.getList();
@@ -1526,13 +1609,36 @@ class AXMNotificationConnectorService {
             this.isLoading.set(false);
         }
     }
+    async markAllAsRead() {
+        try {
+            this.isLoading.set(true);
+            this.error.set(null);
+            await this.notificationService.markAllAsRead();
+            this.notifications.update((notifications) => notifications.map((notification) => ({ ...notification, readAt: new Date() })));
+        }
+        catch (err) {
+            this.error.set(err instanceof Error ? err.message : 'Failed to mark all notifications as read');
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
     /**
      * Create a new notification
      */
-    async create(payload) {
+    async create(payload, options) {
         try {
             this.isLoading.set(true);
             this.error.set(null);
+            //send os notification
+            const isPermissionGranted = await this.osNotificationService.requestPermission();
+            if (payload && isPermissionGranted) {
+                this.osNotificationService.show(payload.title || 'Notification', {
+                    body: payload.body || 'No body',
+                    icon: payload.user.image || '',
+                    ...options,
+                });
+            }
             await this.notificationService.create(payload);
             // Refresh list after creating a notification
             await this.getList();
@@ -1644,10 +1750,10 @@ class AXMNotificationConnectorService {
             this.isLoading.set(false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationConnectorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationConnectorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationConnectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationConnectorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1656,17 +1762,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 
 class AXMAdminNotificationItemComponent {
     constructor() {
-        this.data = input.required();
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
         this.onPressNotificationItem = output();
-        this.differentTime = computed(() => Date.now() - this.data().createAt.getTime());
+        this.differentTime = computed(() => Date.now() - this.data().createAt.getTime(), ...(ngDevMode ? [{ debugName: "differentTime" }] : []));
     }
     pressNotificationItem(id) {
         this.onPressNotificationItem.emit(id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMAdminNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMAdminNotificationItemComponent, isStandalone: true, selector: "axp-master-notification-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onPressNotificationItem: "onPressNotificationItem" }, ngImport: i0, template: "<div\n  class=\"notification-item\"\n  [id]=\"data().id\"\n  (click)=\"pressNotificationItem(data().id)\"\n  [class]=\"[data().template.prority, data().readAt ? 'read' : 'unread']\"\n>\n  <div class=\"notification-avatar\">\n    <axp-user-avatar [size]=\"48\" [userId]=\"data().user.id\"></axp-user-avatar>\n    @if (!data().readAt) {\n      <div class=\"unread-badge\"></div>\n    }\n  </div>\n\n  <div class=\"notification-content\">\n    <div class=\"notification-header\">\n      <div class=\"notification-title\">{{ data().user.name || data().title }}</div>\n      <div class=\"notification-meta\">\n        @if (!data().template.isPinned) {\n          <div class=\"pin-notification\" (click)=\"$event.stopPropagation()\">\n            <ax-icon>\n              <i class=\"fa-solid fa-thumbtack\"></i>\n            </ax-icon>\n          </div>\n        }\n        <div class=\"notification-time\">{{ differentTime() | format: 'timeleft' | async }}</div>\n      </div>\n    </div>\n\n    <div class=\"notification-body\">{{ data().body }}</div>\n  </div>\n</div>\n", styles: [".notification-item{position:relative;margin-top:2px;margin-bottom:2px;display:flex;cursor:pointer;gap:1rem;border-radius:.125rem;padding:1rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.notification-item.read{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.notification-item.unread{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.notification-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.notification-item.Notice:before,.notification-item.Danger:before,.notification-item.Warning:before{content:\"\";position:absolute;top:.5rem;bottom:.5rem;inset-inline-start:0px;width:.125rem;border-radius:9999px}.notification-item.Notice:before{background:rgb(var(--ax-sys-color-success-500))}.notification-item.Danger:before{background:rgb(var(--ax-sys-color-danger-500))}.notification-item.Warning:before{background:rgb(var(--ax-sys-color-warning-500))}.notification-item .notification-avatar{position:relative}.notification-item .notification-avatar .unread-badge{position:absolute;bottom:.25rem;inset-inline-end:.25rem;width:10px;height:10px;background:rgb(var(--ax-sys-color-primary-500));border:2px solid rgb(var(--ax-sys-color-surface));border-radius:50%}.notification-item .notification-content{min-width:0px;flex:1 1 0%}.notification-item .notification-content .notification-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.notification-item .notification-content .notification-header .notification-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.notification-item .notification-content .notification-header .notification-meta{display:flex;align-items:center;gap:.5rem}.notification-item .notification-content .notification-header .notification-meta .notification-time{white-space:nowrap;font-size:.75rem;line-height:1rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.notification-item .notification-content .notification-body{margin-top:.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.875rem;line-height:1.25rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.notification-item .pin-notification{border-radius:9999px;padding:.375rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:rgb(var(--ax-sys-color-on-surface-variant))}.notification-item .pin-notification i{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i3$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMAdminNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXMAdminNotificationItemComponent, isStandalone: true, selector: "axp-master-notification-item", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onPressNotificationItem: "onPressNotificationItem" }, ngImport: i0, template: "<div\n  class=\"notification-item\"\n  [id]=\"data().id\"\n  (click)=\"pressNotificationItem(data().id)\"\n  [class]=\"[data().template.prority, data().readAt ? 'read' : 'unread']\"\n>\n  <div class=\"notification-avatar\">\n    <axp-user-avatar [size]=\"48\" [userId]=\"data().user.id\"></axp-user-avatar>\n    @if (!data().readAt) {\n      <div class=\"unread-badge\"></div>\n    }\n  </div>\n\n  <div class=\"notification-content\">\n    <div class=\"notification-header\">\n      <div class=\"notification-title\">{{ data().user.name || data().title }}</div>\n      <div class=\"notification-meta\">\n        @if (!data().template.isPinned) {\n          <div class=\"pin-notification\" (click)=\"$event.stopPropagation()\">\n            <ax-icon>\n              <i class=\"fa-solid fa-thumbtack\"></i>\n            </ax-icon>\n          </div>\n        }\n        <div class=\"notification-time\">{{ differentTime() | format: 'timeleft' | async }}</div>\n      </div>\n    </div>\n\n    <div class=\"notification-body\">{{ data().body }}</div>\n  </div>\n</div>\n", styles: [".notification-item{position:relative;margin-top:2px;margin-bottom:2px;display:flex;cursor:pointer;gap:1rem;border-radius:.125rem;padding:1rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.notification-item.read{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.notification-item.unread{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.notification-item:hover{background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.notification-item.Notice:before,.notification-item.Danger:before,.notification-item.Warning:before{content:\"\";position:absolute;top:.5rem;bottom:.5rem;inset-inline-start:0px;width:.125rem;border-radius:9999px}.notification-item.Notice:before{background:rgb(var(--ax-sys-color-success-500))}.notification-item.Danger:before{background:rgb(var(--ax-sys-color-danger-500))}.notification-item.Warning:before{background:rgb(var(--ax-sys-color-warning-500))}.notification-item .notification-avatar{position:relative}.notification-item .notification-avatar .unread-badge{position:absolute;bottom:.25rem;inset-inline-end:.25rem;width:10px;height:10px;background:rgb(var(--ax-sys-color-primary-500));border:2px solid rgb(var(--ax-sys-color-surface));border-radius:50%}.notification-item .notification-content{min-width:0px;flex:1 1 0%}.notification-item .notification-content .notification-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.notification-item .notification-content .notification-header .notification-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem;line-height:1.5rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.notification-item .notification-content .notification-header .notification-meta{display:flex;align-items:center;gap:.5rem}.notification-item .notification-content .notification-header .notification-meta .notification-time{white-space:nowrap;font-size:.75rem;line-height:1rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.notification-item .notification-content .notification-body{margin-top:.25rem;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.875rem;line-height:1.25rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.notification-item .pin-notification{border-radius:9999px;padding:.375rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:rgb(var(--ax-sys-color-on-surface-variant))}.notification-item .pin-notification i{--tw-rotate: 45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMAdminNotificationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMAdminNotificationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-master-notification-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
@@ -1691,12 +1797,12 @@ class AXMAdminNotificationPanelComponent {
         this.totalNotifications = this.notificationConnector.total;
         this.isLoading = this.notificationConnector.loading;
         this.errorMessage = this.notificationConnector.errorMessage;
-        this.activeTab = signal('All');
-        this.tabItems = computed(() => this.getTabItems(this.notifications()), {
-            equal: (a, b) => JSON.stringify(a) === JSON.stringify(b),
-        });
-        this.NewNotification = computed(() => this.getNewNotification(this.tabItems()));
-        this.NewNotificationEffect = effect(() => this.onNewNotfication.emit(this.NewNotification()));
+        this.activeTab = signal('All', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+        this.tabItems = computed(() => this.getTabItems(this.notifications()), ...(ngDevMode ? [{ debugName: "tabItems", equal: (a, b) => JSON.stringify(a) === JSON.stringify(b) }] : [{
+                equal: (a, b) => JSON.stringify(a) === JSON.stringify(b),
+            }]));
+        this.NewNotification = computed(() => this.getNewNotification(this.tabItems()), ...(ngDevMode ? [{ debugName: "NewNotification" }] : []));
+        this.NewNotificationEffect = effect(() => this.onNewNotfication.emit(this.NewNotification()), ...(ngDevMode ? [{ debugName: "NewNotificationEffect" }] : []));
     }
     changeActiveTab(tab) {
         this.activeTab.set(tab);
@@ -1777,7 +1883,7 @@ class AXMAdminNotificationPanelComponent {
      */
     async markAllAsRead() {
         try {
-            await this.notificationConnector.markAsRead({ id: [] });
+            await this.notificationConnector.markAllAsRead();
         }
         catch (error) {
             console.error('Failed to mark all notifications as read:', error);
@@ -1786,10 +1892,10 @@ class AXMAdminNotificationPanelComponent {
     viewAllNotifications() {
         this.router.navigate([`${this.sessionService.application?.name}/m/notification-management/e/my-notification/list`]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMAdminNotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMAdminNotificationPanelComponent, isStandalone: true, selector: "axm-admin-notification-panel", outputs: { onNewNotfication: "onNewNotfication" }, ngImport: i0, template: "<div class=\"ax-p-4 ax-flex ax-justify-between ax-items-center\">\n  <span class=\"ax-text-xl\">Notifications</span>\n  <ax-button color=\"default\" look=\"blank\">\n    <ax-icon>\n      <i class=\"fa-regular fa-gear fa-lg\"></i>\n    </ax-icon>\n  </ax-button>\n</div>\n<ax-tabs [content]=\"cons\" look=\"with-line\" location=\"bottom\">\n  @for (tab of tabItems(); track tab.text) {\n    <ax-tab-item [text]=\"tab.text\" [active]=\"activeTab() === tab.text\" (activeChange)=\"changeActiveTab(tab.text)\">\n      <ax-suffix>\n        @if (tab.count) {\n          <ax-badge [color]=\"activeTab() === tab.text ? 'primary' : 'ghost'\" [text]=\"tab.count.toString()\"></ax-badge>\n        }\n      </ax-suffix>\n      <ax-content>\n        <div class=\"ax-max-h-[50vh] ax-max-w-[30rem] ax-overflow-y-auto\">\n          @for (notif of getNotificationItems(tab.text); track notif.id) {\n            <axp-master-notification-item\n              [data]=\"notif\"\n              (onPressNotificationItem)=\"markAsRead($event)\"\n            ></axp-master-notification-item>\n          }\n        </div>\n        <div class=\"ax-flex ax-gap-4 ax-justify-between ax-p-4 ax-border-t ax-border-default\">\n          <ax-button\n            [disabled]=\"NewNotification() === 0\"\n            [color]=\"'default'\"\n            text=\"Mark all as read\"\n            (onClick)=\"markAllAsRead()\"\n          ></ax-button>\n          <ax-button color=\"primary\" text=\"View all notifications\" (onClick)=\"viewAllNotifications()\"></ax-button>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n  }\n</ax-tabs>\n\n<ng-template [axTabContent] #cons=\"axTabContent\"></ng-template>\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i2.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: AXMAdminNotificationItemComponent, selector: "axp-master-notification-item", inputs: ["data"], outputs: ["onPressNotificationItem"] }, { kind: "ngmodule", type: AXFormatModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMAdminNotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXMAdminNotificationPanelComponent, isStandalone: true, selector: "axm-admin-notification-panel", outputs: { onNewNotfication: "onNewNotfication" }, ngImport: i0, template: "<div class=\"ax-p-4 ax-flex ax-justify-between ax-items-center\">\n  <span class=\"ax-text-xl\">Notifications</span>\n  <ax-button color=\"default\" look=\"blank\">\n    <ax-icon>\n      <i class=\"fa-regular fa-gear fa-lg\"></i>\n    </ax-icon>\n  </ax-button>\n</div>\n<ax-tabs [content]=\"cons\" look=\"with-line\" location=\"bottom\">\n  @for (tab of tabItems(); track tab.text) {\n    <ax-tab-item [text]=\"tab.text\" [active]=\"activeTab() === tab.text\" (activeChange)=\"changeActiveTab(tab.text)\">\n      <ax-suffix>\n        @if (tab.count) {\n          <ax-badge [color]=\"activeTab() === tab.text ? 'primary' : 'ghost'\" [text]=\"tab.count.toString()\"></ax-badge>\n        }\n      </ax-suffix>\n      <ax-content>\n        <div class=\"ax-max-h-[50vh] ax-max-w-[30rem] ax-overflow-y-auto\">\n          @for (notif of getNotificationItems(tab.text); track notif.id) {\n            <axp-master-notification-item\n              [data]=\"notif\"\n              (onPressNotificationItem)=\"markAsRead($event)\"\n            ></axp-master-notification-item>\n          }\n        </div>\n        <div class=\"ax-flex ax-gap-4 ax-justify-between ax-p-4 ax-border-t ax-border-default\">\n          <ax-button\n            [disabled]=\"NewNotification() === 0\"\n            [color]=\"'default'\"\n            text=\"Mark all as read\"\n            (onClick)=\"markAllAsRead()\"\n          ></ax-button>\n          <ax-button color=\"primary\" text=\"View all notifications\" (onClick)=\"viewAllNotifications()\"></ax-button>\n        </div>\n      </ax-content>\n    </ax-tab-item>\n  }\n</ax-tabs>\n\n<ng-template [axTabContent] #cons=\"axTabContent\"></ng-template>\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i2.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: AXMAdminNotificationItemComponent, selector: "axp-master-notification-item", inputs: ["data"], outputs: ["onPressNotificationItem"] }, { kind: "ngmodule", type: AXFormatModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMAdminNotificationPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMAdminNotificationPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-admin-notification-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AXButtonModule,
@@ -1804,15 +1910,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 
 class AXMAdminNotificationSlotComponent {
     constructor() {
-        this.totalNewNotification = signal(0);
+        this.totalNewNotification = signal(0, ...(ngDevMode ? [{ debugName: "totalNewNotification" }] : []));
     }
     setTotalNewNotification(value) {
         this.totalNewNotification.set(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMAdminNotificationSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXMAdminNotificationSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<ax-button class=\"ax-relative\" color=\"primary\" #notification>\n  <ax-icon>\n    <i class=\"fa-regular fa-bell\"></i>\n  </ax-icon>\n  <ax-suffix class=\"ax-absolute ax-top-0 ax-left-1/2\">\n    @if(totalNewNotification()){\n    <ax-badge color=\"success\" [text]=\"totalNewNotification().toString()\"></ax-badge>\n    }\n  </ax-suffix>\n</ax-button>\n<ax-popover [target]=\"notification\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n  <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full\">\n    <axm-admin-notification-panel (onNewNotfication)=\"setTotalNewNotification($event)\"> </axm-admin-notification-panel>\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i4$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXMAdminNotificationPanelComponent, selector: "axm-admin-notification-panel", outputs: ["onNewNotfication"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMAdminNotificationSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXMAdminNotificationSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<ax-button class=\"ax-relative\" color=\"primary\" #notification>\n  <ax-icon>\n    <i class=\"fa-regular fa-bell\"></i>\n  </ax-icon>\n  <ax-suffix class=\"ax-absolute ax-top-0 ax-left-1/2\">\n    @if(totalNewNotification()){\n    <ax-badge color=\"success\" [text]=\"totalNewNotification().toString()\"></ax-badge>\n    }\n  </ax-suffix>\n</ax-button>\n<ax-popover [target]=\"notification\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\">\n  <div class=\"ax-bg-lightest ax-border ax-border-default ax-rounded-md ax-shadow-md ax-w-full\">\n    <axm-admin-notification-panel (onNewNotfication)=\"setTotalNewNotification($event)\"> </axm-admin-notification-panel>\n  </div>\n</ax-popover>\n", dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i4$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXMAdminNotificationPanelComponent, selector: "axm-admin-notification-panel", outputs: ["onNewNotfication"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMAdminNotificationSlotComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMAdminNotificationSlotComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AXButtonModule,
@@ -1866,10 +1972,10 @@ class AXMEntityLoader {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMEntityLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMEntityLoader }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMEntityLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMEntityLoader }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMEntityLoader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMEntityLoader, decorators: [{
             type: Injectable
         }] });
 
@@ -1889,14 +1995,14 @@ class AXPNotificationWidgetViewComponent extends AXPValueWidgetComponent {
         this.notificationConnector = inject(AXMNotificationConnectorService);
         this.toastService = inject(AXToastService);
         // State
-        this.activeTab = signal('new');
+        this.activeTab = signal('new', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
         this.refreshTimerId = null;
         // Configuration
-        this.maxItems = computed(() => this.options()?.maxItems ?? 10);
-        this.showAvatar = computed(() => this.options()?.showAvatar ?? true);
-        this.showDate = computed(() => this.options()?.showDate ?? true);
-        this.autoRefresh = computed(() => this.options()?.autoRefresh ?? true);
-        this.refreshInterval = computed(() => (this.options()?.refreshInterval ?? 60) * 1000); // Convert to milliseconds
+        this.maxItems = computed(() => this.options()?.maxItems ?? 10, ...(ngDevMode ? [{ debugName: "maxItems" }] : []));
+        this.showAvatar = computed(() => this.options()?.showAvatar ?? true, ...(ngDevMode ? [{ debugName: "showAvatar" }] : []));
+        this.showDate = computed(() => this.options()?.showDate ?? true, ...(ngDevMode ? [{ debugName: "showDate" }] : []));
+        this.autoRefresh = computed(() => this.options()?.autoRefresh ?? true, ...(ngDevMode ? [{ debugName: "autoRefresh" }] : []));
+        this.refreshInterval = computed(() => (this.options()?.refreshInterval ?? 60) * 1000, ...(ngDevMode ? [{ debugName: "refreshInterval" }] : [])); // Convert to milliseconds
         // Use store's signals directly
         this.notifications = this.notificationConnector.notificationList;
         this.totalNotifications = this.notificationConnector.total;
@@ -1916,7 +2022,7 @@ class AXPNotificationWidgetViewComponent extends AXPValueWidgetComponent {
             // Filter by active tab
             const filtered = this.activeTab() === 'new' ? sortedItems.filter((n) => !n.readAt) : sortedItems;
             return filtered.slice(0, this.maxItems());
-        });
+        }, ...(ngDevMode ? [{ debugName: "notificationItems" }] : []));
         // Watch for changes to auto-refresh settings
         effect(() => {
             this.setupAutoRefresh();
@@ -2072,10 +2178,10 @@ class AXPNotificationWidgetViewComponent extends AXPValueWidgetComponent {
         const diffMs = now.getTime() - date.getTime();
         return Math.floor(diffMs / (1000 * 60 * 60 * 24));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPNotificationWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: AXPNotificationWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { notificationClick: "notificationClick", markAsRead: "markAsRead" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-p-2 ax-size-full\">\n  <ax-tabs\n    class=\"ax-bg-light-start ax-border-b ax-border-default\"\n    [fitParent]=\"true\"\n    location=\"bottom\"\n    (onActiveTabChanged)=\"handleTabChange($event)\"\n  >\n    <ax-tab-item\n      [text]=\"('new' | translate: { scope: 'notification-management' } | async) ?? 'New'\"\n      class=\"ax-font-medium\"\n    >\n      <ax-suffix>\n        @if (getNewMessageCount() > 0) {\n          <ax-badge color=\"primary\" [text]=\"getNewMessageCount().toString()\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </ax-suffix>\n    </ax-tab-item>\n    <ax-tab-item\n      [text]=\"('all' | translate: { scope: 'notification-management' } | async) ?? 'All'\"\n      class=\"ax-font-medium\"\n    ></ax-tab-item>\n  </ax-tabs>\n  <div class=\"ax-space-y-1 ax-mt-2\">\n    @for (item of notificationItems(); track item.id) {\n      <ng-container [ngTemplateOutlet]=\"chatItemTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\n      </ng-container>\n    } @empty {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n        <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n          <i class=\"fa-light fa-bell-slash\"></i>\n        </ax-icon>\n        <p class=\"ax-text-center\">{{ 'no-notifications' | translate: { scope: 'notification-management' } | async }}</p>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #chatItemTemplateRef let-data>\n  <div class=\"notification-item\" [class.unread]=\"!data.readAt\" [class.read]=\"data.readAt\">\n    <div class=\"notification-avatar\">\n      @if (showAvatar()) {\n        <axp-user-avatar [size]=\"48\" [userId]=\"data.user?.id\"></axp-user-avatar>\n        @if (!data.readAt) {\n          <div class=\"unread-badge\"></div>\n        }\n      }\n    </div>\n\n    <div class=\"notification-content\">\n      <div class=\"notification-header\">\n        <div class=\"notification-title\">{{ data.user?.name || data.title }}</div>\n        @if (showDate()) {\n          <div class=\"notification-time\">{{ formatTime(data.createdAt) }}</div>\n        }\n      </div>\n\n      <div class=\"notification-body\">{{ data.body }}</div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}.notification-item{position:relative;margin-top:2px;margin-bottom:2px;display:flex;cursor:pointer;gap:1rem;border-radius:1rem;padding:.5rem;text-align:start;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));animation-duration:.2s}.notification-item .notification-avatar{position:relative}.notification-item .notification-avatar .unread-badge{position:absolute;bottom:.25rem;inset-inline-end:.25rem;width:10px;height:10px;background:rgb(var(--ax-sys-color-primary-500));border:2px solid rgb(var(--ax-sys-color-surface));border-radius:50%}.notification-item .notification-content{min-width:0px;flex:1 1 0%}.notification-item .notification-content .notification-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.notification-item .notification-content .notification-header .notification-title{font-size:1rem;line-height:1.5rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.notification-item .notification-content .notification-header .notification-time{white-space:nowrap;font-size:.75rem;line-height:1rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.notification-item .notification-content .notification-body{margin-top:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;color:rgb(var(--ax-sys-color-on-surface-variant))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPNotificationWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AXPNotificationWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { notificationClick: "notificationClick", markAsRead: "markAsRead" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-p-2 ax-size-full\">\n  <ax-tabs\n    class=\"ax-bg-light-start ax-border-b ax-border-default\"\n    [fitParent]=\"true\"\n    location=\"bottom\"\n    (onActiveTabChanged)=\"handleTabChange($event)\"\n  >\n    <ax-tab-item\n      [text]=\"('new' | translate: { scope: 'notification-management' } | async) ?? 'New'\"\n      class=\"ax-font-medium\"\n    >\n      <ax-suffix>\n        @if (getNewMessageCount() > 0) {\n          <ax-badge color=\"primary\" [text]=\"getNewMessageCount().toString()\" size=\"sm\" class=\"ax-ml-1\"></ax-badge>\n        }\n      </ax-suffix>\n    </ax-tab-item>\n    <ax-tab-item\n      [text]=\"('all' | translate: { scope: 'notification-management' } | async) ?? 'All'\"\n      class=\"ax-font-medium\"\n    ></ax-tab-item>\n  </ax-tabs>\n  <div class=\"ax-space-y-1 ax-mt-2\">\n    @for (item of notificationItems(); track item.id) {\n      <ng-container [ngTemplateOutlet]=\"chatItemTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\n      </ng-container>\n    } @empty {\n      <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-py-12 ax-px-4 ax-text-gray-400\">\n        <ax-icon class=\"ax-text-4xl ax-mb-3 ax-text-gray-300\">\n          <i class=\"fa-light fa-bell-slash\"></i>\n        </ax-icon>\n        <p class=\"ax-text-center\">{{ 'no-notifications' | translate: { scope: 'notification-management' } | async }}</p>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template #chatItemTemplateRef let-data>\n  <div class=\"notification-item\" [class.unread]=\"!data.readAt\" [class.read]=\"data.readAt\">\n    <div class=\"notification-avatar\">\n      @if (showAvatar()) {\n        <axp-user-avatar [size]=\"48\" [userId]=\"data.user?.id\"></axp-user-avatar>\n        @if (!data.readAt) {\n          <div class=\"unread-badge\"></div>\n        }\n      }\n    </div>\n\n    <div class=\"notification-content\">\n      <div class=\"notification-header\">\n        <div class=\"notification-title\">{{ data.user?.name || data.title }}</div>\n        @if (showDate()) {\n          <div class=\"notification-time\">{{ formatTime(data.createdAt) }}</div>\n        }\n      </div>\n\n      <div class=\"notification-body\">{{ data.body }}</div>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}.notification-item{position:relative;margin-top:2px;margin-bottom:2px;display:flex;cursor:pointer;gap:1rem;border-radius:1rem;padding:.5rem;text-align:start;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));animation-duration:.2s}.notification-item .notification-avatar{position:relative}.notification-item .notification-avatar .unread-badge{position:absolute;bottom:.25rem;inset-inline-end:.25rem;width:10px;height:10px;background:rgb(var(--ax-sys-color-primary-500));border:2px solid rgb(var(--ax-sys-color-surface));border-radius:50%}.notification-item .notification-content{min-width:0px;flex:1 1 0%}.notification-item .notification-content .notification-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.notification-item .notification-content .notification-header .notification-title{font-size:1rem;line-height:1.5rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.notification-item .notification-content .notification-header .notification-time{white-space:nowrap;font-size:.75rem;line-height:1rem;color:rgb(var(--ax-sys-color-on-surface-variant))}.notification-item .notification-content .notification-body{margin-top:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;color:rgb(var(--ax-sys-color-on-surface-variant))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXPNotificationWidgetViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPNotificationWidgetViewComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [
                         CommonModule,
@@ -2234,9 +2340,9 @@ const AXPMyNotificationDashboardWidget = {
 };
 
 class AXMNotificationManagementModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementModule, imports: [i1$2.AXPComponentSlotModule, i2$1.AXPLayoutBuilderModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementModule, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementModule, imports: [i1$2.AXPComponentSlotModule, i2$1.AXPLayoutBuilderModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementModule, providers: [
             {
                 provide: AXMNotificationManagementTemplateEntityService,
                 useClass: AXMNotificationManagementTemplateEntityServiceImpl,
@@ -2282,7 +2388,7 @@ class AXMNotificationManagementModule {
                 ],
             })] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AXMNotificationManagementModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXMNotificationManagementModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -2965,5 +3071,5 @@ async function notificationLogEntityFactory(injector) {
  * Generated bundle index. Do not edit.
  */
 
-export { AXMNotificationEntityService, AXMNotificationEntityServiceImpl, AXMNotificationManagementChannelEntityService, AXMNotificationManagementChannelEntityServiceImpl, AXMNotificationManagementModule, AXMNotificationManagementTemplateEntityModule, AXMNotificationManagementTemplateEntityService, AXMNotificationManagementTemplateEntityServiceImpl, AXMNotificationManagmentModuleMenuProvider, AXMSettingProvider, AXPMyNotificationDashboardWidget, AXPNotificationWidgetViewComponent, RootConfig, myNotificationEntityFactory, notificationChannelEntityFactory, notificationEntityFactory, notificationLogEntityFactory, notificationTemplateEntityFactory };
+export { AXMNotificationConnectorService, AXMNotificationEntityService, AXMNotificationEntityServiceImpl, AXMNotificationManagementChannelEntityService, AXMNotificationManagementChannelEntityServiceImpl, AXMNotificationManagementModule, AXMNotificationManagementTemplateEntityModule, AXMNotificationManagementTemplateEntityService, AXMNotificationManagementTemplateEntityServiceImpl, AXMNotificationManagmentModuleMenuProvider, AXMOsNotificationService, AXMSettingProvider, AXPMyNotificationDashboardWidget, AXPNotificationWidgetViewComponent, RootConfig, myNotificationEntityFactory, notificationChannelEntityFactory, notificationEntityFactory, notificationLogEntityFactory, notificationTemplateEntityFactory };
 //# sourceMappingURL=acorex-modules-notification-management.mjs.map