@acorex/modules 20.2.2 → 20.2.4-next.0

package/fesm2022/acorex-modules-notification-management-notification-page.component-TLxLpxzE.mjs

@@ -0,0 +1,544 @@
+import * as i3$1 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i5 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/check-box';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
+import * as i2 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i7 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i9 from '@acorex/components/label';
+import { AXLabelModule } from '@acorex/components/label';
+import * as i8 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i4 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+import * as i2$2 from '@acorex/core/format';
+import { AXFormatModule } from '@acorex/core/format';
+import { AXPUserAvatarComponent, AXPThemeLayoutBlockComponent } from '@acorex/platform/layout/components';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { AXMNotificationConnectorService, AXPNotificationDefinitionService } from './acorex-modules-notification-management.mjs';
+
+//#region ----   Component Definition   ----
+class AXMNotificationPageComponent extends AXPPageLayoutBaseComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Services & Dependencies   ----
+        this.connector = inject(AXMNotificationConnectorService);
+        this.definitionService = inject(AXPNotificationDefinitionService);
+        //#endregion
+        //#region ----   State & Computed Properties   ----
+        this.loading = this.connector.loading;
+        this.errorMessage = this.connector.errorMessage;
+        this.notifications = this.connector.notificationList;
+        this.unreadCount = this.connector.unreadCount;
+        this.totalCount = this.connector.total;
+        // Local UI state
+        this.searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+        this.filteredNotifications = computed(() => {
+            const query = (this.searchQuery() || '').toLowerCase().trim();
+            const items = this.notifications();
+            if (!query) {
+                return this.activeTab() === 'unread' ? items.filter((n) => !n.readAt) : items;
+            }
+            const base = this.activeTab() === 'unread' ? items.filter((n) => !n.readAt) : items;
+            return base.filter((n) => {
+                const title = (n.title || '').toLowerCase();
+                const body = (n.body || '').toLowerCase();
+                const sender = (n.sender?.fullName || '').toLowerCase();
+                return title.includes(query) || body.includes(query) || sender.includes(query);
+            });
+        }, ...(ngDevMode ? [{ debugName: "filteredNotifications" }] : []));
+        // Tab state: 'all' | 'unread'
+        this.tab = signal('all', ...(ngDevMode ? [{ debugName: "tab" }] : []));
+        this.activeTab = computed(() => this.tab(), ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+        // Selection state for bulk actions
+        this.selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
+        this.selectedCount = computed(() => this.selectedIds().size, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
+    }
+    selectedTab() {
+        return this.tab();
+    }
+    setTab(v) {
+        this.tab.set(v);
+    }
+    onTabChange(index) {
+        this.tab.set(index === 1 ? 'unread' : 'all');
+    }
+    //#endregion
+    //#region ----   Page Interface Methods   ----
+    async getPageTitle() {
+        return 'Notifications';
+    }
+    getPageDescription() {
+        const unread = this.unreadCount();
+        const total = this.totalCount();
+        if (!total) {
+            return 'No notifications';
+        }
+        return unread > 0 ? `${unread} unread out of ${total}` : `${total} notifications`;
+    }
+    async getSecondaryMenuItems() {
+        return [
+            {
+                title: 'Refresh',
+                icon: 'fa-light fa-rotate',
+                command: { name: 'refresh' },
+            },
+            {
+                title: 'Mark all as read',
+                icon: 'fa-light fa-envelopes-bulk',
+                command: { name: 'mark-all-as-read' },
+                disabled: this.unreadCount() === 0,
+            },
+        ];
+    }
+    async execute(command) {
+        switch (command.name) {
+            case 'refresh':
+                await this.onRefresh();
+                break;
+            case 'mark-selected-as-read':
+                await this.markSelectedAsRead(); // kept for keyboard/menu accessibility, though moved to suffix
+                break;
+            case 'mark-all-as-read':
+                await this.onMarkAllAsRead();
+                break;
+        }
+    }
+    //#endregion
+    //#region ----   UI Handlers   ----
+    onSearch(value) {
+        this.searchQuery.set(value);
+    }
+    onClearSearch() {
+        this.searchQuery.set('');
+    }
+    async onRefresh() {
+        await this.connector.getList();
+    }
+    async onMarkAllAsRead() {
+        await this.connector.markAllAsRead();
+    }
+    isSelected(id) {
+        return this.selectedIds().has(id);
+    }
+    toggleSelectionWithModel(id, checked) {
+        const next = new Set(this.selectedIds());
+        if (checked) {
+            next.add(id);
+        }
+        else {
+            next.delete(id);
+        }
+        this.selectedIds.set(next);
+    }
+    isAllSelected() {
+        const items = this.filteredNotifications();
+        return items.length > 0 && items.every((i) => this.selectedIds().has(i.id));
+    }
+    toggleSelectAll(event) {
+        const checked = event.target.checked;
+        if (checked) {
+            this.selectedIds.set(new Set(this.filteredNotifications().map((i) => i.id)));
+        }
+        else {
+            this.selectedIds.set(new Set());
+        }
+    }
+    async markSelectedAsRead() {
+        const ids = Array.from(this.selectedIds());
+        if (ids.length === 0)
+            return;
+        await this.connector.markAsRead({ id: ids });
+        this.selectedIds.set(new Set());
+    }
+    async deleteSelected() {
+        const ids = Array.from(this.selectedIds());
+        if (ids.length === 0)
+            return;
+        for (const id of ids) {
+            await this.connector.deleteOne(id);
+        }
+        this.selectedIds.set(new Set());
+    }
+    deselectAll() {
+        this.selectedIds.set(new Set());
+    }
+    // Row interactions
+    onRowClick(id) {
+        this.toggleSelectionById(id);
+    }
+    async onItemDblClick(id) {
+        //avoid double click on selected items
+        if (this.selectedIds().size > 1) {
+            return;
+        }
+        const item = this.notifications().find((n) => n.id === id);
+        if (!item) {
+            return;
+        }
+        // Mark as read (idempotent per service logic)
+        await this.connector.markAsRead({ id: [id] });
+        // Execute provider click action if available
+        const provider = this.definitionService.resolve(item.type);
+        await provider?.execute?.({ name: 'click' }, item);
+    }
+    toggleSelectionById(id) {
+        const next = new Set(this.selectedIds());
+        if (next.has(id)) {
+            next.delete(id);
+        }
+        else {
+            next.add(id);
+        }
+        this.selectedIds.set(next);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMNotificationPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: AXMNotificationPageComponent, isStandalone: true, selector: "axm-notification-page", providers: [
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXMNotificationPageComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <axp-page-layout>
+      <axp-page-toolbar>
+        <axp-layout-prefix>
+          @if (selectedCount() > 0) {
+            <div class="ax-flex ax-gap-3 ax-items-center ax-h-10">
+              <span class="ax-text-xl ax-font-bold">{{ selectedCount() }} items selected</span>
+              <span (click)="deselectAll()" class="ax-text-sm ax-text-secondary ax-underline ax-cursor-pointer"
+                >Unselect</span
+              >
+            </div>
+          } @else {
+            <ax-button [text]="activeTab() === 'all' ? 'All' : 'Unread'">
+              <ax-dropdown-panel>
+                <ax-button-item-list class="ax-p-2">
+                  <ax-button-item
+                    [text]="'All'"
+                    [selected]="activeTab() === 'all'"
+                    (onClick)="setTab('all')"
+                  ></ax-button-item>
+                  <ax-button-item [text]="'Unread'" [selected]="activeTab() === 'unread'" (onClick)="setTab('unread')">
+                    <ax-suffix>
+                      <ax-badge [text]="unreadCount().toString()" [color]="'primary'"></ax-badge>
+                    </ax-suffix>
+                  </ax-button-item>
+                </ax-button-item-list>
+              </ax-dropdown-panel>
+            </ax-button>
+
+            <ax-search-box
+              look="solid"
+              [placeholder]="'Search notifications'"
+              [value]="searchQuery()"
+              (onValueChanged)="onSearch($event.value)"
+              class="ax-w-72 ax-hidden md:ax-flex"
+            >
+              <ax-clear-button></ax-clear-button>
+            </ax-search-box>
+          }
+        </axp-layout-prefix>
+        <axp-layout-suffix>
+          @if (selectedCount() > 0) {
+            <div class="ax-flex ax-gap-2">
+              <ax-button [text]="'Mark as read'" (onClick)="markSelectedAsRead()"></ax-button>
+              <ax-button look="outline" color="danger" [text]="'Delete'" (onClick)="deleteSelected()"></ax-button>
+            </div>
+          }
+        </axp-layout-suffix>
+      </axp-page-toolbar>
+      <axp-page-content>
+        <div class="ax-flex ax-flex-col ax-gap-4 ax-p-4">
+          <!-- List -->
+          @if (loading()) {
+            <div class="ax-p-4 ax-space-y-4">
+              @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {
+                <div class="ax-flex ax-items-center ax-space-x-3">
+                  <ax-skeleton [animated]="true" class="ax-w-12 ax-h-12 ax-rounded-full"></ax-skeleton>
+                  <div class="ax-flex-1 ax-space-y-2">
+                    <ax-skeleton [animated]="true" class="ax-w-3/4 ax-h-4 ax-rounded-md"></ax-skeleton>
+                    <ax-skeleton [animated]="true" class="ax-w-1/2 ax-h-3 ax-rounded-md"></ax-skeleton>
+                  </div>
+                </div>
+              }
+            </div>
+          } @else if (filteredNotifications().length === 0) {
+            <div
+              class="ax-rounded-xl ax-border ax-border-gray-200 ax-py-16 ax-px-6 ax-flex ax-flex-col ax-items-center ax-justify-center ax-gap-4 ax-text-center"
+            >
+              <div class="ax-h-14 ax-w-14 ax-rounded-full ax-flex ax-items-center ax-justify-center ax-text-2xl">
+                @if (searchQuery()) {
+                  🔍
+                } @else if (activeTab() === 'unread') {
+                  🎉
+                } @else {
+                  🔔
+                }
+              </div>
+              <div class="ax-space-y-1">
+                @if (searchQuery()) {
+                  <div class="ax-text-lg ax-font-semibold">No results</div>
+                  <div class="ax-text-sm">We couldn’t find anything matching “{{ searchQuery() }}”.</div>
+                } @else if (activeTab() === 'unread') {
+                  <div class="ax-text-lg ax-font-semibold">You’re all caught up</div>
+                  <div class="ax-text-sm">No unread notifications right now.</div>
+                } @else {
+                  <div class="ax-text-lg ax-font-semibold">No notifications yet</div>
+                  <div class="ax-text-sm">You’ll see new activity and alerts here.</div>
+                }
+              </div>
+              <div class="ax-flex ax-gap-2">
+                @if (searchQuery()) {
+                  <ax-button look="outline" [text]="'Clear search'" (onClick)="onClearSearch()"></ax-button>
+                } @else {
+                  <!-- <ax-button [text]="'Refresh'" (onClick)="onRefresh()"></ax-button> -->
+                }
+              </div>
+            </div>
+          } @else {
+            <div class="ax-rounded-xl ax-border">
+              @for (item of filteredNotifications(); track item.id) {
+                <div
+                  class="ax-flex ax-gap-3 ax-p-4 ax-items-center ax-rounded-md ax-cursor-pointer"
+                  [id]="item.id"
+                  (click)="onRowClick(item.id)"
+                  (dblclick)="onItemDblClick(item.id)"
+                >
+                  <!-- @if (isSelected(item.id)) {
+                    <div class="ax-w-1 ax-self-stretch ax-rounded ax-bg-primary"></div>
+                  } -->
+                  <!-- Select via checkbox -->
+                  <ax-check-box
+                    class="ax-mt-1"
+                    [ngModel]="isSelected(item.id)"
+                    (ngModelChange)="toggleSelectionWithModel(item.id, $event)"
+                  >
+                    <ax-label></ax-label>
+                  </ax-check-box>
+                  <!-- Avatar + Unread Dot -->
+                  <div class="ax-relative ax-w-12 ax-flex ax-items-center ax-justify-center">
+                    <axp-user-avatar [size]="48" [userId]="item.sender.id"></axp-user-avatar>
+                    @if (!item.readAt) {
+                      <span class="ax-absolute ax-right-0 ax-top-0 ax-block ax-h-3 ax-w-3 ax-rounded-full"></span>
+                    }
+                  </div>
+
+                  <!-- Content -->
+                  <div class="ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-justify-center">
+                    <div class="ax-flex ax-items-center ax-justify-between ax-gap-2">
+                      <div class="ax-flex ax-items-center ax-gap-2">
+                        <div class="ax-font-medium" [class.ax-font-semibold]="!item.readAt">
+                          {{ item.sender.fullName || item.title }}
+                        </div>
+                        <span>•</span>
+                        <div class="ax-text-xs ax-opacity-75">
+                          {{ item.createAt | format: 'timeleft' | async }}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="ax-text-sm ax-line-clamp-2">{{ item.body }}</div>
+                  </div>
+                  <!-- Actions (future: per-item kebab) -->
+                </div>
+                <!-- <div class="ax-border-t ax-border-gray-100"></div> -->
+              }
+            </div>
+          }
+        </div>
+      </axp-page-content>
+    </axp-page-layout>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i4.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5.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: "component", type: i5.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i3$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i7.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i8.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i9.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: AXMNotificationPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axm-notification-page',
+                    template: `
+    <axp-page-layout>
+      <axp-page-toolbar>
+        <axp-layout-prefix>
+          @if (selectedCount() > 0) {
+            <div class="ax-flex ax-gap-3 ax-items-center ax-h-10">
+              <span class="ax-text-xl ax-font-bold">{{ selectedCount() }} items selected</span>
+              <span (click)="deselectAll()" class="ax-text-sm ax-text-secondary ax-underline ax-cursor-pointer"
+                >Unselect</span
+              >
+            </div>
+          } @else {
+            <ax-button [text]="activeTab() === 'all' ? 'All' : 'Unread'">
+              <ax-dropdown-panel>
+                <ax-button-item-list class="ax-p-2">
+                  <ax-button-item
+                    [text]="'All'"
+                    [selected]="activeTab() === 'all'"
+                    (onClick)="setTab('all')"
+                  ></ax-button-item>
+                  <ax-button-item [text]="'Unread'" [selected]="activeTab() === 'unread'" (onClick)="setTab('unread')">
+                    <ax-suffix>
+                      <ax-badge [text]="unreadCount().toString()" [color]="'primary'"></ax-badge>
+                    </ax-suffix>
+                  </ax-button-item>
+                </ax-button-item-list>
+              </ax-dropdown-panel>
+            </ax-button>
+
+            <ax-search-box
+              look="solid"
+              [placeholder]="'Search notifications'"
+              [value]="searchQuery()"
+              (onValueChanged)="onSearch($event.value)"
+              class="ax-w-72 ax-hidden md:ax-flex"
+            >
+              <ax-clear-button></ax-clear-button>
+            </ax-search-box>
+          }
+        </axp-layout-prefix>
+        <axp-layout-suffix>
+          @if (selectedCount() > 0) {
+            <div class="ax-flex ax-gap-2">
+              <ax-button [text]="'Mark as read'" (onClick)="markSelectedAsRead()"></ax-button>
+              <ax-button look="outline" color="danger" [text]="'Delete'" (onClick)="deleteSelected()"></ax-button>
+            </div>
+          }
+        </axp-layout-suffix>
+      </axp-page-toolbar>
+      <axp-page-content>
+        <div class="ax-flex ax-flex-col ax-gap-4 ax-p-4">
+          <!-- List -->
+          @if (loading()) {
+            <div class="ax-p-4 ax-space-y-4">
+              @for (_ of [1, 2, 3, 4, 5, 6]; track $index) {
+                <div class="ax-flex ax-items-center ax-space-x-3">
+                  <ax-skeleton [animated]="true" class="ax-w-12 ax-h-12 ax-rounded-full"></ax-skeleton>
+                  <div class="ax-flex-1 ax-space-y-2">
+                    <ax-skeleton [animated]="true" class="ax-w-3/4 ax-h-4 ax-rounded-md"></ax-skeleton>
+                    <ax-skeleton [animated]="true" class="ax-w-1/2 ax-h-3 ax-rounded-md"></ax-skeleton>
+                  </div>
+                </div>
+              }
+            </div>
+          } @else if (filteredNotifications().length === 0) {
+            <div
+              class="ax-rounded-xl ax-border ax-border-gray-200 ax-py-16 ax-px-6 ax-flex ax-flex-col ax-items-center ax-justify-center ax-gap-4 ax-text-center"
+            >
+              <div class="ax-h-14 ax-w-14 ax-rounded-full ax-flex ax-items-center ax-justify-center ax-text-2xl">
+                @if (searchQuery()) {
+                  🔍
+                } @else if (activeTab() === 'unread') {
+                  🎉
+                } @else {
+                  🔔
+                }
+              </div>
+              <div class="ax-space-y-1">
+                @if (searchQuery()) {
+                  <div class="ax-text-lg ax-font-semibold">No results</div>
+                  <div class="ax-text-sm">We couldn’t find anything matching “{{ searchQuery() }}”.</div>
+                } @else if (activeTab() === 'unread') {
+                  <div class="ax-text-lg ax-font-semibold">You’re all caught up</div>
+                  <div class="ax-text-sm">No unread notifications right now.</div>
+                } @else {
+                  <div class="ax-text-lg ax-font-semibold">No notifications yet</div>
+                  <div class="ax-text-sm">You’ll see new activity and alerts here.</div>
+                }
+              </div>
+              <div class="ax-flex ax-gap-2">
+                @if (searchQuery()) {
+                  <ax-button look="outline" [text]="'Clear search'" (onClick)="onClearSearch()"></ax-button>
+                } @else {
+                  <!-- <ax-button [text]="'Refresh'" (onClick)="onRefresh()"></ax-button> -->
+                }
+              </div>
+            </div>
+          } @else {
+            <div class="ax-rounded-xl ax-border">
+              @for (item of filteredNotifications(); track item.id) {
+                <div
+                  class="ax-flex ax-gap-3 ax-p-4 ax-items-center ax-rounded-md ax-cursor-pointer"
+                  [id]="item.id"
+                  (click)="onRowClick(item.id)"
+                  (dblclick)="onItemDblClick(item.id)"
+                >
+                  <!-- @if (isSelected(item.id)) {
+                    <div class="ax-w-1 ax-self-stretch ax-rounded ax-bg-primary"></div>
+                  } -->
+                  <!-- Select via checkbox -->
+                  <ax-check-box
+                    class="ax-mt-1"
+                    [ngModel]="isSelected(item.id)"
+                    (ngModelChange)="toggleSelectionWithModel(item.id, $event)"
+                  >
+                    <ax-label></ax-label>
+                  </ax-check-box>
+                  <!-- Avatar + Unread Dot -->
+                  <div class="ax-relative ax-w-12 ax-flex ax-items-center ax-justify-center">
+                    <axp-user-avatar [size]="48" [userId]="item.sender.id"></axp-user-avatar>
+                    @if (!item.readAt) {
+                      <span class="ax-absolute ax-right-0 ax-top-0 ax-block ax-h-3 ax-w-3 ax-rounded-full"></span>
+                    }
+                  </div>
+
+                  <!-- Content -->
+                  <div class="ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-justify-center">
+                    <div class="ax-flex ax-items-center ax-justify-between ax-gap-2">
+                      <div class="ax-flex ax-items-center ax-gap-2">
+                        <div class="ax-font-medium" [class.ax-font-semibold]="!item.readAt">
+                          {{ item.sender.fullName || item.title }}
+                        </div>
+                        <span>•</span>
+                        <div class="ax-text-xs ax-opacity-75">
+                          {{ item.createAt | format: 'timeleft' | async }}
+                        </div>
+                      </div>
+                    </div>
+                    <div class="ax-text-sm ax-line-clamp-2">{{ item.body }}</div>
+                  </div>
+                  <!-- Actions (future: per-item kebab) -->
+                </div>
+                <!-- <div class="ax-border-t ax-border-gray-100"></div> -->
+              }
+            </div>
+          }
+        </div>
+      </axp-page-content>
+    </axp-page-layout>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMNotificationPageComponent,
+                        },
+                    ],
+                    imports: [
+                        AXDecoratorModule,
+                        CommonModule,
+                        FormsModule,
+                        AXFormatModule,
+                        AXCheckBoxModule,
+                        AXSkeletonModule,
+                        AXButtonModule,
+                        AXBadgeModule,
+                        AXDropdownModule,
+                        AXDropdownButtonModule,
+                        AXSearchBoxModule,
+                        AXPUserAvatarComponent,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXLabelModule,
+                    ],
+                }]
+        }] });
+
+export { AXMNotificationPageComponent };
+//# sourceMappingURL=acorex-modules-notification-management-notification-page.component-TLxLpxzE.mjs.map