@acorex/modules 21.0.0-next.71 → 21.0.0-next.72

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

@@ -1,858 +0,0 @@
-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 i1 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$1 from '@acorex/core/format';
-import { AXFormatModule } from '@acorex/core/format';
-import { AXPDeviceService } from '@acorex/platform/core';
-import { AXPUserAvatarComponent, AXPThemeLayoutBlockComponent, AXPStateMessageComponent } from '@acorex/platform/layout/components';
-import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
-import * as i2 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.deviceService = inject(AXPDeviceService);
-        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" }] : /* istanbul ignore next */ []));
-        this.isEditing = signal(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
-        this.contextMenu = viewChild('contextMenu', ...(ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []));
-        // #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" }] : /* istanbul ignore next */ []));
-        // Tab state: 'all' | 'unread'
-        this.tab = signal('all', ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
-        this.activeTab = computed(() => this.tab(), ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
-        // Selection state for bulk actions
-        this.selectedIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
-        this.selectedCount = computed(() => this.selectedIds().size, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
-        this.contextItem = signal(null, ...(ngDevMode ? [{ debugName: "contextItem" }] : /* istanbul ignore next */ []));
-    }
-    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);
-    }
-    //#region ----   Helper Methods for State Message   ----
-    getNotificationIcon() {
-        if (this.searchQuery()) {
-            return 'fa-solid fa-magnifying-glass';
-        }
-        else if (this.activeTab() === 'unread') {
-            return 'fa-solid fa-check-circle';
-        }
-        else {
-            return 'fa-solid fa-bell';
-        }
-    }
-    getNotificationTitle() {
-        if (this.searchQuery()) {
-            return '@notification-management:state-message.no-results.title';
-        }
-        else if (this.activeTab() === 'unread') {
-            return '@notification-management:state-message.all-caught-up.title';
-        }
-        else {
-            return '@notification-management:state-message.no-notifications.title';
-        }
-    }
-    getNotificationDescription() {
-        if (this.searchQuery()) {
-            return `We couldn't find anything matching "${this.searchQuery()}".`;
-        }
-        else if (this.activeTab() === 'unread') {
-            return '@notification-management:state-message.all-caught-up.description';
-        }
-        else {
-            return '@notification-management:state-message.no-notifications.description';
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMNotificationPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", 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) {
-            <axp-state-message
-              mode="empty"
-              [icon]="getNotificationIcon()"
-              [title]="getNotificationTitle()"
-              [description]="getNotificationDescription()"
-            >
-              @if (searchQuery()) {
-                <ax-button
-                  slot="actions"
-                  look="outline"
-                  [text]="'Clear search'"
-                  (onClick)="onClearSearch()"
-                ></ax-button>
-              }
-            </axp-state-message>
-          } @else {
-            <div>
-              @for (item of filteredNotifications(); track item.id) {
-                @if (deviceService.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: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1.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.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", "closeParentOnClick", "lockOnLoading"], 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", "autoSearch"], 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: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { 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.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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) {
-            <axp-state-message
-              mode="empty"
-              [icon]="getNotificationIcon()"
-              [title]="getNotificationTitle()"
-              [description]="getNotificationDescription()"
-            >
-              @if (searchQuery()) {
-                <ax-button
-                  slot="actions"
-                  look="outline"
-                  [text]="'Clear search'"
-                  (onClick)="onClearSearch()"
-                ></ax-button>
-              }
-            </axp-state-message>
-          } @else {
-            <div>
-              @for (item of filteredNotifications(); track item.id) {
-                @if (deviceService.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,
-                        AXPStateMessageComponent,
-                        AXContextMenuComponent,
-                        AXLabelModule,
-                        AXSlidingItemModule,
-                    ],
-                }]
-        }], propDecorators: { contextMenu: [{ type: i0.ViewChild, args: ['contextMenu', { isSignal: true }] }] } });
-
-export { AXMNotificationPageComponent };
-//# sourceMappingURL=acorex-modules-notification-management-notification-page.component-6YOiGgKm.mjs.map