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

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

@@ -0,0 +1,548 @@
+import * as i1$1 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 i9 from '@acorex/components/data-pager';
+import { AXDataPagerModule } from '@acorex/components/data-pager';
+import * as i1 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i7 from '@acorex/components/label';
+import { AXLabelModule } from '@acorex/components/label';
+import * as i5 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+import * as i8 from '@acorex/components/sliding-item';
+import { AXSlidingItemModule } from '@acorex/components/sliding-item';
+import * as i4$1 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXPDeviceService } from '@acorex/platform/core';
+import { AXPThemeLayoutBlockComponent, AXPStateMessageComponent, AXPQueryFiltersComponent } 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, computed, viewChild, 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 { A as AXMNotificationConnectorService, a as AXMAdminNotificationItemComponent } from './acorex-modules-notification-management-acorex-modules-notification-management-BSf1wd6j.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);
+        //#endregion
+        //#region ----   State & Computed Properties   ----
+        this.errorMessage = this.connector.errorMessage;
+        this.unreadCount = this.connector.unreadCount;
+        this.totalCount = this.connector.total;
+        this.pageLoading = this.connector.pageLoadingState;
+        this.pageItems = this.connector.pagedNotificationList;
+        this.pageTotal = this.connector.pagedTotal;
+        this.filterDefinitions = signal([], ...(ngDevMode ? [{ debugName: "filterDefinitions" }] : /* istanbul ignore next */ []));
+        this.panelInitialFilters = signal([], ...(ngDevMode ? [{ debugName: "panelInitialFilters" }] : /* istanbul ignore next */ []));
+        this.queryFiltersKey = signal(0, ...(ngDevMode ? [{ debugName: "queryFiltersKey" }] : /* istanbul ignore next */ []));
+        this.activeFilters = signal([], ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
+        this.pageIndex = signal(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+        this.pageSize = signal(AXMNotificationPageComponent.DEFAULT_PAGE_SIZE, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+        this.pagerDisplayMode = computed(() => (this.deviceService.isSmall() ? 'compact' : 'full'), ...(ngDevMode ? [{ debugName: "pagerDisplayMode" }] : /* istanbul ignore next */ []));
+        this.skeletonPlaceholders = computed(() => Array.from({ length: Math.max(this.pageSize(), 1) }, (_, index) => index), ...(ngDevMode ? [{ debugName: "skeletonPlaceholders" }] : /* istanbul ignore next */ []));
+        this.isEditing = signal(false, ...(ngDevMode ? [{ debugName: "isEditing" }] : /* istanbul ignore next */ []));
+        this.contextMenu = viewChild('contextMenu', ...(ngDevMode ? [{ debugName: "contextMenu" }] : /* istanbul ignore next */ []));
+        this.hasActiveFilters = computed(() => {
+            return this.activeFilters().some((filter) => {
+                if (filter.field === 'readStatus' && (!filter.value || filter.value === 'all')) {
+                    return false;
+                }
+                return filter.value != null && String(filter.value).trim() !== '';
+            });
+        }, ...(ngDevMode ? [{ debugName: "hasActiveFilters" }] : /* istanbul ignore next */ []));
+        this.searchText = computed(() => {
+            const allFilter = this.activeFilters().find((f) => f.field === 'all');
+            return allFilter?.value != null ? String(allFilter.value).trim().toLowerCase() : '';
+        }, ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+        this.isUnreadFilterActive = computed(() => {
+            const readFilter = this.activeFilters().find((f) => f.field === 'readStatus');
+            return readFilter?.value === 'unread';
+        }, ...(ngDevMode ? [{ debugName: "isUnreadFilterActive" }] : /* istanbul ignore next */ []));
+        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 */ []));
+    }
+    static { this.DEFAULT_PAGE_SIZE = 10; }
+    //#endregion
+    //#region ----   Lifecycle   ----
+    async ngOnInit() {
+        super.ngOnInit();
+        await this.loadFilterDefinitions();
+        await this.loadPage();
+    }
+    //#endregion
+    //#region ----   Page Interface Methods   ----
+    async getPageTitle() {
+        return this.translateService.translateAsync('@notification-management:page.title');
+    }
+    async getPageDescription() {
+        const unread = this.unreadCount();
+        const total = this.totalCount();
+        if (!total) {
+            return this.translateService.translateAsync('@notification-management:page.description.none');
+        }
+        if (unread > 0) {
+            return this.translateService.translateAsync('@notification-management:page.description.unread', {
+                params: { unread, total },
+            });
+        }
+        return this.translateService.translateAsync('@notification-management:page.description.all-read', {
+            params: { total },
+        });
+    }
+    async getPrimaryMenuItems() {
+        const items = [];
+        if (this.selectedCount() > 0) {
+            items.push({
+                title: await this.translateService.translateAsync('@notification-management:actions.delete'),
+                icon: 'fa-light fa-trash',
+                command: { name: 'delete-selected' },
+                color: 'danger',
+            });
+            items.push({
+                title: await this.translateService.translateAsync('@notification-management:actions.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: await this.translateService.translateAsync('@notification-management:actions.refresh'),
+                icon: 'fa-light fa-rotate',
+                command: { name: 'refresh' },
+            }, {
+                title: await this.translateService.translateAsync('@notification-management:actions.mark-all-as-read'),
+                icon: 'fa-light fa-envelopes-bulk',
+                command: { name: 'mark-all-as-read' },
+                disabled: this.unreadCount() === 0,
+            }, {
+                title: await this.translateService.translateAsync('@notification-management:actions.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);
+                }
+                this.recompute();
+                break;
+        }
+    }
+    //#endregion
+    //#region ----   Filter Handlers   ----
+    handleFiltersChanged(filters) {
+        this.activeFilters.set(filters);
+        this.pageIndex.set(0);
+        void this.loadPage();
+    }
+    clearFilters() {
+        this.activeFilters.set([]);
+        this.panelInitialFilters.set([]);
+        this.pageIndex.set(0);
+        this.queryFiltersKey.update((key) => key + 1);
+        void this.loadPage();
+    }
+    onPageChanged(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        const nextIndex = Math.floor(event.skip / event.take);
+        if (nextIndex === this.pageIndex() && event.take === this.pageSize()) {
+            return;
+        }
+        this.pageSize.set(event.take);
+        this.pageIndex.set(nextIndex);
+        void this.loadPage();
+    }
+    async loadPage() {
+        await this.connector.loadPage(this.activeFilters(), this.pageIndex() * this.pageSize(), this.pageSize());
+    }
+    async loadFilterDefinitions() {
+        const [allLabel, unreadLabel, chatLabel, commentLabel, fileLabel, logLabel, warningLabel, dangerLabel, noticeLabel, inAppLabel, emailLabel, smsLabel, inboxLabel, archiveLabel,] = await Promise.all([
+            this.translateService.translateAsync('@notification-management:all'),
+            this.translateService.translateAsync('@notification-management:unread'),
+            this.translateService.translateAsync('@notification-management:filters.type.options.chat'),
+            this.translateService.translateAsync('@notification-management:filters.type.options.comment'),
+            this.translateService.translateAsync('@notification-management:filters.type.options.file'),
+            this.translateService.translateAsync('@notification-management:filters.type.options.log'),
+            this.translateService.translateAsync('@notification-management:filters.priority.options.warning'),
+            this.translateService.translateAsync('@notification-management:filters.priority.options.danger'),
+            this.translateService.translateAsync('@notification-management:filters.priority.options.notice'),
+            this.translateService.translateAsync('@notification-management:filters.channel.options.in-app'),
+            this.translateService.translateAsync('@notification-management:filters.channel.options.email'),
+            this.translateService.translateAsync('@notification-management:filters.channel.options.sms'),
+            this.translateService.translateAsync('@notification-management:filters.category.options.inbox'),
+            this.translateService.translateAsync('@notification-management:filters.category.options.archive'),
+        ]);
+        this.filterDefinitions.set([
+            {
+                field: 'all',
+                title: '@notification-management:filters.search.title',
+                icon: 'fa-light fa-magnifying-glass',
+                widget: { type: 'string-filter' },
+                filterType: { inline: true, advance: false },
+            },
+            {
+                field: 'readStatus',
+                operator: { type: 'equal' },
+                title: '@notification-management:filters.read-status.title',
+                icon: 'fa-light fa-envelope-open-text',
+                widget: {
+                    type: 'select-filter',
+                    options: {
+                        dataSource: [
+                            { id: 'all', title: allLabel },
+                            { id: 'unread', title: unreadLabel },
+                        ],
+                        valueField: 'id',
+                        textField: 'title',
+                        allowClear: true,
+                    },
+                },
+                filterType: { advance: true, inline: false },
+            },
+            {
+                field: 'type',
+                operator: { type: 'equal' },
+                title: '@notification-management:filters.type.title',
+                icon: 'fa-light fa-shapes',
+                widget: {
+                    type: 'select-filter',
+                    options: {
+                        dataSource: [
+                            { id: 'Chat', title: chatLabel },
+                            { id: 'Comment', title: commentLabel },
+                            { id: 'File', title: fileLabel },
+                            { id: 'Log', title: logLabel },
+                        ],
+                        valueField: 'id',
+                        textField: 'title',
+                        allowClear: true,
+                    },
+                },
+                filterType: { advance: true, inline: false },
+            },
+            {
+                field: 'priority',
+                operator: { type: 'equal' },
+                title: '@notification-management:filters.priority.title',
+                icon: 'fa-light fa-flag',
+                widget: {
+                    type: 'select-filter',
+                    options: {
+                        dataSource: [
+                            { id: 'Warning', title: warningLabel },
+                            { id: 'Danger', title: dangerLabel },
+                            { id: 'Notice', title: noticeLabel },
+                        ],
+                        valueField: 'id',
+                        textField: 'title',
+                        allowClear: true,
+                    },
+                },
+                filterType: { advance: true, inline: false },
+            },
+            {
+                field: 'channel',
+                operator: { type: 'equal' },
+                title: '@notification-management:filters.channel.title',
+                icon: 'fa-light fa-tower-broadcast',
+                widget: {
+                    type: 'select-filter',
+                    options: {
+                        dataSource: [
+                            { id: 'InApp', title: inAppLabel },
+                            { id: 'Email', title: emailLabel },
+                            { id: 'SMS', title: smsLabel },
+                        ],
+                        valueField: 'id',
+                        textField: 'title',
+                        allowClear: true,
+                    },
+                },
+                filterType: { advance: true, inline: false },
+            },
+            {
+                field: 'category',
+                operator: { type: 'equal' },
+                title: '@notification-management:filters.category.title',
+                icon: 'fa-light fa-inbox',
+                widget: {
+                    type: 'select-filter',
+                    options: {
+                        dataSource: [
+                            { id: 'Inbox', title: inboxLabel },
+                            { id: 'Archive', title: archiveLabel },
+                        ],
+                        valueField: 'id',
+                        textField: 'title',
+                        allowClear: true,
+                    },
+                },
+                filterType: { advance: true, inline: false },
+            },
+        ]);
+    }
+    //#endregion
+    //#region ----   UI Handlers   ----
+    async onRefresh() {
+        await this.connector.getList();
+        await this.loadPage();
+    }
+    async onMarkAllAsRead() {
+        await this.connector.markAllAsRead();
+        await this.loadPage();
+    }
+    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);
+        this.recompute();
+    }
+    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());
+        this.recompute();
+        await this.loadPage();
+    }
+    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());
+        this.recompute();
+        await this.loadPage();
+    }
+    deselectAll() {
+        if (this.selectedCount() > 0) {
+            this.selectedIds.set(new Set());
+        }
+        if (this.isEditing()) {
+            this.isEditing.set(false);
+        }
+        this.recompute();
+    }
+    async onItemPress(id) {
+        if (this.isEditing()) {
+            this.toggleSelectionById(id);
+            return;
+        }
+        if (this.selectedCount() > 0) {
+            return;
+        }
+        await this.connector.markAsRead({ id: [id] });
+        await this.loadPage();
+    }
+    toggleSelectionById(id) {
+        const next = new Set(this.selectedIds());
+        if (next.has(id)) {
+            next.delete(id);
+        }
+        else {
+            next.add(id);
+        }
+        this.selectedIds.set(next);
+        this.recompute();
+    }
+    async onTogglePin(id) {
+        await this.connector.togglePin(id);
+        await this.loadPage();
+    }
+    slidingItemsHandler(item, action) {
+        switch (action) {
+            case 'mark-as-read':
+                void this.markSelectedAsRead(item);
+                break;
+            case 'delete':
+                void this.deleteSelected(item);
+                break;
+        }
+    }
+    handleContextMenuItemClick(e) {
+        const item = this.contextItem();
+        if (!item) {
+            return;
+        }
+        switch (e.item.name) {
+            case 'mark-as-read':
+                void this.markSelectedAsRead(item);
+                break;
+            case 'pin':
+            case 'unpin':
+                void this.onTogglePin(item.id);
+                break;
+            case 'delete':
+                void this.deleteSelected(item);
+                break;
+        }
+    }
+    async handleContextMenuOpening(e) {
+        const item = this.contextItem();
+        const isPinned = item?.template.isPinned ?? false;
+        e.items = [
+            {
+                name: isPinned ? 'unpin' : 'pin',
+                text: await this.translateService.translateAsync(isPinned ? '@notification-management:actions.unpin' : '@notification-management:actions.pin'),
+                icon: isPinned ? 'fa-light fa-thumbtack-slash' : 'fa-light fa-thumbtack',
+                color: 'default',
+            },
+            {
+                name: 'mark-as-read',
+                text: await this.translateService.translateAsync('@notification-management:actions.mark-as-read'),
+                icon: 'fa-light fa-envelopes-bulk',
+                color: 'primary',
+            },
+            {
+                name: 'delete',
+                text: await this.translateService.translateAsync('@notification-management:actions.delete'),
+                icon: 'fa-light fa-trash-can',
+                color: 'danger',
+            },
+        ];
+    }
+    openContextMenu(e, item) {
+        if (this.isEditing() || this.selectedCount() > 0) {
+            return;
+        }
+        e.preventDefault();
+        this.contextItem.set(item);
+        this.contextMenu()?.showAt({
+            x: e.clientX,
+            y: e.clientY,
+        });
+    }
+    //#endregion
+    //#region ----   Helper Methods for State Message   ----
+    getNotificationIcon() {
+        if (this.searchText()) {
+            return 'fa-solid fa-magnifying-glass';
+        }
+        if (this.isUnreadFilterActive()) {
+            return 'fa-solid fa-check-circle';
+        }
+        return 'fa-solid fa-bell';
+    }
+    getNotificationTitle() {
+        if (this.hasActiveFilters()) {
+            return '@notification-management:state-message.no-results.title';
+        }
+        if (this.isUnreadFilterActive()) {
+            return '@notification-management:state-message.all-caught-up.title';
+        }
+        return '@notification-management:state-message.no-notifications.title';
+    }
+    getNotificationDescriptionKey() {
+        if (this.hasActiveFilters()) {
+            return '@notification-management:state-message.no-results.description';
+        }
+        if (this.isUnreadFilterActive()) {
+            return '@notification-management:state-message.all-caught-up.description';
+        }
+        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()" }, classAttribute: "axm-notification-page" }, providers: [
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXMNotificationPageComponent,
+            },
+        ], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout>\n  <axp-page-toolbar>\n    <div class=\"axm-notification-page__toolbar\">\n      <axp-layout-prefix class=\"ax-w-full\">\n        @if (selectedCount() > 0 || isEditing()) {\n          <div class=\"axm-notification-page__selection-bar\">\n            <span class=\"axm-notification-page__selection-count\">\n              {{ selectedCount() }} {{ '@general:terms.items-selected' | translate | async }}\n            </span>\n            <button type=\"button\" class=\"axm-notification-page__unselect\" (click)=\"deselectAll()\">\n              {{ '@general:actions.unselect.title' | translate | async }}\n            </button>\n          </div>\n        } @else {\n          @for (_k of [queryFiltersKey()]; track _k) {\n            <axp-query-filters\n              class=\"axm-notification-page__filters\"\n              [filtersDefinitions]=\"filterDefinitions()\"\n              [initialFilters]=\"panelInitialFilters()\"\n              (onFiltersChanged)=\"handleFiltersChanged($event)\"\n            />\n          }\n        }\n      </axp-layout-prefix>\n    </div>\n  </axp-page-toolbar>\n\n  <axp-page-content class=\"axm-notification-page__content\">\n    <div class=\"axm-notification-page__panel\">\n      @if (pageLoading()) {\n        <div class=\"axm-notification-page__list axm-notification-page__list--loading\">\n          @for (_ of skeletonPlaceholders(); track $index) {\n            <div class=\"axm-notification-page__skeleton\">\n              <ax-skeleton [animated]=\"true\" class=\"axm-notification-page__skeleton-avatar\"></ax-skeleton>\n              <div class=\"axm-notification-page__skeleton-body\">\n                <ax-skeleton [animated]=\"true\" class=\"axm-notification-page__skeleton-line --wide\"></ax-skeleton>\n                <ax-skeleton [animated]=\"true\" class=\"axm-notification-page__skeleton-line\"></ax-skeleton>\n              </div>\n            </div>\n          }\n        </div>\n      } @else if (pageTotal() === 0) {\n        <axp-state-message\n          mode=\"empty\"\n          [icon]=\"getNotificationIcon()\"\n          [title]=\"getNotificationTitle()\"\n          [description]=\"getNotificationDescriptionKey()\"\n        >\n          @if (hasActiveFilters()) {\n            <ax-button\n              slot=\"actions\"\n              look=\"outline\"\n              [text]=\"('@notification-management:actions.clear-filters' | translate | async) ?? ''\"\n              (onClick)=\"clearFilters()\"\n            />\n          }\n        </axp-state-message>\n      } @else {\n        <div class=\"axm-notification-page__list\">\n          @for (item of pageItems(); track item.id) {\n            @if (deviceService.isMobileDevice()) {\n              <ng-container [ngTemplateOutlet]=\"mobile\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            } @else {\n              <ng-container [ngTemplateOutlet]=\"desktop\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            }\n          }\n        </div>\n\n        <div\n          class=\"axm-notification-page__pager\"\n          [class.axm-notification-page__pager--compact]=\"deviceService.isSmall()\"\n        >\n          <ax-data-pager\n            [displayMode]=\"pagerDisplayMode()\"\n            [total]=\"pageTotal()\"\n            [size]=\"pageSize()\"\n            [value]=\"pageIndex() + 1\"\n            (onChanged)=\"onPageChanged($event)\"\n          />\n        </div>\n      }\n    </div>\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #mobile let-item>\n  <ax-sliding-item class=\"axm-notification-page__sliding-item\">\n    <ax-content class=\"!ax-p-0\">\n      <div\n        class=\"axm-notification-page__row\"\n        [class.--selected]=\"isSelected(item.id)\"\n        (contextmenu)=\"openContextMenu($event, item)\"\n      >\n        @if (isEditing()) {\n          <ax-check-box\n            class=\"axm-notification-page__checkbox\"\n            [ngModel]=\"isSelected(item.id)\"\n            (ngModelChange)=\"toggleSelectionWithModel(item.id, $event)\"\n          >\n            <ax-label></ax-label>\n          </ax-check-box>\n        }\n        <axp-master-notification-item\n          class=\"ax-flex-1 ax-min-w-0\"\n          [data]=\"item\"\n          [selectionMode]=\"isEditing()\"\n          (onPressNotificationItem)=\"onItemPress($event)\"\n          (onTogglePin)=\"onTogglePin($event)\"\n        />\n      </div>\n    </ax-content>\n\n    <ax-sliding-item-suffix (onClick)=\"slidingItemsHandler(item, 'mark-as-read')\" color=\"primary\">\n      <ax-icon class=\"fa-light fa-envelopes-bulk fa-xl\"></ax-icon>\n    </ax-sliding-item-suffix>\n\n    <ax-sliding-item-suffix (onClick)=\"slidingItemsHandler(item, 'delete')\" color=\"danger\">\n      <ax-icon class=\"fa-light fa-trash-can fa-xl\"></ax-icon>\n    </ax-sliding-item-suffix>\n  </ax-sliding-item>\n</ng-template>\n\n<ng-template #desktop let-item>\n  <div\n    class=\"axm-notification-page__row\"\n    [class.--selected]=\"isSelected(item.id)\"\n    (contextmenu)=\"openContextMenu($event, item)\"\n  >\n    @if (isEditing()) {\n      <ax-check-box\n        class=\"axm-notification-page__checkbox\"\n        [ngModel]=\"isSelected(item.id)\"\n        (ngModelChange)=\"toggleSelectionWithModel(item.id, $event)\"\n      >\n        <ax-label></ax-label>\n      </ax-check-box>\n    }\n    <axp-master-notification-item\n      class=\"ax-flex-1 ax-min-w-0\"\n      [data]=\"item\"\n      [selectionMode]=\"isEditing()\"\n      (onPressNotificationItem)=\"onItemPress($event)\"\n      (onTogglePin)=\"onTogglePin($event)\"\n    />\n  </div>\n</ng-template>\n\n<ax-context-menu\n  #contextMenu\n  [openOn]=\"'click'\"\n  [closeOn]=\"'click'\"\n  [orientation]=\"'horizontal'\"\n  (onOpening)=\"handleContextMenuOpening($event)\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n/>\n", styles: [".axm-notification-page__toolbar{display:flex;width:100%;align-items:center;gap:.75rem}.axm-notification-page__filters{width:100%}.axm-notification-page__selection-bar{display:flex;height:2.5rem;align-items:center;gap:.75rem}.axm-notification-page__selection-count{font-size:1.25rem;line-height:1.75rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.axm-notification-page__unselect{cursor:pointer;border-width:0px;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;text-decoration-line:underline;color:rgb(var(--ax-sys-color-on-surface-variant))}.axm-notification-page__content{display:flex;flex:1 1 0%;flex-direction:column;overflow:auto;padding:1rem}@media(min-width:768px){.axm-notification-page__content{padding-left:1.5rem;padding-right:1.5rem}}.axm-notification-page__panel{margin-left:auto;margin-right:auto;display:flex;width:100%;flex:1 1 0%;flex-direction:column;justify-content:space-between;gap:1rem}.axm-notification-page__list{overflow:hidden;border-radius:.5rem;border-width:1px}.axm-notification-page__list--loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.axm-notification-page__list--loading{padding:.5rem}.axm-notification-page__row{display:flex;max-width:100%;align-items:center;gap:.75rem;border-bottom-width:1px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axm-notification-page__row:last-child{border-bottom-width:0px}.axm-notification-page__row:hover{background:rgb(var(--ax-sys-color-lightest-surface))}.axm-notification-page__row.--selected{background:rgb(var(--ax-sys-color-lighter-surface))}.axm-notification-page__checkbox{flex-shrink:0;padding-inline-start:1rem}.axm-notification-page__sliding-item{max-height:6rem;overflow:hidden;border-bottom-width:1px;border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axm-notification-page__sliding-item:last-child{border-bottom-width:0px}.axm-notification-page__pager{flex-shrink:0;border-radius:.5rem;border-width:1px;padding:.5rem .75rem}.axm-notification-page__pager ax-data-pager{width:100%}.axm-notification-page__pager--compact ::ng-deep ax-data-pager{justify-content:center}.axm-notification-page__pager--compact ::ng-deep ax-data-pager .ax-compact-prefix{display:flex;width:100%;justify-content:center}.axm-notification-page__pager--compact ::ng-deep ax-data-pager .ax-compact-suffix{display:none}.axm-notification-page__skeleton{display:flex;gap:1rem;padding:1rem}.axm-notification-page__skeleton-avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axm-notification-page__skeleton-body{flex:1 1 0%}.axm-notification-page__skeleton-body>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axm-notification-page__skeleton-body{padding-top:.25rem;padding-bottom:.25rem}.axm-notification-page__skeleton-line{height:.75rem;border-radius:.375rem;background:rgb(var(--ax-sys-color-lighter-surface))}.axm-notification-page__skeleton-line.--wide{width:75%}.axm-notification-page__skeleton-line:not(.--wide){width:50%}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", 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: AXTranslationModule }, { 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: i1$1.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: 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: i7.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXSlidingItemModule }, { kind: "component", type: i8.AXSlidingItemComponent, selector: "ax-sliding-item" }, { kind: "component", type: i8.AXSlidingItemSuffixComponent, selector: "ax-sliding-item-suffix", inputs: ["color", "text"], outputs: ["onClick"] }, { kind: "component", type: AXMAdminNotificationItemComponent, selector: "axp-master-notification-item", inputs: ["data", "showAvatar", "showDate", "selectionMode"], outputs: ["onPressNotificationItem", "onClosePopover", "onTogglePin"] }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXDataPagerModule }, { kind: "component", type: i9.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }], 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', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMNotificationPageComponent,
+                        },
+                    ], host: {
+                        class: 'axm-notification-page',
+                        '(document:keydown.escape)': 'deselectAll()',
+                    }, imports: [
+                        AXDecoratorModule,
+                        CommonModule,
+                        FormsModule,
+                        AXTranslationModule,
+                        AXCheckBoxModule,
+                        AXSkeletonModule,
+                        AXButtonModule,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXPStateMessageComponent,
+                        AXContextMenuComponent,
+                        AXLabelModule,
+                        AXSlidingItemModule,
+                        AXMAdminNotificationItemComponent,
+                        AXPQueryFiltersComponent,
+                        AXDataPagerModule,
+                    ], template: "<axp-page-layout>\n  <axp-page-toolbar>\n    <div class=\"axm-notification-page__toolbar\">\n      <axp-layout-prefix class=\"ax-w-full\">\n        @if (selectedCount() > 0 || isEditing()) {\n          <div class=\"axm-notification-page__selection-bar\">\n            <span class=\"axm-notification-page__selection-count\">\n              {{ selectedCount() }} {{ '@general:terms.items-selected' | translate | async }}\n            </span>\n            <button type=\"button\" class=\"axm-notification-page__unselect\" (click)=\"deselectAll()\">\n              {{ '@general:actions.unselect.title' | translate | async }}\n            </button>\n          </div>\n        } @else {\n          @for (_k of [queryFiltersKey()]; track _k) {\n            <axp-query-filters\n              class=\"axm-notification-page__filters\"\n              [filtersDefinitions]=\"filterDefinitions()\"\n              [initialFilters]=\"panelInitialFilters()\"\n              (onFiltersChanged)=\"handleFiltersChanged($event)\"\n            />\n          }\n        }\n      </axp-layout-prefix>\n    </div>\n  </axp-page-toolbar>\n\n  <axp-page-content class=\"axm-notification-page__content\">\n    <div class=\"axm-notification-page__panel\">\n      @if (pageLoading()) {\n        <div class=\"axm-notification-page__list axm-notification-page__list--loading\">\n          @for (_ of skeletonPlaceholders(); track $index) {\n            <div class=\"axm-notification-page__skeleton\">\n              <ax-skeleton [animated]=\"true\" class=\"axm-notification-page__skeleton-avatar\"></ax-skeleton>\n              <div class=\"axm-notification-page__skeleton-body\">\n                <ax-skeleton [animated]=\"true\" class=\"axm-notification-page__skeleton-line --wide\"></ax-skeleton>\n                <ax-skeleton [animated]=\"true\" class=\"axm-notification-page__skeleton-line\"></ax-skeleton>\n              </div>\n            </div>\n          }\n        </div>\n      } @else if (pageTotal() === 0) {\n        <axp-state-message\n          mode=\"empty\"\n          [icon]=\"getNotificationIcon()\"\n          [title]=\"getNotificationTitle()\"\n          [description]=\"getNotificationDescriptionKey()\"\n        >\n          @if (hasActiveFilters()) {\n            <ax-button\n              slot=\"actions\"\n              look=\"outline\"\n              [text]=\"('@notification-management:actions.clear-filters' | translate | async) ?? ''\"\n              (onClick)=\"clearFilters()\"\n            />\n          }\n        </axp-state-message>\n      } @else {\n        <div class=\"axm-notification-page__list\">\n          @for (item of pageItems(); track item.id) {\n            @if (deviceService.isMobileDevice()) {\n              <ng-container [ngTemplateOutlet]=\"mobile\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            } @else {\n              <ng-container [ngTemplateOutlet]=\"desktop\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            }\n          }\n        </div>\n\n        <div\n          class=\"axm-notification-page__pager\"\n          [class.axm-notification-page__pager--compact]=\"deviceService.isSmall()\"\n        >\n          <ax-data-pager\n            [displayMode]=\"pagerDisplayMode()\"\n            [total]=\"pageTotal()\"\n            [size]=\"pageSize()\"\n            [value]=\"pageIndex() + 1\"\n            (onChanged)=\"onPageChanged($event)\"\n          />\n        </div>\n      }\n    </div>\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #mobile let-item>\n  <ax-sliding-item class=\"axm-notification-page__sliding-item\">\n    <ax-content class=\"!ax-p-0\">\n      <div\n        class=\"axm-notification-page__row\"\n        [class.--selected]=\"isSelected(item.id)\"\n        (contextmenu)=\"openContextMenu($event, item)\"\n      >\n        @if (isEditing()) {\n          <ax-check-box\n            class=\"axm-notification-page__checkbox\"\n            [ngModel]=\"isSelected(item.id)\"\n            (ngModelChange)=\"toggleSelectionWithModel(item.id, $event)\"\n          >\n            <ax-label></ax-label>\n          </ax-check-box>\n        }\n        <axp-master-notification-item\n          class=\"ax-flex-1 ax-min-w-0\"\n          [data]=\"item\"\n          [selectionMode]=\"isEditing()\"\n          (onPressNotificationItem)=\"onItemPress($event)\"\n          (onTogglePin)=\"onTogglePin($event)\"\n        />\n      </div>\n    </ax-content>\n\n    <ax-sliding-item-suffix (onClick)=\"slidingItemsHandler(item, 'mark-as-read')\" color=\"primary\">\n      <ax-icon class=\"fa-light fa-envelopes-bulk fa-xl\"></ax-icon>\n    </ax-sliding-item-suffix>\n\n    <ax-sliding-item-suffix (onClick)=\"slidingItemsHandler(item, 'delete')\" color=\"danger\">\n      <ax-icon class=\"fa-light fa-trash-can fa-xl\"></ax-icon>\n    </ax-sliding-item-suffix>\n  </ax-sliding-item>\n</ng-template>\n\n<ng-template #desktop let-item>\n  <div\n    class=\"axm-notification-page__row\"\n    [class.--selected]=\"isSelected(item.id)\"\n    (contextmenu)=\"openContextMenu($event, item)\"\n  >\n    @if (isEditing()) {\n      <ax-check-box\n        class=\"axm-notification-page__checkbox\"\n        [ngModel]=\"isSelected(item.id)\"\n        (ngModelChange)=\"toggleSelectionWithModel(item.id, $event)\"\n      >\n        <ax-label></ax-label>\n      </ax-check-box>\n    }\n    <axp-master-notification-item\n      class=\"ax-flex-1 ax-min-w-0\"\n      [data]=\"item\"\n      [selectionMode]=\"isEditing()\"\n      (onPressNotificationItem)=\"onItemPress($event)\"\n      (onTogglePin)=\"onTogglePin($event)\"\n    />\n  </div>\n</ng-template>\n\n<ax-context-menu\n  #contextMenu\n  [openOn]=\"'click'\"\n  [closeOn]=\"'click'\"\n  [orientation]=\"'horizontal'\"\n  (onOpening)=\"handleContextMenuOpening($event)\"\n  (onItemClick)=\"handleContextMenuItemClick($event)\"\n/>\n", styles: [".axm-notification-page__toolbar{display:flex;width:100%;align-items:center;gap:.75rem}.axm-notification-page__filters{width:100%}.axm-notification-page__selection-bar{display:flex;height:2.5rem;align-items:center;gap:.75rem}.axm-notification-page__selection-count{font-size:1.25rem;line-height:1.75rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.axm-notification-page__unselect{cursor:pointer;border-width:0px;background-color:transparent;padding:0;font-size:.875rem;line-height:1.25rem;text-decoration-line:underline;color:rgb(var(--ax-sys-color-on-surface-variant))}.axm-notification-page__content{display:flex;flex:1 1 0%;flex-direction:column;overflow:auto;padding:1rem}@media(min-width:768px){.axm-notification-page__content{padding-left:1.5rem;padding-right:1.5rem}}.axm-notification-page__panel{margin-left:auto;margin-right:auto;display:flex;width:100%;flex:1 1 0%;flex-direction:column;justify-content:space-between;gap:1rem}.axm-notification-page__list{overflow:hidden;border-radius:.5rem;border-width:1px}.axm-notification-page__list--loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * var(--tw-space-y-reverse))}.axm-notification-page__list--loading{padding:.5rem}.axm-notification-page__row{display:flex;max-width:100%;align-items:center;gap:.75rem;border-bottom-width:1px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axm-notification-page__row:last-child{border-bottom-width:0px}.axm-notification-page__row:hover{background:rgb(var(--ax-sys-color-lightest-surface))}.axm-notification-page__row.--selected{background:rgb(var(--ax-sys-color-lighter-surface))}.axm-notification-page__checkbox{flex-shrink:0;padding-inline-start:1rem}.axm-notification-page__sliding-item{max-height:6rem;overflow:hidden;border-bottom-width:1px;border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axm-notification-page__sliding-item:last-child{border-bottom-width:0px}.axm-notification-page__pager{flex-shrink:0;border-radius:.5rem;border-width:1px;padding:.5rem .75rem}.axm-notification-page__pager ax-data-pager{width:100%}.axm-notification-page__pager--compact ::ng-deep ax-data-pager{justify-content:center}.axm-notification-page__pager--compact ::ng-deep ax-data-pager .ax-compact-prefix{display:flex;width:100%;justify-content:center}.axm-notification-page__pager--compact ::ng-deep ax-data-pager .ax-compact-suffix{display:none}.axm-notification-page__skeleton{display:flex;gap:1rem;padding:1rem}.axm-notification-page__skeleton-avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axm-notification-page__skeleton-body{flex:1 1 0%}.axm-notification-page__skeleton-body>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axm-notification-page__skeleton-body{padding-top:.25rem;padding-bottom:.25rem}.axm-notification-page__skeleton-line{height:.75rem;border-radius:.375rem;background:rgb(var(--ax-sys-color-lighter-surface))}.axm-notification-page__skeleton-line.--wide{width:75%}.axm-notification-page__skeleton-line:not(.--wide){width:50%}\n"] }]
+        }], propDecorators: { contextMenu: [{ type: i0.ViewChild, args: ['contextMenu', { isSignal: true }] }] } });
+
+export { AXMNotificationPageComponent };
+//# sourceMappingURL=acorex-modules-notification-management-notification-page.component-ATFOFL7C.mjs.map