@acorex/modules 19.3.0 → 19.3.2

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

@@ -1,35 +1,39 @@
 import { RootConfig as RootConfig$1 } from '@acorex/modules/text-template-management';
 import * as i1$2 from '@acorex/platform/common';
-import { AXPEntityCommandScope, AXPEntityQueryType, AXPComponentSlotModule, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER, AXPDataGenerator } from '@acorex/platform/common';
-import { AXPWidgetsCatalog } from '@acorex/platform/layout/builder';
+import { AXPEntityCommandScope, AXPEntityQueryType, AXPComponentSlotModule, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
+import * as i2$1 from '@acorex/platform/layout/builder';
+import { AXPWidgetsCatalog, AXPValueWidgetComponent, cloneProperty, AXPWidgetGroupEnum, AXPLayoutBuilderModule } from '@acorex/platform/layout/builder';
 import { AXMEntityCrudServiceImpl, AXPEntityService, AXP_ENTITY_DEFINITION_LOADER, AXPEntityStorageService, AXPEntityDataProviderImpl } from '@acorex/platform/layout/entity';
 import * as i0 from '@angular/core';
-import { Injectable, NgModule, inject, input, output, computed, ChangeDetectionStrategy, Component, signal, effect, Injector } from '@angular/core';
+import { Injectable, NgModule, inject, signal, computed, effect, input, output, ChangeDetectionStrategy, Component, Injector, ChangeDetectorRef } from '@angular/core';
 import { AXPSessionService } from '@acorex/platform/auth';
 import { firstValueFrom } from 'rxjs';
-import * as i4$1 from '@acorex/components/badge';
+import * as i4 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
 import * as i1$1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i2 from '@acorex/components/decorators';
+import * as i3 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4$2 from '@acorex/components/popover';
+import * as i4$1 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
 import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2$1 from '@acorex/components/tabs';
+import { CommonModule, DatePipe } from '@angular/common';
+import * as i2 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXToastService } from '@acorex/components/toast';
-import * as i5 from '@acorex/core/format';
+import * as i3$1 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
 import { Router } from '@angular/router';
-import * as i3 from '@acorex/components/avatar';
-import { AXAvatarModule } from '@acorex/components/avatar';
-import * as i4 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
+import { AXPUserAvatarComponent } from '@acorex/platform/layout/components';
+import { AXAvatarModule } from '@acorex/components/avatar';
+import * as i5 from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+import { AXP_WIDGETS_UTILITY_CATEGORY } from '@acorex/modules/dashboard-management';
+import { AXP_APPEARANCE_PROPERTY_GROUP, AXP_STYLING_PROPERTY_GROUP, AXP_DATA_PATH_PROPERTY } from '@acorex/platform/widgets';
 import { RootConfig as RootConfig$2 } from '@acorex/modules/form-template-management';
-import { AXTranslationService } from '@acorex/core/translation';
 import { AXPWidgetsList } from '@acorex/modules/common';
+import { AXPDataGenerator } from '@acorex/platform/core';
 
 const config = {
     i18n: 'notification-management',
@@ -1441,6 +1445,215 @@ class AXMNotificationManagmentModuleMenuProvider {
     }
 }
 
+/**
+ * Signal store that provides a reactive interface for notification-related operations
+ * Acts as a layer between notification components and the entity service
+ */
+class AXMNotificationConnectorService {
+    // Effects
+    constructor() {
+        this.notificationService = inject(AXMNotificationEntityService);
+        // State signals
+        this.isLoading = signal(false);
+        this.error = signal(null);
+        this.notifications = signal([]);
+        this.totalCount = signal(0);
+        // 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);
+        // Auto-fetch notifications when service is initialized
+        effect(() => {
+            this.getList();
+        });
+    }
+    // Methods from entity service with additional state management
+    /**
+     * Get list of notifications
+     */
+    async getList() {
+        try {
+            this.isLoading.set(true);
+            this.error.set(null);
+            const response = await this.notificationService.getList();
+            this.notifications.set(response.items);
+            this.totalCount.set(response.total);
+            return response;
+        }
+        catch (err) {
+            this.error.set(err instanceof Error ? err.message : 'Failed to fetch notifications');
+            return { total: 0, items: [] };
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    /**
+     * Mark notifications as read or toggle read status
+     * If no specific IDs are provided, mark all as read
+     * If specific IDs are provided, toggle their read status (mark as read if unread, mark as unread if read)
+     */
+    async markAsRead(payload = { id: [] }) {
+        try {
+            this.isLoading.set(true);
+            this.error.set(null);
+            await this.notificationService.markAsRead(payload);
+            // Update local state to reflect toggled read status
+            if (payload?.id?.length) {
+                // Toggle read status for specific notifications
+                this.notifications.update((notifications) => notifications.map((notification) => {
+                    if (payload.id.includes(notification.id)) {
+                        // Toggle read status
+                        return {
+                            ...notification,
+                            readAt: notification.readAt ? null : new Date(),
+                        };
+                    }
+                    return notification;
+                }));
+            }
+            else {
+                // If no specific IDs are provided, mark all unread notifications as read
+                this.notifications.update((notifications) => notifications.map((notification) => notification.readAt ? notification : { ...notification, readAt: new Date() }));
+            }
+        }
+        catch (err) {
+            this.error.set(err instanceof Error ? err.message : 'Failed to mark notifications as read');
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    /**
+     * Create a new notification
+     */
+    async create(payload) {
+        try {
+            this.isLoading.set(true);
+            this.error.set(null);
+            await this.notificationService.create(payload);
+            // Refresh list after creating a notification
+            await this.getList();
+        }
+        catch (err) {
+            this.error.set(err instanceof Error ? err.message : 'Failed to create notification');
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    // Methods from AXMEntityCrudServiceImpl
+    /**
+     * Insert one notification
+     */
+    async insertOne(request) {
+        try {
+            this.isLoading.set(true);
+            this.error.set(null);
+            const id = await this.notificationService.insertOne(request);
+            // Refresh list after inserting
+            await this.getList();
+            return id;
+        }
+        catch (err) {
+            this.error.set(err instanceof Error ? err.message : 'Failed to insert notification');
+            throw err;
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    /**
+     * Get one notification by id
+     */
+    async getOne(id) {
+        try {
+            this.isLoading.set(true);
+            this.error.set(null);
+            return await this.notificationService.getOne(id);
+        }
+        catch (err) {
+            this.error.set(err instanceof Error ? err.message : `Failed to get notification with id ${id}`);
+            throw err;
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    /**
+     * Delete one notification
+     */
+    async deleteOne(id) {
+        try {
+            this.isLoading.set(true);
+            this.error.set(null);
+            await this.notificationService.deleteOne(id);
+            // Update local state to remove deleted notification
+            this.notifications.update((notifications) => notifications.filter((notification) => notification.id !== id));
+            // Update total count
+            this.totalCount.update((count) => count - 1);
+        }
+        catch (err) {
+            this.error.set(err instanceof Error ? err.message : `Failed to delete notification with id ${id}`);
+            throw err;
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    /**
+     * Update one notification
+     */
+    async updateOne(id, values) {
+        try {
+            this.isLoading.set(true);
+            this.error.set(null);
+            const updated = await this.notificationService.updateOne(id, values);
+            // Update local state to reflect changes
+            this.notifications.update((notifications) => notifications.map((notification) => notification.id === id ? { ...notification, ...values } : notification));
+            return updated;
+        }
+        catch (err) {
+            this.error.set(err instanceof Error ? err.message : `Failed to update notification with id ${id}`);
+            throw err;
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    /**
+     * Query notifications
+     */
+    async query(request = { skip: 0, take: 100 }) {
+        try {
+            this.isLoading.set(true);
+            this.error.set(null);
+            const result = await this.notificationService.query(request);
+            // Update local state with query results
+            this.notifications.set(result.items);
+            this.totalCount.set(result.total);
+            return result;
+        }
+        catch (err) {
+            this.error.set(err instanceof Error ? err.message : 'Failed to query notifications');
+            throw err;
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMNotificationConnectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMNotificationConnectorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMNotificationConnectorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 class AXMAdminNotificationItemComponent {
     constructor() {
         this.data = input.required();
@@ -1451,7 +1664,7 @@ class AXMAdminNotificationItemComponent {
         this.onPressNotificationItem.emit(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMAdminNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.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  <ax-avatar shape=\"rounded\" color=\"primary\">\n    @if(data().user.image){\n    <ax-image src=\"https://i.pravatar.cc/300\"></ax-image>\n    }@else {\n    <ax-icon>\n      <i class=\"fa-solid fa-lock\"></i>\n    </ax-icon>\n    }\n  </ax-avatar>\n  <div>\n    <div class=\"notification-item-title\">{{ data().title }}</div>\n    <div class=\"notification-item-body\">{{ data().body }}</div>\n    <!-- @if(false){\n    <div>\n      <div class=\"notification-file\">\n        <ax-avatar color=\"primary\">\n          <ax-icon>\n            <i class=\"fa-solid fa-file-word ax-text-2xl\"></i>\n          </ax-icon>\n        </ax-avatar>\n        <div>\n          <div class=\"notification-file-name\">New project details.docx</div>\n          <div class=\"notification-file-size\">250 KB</div>\n        </div>\n        <ax-button look=\"blank\">\n          <ax-icon>\n            <i class=\"fa-solid fa-download\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n    } -->\n    <div class=\"notification-item-time\">{{ differentTime() | format : 'timeleft' | async }}</div>\n  </div>\n  @if(!data().template.isPinned){\n  <div class=\"pin-notification ltr:ax-rotate-45 rtl:ax-left-0 rtl:-ax-rotate-45 ltr:ax-right-0\">\n    <ax-icon>\n      <i class=\"fa-solid fa-thumbtack\"></i>\n    </ax-icon>\n  </div>\n  }\n</div>\n", styles: [".notification-item{position:relative;display:flex;cursor:pointer;align-items:center;gap:.75rem;overflow-x:hidden;padding:1rem}.notification-item.read{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.notification-item.unread{background:rgb(var(--ax-color-on-surface))}.notification-item.Notice:before,.notification-item.Danger:before,.notification-item.Warning:before{content:\"\";position:absolute;height:95%;width:.2rem;inset-inline-start:0;top:50%;transform:translateY(-50%)}.notification-item.Notice:before{background:rgb(var(--ax-color-success-500))}.notification-item.Danger:before{background:rgb(var(--ax-color-danger-500))}.notification-item.Warning:before{background:rgb(var(--ax-color-warning-500))}.notification-item ax-avatar ax-badge{position:absolute;bottom:0;inset-inline-end:.25rem;top:auto;border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1))}.notification-item>div{display:flex;flex:1 1 0%;flex-direction:column}.notification-item>div .notification-item-title,.notification-item>div .notification-file-name{max-width:20rem;font-size:1rem;font-weight:600;line-height:1.5rem}.notification-item>div .notification-item-time,.notification-item>div .notification-file-size{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.notification-item>div .notification-item-body{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-width:20rem;font-size:.875rem;font-weight:400;line-height:1.5rem}.notification-item>ax-badge{position:absolute;top:1rem;inset-inline-end:1rem}.notification-item .notification-file{margin-top:.5rem;margin-bottom:.5rem;display:flex;gap:.5rem;border-radius:.5rem;border-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.5rem}.notification-item .notification-file>div{flex:1 1 0%}.notification-item .pin-notification{position:absolute;top:0;padding:1rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i3.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i4.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i5.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.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  <axp-user-avatar [size]=\"40\" [userId]=\"data().user.id!\"></axp-user-avatar>\n  <div>\n    <div class=\"notification-item-title\">{{ data().user.name || data().title }}</div>\n    <div class=\"notification-item-body\">{{ data().body }}</div>\n    <!-- @if(false){\n    <div>\n      <div class=\"notification-file\">\n        <ax-avatar color=\"primary\">\n          <ax-icon>\n            <i class=\"fa-solid fa-file-word ax-text-2xl\"></i>\n          </ax-icon>\n        </ax-avatar>\n        <div>\n          <div class=\"notification-file-name\">New project details.docx</div>\n          <div class=\"notification-file-size\">250 KB</div>\n        </div>\n        <ax-button look=\"blank\">\n          <ax-icon>\n            <i class=\"fa-solid fa-download\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n    } -->\n    <div class=\"notification-item-time\">{{ differentTime() | format : 'timeleft' | async }}</div>\n  </div>\n  @if(!data().template.isPinned){\n  <div class=\"pin-notification ltr:ax-rotate-45 rtl:ax-left-0 rtl:-ax-rotate-45 ltr:ax-right-0\">\n    <ax-icon>\n      <i class=\"fa-solid fa-thumbtack\"></i>\n    </ax-icon>\n  </div>\n  }\n</div>\n", styles: [".notification-item{position:relative;display:flex;cursor:pointer;align-items:center;gap:.75rem;overflow-x:hidden;padding:1rem}.notification-item.read{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.notification-item.unread{background:rgb(var(--ax-color-on-surface))}.notification-item.Notice:before,.notification-item.Danger:before,.notification-item.Warning:before{content:\"\";position:absolute;height:95%;width:.2rem;inset-inline-start:0;top:50%;transform:translateY(-50%)}.notification-item.Notice:before{background:rgb(var(--ax-color-success-500))}.notification-item.Danger:before{background:rgb(var(--ax-color-danger-500))}.notification-item.Warning:before{background:rgb(var(--ax-color-warning-500))}.notification-item ax-avatar ax-badge{position:absolute;bottom:0;inset-inline-end:.25rem;top:auto;border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1))}.notification-item>div{display:flex;flex:1 1 0%;flex-direction:column}.notification-item>div .notification-item-title,.notification-item>div .notification-file-name{max-width:20rem;font-size:1rem;font-weight:600;line-height:1.5rem}.notification-item>div .notification-item-time,.notification-item>div .notification-file-size{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.notification-item>div .notification-item-body{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-width:20rem;font-size:.875rem;font-weight:400;line-height:1.5rem}.notification-item>ax-badge{position:absolute;top:1rem;inset-inline-end:1rem}.notification-item .notification-file{margin-top:.5rem;margin-bottom:.5rem;display:flex;gap:.5rem;border-radius:.5rem;border-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.5rem}.notification-item .notification-file>div{flex:1 1 0%}.notification-item .pin-notification{position:absolute;top:0;padding:1rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMAdminNotificationItemComponent, decorators: [{
             type: Component,
@@ -1459,26 +1672,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                         CommonModule,
                         AXButtonModule,
                         AXDecoratorModule,
-                        AXAvatarModule,
+                        AXPUserAvatarComponent,
                         AXImageModule,
                         AXBadgeModule,
                         AXFormatModule,
-                    ], 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  <ax-avatar shape=\"rounded\" color=\"primary\">\n    @if(data().user.image){\n    <ax-image src=\"https://i.pravatar.cc/300\"></ax-image>\n    }@else {\n    <ax-icon>\n      <i class=\"fa-solid fa-lock\"></i>\n    </ax-icon>\n    }\n  </ax-avatar>\n  <div>\n    <div class=\"notification-item-title\">{{ data().title }}</div>\n    <div class=\"notification-item-body\">{{ data().body }}</div>\n    <!-- @if(false){\n    <div>\n      <div class=\"notification-file\">\n        <ax-avatar color=\"primary\">\n          <ax-icon>\n            <i class=\"fa-solid fa-file-word ax-text-2xl\"></i>\n          </ax-icon>\n        </ax-avatar>\n        <div>\n          <div class=\"notification-file-name\">New project details.docx</div>\n          <div class=\"notification-file-size\">250 KB</div>\n        </div>\n        <ax-button look=\"blank\">\n          <ax-icon>\n            <i class=\"fa-solid fa-download\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n    } -->\n    <div class=\"notification-item-time\">{{ differentTime() | format : 'timeleft' | async }}</div>\n  </div>\n  @if(!data().template.isPinned){\n  <div class=\"pin-notification ltr:ax-rotate-45 rtl:ax-left-0 rtl:-ax-rotate-45 ltr:ax-right-0\">\n    <ax-icon>\n      <i class=\"fa-solid fa-thumbtack\"></i>\n    </ax-icon>\n  </div>\n  }\n</div>\n", styles: [".notification-item{position:relative;display:flex;cursor:pointer;align-items:center;gap:.75rem;overflow-x:hidden;padding:1rem}.notification-item.read{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.notification-item.unread{background:rgb(var(--ax-color-on-surface))}.notification-item.Notice:before,.notification-item.Danger:before,.notification-item.Warning:before{content:\"\";position:absolute;height:95%;width:.2rem;inset-inline-start:0;top:50%;transform:translateY(-50%)}.notification-item.Notice:before{background:rgb(var(--ax-color-success-500))}.notification-item.Danger:before{background:rgb(var(--ax-color-danger-500))}.notification-item.Warning:before{background:rgb(var(--ax-color-warning-500))}.notification-item ax-avatar ax-badge{position:absolute;bottom:0;inset-inline-end:.25rem;top:auto;border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1))}.notification-item>div{display:flex;flex:1 1 0%;flex-direction:column}.notification-item>div .notification-item-title,.notification-item>div .notification-file-name{max-width:20rem;font-size:1rem;font-weight:600;line-height:1.5rem}.notification-item>div .notification-item-time,.notification-item>div .notification-file-size{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.notification-item>div .notification-item-body{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-width:20rem;font-size:.875rem;font-weight:400;line-height:1.5rem}.notification-item>ax-badge{position:absolute;top:1rem;inset-inline-end:1rem}.notification-item .notification-file{margin-top:.5rem;margin-bottom:.5rem;display:flex;gap:.5rem;border-radius:.5rem;border-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.5rem}.notification-item .notification-file>div{flex:1 1 0%}.notification-item .pin-notification{position:absolute;top:0;padding:1rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}\n"] }]
+                    ], 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  <axp-user-avatar [size]=\"40\" [userId]=\"data().user.id!\"></axp-user-avatar>\n  <div>\n    <div class=\"notification-item-title\">{{ data().user.name || data().title }}</div>\n    <div class=\"notification-item-body\">{{ data().body }}</div>\n    <!-- @if(false){\n    <div>\n      <div class=\"notification-file\">\n        <ax-avatar color=\"primary\">\n          <ax-icon>\n            <i class=\"fa-solid fa-file-word ax-text-2xl\"></i>\n          </ax-icon>\n        </ax-avatar>\n        <div>\n          <div class=\"notification-file-name\">New project details.docx</div>\n          <div class=\"notification-file-size\">250 KB</div>\n        </div>\n        <ax-button look=\"blank\">\n          <ax-icon>\n            <i class=\"fa-solid fa-download\"></i>\n          </ax-icon>\n        </ax-button>\n      </div>\n    </div>\n    } -->\n    <div class=\"notification-item-time\">{{ differentTime() | format : 'timeleft' | async }}</div>\n  </div>\n  @if(!data().template.isPinned){\n  <div class=\"pin-notification ltr:ax-rotate-45 rtl:ax-left-0 rtl:-ax-rotate-45 ltr:ax-right-0\">\n    <ax-icon>\n      <i class=\"fa-solid fa-thumbtack\"></i>\n    </ax-icon>\n  </div>\n  }\n</div>\n", styles: [".notification-item{position:relative;display:flex;cursor:pointer;align-items:center;gap:.75rem;overflow-x:hidden;padding:1rem}.notification-item.read{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.notification-item.unread{background:rgb(var(--ax-color-on-surface))}.notification-item.Notice:before,.notification-item.Danger:before,.notification-item.Warning:before{content:\"\";position:absolute;height:95%;width:.2rem;inset-inline-start:0;top:50%;transform:translateY(-50%)}.notification-item.Notice:before{background:rgb(var(--ax-color-success-500))}.notification-item.Danger:before{background:rgb(var(--ax-color-danger-500))}.notification-item.Warning:before{background:rgb(var(--ax-color-warning-500))}.notification-item ax-avatar ax-badge{position:absolute;bottom:0;inset-inline-end:.25rem;top:auto;border-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-surface),var(--tw-border-opacity, 1))}.notification-item>div{display:flex;flex:1 1 0%;flex-direction:column}.notification-item>div .notification-item-title,.notification-item>div .notification-file-name{max-width:20rem;font-size:1rem;font-weight:600;line-height:1.5rem}.notification-item>div .notification-item-time,.notification-item>div .notification-file-size{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.notification-item>div .notification-item-body{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-width:20rem;font-size:.875rem;font-weight:400;line-height:1.5rem}.notification-item>ax-badge{position:absolute;top:1rem;inset-inline-end:1rem}.notification-item .notification-file{margin-top:.5rem;margin-bottom:.5rem;display:flex;gap:.5rem;border-radius:.5rem;border-width:1px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-surface),var(--tw-bg-opacity, 1));padding:.5rem}.notification-item .notification-file>div{flex:1 1 0%}.notification-item .pin-notification{position:absolute;top:0;padding:1rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}\n"] }]
         }] });
 
 class AXMAdminNotificationPanelComponent {
     constructor() {
         this.onNewNotfication = output();
-        this.notificationService = inject(AXMNotificationEntityService);
+        this.notificationConnector = inject(AXMNotificationConnectorService);
         this.toastService = inject(AXToastService);
         this.router = inject(Router);
         this.sessionService = inject(AXPSessionService);
-        this.notifications = signal(undefined);
-        this.totalNotifications = signal(undefined);
+        // Use store's signals directly
+        this.notifications = this.notificationConnector.notificationList;
+        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.activeTab = signal('All');
         this.NewNotification = computed(() => this.getNewNotification(this.tabItems()));
         this.NewNotificationEffect = effect(() => this.onNewNotfication.emit(this.NewNotification()));
     }
@@ -1490,15 +1706,7 @@ class AXMAdminNotificationPanelComponent {
     }
     async loadNotification() {
         try {
-            const response = await this.notificationService.getList();
-            this.totalNotifications.set(response.total);
-            const orderedResponse = response.items.sort((a, b) => {
-                if (a.template.isPinned === b.template.isPinned) {
-                    return new Date(a.createAt).getTime() - new Date(b.createAt).getTime();
-                }
-                return a.template.isPinned ? 1 : -1;
-            });
-            this.notifications.set(orderedResponse);
+            await this.notificationConnector.getList();
         }
         catch (error) {
             this.toastService.show({
@@ -1516,7 +1724,6 @@ class AXMAdminNotificationPanelComponent {
             return [
                 {
                     text: 'All',
-                    //active: true,
                     count: 0,
                 },
             ];
@@ -1554,40 +1761,33 @@ class AXMAdminNotificationPanelComponent {
             return this.notifications()?.filter((item) => item.template.category === category);
         }
     }
-    //
+    /**
+     * Mark a notification as read or unread (toggle read status)
+     */
     async markAsRead(id) {
         try {
-            const payload = { id: [id] };
-            await this.notificationService.markAsRead(payload);
-            this.toggleRead(id);
+            await this.notificationConnector.markAsRead({ id: [id] });
+        }
+        catch (error) {
+            console.error('Failed to toggle notification read status:', error);
         }
-        catch (error) { }
-    }
-    toggleRead(id) {
-        this.notifications.update((old) => old?.map((item) => (item.id === id ? { ...item, readAt: item.readAt ? null : new Date() } : item)));
     }
+    /**
+     * Mark all unread notifications as read
+     */
     async markAllAsRead() {
         try {
-            await this.notificationService.markAsRead();
-            this.toggleMarkAllAsRead();
+            await this.notificationConnector.markAsRead({ id: [] });
         }
         catch (error) {
-            console.error(error);
+            console.error('Failed to mark all notifications as read:', error);
         }
     }
-    toggleMarkAllAsRead() {
-        this.notifications.update((notification) => notification?.map((item) => {
-            if (!item.readAt) {
-                return { ...item, readAt: new Date() };
-            }
-            return item;
-        }));
-    }
     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: "19.0.3", ngImport: i0, type: AXMAdminNotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.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-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: CommonModule }, { 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$1.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$1.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: i2$1.AXTabContentDirective, selector: "[axTabContent]", inputs: ["axTabContent"], exportAs: ["axTabContent"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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$1.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.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-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: CommonModule }, { 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: "19.0.3", ngImport: i0, type: AXMAdminNotificationPanelComponent, decorators: [{
             type: Component,
@@ -1611,7 +1811,7 @@ class AXMAdminNotificationSlotComponent {
         this.totalNewNotification.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMAdminNotificationSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.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: CommonModule }, { 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: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.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$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i4$2.AXPopoverComponent, selector: "ax-popover", inputs: ["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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.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: CommonModule }, { 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: ["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: "19.0.3", ngImport: i0, type: AXMAdminNotificationSlotComponent, decorators: [{
             type: Component,
@@ -1675,9 +1875,369 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             type: Injectable
         }] });
 
+/**
+ * Notification Widget Component
+ * Displays notifications in a card with tabs
+ */
+class AXPNotificationWidgetViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super();
+        // Outputs
+        this.notificationClick = output();
+        this.markAsRead = output();
+        // Dependencies
+        this.cdr = inject(ChangeDetectorRef);
+        this.datePipe = inject(DatePipe);
+        this.notificationConnector = inject(AXMNotificationConnectorService);
+        this.toastService = inject(AXToastService);
+        // State
+        this.activeTab = signal('new');
+        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
+        // Use store's signals directly
+        this.notifications = this.notificationConnector.notificationList;
+        this.totalNotifications = this.notificationConnector.total;
+        this.isLoading = this.notificationConnector.loading;
+        // Computed data
+        this.notificationItems = computed(() => {
+            const items = this.notifications();
+            if (!items?.length)
+                return [];
+            // Sort by pinned status and date
+            const sortedItems = [...items].sort((a, b) => {
+                if (a.template.isPinned === b.template.isPinned) {
+                    return new Date(b.createAt).getTime() - new Date(a.createAt).getTime();
+                }
+                return a.template.isPinned ? -1 : 1;
+            });
+            // Filter by active tab
+            const filtered = this.activeTab() === 'new' ? sortedItems.filter((n) => !n.readAt) : sortedItems;
+            return filtered.slice(0, this.maxItems());
+        });
+        // Watch for changes to auto-refresh settings
+        effect(() => {
+            this.setupAutoRefresh();
+        });
+    }
+    ngOnInit() {
+        this.loadNotifications();
+    }
+    ngOnDestroy() {
+        this.clearRefreshTimer();
+    }
+    /**
+     * Set up auto-refresh timer based on configuration
+     */
+    setupAutoRefresh() {
+        this.clearRefreshTimer();
+        if (this.autoRefresh()) {
+            const interval = this.refreshInterval();
+            this.refreshTimerId = setInterval(() => {
+                this.loadNotifications();
+            }, interval);
+        }
+    }
+    /**
+     * Clear the refresh timer if it exists
+     */
+    clearRefreshTimer() {
+        if (this.refreshTimerId !== null) {
+            clearInterval(this.refreshTimerId);
+            this.refreshTimerId = null;
+        }
+    }
+    /**
+     * Load notifications data from service
+     */
+    async loadNotifications() {
+        try {
+            await this.notificationConnector.getList();
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            this.toastService.show({
+                content: typeof error === 'string' ? error : 'Failed to load notifications!',
+                color: 'danger',
+                location: 'bottom-center',
+                closeButton: true,
+                timeOut: 3000,
+                timeOutProgress: true,
+            });
+        }
+    }
+    /**
+     * Manually refresh notifications
+     */
+    refreshNotifications() {
+        this.loadNotifications();
+    }
+    /**
+     * Get the count of new messages for the badge
+     */
+    getNewMessageCount() {
+        const items = this.notifications();
+        if (!items?.length)
+            return 0;
+        return items.filter((n) => !n.readAt).length;
+    }
+    /**
+     * Handle tab change event from ax-tabs component
+     * @param data The tab change event data
+     */
+    handleTabChange(data) {
+        const index = data.index;
+        // Map index to tab name: 0 = 'new', 1 = 'all'
+        const tabName = index === 0 ? 'new' : 'all';
+        this.onTabChange(tabName);
+    }
+    /**
+     * Mark all notifications as read
+     */
+    async markAllAsRead() {
+        try {
+            await this.notificationConnector.markAsRead({ id: [] });
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            this.toastService.show({
+                content: 'Failed to mark notifications as read',
+                color: 'danger',
+                location: 'bottom-center',
+                closeButton: true,
+                timeOut: 3000,
+            });
+        }
+    }
+    /**
+     * Change the active tab
+     */
+    onTabChange(tabName) {
+        this.activeTab.set(tabName);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle notification click event
+     */
+    onNotificationClick(notification) {
+        this.markAsReadIfNeeded(notification);
+        this.notificationClick.emit(notification);
+    }
+    /**
+     * Format the timestamp in a user-friendly way
+     */
+    formatTime(date) {
+        if (!date)
+            return '';
+        const dateObj = typeof date === 'string' ? new Date(date) : date;
+        const diffDays = this.getDaysDifference(dateObj);
+        // Format based on how recent the date is
+        if (diffDays === 0)
+            return this.datePipe.transform(dateObj, 'h:mm a') || ''; // Today
+        if (diffDays === 1)
+            return 'Yesterday';
+        if (diffDays < 7)
+            return this.datePipe.transform(dateObj, 'EEE') || ''; // Day of week
+        return this.datePipe.transform(dateObj, 'MM/dd/yyyy') || ''; // Older date
+    }
+    /**
+     * Mark notification as read if needed
+     */
+    async markAsReadIfNeeded(notification) {
+        try {
+            // Always mark as read on click if unread, but don't toggle back to unread
+            if (notification.readAt)
+                return;
+            await this.notificationConnector.markAsRead({ id: [notification.id] });
+            // Emit the updated notification with readAt set
+            // It will be read now because we only call this for unread notifications
+            const updatedNotification = {
+                ...notification,
+                readAt: new Date(),
+            };
+            this.markAsRead.emit(updatedNotification);
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            console.error('Failed to mark notification as read:', error);
+        }
+    }
+    /**
+     * Calculate days difference from now
+     */
+    getDaysDifference(date) {
+        const now = new Date();
+        const diffMs = now.getTime() - date.getTime();
+        return Math.floor(diffMs / (1000 * 60 * 60 * 24));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPNotificationWidgetViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AXPNotificationWidgetViewComponent, isStandalone: true, selector: "ng-component", outputs: { notificationClick: "notificationClick", markAsRead: "markAsRead" }, providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-p-4 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 [text]=\"('widget.notification.new' | translate | async) ?? 'New'\" class=\"ax-font-medium\">\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 [text]=\"('widget.notification.all' | translate | async) ?? 'All'\" class=\"ax-font-medium\"></ax-tab-item>\n  </ax-tabs>\n  <div class=\"ax-space-y-4 ax-mt-4 ax-px-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\">{{ 'widget.notification.noNotifications' | translate | async }}</p>\n    </div>\n    }\n  </div>\n</div>\n\n<ng-template #chatItemTemplateRef let-data>\n  <div class=\"ax-flex ax-gap-3\">\n    @if(showAvatar()){\n    <axp-user-avatar [size]=\"40\" [userId]=\"data.user?.id\"></axp-user-avatar>\n    }\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\">\n      <h6 class=\"ax-pb-2 ax-font-semibold ax-truncate\">{{ data.user?.name || data.title }}</h6>\n      <p class=\"ax-text-xs ax-truncate\">{{ data.body }}</p>\n    </div>\n    @if(showDate()){\n    <div class=\"ax-text-xs ax-shrink-0\">\n      <span>\n        {{ formatTime(data.createdAt) }}\n      </span>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXPNotificationWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        AXTabsModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXBadgeModule,
+                        AXAvatarModule,
+                        AXImageModule,
+                        AXTranslationModule,
+                        AXPUserAvatarComponent,
+                    ], providers: [DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-p-4 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 [text]=\"('widget.notification.new' | translate | async) ?? 'New'\" class=\"ax-font-medium\">\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 [text]=\"('widget.notification.all' | translate | async) ?? 'All'\" class=\"ax-font-medium\"></ax-tab-item>\n  </ax-tabs>\n  <div class=\"ax-space-y-4 ax-mt-4 ax-px-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\">{{ 'widget.notification.noNotifications' | translate | async }}</p>\n    </div>\n    }\n  </div>\n</div>\n\n<ng-template #chatItemTemplateRef let-data>\n  <div class=\"ax-flex ax-gap-3\">\n    @if(showAvatar()){\n    <axp-user-avatar [size]=\"40\" [userId]=\"data.user?.id\"></axp-user-avatar>\n    }\n    <div class=\"ax-overflow-hidden ax-grow ax-text-start\">\n      <h6 class=\"ax-pb-2 ax-font-semibold ax-truncate\">{{ data.user?.name || data.title }}</h6>\n      <p class=\"ax-text-xs ax-truncate\">{{ data.body }}</p>\n    </div>\n    @if(showDate()){\n    <div class=\"ax-text-xs ax-shrink-0\">\n      <span>\n        {{ formatTime(data.createdAt) }}\n      </span>\n    </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+var notificationWidget_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPNotificationWidgetViewComponent: AXPNotificationWidgetViewComponent
+});
+
+/**
+ * Configuration for the Notification Widget
+ */
+const AXPMyNotificationDashboardWidget = {
+    name: 'my-notification-dashboard',
+    title: 'My Notification Widget',
+    categories: [AXP_WIDGETS_UTILITY_CATEGORY],
+    groups: [AXPWidgetGroupEnum.DashboardWidget],
+    type: 'dashboard',
+    description: 'Displays notifications in a widget format',
+    icon: 'fa-regular fa-bell',
+    properties: [
+        cloneProperty(AXP_DATA_PATH_PROPERTY, { visible: false }),
+        // ====== Title ======
+        {
+            name: 'title',
+            title: 'Chart Title',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: '',
+                dataType: 'string',
+                interface: {
+                    name: 'title',
+                    path: 'options.title',
+                    type: AXPWidgetsCatalog.text,
+                    options: {
+                        placeholder: 'Enter chart title',
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'maxItems',
+            title: 'Max Items',
+            description: 'Maximum number of notification items to display',
+            group: AXP_STYLING_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 10,
+                dataType: 'number',
+                interface: {
+                    name: 'maxItems',
+                    path: 'options.maxItems',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        minValue: 1,
+                        maxValue: 100,
+                    },
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'showAvatar',
+            title: 'Show Avatar',
+            description: 'Whether to show avatars in notifications',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'showAvatar',
+                    path: 'options.showAvatar',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'showDate',
+            title: 'Show Date',
+            description: 'Whether to show date in notifications',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'showDate',
+                    path: 'options.showDate',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'autoRefresh',
+            title: 'Auto Refresh',
+            description: 'Automatically refresh notifications at regular intervals',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: true,
+                dataType: 'boolean',
+                interface: {
+                    name: 'autoRefresh',
+                    path: 'options.autoRefresh',
+                    type: AXPWidgetsCatalog.toggle,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'refreshInterval',
+            title: 'Refresh Interval (seconds)',
+            description: 'Interval in seconds between automatic refreshes',
+            group: AXP_APPEARANCE_PROPERTY_GROUP,
+            schema: {
+                defaultValue: 60,
+                dataType: 'number',
+                interface: {
+                    name: 'refreshInterval',
+                    path: 'options.refreshInterval',
+                    type: AXPWidgetsCatalog.number,
+                    options: {
+                        minValue: 10,
+                        maxValue: 3600,
+                    },
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return notificationWidget_component; }).then((c) => c.AXPNotificationWidgetViewComponent),
+        },
+    },
+    meta: {
+        dimensions: {
+            width: 3,
+            height: 5,
+            minWidth: 2,
+            minHeight: 4,
+            maxWidth: 4,
+            maxHeight: 7,
+        },
+    },
+};
+
 class AXMNotificationManagementModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMNotificationManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXMNotificationManagementModule, imports: [i1$2.AXPComponentSlotModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.3", ngImport: i0, type: AXMNotificationManagementModule, imports: [i1$2.AXPComponentSlotModule, i2$1.AXPLayoutBuilderModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMNotificationManagementModule, providers: [
             {
                 provide: AXMNotificationManagementTemplateEntityService,
@@ -1717,6 +2277,11 @@ class AXMNotificationManagementModule {
                         component: AXMAdminNotificationSlotComponent,
                     },
                 ],
+            }),
+            AXPLayoutBuilderModule.forChild({
+                widgets: [
+                    AXPMyNotificationDashboardWidget,
+                ],
             })] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXMNotificationManagementModule, decorators: [{
@@ -1731,6 +2296,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                                 },
                             ],
                         }),
+                        AXPLayoutBuilderModule.forChild({
+                            widgets: [
+                                AXPMyNotificationDashboardWidget,
+                            ],
+                        }),
                     ],
                     exports: [],
                     declarations: [],
@@ -2397,5 +2967,5 @@ async function notificationLogEntityFactory(injector) {
  * Generated bundle index. Do not edit.
  */
 
-export { AXMNotificationEntityService, AXMNotificationEntityServiceImpl, AXMNotificationManagementChannelEntityService, AXMNotificationManagementChannelEntityServiceImpl, AXMNotificationManagementModule, AXMNotificationManagementTemplateEntityModule, AXMNotificationManagementTemplateEntityService, AXMNotificationManagementTemplateEntityServiceImpl, AXMNotificationManagmentModuleMenuProvider, AXMSettingProvider, RootConfig, myNotificationEntityFactory, notificationChannelEntityFactory, notificationEntityFactory, notificationLogEntityFactory, notificationTemplateEntityFactory };
+export { AXMNotificationEntityService, AXMNotificationEntityServiceImpl, AXMNotificationManagementChannelEntityService, AXMNotificationManagementChannelEntityServiceImpl, AXMNotificationManagementModule, AXMNotificationManagementTemplateEntityModule, AXMNotificationManagementTemplateEntityService, AXMNotificationManagementTemplateEntityServiceImpl, AXMNotificationManagmentModuleMenuProvider, AXMSettingProvider, AXPMyNotificationDashboardWidget, AXPNotificationWidgetViewComponent, RootConfig, myNotificationEntityFactory, notificationChannelEntityFactory, notificationEntityFactory, notificationLogEntityFactory, notificationTemplateEntityFactory };
 //# sourceMappingURL=acorex-modules-notification-management.mjs.map