@acorex/modules 18.1.5 → 18.1.6

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

@@ -1,48 +1,43 @@
 import * as i1$2 from '@acorex/platform/common';
-import { AXPComponentSlotModule, AXPDataGenerator, AXPEntityStorageService, AXPEntityDataProviderImpl, AXPEntityQueryType, AXPEntityCommandScope } from '@acorex/platform/common';
-import { AXPEntityDefinitionRegistryService } from '@acorex/platform/layout/entity';
+import { AXP_MENU_PROVIDER, AXPComponentSlotModule, AXPEntityStorageService, AXPEntityDataProviderImpl, AXPDataGenerator, AXPEntityQueryType, AXPEntityCommandScope } from '@acorex/platform/common';
+import { AXP_ENTITY_DEFINITION_LOADER } from '@acorex/platform/layout/entity';
 import * as i0 from '@angular/core';
-import { input, output, inject, computed, Component, ChangeDetectionStrategy, signal, effect, Injector, NgModule, Optional, Inject, Injectable } from '@angular/core';
+import { input, output, computed, Component, ChangeDetectionStrategy, inject, signal, effect, Injector, Injectable, NgModule } from '@angular/core';
 import * as i4$1 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 i3 from '@acorex/components/decorators';
+import * as i2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import * as i4$2 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@acorex/components/avatar';
+import * as i3 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
-import * as i5 from '@acorex/components/image';
+import * as i4 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
-import * as i6 from '@acorex/core/format';
+import * as i5 from '@acorex/core/format';
 import { AXFormatModule } from '@acorex/core/format';
-import { AXPSessionService } from '@acorex/platform/auth';
-import { Router } from '@angular/router';
-import * as i2 from '@acorex/components/tabs';
+import * as i2$1 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
 import { AXToastService } from '@acorex/components/toast';
-import { applySortArray, applyFilterArray } from '@acorex/platform/core';
+import { AXPSessionService } from '@acorex/platform/auth';
+import { Router } from '@angular/router';
 import { AXPWidgetsCatalog } from '@acorex/platform/layout/builder';
+import { applySortArray, applyFilterArray } from '@acorex/platform/core';
 
 class AXMAdminNotificationItemComponent {
     constructor() {
         this.data = input.required();
         this.onPressNotificationItem = output();
-        this.router = inject(Router);
-        this.sessionStorage = inject(AXPSessionService);
         this.differentTime = computed(() => Date.now() - this.data().createAt.getTime());
     }
     pressNotificationItem(id) {
         this.onPressNotificationItem.emit(id);
-        //const [module, entity] = this.data().RelativeType?.split('.') as [string, string];
-        //const url = `${this.sessionStorage.application?.name}/m/${module}/e/${entity}/${this.data().RelativeId}`;
-        //console.log(url);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMAdminNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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 look=\"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(true){\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\">\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;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:hover{background:rgba(var(--ax-color-primary-400),.1)}.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-color-surface),var(--tw-border-opacity))}.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:rgba(var(--ax-color-neutral-400),var(--tw-text-opacity))}.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-color-surface),var(--tw-bg-opacity));padding:.5rem}.notification-item .notification-file>div{flex:1 1 0%}.notification-item .pin-notification{position:absolute;top:0;right:0;--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));padding:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-neutral-400),var(--tw-text-opacity))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i4.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i5.AXImageComponent, selector: "ax-image", inputs: ["overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i6.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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 look=\"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\">\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;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-color-surface),var(--tw-border-opacity))}.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:rgba(var(--ax-color-neutral-400),var(--tw-text-opacity))}.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-color-surface),var(--tw-bg-opacity));padding:.5rem}.notification-item .notification-file>div{flex:1 1 0%}.notification-item .pin-notification{position:absolute;top:0;right:0;--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));padding:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-neutral-400),var(--tw-text-opacity))}\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", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i4.AXImageComponent, selector: "ax-image", inputs: ["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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMAdminNotificationItemComponent, decorators: [{
             type: Component,
@@ -54,7 +49,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         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 look=\"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(true){\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\">\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;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:hover{background:rgba(var(--ax-color-primary-400),.1)}.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-color-surface),var(--tw-border-opacity))}.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:rgba(var(--ax-color-neutral-400),var(--tw-text-opacity))}.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-color-surface),var(--tw-bg-opacity));padding:.5rem}.notification-item .notification-file>div{flex:1 1 0%}.notification-item .pin-notification{position:absolute;top:0;right:0;--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));padding:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-neutral-400),var(--tw-text-opacity))}\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  <ax-avatar look=\"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\">\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;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-color-surface),var(--tw-border-opacity))}.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:rgba(var(--ax-color-neutral-400),var(--tw-text-opacity))}.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-color-surface),var(--tw-bg-opacity));padding:.5rem}.notification-item .notification-file>div{flex:1 1 0%}.notification-item .pin-notification{position:absolute;top:0;right:0;--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));padding:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-color-neutral-400),var(--tw-text-opacity))}\n"] }]
         }] });
 
 class AXMNotificationService {
@@ -65,6 +60,8 @@ class AXMAdminNotificationPanelComponent {
         this.onNewNotfication = output();
         this.notificationService = inject(AXMNotificationService);
         this.toastService = inject(AXToastService);
+        this.router = inject(Router);
+        this.sessionService = inject(AXPSessionService);
         this.notifications = signal(undefined);
         this.totalNotifications = signal(undefined);
         this.tabItems = computed(() => this.getTabItems(this.notifications()), {
@@ -73,9 +70,6 @@ class AXMAdminNotificationPanelComponent {
         this.activeTab = signal('All');
         this.NewNotification = computed(() => this.getNewNotification(this.tabItems()));
         this.NewNotificationEffect = effect(() => this.onNewNotfication.emit(this.NewNotification()));
-        this.onPressNotificationItem = (id) => {
-            this.notifications.update((old) => old?.map((item) => (item.id === id && !item.readAt ? { ...item, readAt: new Date() } : item)));
-        };
     }
     changeActiveTab(tab) {
         this.activeTab.set(tab);
@@ -150,7 +144,27 @@ class AXMAdminNotificationPanelComponent {
         }
     }
     //
-    markAllAsRead() {
+    async markAsRead(id) {
+        try {
+            const payload = { id: [id] };
+            await this.notificationService.markAsRead(payload);
+            this.toggleRead(id);
+        }
+        catch (error) { }
+    }
+    toggleRead(id) {
+        this.notifications.update((old) => old?.map((item) => (item.id === id ? { ...item, readAt: item.readAt ? null : new Date() } : item)));
+    }
+    async markAllAsRead() {
+        try {
+            await this.notificationService.markAsRead();
+            this.toggleMarkAllAsRead();
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    toggleMarkAllAsRead() {
         this.notifications.update((notification) => notification?.map((item) => {
             if (!item.readAt) {
                 return { ...item, readAt: new Date() };
@@ -158,8 +172,11 @@ class AXMAdminNotificationPanelComponent {
             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: "18.2.0", ngImport: i0, type: AXMAdminNotificationPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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)=\"onPressNotificationItem($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=\"ghost\"\n          text=\"Mark all as read\"\n          (onClick)=\"markAllAsRead()\"\n        ></ax-button>\n        <ax-button color=\"primary\" text=\"View all notifications\"></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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, 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: "18.2.0", 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=\"ghost\"\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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMAdminNotificationPanelComponent, decorators: [{
             type: Component,
@@ -172,7 +189,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXPopoverModule,
                         AXMAdminNotificationItemComponent,
                         AXFormatModule,
-                    ], 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)=\"onPressNotificationItem($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=\"ghost\"\n          text=\"Mark all as read\"\n          (onClick)=\"markAllAsRead()\"\n        ></ax-button>\n        <ax-button color=\"primary\" text=\"View all notifications\"></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" }]
+                    ], 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=\"ghost\"\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" }]
         }] });
 
 class AXMAdminNotificationSlotComponent {
@@ -183,7 +200,7 @@ class AXMAdminNotificationSlotComponent {
         this.totalNewNotification.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMAdminNotificationSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AXMAdminNotificationSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<ax-button color=\"secondary\" class=\"ax-relative\" look=\"blank\" #notification>\n  <ax-icon>\n    <i class=\"fa-regular fa-bell ax-text-slate-400 dark:ax-text-slate-200\"></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-surface 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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, 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", "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: "18.2.0", type: AXMAdminNotificationSlotComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<ax-button color=\"secondary\" class=\"ax-relative\" look=\"blank\" #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-surface 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", "type", "responsiveOn", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "responsiveOnChange", "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-sub-title, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMAdminNotificationSlotComponent, decorators: [{
             type: Component,
@@ -195,42 +212,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AXPopoverModule,
                         AXMAdminNotificationItemComponent,
                         AXMAdminNotificationPanelComponent,
-                    ], template: "<ax-button color=\"secondary\" class=\"ax-relative\" look=\"blank\" #notification>\n  <ax-icon>\n    <i class=\"fa-regular fa-bell ax-text-slate-400 dark:ax-text-slate-200\"></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-surface 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" }]
+                    ], template: "<ax-button color=\"secondary\" class=\"ax-relative\" look=\"blank\" #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-surface 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" }]
         }] });
 
-class AXMNotificationManagementModule {
-    static forRoot() {
-        return {
-            ngModule: AXMNotificationManagementModule,
-            providers: [
-                {
-                    provide: 'AXP_REGISTER_TEMPLATE_NoTIFICATION',
-                    useFactory: async (entityRegistry, injector) => {
-                        const notificationTemplateEntity = await (await Promise.resolve().then(function () { return notification_entity; })).notificationEntityFactory(injector);
-                        entityRegistry.register(notificationTemplateEntity);
-                        //
-                        const notificationChannelEntity = await (await Promise.resolve().then(function () { return notificationChannel_entity; })).notificationChannelEntityFactory(injector);
-                        entityRegistry.register(notificationChannelEntity);
-                        //
-                        const notificationEntity = await (await Promise.resolve().then(function () { return notification_entity; })).notificationEntityFactory(injector);
-                        entityRegistry.register(notificationEntity);
+class AXMNotificationModuleEntityLoader {
+    constructor() {
+        this.injector = inject(Injector);
+    }
+    async get(moduleName, entityName) {
+        return new Promise(async (resolve) => {
+            switch (entityName) {
+                case 'notificationTemplate': {
+                    const entity = (await Promise.resolve().then(function () { return notificationTemplate_entity; })).notificationTemplateEntityFactory;
+                    resolve(entity(this.injector));
+                    break;
+                }
+                case 'notificationChannel': {
+                    const entity = (await Promise.resolve().then(function () { return notificationChannel_entity; })).notificationChannelEntityFactory;
+                    resolve(entity(this.injector));
+                    break;
+                }
+                case 'my-notification': {
+                    const entity = (await Promise.resolve().then(function () { return myNotification; })).myNotificationEntityFactory;
+                    resolve(entity(this.injector));
+                    break;
+                }
+                case 'notification': {
+                    const entity = (await Promise.resolve().then(function () { return notification_entity; })).notificationEntityFactory;
+                    resolve(entity(this.injector));
+                    break;
+                }
+                default:
+                    resolve(null);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMNotificationModuleEntityLoader, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMNotificationModuleEntityLoader }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMNotificationModuleEntityLoader, decorators: [{
+            type: Injectable
+        }] });
+
+class AXMNotificationManagmentModuleMenuProvider {
+    async items() {
+        return [
+            {
+                items: [
+                    {
+                        text: 'My Notifications',
+                        path: '/demo/m/notification-management/e/my-notification/list',
+                        data: {
+                        //requiredPermission: '',
+                        },
                     },
-                    deps: [AXPEntityDefinitionRegistryService, Injector], // Add any dependencies if needed
-                },
-            ],
-        };
+                ],
+                insertAt: {
+                    target: 'edit-profile'
+                }
+            },
+            {
+                items: [
+                    {
+                        priority: 9001,
+                        text: 'Notification Management',
+                        icon: 'fa-solid fa-bells',
+                        data: {
+                        // requiredPermission: 'demo.admin.settings',
+                        },
+                        children: [
+                            {
+                                text: 'Template',
+                                path: '/demo/m/notification-management/e/notificationTemplate/list',
+                                icon: 'fa-solid fa-file-invoice',
+                                data: {
+                                //requiredPermission: '',
+                                },
+                            },
+                            {
+                                text: 'Report',
+                                path: '/demo/m/notification-management/e/notification/list',
+                                icon: 'fa-solid fa-file-chart-column',
+                                data: {
+                                //requiredPermission: '',
+                                },
+                            },
+                        ],
+                    },
+                ]
+            }
+        ];
     }
-    /**
-     * @ignore
-     */
-    constructor(instances) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMNotificationManagementModule, deps: [{ token: 'AXP_REGISTER_TEMPLATE_NoTIFICATION', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+}
+
+class AXMNotificationManagementModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMNotificationManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AXMNotificationManagementModule, imports: [i1$2.AXPComponentSlotModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMNotificationManagementModule, imports: [AXPComponentSlotModule.forChild({
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXMNotificationManagementModule, providers: [
+            {
+                provide: AXP_ENTITY_DEFINITION_LOADER,
+                useClass: AXMNotificationModuleEntityLoader,
+                multi: true,
+            },
+            {
+                provide: AXP_MENU_PROVIDER,
+                useClass: AXMNotificationManagmentModuleMenuProvider,
+                multi: true
+            }
+        ], imports: [AXPComponentSlotModule.forChild({
                 'header-end': [
                     {
                         name: 'notification',
-                        component: AXMAdminNotificationSlotComponent
+                        component: AXMAdminNotificationSlotComponent,
                     },
                 ],
             })] }); }
@@ -243,20 +336,273 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             'header-end': [
                                 {
                                     name: 'notification',
-                                    component: AXMAdminNotificationSlotComponent
+                                    component: AXMAdminNotificationSlotComponent,
                                 },
                             ],
                         }),
                     ],
                     exports: [],
                     declarations: [],
+                    providers: [
+                        {
+                            provide: AXP_ENTITY_DEFINITION_LOADER,
+                            useClass: AXMNotificationModuleEntityLoader,
+                            multi: true,
+                        },
+                        {
+                            provide: AXP_MENU_PROVIDER,
+                            useClass: AXMNotificationManagmentModuleMenuProvider,
+                            multi: true
+                        }
+                    ],
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: ['AXP_REGISTER_TEMPLATE_NoTIFICATION']
-                }] }] });
+        }] });
+
+async function myNotificationEntityFactory(injector) {
+    const storageService = injector.get(AXPEntityStorageService);
+    const dataProvider = new AXPEntityDataProviderImpl(storageService, 'notifications');
+    const entityDef = {
+        module: 'notification-management',
+        name: 'notification',
+        source: 'notification-management.notification',
+        title: 'My Notifications',
+        formats: {
+            individual: 'Notification',
+            plural: 'My Notifications',
+        },
+        groups: [
+            { id: 'data', title: 'Data' },
+            { id: 'content', title: 'Content' },
+            { id: 'action', title: 'Action' },
+            { id: 'user', title: 'User' },
+            { id: 'template', title: 'Template' },
+        ],
+        properties: [
+            {
+                name: 'id',
+                title: 'ID',
+                groupId: 'data',
+                schema: {
+                    dataType: 'string',
+                    hidden: true,
+                    nullable: false,
+                    readonly: true,
+                    unique: { enabled: true },
+                },
+            },
+            {
+                name: 'title',
+                title: 'Title',
+                groupId: 'data',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.text,
+                    },
+                },
+            },
+            {
+                name: 'body',
+                title: 'Body',
+                groupId: 'data',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.largeText,
+                    },
+                },
+            },
+            {
+                name: 'channel',
+                title: 'Channel',
+                groupId: 'data',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.select,
+                        options: { dataSource: ['InApp', 'Email', 'SMS'], multiple: false },
+                    },
+                },
+            },
+            {
+                name: 'content.type',
+                title: 'Content Data',
+                groupId: 'content',
+                schema: {
+                    dataType: 'object',
+                    interface: {
+                        type: AXPWidgetsCatalog.richText,
+                    },
+                },
+            },
+            {
+                name: 'action.type',
+                title: 'Action Type',
+                groupId: 'action',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.select,
+                        options: { dataSource: ['Link', 'Entity', 'Popup'], multiple: false },
+                    },
+                },
+            },
+            {
+                name: 'User.name',
+                title: 'Username',
+                groupId: 'user',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.text,
+                    },
+                },
+            },
+            {
+                name: 'template.category',
+                title: 'Category',
+                groupId: 'template',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.select,
+                        options: { dataSource: ['Inbox', 'Archive'], multiple: false },
+                    },
+                },
+            },
+            {
+                name: 'template.prority',
+                title: 'Prority',
+                groupId: 'template',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.select,
+                        options: { dataSource: ['Warning', 'Danger', 'Notice'], multiple: false },
+                    },
+                },
+            },
+            {
+                name: 'template.isPinned',
+                title: 'Is Pinned',
+                groupId: 'template',
+                schema: {
+                    dataType: 'boolean',
+                    interface: {
+                        type: AXPWidgetsCatalog.checkbox,
+                        options: {
+                            label: 'Is Pinned',
+                        },
+                    },
+                },
+            },
+            {
+                name: 'readAt',
+                title: 'Read At',
+                groupId: 'data',
+                schema: {
+                    dataType: 'datetime',
+                    interface: {
+                        type: AXPWidgetsCatalog.dateTime,
+                        options: { format: 'date' },
+                    },
+                },
+            },
+            {
+                name: 'createAt',
+                title: 'Created At',
+                groupId: 'data',
+                schema: {
+                    dataType: 'datetime',
+                    interface: {
+                        type: AXPWidgetsCatalog.dateTime,
+                        options: { format: 'date' },
+                    },
+                },
+            },
+        ],
+        columns: [
+            { name: 'title' },
+            { name: 'body' },
+            { name: 'channel' },
+            { name: 'user.name' },
+            { name: 'template.category' },
+            { name: 'template.prority' },
+            { name: 'createAt' },
+            { name: 'readAt' },
+        ],
+        commands: {
+            create: {
+                execute: async (data) => {
+                    console.log('CREATE', data);
+                    const entity = Object.assign(data, { id: AXPDataGenerator.uuid() });
+                    await dataProvider.insertOne(entity);
+                    return entity;
+                },
+            },
+            delete: {
+                execute: async (id) => {
+                    console.log('CREATE', id);
+                    await dataProvider.deleteOne(id);
+                },
+            },
+            update: {
+                execute: async (data) => {
+                    await dataProvider.updateOne(data.id, data);
+                },
+            },
+        },
+        queries: {
+            byKey: {
+                execute: async (id) => {
+                    return await dataProvider.getOne(id);
+                },
+                type: AXPEntityQueryType.Single,
+            },
+            list: {
+                execute: async (e) => {
+                    const list = await dataProvider.getAll();
+                    return {
+                        total: list.length,
+                        items: list.slice(e.skip, e.skip + e.take),
+                    };
+                },
+                type: AXPEntityQueryType.List,
+            },
+        },
+        interfaces: {
+            master: {
+                create: { sections: [{ id: 'content' }, { id: 'action' }, { id: 'user' }, { id: 'template' }] },
+                update: { sections: [{ id: 'content' }, { id: 'action' }, { id: 'user' }, { id: 'template' }] },
+                list: {
+                    actions: [
+                        // {
+                        //   title: 'Create New',
+                        //   command: 'create-entity',
+                        //   priority: 'primary',
+                        //   type: 'create',
+                        //   scope: AXPEntityCommandScope.TypeLevel,
+                        // },
+                        {
+                            title: 'Delete',
+                            command: 'delete-entity',
+                            priority: 'primary',
+                            type: 'delete',
+                            scope: AXPEntityCommandScope.Selected,
+                        },
+                    ],
+                    views: [{ name: 'all', title: 'All Notifications', fixed: true, columns: [], conditions: [], sorts: [] }],
+                },
+            },
+        },
+    };
+    return entityDef;
+}
+
+var myNotification = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    myNotificationEntityFactory: myNotificationEntityFactory
+});
 
 const CHANNELS = ['InApp', 'Email', 'SMS'];
 const TITLES = ['Buy Me!', 'Black Friday', 'New Message'];
@@ -265,7 +611,7 @@ const CATEGORIES = ['Inbox', 'Archive', 'Role'];
 const TYPES = ['File', 'Person', 'Notification'];
 const PRORITIES = ['Warning', 'Danger', 'Notice'];
 const NOTIFICATION_TEMPLATES = Array.from({ length: 5 }).map((_, i) => {
-    const name = AXPDataGenerator.string;
+    const name = AXPDataGenerator.string();
     return {
         id: AXPDataGenerator.uuid(),
         name: name,
@@ -404,7 +750,7 @@ async function notificationChannelEntityFactory(injector) {
                 schema: {
                     dataType: 'string',
                     interface: {
-                        type: AXPWidgetsCatalog.largeText,
+                        type: AXPWidgetsCatalog.richText,
                     },
                 },
                 validations: [
@@ -474,7 +820,6 @@ async function notificationChannelEntityFactory(injector) {
             },
             update: {
                 execute: async (data) => {
-                    debugger;
                     return new Promise((resolve) => {
                         setTimeout(async () => {
                             await dataService.notificationChannelDataProvider.updateOne(data.id, data);
@@ -693,6 +1038,182 @@ var notificationChannel_entity = /*#__PURE__*/Object.freeze({
     notificationChannelEntityFactory: notificationChannelEntityFactory
 });
 
+async function notificationLogEntityFactory(injector) {
+    const dataService = injector.get(NotificationManagementService);
+    const entityDef = {
+        module: 'notification-management',
+        name: 'notification',
+        source: 'notification-management.notificationLog',
+        title: 'Notification',
+        formats: {
+            individual: 'NotificationLog',
+            plural: 'NotificationLogs',
+        },
+        relatedEntities: [],
+        groups: [
+            {
+                id: 'notification',
+                title: 'Notification',
+            },
+        ],
+        properties: [
+            {
+                name: 'name',
+                title: 'Name',
+                groupId: 'notification',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.text,
+                    },
+                },
+            },
+            {
+                name: 'title',
+                title: 'Title',
+                groupId: 'notification',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.text,
+                    },
+                },
+            },
+            {
+                name: 'status',
+                title: 'Status',
+                groupId: 'notification',
+                schema: {
+                    dataType: 'string',
+                    interface: {
+                        type: AXPWidgetsCatalog.richText,
+                    },
+                },
+            },
+        ],
+        columns: [{ name: 'name' }, { name: 'title' }, { name: 'body' }, { name: 'user.name' }, { name: 'channel' }],
+        queries: {
+            byKey: {
+                execute: async (id) => {
+                    return new Promise((resolve) => {
+                        setTimeout(async () => {
+                            const entity = await dataService.notificationDataProvider.getOne(id);
+                            resolve(entity);
+                        }, 500);
+                    });
+                },
+                type: AXPEntityQueryType.Single,
+            },
+            list: {
+                execute: async (e) => {
+                    const list = await dataService.notificationDataProvider.getAll();
+                    const sortedItems = applySortArray(list, e.sort);
+                    const filteredItems = applyFilterArray(sortedItems, e.filter ? [e.filter] : []);
+                    return Promise.resolve({
+                        total: filteredItems.length,
+                        items: filteredItems.slice(e.skip, (e.skip ?? 0) + (e.take ?? 0)),
+                    });
+                },
+                type: AXPEntityQueryType.List,
+            },
+        },
+        interfaces: {
+            master: {
+                single: {
+                    title: '{{title}}',
+                    sections: [
+                        {
+                            id: 'notification',
+                            layout: {
+                                positions: {
+                                    lg: {
+                                        colSpan: 12,
+                                    },
+                                },
+                            },
+                        },
+                    ],
+                    properties: [
+                        {
+                            name: 'name',
+                            layout: {
+                                positions: {
+                                    lg: {
+                                        colSpan: 6,
+                                    },
+                                },
+                            },
+                        },
+                        {
+                            name: 'user.name',
+                            layout: {
+                                positions: {
+                                    lg: {
+                                        colSpan: 6,
+                                    },
+                                },
+                            },
+                        },
+                        {
+                            name: 'title',
+                            layout: {
+                                positions: {
+                                    lg: {
+                                        colSpan: 12,
+                                    },
+                                },
+                            },
+                        },
+                        {
+                            name: 'body',
+                            layout: {
+                                positions: {
+                                    lg: {
+                                        colSpan: 12,
+                                    },
+                                },
+                            },
+                        },
+                        {
+                            name: 'channel',
+                            layout: {
+                                positions: {
+                                    lg: {
+                                        colSpan: 6,
+                                    },
+                                },
+                            },
+                        },
+                    ],
+                    actions: [],
+                },
+                list: {
+                    actions: [
+                        {
+                            title: 'Details',
+                            command: 'open-entity',
+                            priority: 'primary',
+                            type: 'view',
+                            scope: AXPEntityCommandScope.Individual,
+                        },
+                    ],
+                    views: [
+                        {
+                            name: 'all',
+                            title: 'All Items',
+                            fixed: true,
+                            columns: [],
+                            conditions: [],
+                            sorts: [],
+                        },
+                    ],
+                },
+            },
+        },
+    };
+    return entityDef;
+}
+
 async function notificationTemplateEntityFactory(injector) {
     const dataService = injector.get(NotificationManagementService);
     const entityDef = {
@@ -987,6 +1508,11 @@ async function notificationTemplateEntityFactory(injector) {
     return entityDef;
 }
 
+var notificationTemplate_entity = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    notificationTemplateEntityFactory: notificationTemplateEntityFactory
+});
+
 async function notificationEntityFactory(injector) {
     const dataService = injector.get(NotificationManagementService);
     const entityDef = {
@@ -1199,5 +1725,5 @@ var notification_entity = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AXMNotificationManagementModule, AXMNotificationService, notificationChannelEntityFactory, notificationEntityFactory, notificationTemplateEntityFactory };
+export { AXMNotificationManagementModule, AXMNotificationService, myNotificationEntityFactory, notificationChannelEntityFactory, notificationEntityFactory, notificationLogEntityFactory, notificationTemplateEntityFactory };
 //# sourceMappingURL=acorex-modules-notification-management.mjs.map