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

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

@@ -0,0 +1,855 @@
+import * as i3$1 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i6 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i4 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 i8 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import * as i10 from '@acorex/components/label';
+import { AXLabelModule } from '@acorex/components/label';
+import * as i9 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i5 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+import * as i11 from '@acorex/components/sliding-item';
+import { AXSlidingItemModule } from '@acorex/components/sliding-item';
+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 i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, signal, viewChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { AXContextMenuComponent } from '@acorex/components/menu';
+import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
+import { AXMNotificationConnectorService, AXPNotificationDefinitionService } from './acorex-modules-notification-management.mjs';
+
+//#region ----   Component Definition   ----
+class AXMNotificationPageComponent extends AXPPageLayoutBaseComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Services & Dependencies   ----
+        this.layoutThemeService = inject(AXPLayoutThemeService);
+        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.isEditing = signal(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : []));
+        this.contextMenu = viewChild('contextMenu', ...(ngDevMode ? [{ debugName: "contextMenu" }] : []));
+        // #isEditingEff = effect(() => {
+        // if (this.isEditing() && this.selectedIds().size === 0) {
+        //   this.isEditing.set(false);
+        // }
+        // });
+        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" }] : []));
+        this.contextItem = signal(null, ...(ngDevMode ? [{ debugName: "contextItem" }] : []));
+    }
+    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 getPrimaryMenuItems() {
+        const items = [];
+        if (this.selectedCount() > 0) {
+            items.push({
+                title: 'Delete',
+                icon: 'fa-light fa-trash',
+                command: { name: 'delete-selected' },
+                color: 'danger',
+            });
+            items.push({
+                title: 'Mark as read',
+                icon: 'fa-light fa-envelopes-bulk',
+                command: { name: 'mark-selected-as-read' },
+                color: 'primary',
+            });
+        }
+        return items;
+    }
+    async getSecondaryMenuItems() {
+        const items = [];
+        if (this.selectedCount() === 0) {
+            items.push({
+                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,
+            }, {
+                title: 'Select items',
+                icon: 'fa-light fa-pen',
+                command: { name: 'edit-mode' },
+                color: 'primary',
+            });
+        }
+        return items;
+    }
+    async execute(command) {
+        switch (command.name) {
+            case 'refresh':
+                await this.onRefresh();
+                if (this.isEditing()) {
+                    this.isEditing.set(false);
+                }
+                break;
+            case 'delete-selected':
+                await this.deleteSelected();
+                if (this.isEditing()) {
+                    this.isEditing.set(false);
+                }
+                break;
+            case 'mark-selected-as-read':
+                await this.markSelectedAsRead();
+                if (this.isEditing()) {
+                    this.isEditing.set(false);
+                }
+                break;
+            case 'mark-all-as-read':
+                await this.onMarkAllAsRead();
+                if (this.isEditing()) {
+                    this.isEditing.set(false);
+                }
+                break;
+            case 'edit-mode':
+                if (this.isEditing()) {
+                    this.deselectAll();
+                    this.isEditing.set(false);
+                }
+                else {
+                    this.isEditing.set(true);
+                }
+                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(item) {
+        const ids = item ? [item.id] : Array.from(this.selectedIds());
+        if (ids.length === 0)
+            return;
+        await this.connector.markAsRead({ id: ids });
+        this.selectedIds.set(new Set());
+    }
+    async deleteSelected(item) {
+        const ids = item ? [item.id] : 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() {
+        if (this.selectedCount() > 0) {
+            this.selectedIds.set(new Set());
+        }
+        if (this.isEditing()) {
+            this.isEditing.set(false);
+        }
+    }
+    // Row interactions
+    onRowClick(id) {
+        this.toggleSelectionById(id);
+    }
+    async openItem(id) {
+        if (this.isEditing()) {
+            this.toggleSelectionById(id);
+            return;
+        }
+        //avoid double click on selected items
+        if (this.selectedCount() > 0) {
+            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);
+    }
+    //#endregion
+    slidingItemsHandler(item, action) {
+        switch (action) {
+            case 'mark-as-read':
+                this.markSelectedAsRead(item);
+                break;
+            case 'delete':
+                this.deleteSelected(item);
+                break;
+        }
+    }
+    handleContextMenuItemClick(e) {
+        const item = this.contextItem();
+        if (!item) {
+            return;
+        }
+        switch (e.item.name) {
+            case 'mark-as-read':
+                this.markSelectedAsRead(item);
+                break;
+            case 'delete':
+                this.deleteSelected(item);
+                break;
+        }
+    }
+    handleContextMenuOpening(e) {
+        e.items = [
+            {
+                name: 'mark-as-read',
+                text: 'Mark as read',
+                icon: 'fa-light fa-envelopes-bulk',
+                color: 'primary',
+            },
+        ];
+        e.items.push({
+            name: 'delete',
+            text: 'Delete',
+            icon: 'fa-light fa-trash-can',
+            color: 'danger',
+        });
+    }
+    openContextMenu(e, item) {
+        if (this.isEditing() || this.selectedCount() > 0) {
+            return;
+        }
+        e.preventDefault();
+        this.contextMenu()?.showAt({
+            x: e.clientX,
+            y: e.clientY,
+        });
+        this.contextItem.set(item);
+    }
+    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", host: { listeners: { "document:keydown.escape": "deselectAll()" } }, providers: [
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXMNotificationPageComponent,
+            },
+        ], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <axp-page-layout>
+      <axp-page-toolbar>
+        <axp-layout-prefix>
+          @if (selectedCount() > 0 || isEditing()) {
+            <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 Notifications' : 'Unread Notifications'">
+              <ax-dropdown-panel >
+                <ax-button-item-list class="ax-min-w-52">
+                  <ax-button-item
+                    [text]="'All notifications'"
+                    [selected]="activeTab() === 'all'"
+                    (onClick)="setTab('all')"
+                  ></ax-button-item>
+                  <ax-button-item
+                    [text]="'Unread Notifications'"
+                    [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">
+              @if (activeTab() === 'unread') {
+                <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">
+          <!-- 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-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>
+              @for (item of filteredNotifications(); track item.id) {
+                @if (layoutThemeService.isMobileDevice()) {
+                  <ng-container
+                    #contextMenuContainer
+                    [ngTemplateOutlet]="mobile"
+                    [ngTemplateOutletContext]="{ $implicit: item }"
+                  ></ng-container>
+                } @else {
+                  <ng-container
+                    [ngTemplateOutlet]="desktop"
+                    [ngTemplateOutletContext]="{ $implicit: item }"
+                  ></ng-container>
+                }
+              }
+            </div>
+          }
+        </div>
+      </axp-page-content>
+    </axp-page-layout>
+
+    <ng-template #mobile let-item>
+      <ax-sliding-item class="ax-h-24">
+        <!-- <ax-sliding-item-prefix (onClick)="clickHandler($event)" color="danger" text="delete">
+          <ax-icon class="fa-solid fa-trash"></ax-icon>
+        </ax-sliding-item-prefix> -->
+
+        <ax-content class="!ax-p-0">
+          <div
+            class="ax-select-none ax-flex ax-size-full ax-mb-2 ax-gap-3 ax-py-2 ax-px-4 ax-items-center ax-rounded-md ax-cursor-pointer ax-line-clamp-2"
+            [class.ax-bg-lighter]="isSelected(item.id)"
+            [id]="item.id"
+            (click)="openItem(item.id)"
+            (contextmenu)="openContextMenu($event, item)"
+          >
+            @if (isEditing()) {
+              <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>
+        </ax-content>
+
+        <ax-sliding-item-suffix (onClick)="slidingItemsHandler(item, 'mark-as-read')" color="primary">
+          <ax-icon class="fa-light fa-envelopes-bulk fa-xl"></ax-icon>
+        </ax-sliding-item-suffix>
+
+        <ax-sliding-item-suffix (onClick)="slidingItemsHandler(item, 'delete')" color="danger">
+          <ax-icon class="fa-light fa-trash-can fa-xl"></ax-icon>
+        </ax-sliding-item-suffix>
+      </ax-sliding-item>
+    </ng-template>
+
+    <ng-template #desktop let-item>
+      <div
+        class="ax-flex ax-gap-3 ax-p-4 ax-items-center ax-rounded-md ax-cursor-pointer hover:ax-bg-surface ax-mb-2 last:ax-mb-0"
+        [class.ax-bg-lighter]="isSelected(item.id)"
+        [id]="item.id"
+        (click)="openItem(item.id)"
+        (contextmenu)="openContextMenu($event, item)"
+      >
+        <!-- @if (isSelected(item.id)) {
+                    <div class="ax-w-1 ax-self-stretch ax-rounded ax-bg-primary"></div>
+                  } -->
+        <!-- Select via checkbox -->
+        @if (isEditing()) {
+              <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>
+    </ng-template>
+    <ax-context-menu
+      #contextMenu
+      [openOn]="'click'"
+      [closeOn]="'click'"
+      [orientation]="'horizontal'"
+      (onOpening)="handleContextMenuOpening($event)"
+      (onItemClick)="handleContextMenuItemClick($event)"
+    >
+    </ax-context-menu>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: i4.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: i5.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i6.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: i6.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i6.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: i8.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: i9.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: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i10.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXSlidingItemModule }, { kind: "component", type: i11.AXSlidingItemComponent, selector: "ax-sliding-item" }, { kind: "component", type: i11.AXSlidingItemSuffixComponent, selector: "ax-sliding-item-suffix", inputs: ["color", "text"], outputs: ["onClick"] }, { kind: "pipe", type: i2$1.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 || isEditing()) {
+            <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 Notifications' : 'Unread Notifications'">
+              <ax-dropdown-panel >
+                <ax-button-item-list class="ax-min-w-52">
+                  <ax-button-item
+                    [text]="'All notifications'"
+                    [selected]="activeTab() === 'all'"
+                    (onClick)="setTab('all')"
+                  ></ax-button-item>
+                  <ax-button-item
+                    [text]="'Unread Notifications'"
+                    [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">
+              @if (activeTab() === 'unread') {
+                <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">
+          <!-- 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-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>
+              @for (item of filteredNotifications(); track item.id) {
+                @if (layoutThemeService.isMobileDevice()) {
+                  <ng-container
+                    #contextMenuContainer
+                    [ngTemplateOutlet]="mobile"
+                    [ngTemplateOutletContext]="{ $implicit: item }"
+                  ></ng-container>
+                } @else {
+                  <ng-container
+                    [ngTemplateOutlet]="desktop"
+                    [ngTemplateOutletContext]="{ $implicit: item }"
+                  ></ng-container>
+                }
+              }
+            </div>
+          }
+        </div>
+      </axp-page-content>
+    </axp-page-layout>
+
+    <ng-template #mobile let-item>
+      <ax-sliding-item class="ax-h-24">
+        <!-- <ax-sliding-item-prefix (onClick)="clickHandler($event)" color="danger" text="delete">
+          <ax-icon class="fa-solid fa-trash"></ax-icon>
+        </ax-sliding-item-prefix> -->
+
+        <ax-content class="!ax-p-0">
+          <div
+            class="ax-select-none ax-flex ax-size-full ax-mb-2 ax-gap-3 ax-py-2 ax-px-4 ax-items-center ax-rounded-md ax-cursor-pointer ax-line-clamp-2"
+            [class.ax-bg-lighter]="isSelected(item.id)"
+            [id]="item.id"
+            (click)="openItem(item.id)"
+            (contextmenu)="openContextMenu($event, item)"
+          >
+            @if (isEditing()) {
+              <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>
+        </ax-content>
+
+        <ax-sliding-item-suffix (onClick)="slidingItemsHandler(item, 'mark-as-read')" color="primary">
+          <ax-icon class="fa-light fa-envelopes-bulk fa-xl"></ax-icon>
+        </ax-sliding-item-suffix>
+
+        <ax-sliding-item-suffix (onClick)="slidingItemsHandler(item, 'delete')" color="danger">
+          <ax-icon class="fa-light fa-trash-can fa-xl"></ax-icon>
+        </ax-sliding-item-suffix>
+      </ax-sliding-item>
+    </ng-template>
+
+    <ng-template #desktop let-item>
+      <div
+        class="ax-flex ax-gap-3 ax-p-4 ax-items-center ax-rounded-md ax-cursor-pointer hover:ax-bg-surface ax-mb-2 last:ax-mb-0"
+        [class.ax-bg-lighter]="isSelected(item.id)"
+        [id]="item.id"
+        (click)="openItem(item.id)"
+        (contextmenu)="openContextMenu($event, item)"
+      >
+        <!-- @if (isSelected(item.id)) {
+                    <div class="ax-w-1 ax-self-stretch ax-rounded ax-bg-primary"></div>
+                  } -->
+        <!-- Select via checkbox -->
+        @if (isEditing()) {
+              <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>
+    </ng-template>
+    <ax-context-menu
+      #contextMenu
+      [openOn]="'click'"
+      [closeOn]="'click'"
+      [orientation]="'horizontal'"
+      (onOpening)="handleContextMenuOpening($event)"
+      (onItemClick)="handleContextMenuItemClick($event)"
+    >
+    </ax-context-menu>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMNotificationPageComponent,
+                        },
+                    ],
+                    host: {
+                        '(document:keydown.escape)': 'deselectAll()',
+                    },
+                    imports: [
+                        AXDecoratorModule,
+                        CommonModule,
+                        FormsModule,
+                        AXFormatModule,
+                        AXCheckBoxModule,
+                        AXSkeletonModule,
+                        AXButtonModule,
+                        AXBadgeModule,
+                        AXDropdownModule,
+                        AXDropdownButtonModule,
+                        AXSearchBoxModule,
+                        AXPUserAvatarComponent,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXContextMenuComponent,
+                        AXLabelModule,
+                        AXSlidingItemModule,
+                    ],
+                }]
+        }] });
+
+export { AXMNotificationPageComponent };
+//# sourceMappingURL=acorex-modules-notification-management-notification-page.component-BUslAF8w.mjs.map