@acorex/modules 20.2.4-next.0 → 20.2.4-next.1

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

@@ -1,544 +0,0 @@
-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