aril 1.2.36 → 1.2.38

package/fesm2022/aril-theme-layout.mjs

@@ -1,7 +1,7 @@
 import * as i3$1 from '@angular/common';
 import { CommonModule, UpperCasePipe, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Injectable, effect, signal, computed, inject, ViewChild, HostListener } from '@angular/core';
+import { Component, Injectable, effect, signal, computed, inject, ViewChild, HostListener, untracked } from '@angular/core';
 import * as i1$2 from '@angular/router';
 import { Router, RouterModule, NavigationEnd, RouterLink, RouterOutlet, NavigationCancel, NavigationError, NavigationSkipped } from '@angular/router';
 import * as i8$1 from 'primeng/confirmdialog';
@@ -14,7 +14,7 @@ import * as i7$4 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
 import * as i8$3 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
-import { Observable, Subject, switchMap, BehaviorSubject, takeUntil, of, startWith, filter as filter$1, map as map$1, take } from 'rxjs';
+import { Observable, Subject, switchMap, BehaviorSubject, takeUntil, of, startWith, filter as filter$1, mergeMap, map as map$1, take } from 'rxjs';
 import * as i5 from '@ngneat/transloco';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { API_CONFIGS } from 'aril/boot/config/api';
@@ -75,6 +75,9 @@ import * as i6$2 from 'primeng/autocomplete';
 import { AutoCompleteModule } from 'primeng/autocomplete';
 import { map, filter, switchMap as switchMap$1, catchError } from 'rxjs/operators';
 import * as i7$3 from '@angular/common/http';
+import * as i10$2 from 'primeng/menu';
+import { MenuModule } from 'primeng/menu';
+import { SwitchComponent } from 'aril/ui/switch';
 import * as i4$1 from 'primeng/breadcrumb';
 import { BreadcrumbModule } from 'primeng/breadcrumb';
 
@@ -2573,6 +2576,9 @@ class NotificationsService extends RestClient {
     markAsReadNotification(pluginId) {
         return new Observable();
     }
+    markAllAsReadNotification(post) {
+        return new Observable();
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: NotificationsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: NotificationsService, providedIn: 'root' }); }
 }
@@ -2582,10 +2588,13 @@ __decorate([
 __decorate([
     ServiceCall(HTTPMethods.PUTBYDYNAMICPATH, ProxyTypes.ClientSide, 'audits/$/read')
 ], NotificationsService.prototype, "markAsReadNotification", null);
+__decorate([
+    ServiceCall(HTTPMethods.PUTBYPARAMS, ProxyTypes.ClientSide, 'audits/read-all', { success: 'notifications.markedAllAsRead' })
+], NotificationsService.prototype, "markAllAsReadNotification", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: NotificationsService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [], propDecorators: { getNotifications: [], markAsReadNotification: [] } });
+        }], ctorParameters: () => [], propDecorators: { getNotifications: [], markAsReadNotification: [], markAllAsReadNotification: [] } });
 
 class NotificationsSidebarComponent {
     get getUserPhones() {
@@ -2601,14 +2610,25 @@ class NotificationsSidebarComponent {
     get getUserMail() {
         return this.keycloak.getKeycloakInstance().profile?.email;
     }
+    get unreadCount() {
+        return this.layoutService.getUnreadNotificationCount();
+    }
+    get loading() {
+        return !!this.notificationsService.states.getNotifications?.waitingForResponse;
+    }
     constructor(layoutService, notificationsService, translocoService, router, keycloak) {
         this.layoutService = layoutService;
         this.notificationsService = notificationsService;
         this.translocoService = translocoService;
         this.router = router;
         this.keycloak = keycloak;
+        this.pageSize = 10;
         this.notifications = signal([]);
-        this.selectedNotification = null;
+        this.totalRecords = signal(0);
+        this.onlyUnread = signal(true);
+        this.pageNumber = signal(1);
+        this.remainingCount = computed(() => Math.max(this.totalRecords() - this.notifications().length, 0));
+        this.menuItems = [];
         this.ActivityTypesEnum = ActivityTypesEnum;
         this.DetailNotificationTypeEnum = DetailNotificationTypeEnum;
         this.regularIcons = regularIcons;
@@ -2616,45 +2636,74 @@ class NotificationsSidebarComponent {
         this.oneMonthAgo = new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000);
         this.subjects = {
             markAsRead: new Subject(),
+            markAllAsRead: new Subject(),
             loadNotifications: new Subject()
         };
-        this.markAsReadService = toSignal(this.subjects.markAsRead.pipe(switchMap((id) => this.notificationsService.markAsReadNotification(id))));
+        this.markAsReadService = toSignal(this.subjects.markAsRead.pipe(mergeMap((id) => this.notificationsService.markAsReadNotification(id).pipe(map$1((result) => ({ result, id }))))));
+        this.markAllAsReadService = toSignal(this.subjects.markAllAsRead.pipe(switchMap(() => this.notificationsService.markAllAsReadNotification({
+            toList: [this.getUserMail, ...this.getUserPhones],
+            endDate: new Date().dateToLong('time') || 0
+        }))));
         this.loadNotificationsService = toSignal(this.subjects.loadNotifications.pipe(switchMap(() => this.notificationsService.getNotifications({
             pager: {
-                pageSize: 10,
-                pageNumber: 1
+                pageSize: this.pageSize,
+                pageNumber: this.pageNumber()
             },
             startDate: this.oneMonthAgo.dateToLong('time') || 0,
             endDate: new Date().dateToLong('time') || 0,
-            read: false,
-            toList: [this.getUserMail, ...this.getUserPhones],
+            ...(this.onlyUnread() ? { read: false } : {}),
+            toList: [this.getUserMail, ...this.getUserPhones]
         }))));
         this.initializeEffects();
     }
     ngOnInit() {
-        this.loadNotifications();
-    }
-    loadNotifications() {
         this.subjects.loadNotifications.next();
     }
     initializeEffects() {
         effect(() => {
             const service = this.loadNotificationsService();
             if (service?.response) {
-                this.notifications.set(service.response.result);
-                // Update unread count in layoutService
-                this.layoutService.setUnreadNotificationCount(service?.response.resultInfo.totalItem || 0);
+                const result = service.response.result || [];
+                const isFirstPage = untracked(this.pageNumber) === 1;
+                this.notifications.update((current) => isFirstPage ? result : [...current, ...result.filter((item) => !current.some((existing) => existing.id === item.id))]);
+                this.totalRecords.set(service.response.resultInfo.totalItem || 0);
+                if (untracked(this.onlyUnread)) {
+                    this.layoutService.setUnreadNotificationCount(service.response.resultInfo.totalItem || 0);
+                }
+            }
+        }, { allowSignalWrites: true });
+        effect(() => {
+            const marked = this.markAsReadService();
+            if (marked?.result?.response) {
+                this.applyMarkedAsRead(marked.id);
             }
         }, { allowSignalWrites: true });
         effect(() => {
-            const service = this.markAsReadService();
+            const service = this.markAllAsReadService();
             if (service?.response) {
-                this.loadNotifications();
-                if (this.selectedNotification?.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {
-                    this.router.navigate([`mng/todo-tasks/detail/${this.selectedNotification?.referenceId}`]);
-                }
+                this.applyAllMarkedAsRead();
             }
-        });
+        }, { allowSignalWrites: true });
+    }
+    applyMarkedAsRead(id) {
+        if (untracked(this.onlyUnread)) {
+            this.notifications.update((items) => items.filter((item) => item.id !== id));
+            this.totalRecords.update((total) => Math.max(total - 1, 0));
+        }
+        else {
+            this.notifications.update((items) => items.map((item) => (item.id === id ? { ...item, read: true } : item)));
+        }
+        this.layoutService.setUnreadNotificationCount(Math.max(this.layoutService.getUnreadNotificationCount() - 1, 0));
+    }
+    applyAllMarkedAsRead() {
+        if (untracked(this.onlyUnread)) {
+            this.notifications.set([]);
+            this.totalRecords.set(0);
+        }
+        else {
+            this.notifications.update((items) => items.map((item) => (item.read ? item : { ...item, read: true })));
+        }
+        this.layoutService.setUnreadNotificationCount(0);
     }
     get visible() {
         return this.layoutService.state.notificationsSidebarVisible;
@@ -2662,24 +2711,82 @@ class NotificationsSidebarComponent {
     set visible(value) {
         this.layoutService.state.notificationsSidebarVisible = value;
     }
+    onOnlyUnreadChange(value) {
+        this.onlyUnread.set(value);
+        this.pageNumber.set(1);
+        this.notifications.set([]);
+        this.subjects.loadNotifications.next();
+    }
+    onSidebarShow() {
+        this.pageNumber.set(1);
+        this.subjects.loadNotifications.next();
+    }
+    showMore() {
+        this.pageNumber.set(Math.floor(this.notifications().length / this.pageSize) + 1);
+        this.subjects.loadNotifications.next();
+    }
+    toggleMenu(event, menu) {
+        this.menuItems = [
+            ...(this.unreadCount > 0 ?
+                [
+                    {
+                        label: this.translocoService.translate('notifications.markAllAsRead'),
+                        icon: 'pi pi-check-circle',
+                        command: () => this.subjects.markAllAsRead.next()
+                    }
+                ]
+                : []),
+            {
+                label: this.translocoService.translate('notifications.allNotificationsPage'),
+                icon: 'pi pi-external-link',
+                command: () => this.navigateToAllNotifications()
+            }
+        ];
+        menu.toggle(event);
+    }
     markNotificationAsRead(notification) {
-        this.selectedNotification = notification;
-        this.subjects.markAsRead.next(notification.id);
-        this.visible = false;
-        if (notification?.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {
-            this.router.navigate([`mng/todo-tasks/detail/${notification?.referenceId}`]);
+        if (!notification.read) {
+            this.subjects.markAsRead.next(notification.id);
         }
-        else if (notification?.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB) {
-            this.router.navigate([`mng/bulk-operations/${notification?.referenceId}`]);
+    }
+    openNotification(notification) {
+        const isTodo = notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM;
+        const isBatch = notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB;
+        if (!isTodo && !isBatch) {
+            return;
         }
+        this.markNotificationAsRead(notification);
+        this.visible = false;
+        const route = isTodo ? `mng/todo-tasks/detail/${notification.referenceId}` : `mng/bulk-operations/${notification.referenceId}`;
+        this.router.navigate([route]);
     }
-    markNotificationAsReadOnDotIcon(notification) {
-        if (!notification.read) {
-            this.subjects.markAsRead.next(notification.id);
+    isNavigable(notification) {
+        return (notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM ||
+            notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB);
+    }
+    getNotificationIcon(notification) {
+        if (notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {
+            return solidIcons.faListCheck;
+        }
+        if (notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB) {
+            return solidIcons.faGear;
         }
+        if (notification.type === ActivityTypesEnum.SMS) {
+            return regularIcons.faMessage;
+        }
+        return notification.read ? regularIcons.faEnvelopeOpen : regularIcons.faEnvelope;
     }
-    trackByNotificationId(index, notification) {
-        return notification.id;
+    getNotificationIconClass(notification) {
+        if (notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {
+            return 'todo';
+        }
+        if (notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB) {
+            return 'batch';
+        }
+        if (notification.type === ActivityTypesEnum.SMS) {
+            return 'sms';
+        }
+        return notification.read ? 'email-read' : 'email-unread';
     }
     getNotificationTitle(notification) {
         return notification.templateTitle || notification.templateCode || '';
@@ -2731,23 +2838,22 @@ class NotificationsSidebarComponent {
         this.visible = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: NotificationsSidebarComponent, deps: [{ token: LayoutService }, { token: NotificationsService }, { token: i5.TranslocoService }, { token: i1$2.Router }, { token: i1.KeycloakService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: NotificationsSidebarComponent, isStandalone: true, selector: "app-notifications-sidebar", ngImport: i0, template: "<p-sidebar\r\n\t[(visible)]=\"visible\"\r\n\tposition=\"right\"\r\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\r\n\tstyleClass=\"layout-notifications-sidebar w-full sm:w-30rem\"\r\n\t*transloco=\"let t; read: 'notifications'\">\r\n\t<ng-template pTemplate=\"header\">\r\n\t\t<div class=\"flex align-items-center justify-content-between w-full\">\r\n\t\t\t<div class=\"flex align-items-center\">\r\n\t\t\t\t<i class=\"pi pi-bell text-primary text-xl\"></i>\r\n\t\t\t\t<span class=\"font-bold text-lg\">{{ t('title') }}</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<div class=\"notifications-content\">\r\n\t\t@if (notifications().length > 0) {\r\n\t\t\t<div class=\"notifications-list\">\r\n\t\t\t\t<p-scrollPanel [style]=\"{ width: '100%', height: '100%' }\">\r\n\t\t\t\t\t<div class=\"notifications-items\">\r\n\t\t\t\t\t\t@for (notification of notifications(); track trackByNotificationId($index, notification)) {\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclass=\"notification-item\"\r\n\t\t\t\t\t\t\t\t[class.unread-item]=\"!notification.read\"\r\n\t\t\t\t\t\t\t\t(click)=\"\r\n\t\t\t\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t\t\t\tnotification?.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM ||\r\n\t\t\t\t\t\t\t\t\t\tnotification?.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB\r\n\t\t\t\t\t\t\t\t\t) ?\r\n\t\t\t\t\t\t\t\t\t\tmarkNotificationAsRead(notification)\r\n\t\t\t\t\t\t\t\t\t:\tnull\r\n\t\t\t\t\t\t\t\t\">\r\n\t\t\t\t\t\t\t\t<div class=\"item-content\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"item-header\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"item-title\">\r\n\t\t\t\t\t\t\t\t\t\t\t@if (notification.type === ActivityTypesEnum.SMS) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"notification-icon sms-icon\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<fa-icon [icon]=\"regularIcons.faMessage\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t@if (!notification.read) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"notification-icon email-icon unread\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<fa-icon [icon]=\"regularIcons.faEnvelope\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"notification-icon email-icon read\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<fa-icon [icon]=\"regularIcons.faEnvelopeOpen\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t<p class=\"title-text ml-2\">{{ getNotificationTitle(notification) }}</p>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"notification-date\">{{ formatNotificationDate(notification.sendingDate) }}</span>\r\n\t\t\t\t\t\t\t\t\t\t@if (!notification.read) {\r\n\t\t\t\t\t\t\t\t\t\t\t<fa-icon\r\n\t\t\t\t\t\t\t\t\t\t\t\t[icon]=\"solidIcons.faCircle\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"unread-dot\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t[pTooltip]=\"t('markAsRead')\"\r\n\t\t\t\t\t\t\t\t\t\t\t\ttooltipPosition=\"left\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"markNotificationAsReadOnDotIcon(notification); $event.stopPropagation()\">\r\n\t\t\t\t\t\t\t\t\t\t\t</fa-icon>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"item-meta\"></div>\r\n\t\t\t\t\t\t\t\t\t@if (getNotificationContent(notification)) {\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"item-content-preview\">\r\n\t\t\t\t\t\t\t\t\t\t\t@if (notification.type === ActivityTypesEnum.EMAIL) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div [innerHTML]=\"notification.content | safe: 'html'\" class=\"html-preview line-clamp-3\"></div>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"text-content\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ getNotificationContent(notification) }}\r\n\t\t\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</p-scrollPanel>\r\n\t\t\t</div>\r\n\t\t} @else {\r\n\t\t\t<div class=\"empty-state\">\r\n\t\t\t\t<div class=\"empty-content\">\r\n\t\t\t\t\t<i class=\"pi pi-bell empty-icon\"></i>\r\n\t\t\t\t\t<h3 class=\"empty-title\">{{ t('noNotifications') }}</h3>\r\n\t\t\t\t\t<p class=\"empty-message\">{{ t('noNotificationsDescription') }}</p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t}\r\n\r\n\t\t<div class=\"flex justify-content-center p-2 border-top-1 surface-border\">\r\n\t\t\t<aril-button\r\n\t\t\t\t[label]=\"t('allShow')\"\r\n\t\t\t\ticon=\"EXTERNAL_LINK\"\r\n\t\t\t\tcolor=\"primary\"\r\n\t\t\t\tsize=\"md\"\r\n\t\t\t\t(clickEvent)=\"navigateToAllNotifications()\">\r\n\t\t\t</aril-button>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<p-confirmDialog></p-confirmDialog>\r\n</p-sidebar>\r\n", styles: [":host ::ng-deep .layout-notifications-sidebar .p-sidebar-content{padding:0;background:var(--surface-ground)}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header{background:var(--primary-color);color:var(--primary-color-text);padding:1rem 1.5rem}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header span{font-size:1.1rem;font-weight:600}.notifications-content{display:flex;flex-direction:column;height:100%;background:var(--surface-0)}.add-section{display:flex;align-items:center;gap:.5rem;padding:1rem;border-bottom:1px solid var(--surface-border);background:var(--surface-0)}.notifications-list{flex:1;overflow:hidden}.notifications-items{padding:0}.notification-item{background:transparent;border-bottom:1px solid var(--surface-border);cursor:pointer;transition:background-color .2s ease;position:relative}.notification-item:hover{background:var(--surface-hover)}.notification-item:last-child{border-bottom:none}.notification-item.unread-item{background:var(--surface-50)}.notification-item.unread-item:hover{background:var(--surface-100)}.notification-item.unread-item .title-text{font-weight:500}.item-content{padding:1.125rem 1rem}.item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.625rem;gap:1rem}.item-title{display:flex;align-items:center;flex:1;min-width:0;gap:.4em}.item-title .notification-icon{width:1.75rem;height:1.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}.item-title .notification-icon fa-icon{font-size:.875rem;transition:all .2s ease}.item-title .notification-icon.email-icon.unread{background-color:#3b82f6;color:#fff;box-shadow:0 1px 4px #00000026}.item-title .notification-icon.email-icon.unread fa-icon{color:#fff}.item-title .notification-icon.email-icon.read{background:var(--surface-200);color:var(--text-color-secondary)}.item-title .notification-icon.email-icon.read fa-icon{color:var(--text-color-secondary)}.item-title .notification-icon.sms-icon{background:linear-gradient(135deg,var(--green-500),var(--green-600));color:#fff;box-shadow:0 2px 8px #22c55e40}.item-title .notification-icon.sms-icon fa-icon{color:#fff}.item-title .title-text{font-weight:500;line-height:1.5;font-size:.975rem;margin:0}.notification-date{font-size:.8rem;color:var(--text-color-secondary);font-weight:500;white-space:nowrap;background:var(--surface-100);padding:.2rem .4rem;border-radius:.25rem}.item-content-preview{margin-top:.625rem;color:var(--text-color-secondary);padding-left:1.5rem;border-left:2px solid var(--surface-200)}.item-content-preview .text-content{font-size:.875rem;line-height:1.5;margin:0;font-style:italic}.item-content-preview .html-preview{font-size:.875rem;line-height:1.5;max-height:75px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;word-break:break-word;white-space:normal;font-style:italic}.empty-state{display:flex;align-items:center;justify-content:center;flex:1;padding:2rem}.empty-state .empty-content{text-align:center}.empty-state .empty-content .empty-icon{font-size:4rem;color:var(--text-color-secondary);opacity:.3;margin-bottom:1rem}.empty-state .empty-content .empty-title{font-size:1.25rem;font-weight:600;color:var(--text-color);margin-bottom:.5rem}.empty-state .empty-content .empty-message{color:var(--text-color-secondary);margin:0}.unread-dot{color:#3b82f6;font-size:.625rem;cursor:pointer;transition:opacity .2s ease;opacity:.8}.unread-dot:hover{opacity:1}@media (max-width: 768px){.layout-notifications-sidebar ::ng-deep .p-sidebar{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i6$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ScrollPanelModule }, { kind: "component", type: i7$1.ScrollPanel, selector: "p-scrollPanel", inputs: ["style", "styleClass", "step"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i8$1.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: ButtonComponent, selector: "aril-button:not([click])", inputs: ["label", "loading", "disabled", "raised", "rounded", "text", "outlined", "badge", "size", "icon", "iconPos", "color"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i10.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: NotificationsSidebarComponent, isStandalone: true, selector: "app-notifications-sidebar", ngImport: i0, template: "<p-sidebar\r\n\t[(visible)]=\"visible\"\r\n\tposition=\"right\"\r\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\r\n\tstyleClass=\"layout-notifications-sidebar w-full sm:w-30rem\"\r\n\t(onShow)=\"onSidebarShow()\"\r\n\t*transloco=\"let t; read: 'notifications'\">\r\n\t<ng-template pTemplate=\"header\">\r\n\t\t<div class=\"flex align-items-center justify-content-between w-full\">\r\n\t\t\t<div class=\"flex align-items-center gap-2\">\r\n\t\t\t\t<i class=\"pi pi-bell text-xl\"></i>\r\n\t\t\t\t<span class=\"font-bold text-lg\">{{ t('title') }}</span>\r\n\t\t\t\t@if (unreadCount > 0) {\r\n\t\t\t\t\t<span class=\"unread-count-chip\">{{ unreadCount }}</span>\r\n\t\t\t\t}\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 header-actions\">\r\n\t\t\t\t<span class=\"only-unread-label\">{{ t('onlyUnread') }}</span>\r\n\t\t\t\t<aril-switch [ngModel]=\"onlyUnread()\" (ngModelChange)=\"onOnlyUnreadChange($event)\"></aril-switch>\r\n\t\t\t\t<i class=\"pi pi-ellipsis-v header-menu-icon\" (click)=\"toggleMenu($event, headerMenu)\"></i>\r\n\t\t\t\t<p-menu #headerMenu [popup]=\"true\" [model]=\"menuItems\" appendTo=\"body\"></p-menu>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<div class=\"notifications-content\">\r\n\t\t@if (notifications().length > 0) {\r\n\t\t\t<div class=\"notifications-list\">\r\n\t\t\t\t<div class=\"notifications-items\">\r\n\t\t\t\t\t@for (notification of notifications(); track notification.id) {\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"notification-item\"\r\n\t\t\t\t\t\t\t[class.unread-item]=\"!notification.read\"\r\n\t\t\t\t\t\t\t[class.navigable]=\"isNavigable(notification)\"\r\n\t\t\t\t\t\t\t(click)=\"openNotification(notification)\">\r\n\t\t\t\t\t\t\t<div class=\"notification-icon\" [ngClass]=\"getNotificationIconClass(notification)\">\r\n\t\t\t\t\t\t\t\t<fa-icon [icon]=\"getNotificationIcon(notification)\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"item-body\">\r\n\t\t\t\t\t\t\t\t<div class=\"item-header\">\r\n\t\t\t\t\t\t\t\t\t<p class=\"item-title\">{{ getNotificationTitle(notification) }}</p>\r\n\t\t\t\t\t\t\t\t\t<span class=\"item-time\">{{ formatNotificationDate(notification.sendingDate) }}</span>\r\n\t\t\t\t\t\t\t\t\t@if (!notification.read) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"item-actions\">\r\n\t\t\t\t\t\t\t\t\t\t\t<fa-icon\r\n\t\t\t\t\t\t\t\t\t\t\t\t[icon]=\"solidIcons.faCircle\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"unread-dot\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t[pTooltip]=\"t('markAsRead')\"\r\n\t\t\t\t\t\t\t\t\t\t\t\ttooltipPosition=\"left\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"markNotificationAsRead(notification); $event.stopPropagation()\">\r\n\t\t\t\t\t\t\t\t\t\t\t</fa-icon>\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"mark-read-action\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t[pTooltip]=\"t('markAsRead')\"\r\n\t\t\t\t\t\t\t\t\t\t\t\ttooltipPosition=\"left\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"markNotificationAsRead(notification); $event.stopPropagation()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"pi pi-check\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t@if (getNotificationContent(notification)) {\r\n\t\t\t\t\t\t\t\t\t@if (notification.type === ActivityTypesEnum.EMAIL) {\r\n\t\t\t\t\t\t\t\t\t\t<div [innerHTML]=\"notification.content | safe: 'html'\" class=\"item-preview html-preview\"></div>\r\n\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t<p class=\"item-preview\">{{ getNotificationContent(notification) }}</p>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {\r\n\t\t\t\t\t\t\t\t\t<span class=\"nav-chip\">{{ t('goToTaskDetail') }} <i class=\"pi pi-arrow-right\"></i></span>\r\n\t\t\t\t\t\t\t\t} @else if (notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB) {\r\n\t\t\t\t\t\t\t\t\t<span class=\"nav-chip\">{{ t('goToBulkOperations') }} <i class=\"pi pi-arrow-right\"></i></span>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@if (remainingCount() > 0) {\r\n\t\t\t\t\t\t<div class=\"show-more\">\r\n\t\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t\t[label]=\"t('showMore', { count: remainingCount() })\"\r\n\t\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t\tsize=\"sm\"\r\n\t\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\t\t[loading]=\"loading\"\r\n\t\t\t\t\t\t\t\t(clickEvent)=\"showMore()\">\r\n\t\t\t\t\t\t\t</aril-button>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t} @else if (!loading) {\r\n\t\t\t<div class=\"empty-state\">\r\n\t\t\t\t<div class=\"empty-content\">\r\n\t\t\t\t\t<i class=\"pi pi-bell empty-icon\"></i>\r\n\t\t\t\t\t<h3 class=\"empty-title\">{{ t('noNotifications') }}</h3>\r\n\t\t\t\t\t<p class=\"empty-message\">{{ t('noNotificationsDescription') }}</p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t}\r\n\t</div>\r\n</p-sidebar>\r\n", styles: [":host ::ng-deep .layout-notifications-sidebar .p-sidebar-content{padding:0;background:var(--surface-ground)}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header{background:var(--primary-color);color:var(--primary-color-text);padding:1rem 1.5rem}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header span{font-size:1.1rem;font-weight:600}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header .p-sidebar-close{color:var(--primary-color-text)}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover{background:#ffffff26;color:var(--primary-color-text)}:host ::ng-deep .layout-notifications-sidebar .header-actions .p-inputswitch{transform:scale(.8)}:host ::ng-deep .layout-notifications-sidebar .header-actions .p-inputswitch .p-inputswitch-slider{background:#ffffff4d}:host ::ng-deep .layout-notifications-sidebar .header-actions .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{background:var(--green-500)}:host ::ng-deep .layout-notifications-sidebar .header-actions .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider{background:var(--green-600)}:host ::ng-deep .layout-notifications-sidebar .header-actions .only-unread-label{font-size:.78rem;font-weight:500}:host ::ng-deep .item-preview.html-preview *{font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;font-style:inherit!important;color:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;text-align:left!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;display:inline!important}:host ::ng-deep .item-preview.html-preview p:after,:host ::ng-deep .item-preview.html-preview div:after,:host ::ng-deep .item-preview.html-preview li:after{content:\" \"}:host ::ng-deep .item-preview.html-preview img,:host ::ng-deep .item-preview.html-preview table,:host ::ng-deep .item-preview.html-preview hr,:host ::ng-deep .item-preview.html-preview br{display:none!important}.notifications-content{display:flex;flex-direction:column;height:100%;background:var(--surface-ground)}.unread-count-chip{background:#ffffff40;border-radius:999px;font-size:.72rem!important;font-weight:600!important;padding:.1rem .55rem}.header-menu-icon{cursor:pointer;font-size:1.1rem;padding:.25rem;color:var(--primary-color-text);border-radius:6px;transition:background-color .15s ease}.header-menu-icon:hover{background:#ffffff26}.notifications-list{flex:1;overflow-y:auto}.notifications-items{display:flex;flex-direction:column;gap:.625rem;padding:.75rem}.notification-item{display:flex;gap:.75rem;padding:.875rem 1rem .875rem calc(1rem + 4px);background:var(--surface-card);border:1px solid var(--surface-border);border-radius:8px;transition:background-color .2s ease,border-color .2s ease}.notification-item:hover{background:var(--surface-hover)}.notification-item:hover .unread-dot{display:none}.notification-item:hover .mark-read-action{display:flex}.notification-item.navigable{cursor:pointer}.notification-item.unread-item{border-left-width:5px;border-left-color:var(--primary-color);padding-left:1rem}.notification-item.unread-item .item-title{font-weight:600;color:var(--text-color)}.notification-icon{width:2.25rem;height:2.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.notification-icon fa-icon{font-size:.9rem}.notification-icon.todo{background:var(--purple-100);color:var(--purple-600)}.notification-icon.batch{background:var(--orange-100);color:var(--orange-600)}.notification-icon.sms{background:var(--green-100);color:var(--green-600)}.notification-icon.email-unread{background:var(--blue-100);color:var(--blue-600)}.notification-icon.email-read{background:var(--surface-200);color:var(--text-color-secondary)}.item-body{flex:1;min-width:0}.item-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;min-height:1.5rem}.item-title{flex:1;min-width:0;margin:0;font-size:.875rem;font-weight:500;color:var(--text-color-secondary);line-height:1.4;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.item-time{font-size:.72rem;color:var(--text-color-secondary);white-space:nowrap}.item-actions{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;flex-shrink:0}.unread-dot{color:var(--primary-color);font-size:.5rem;cursor:pointer;opacity:.85}.unread-dot:hover{opacity:1}.mark-read-action{display:none;width:1.5rem;height:1.5rem;border-radius:6px;border:1px solid var(--surface-border);background:var(--surface-card);color:var(--text-color-secondary);align-items:center;justify-content:center;cursor:pointer;padding:0}.mark-read-action:hover{color:var(--primary-color);border-color:var(--primary-color)}.mark-read-action i{font-size:.7rem}.item-preview{margin:0;font-size:.8rem;color:var(--text-color-secondary);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;word-break:break-word;white-space:normal}.nav-chip{display:inline-flex;align-items:center;gap:.3rem;margin-top:.4rem;font-size:.75rem;font-weight:600;color:var(--primary-color)}.nav-chip i{font-size:.65rem}.notification-item.navigable:hover .nav-chip{text-decoration:underline}.show-more{display:flex;justify-content:center;padding:.25rem 0 .5rem}.empty-state{display:flex;align-items:center;justify-content:center;flex:1;padding:2rem}.empty-state .empty-content{text-align:center}.empty-state .empty-content .empty-icon{font-size:4rem;color:var(--text-color-secondary);opacity:.3;margin-bottom:1rem}.empty-state .empty-content .empty-title{font-size:1.25rem;font-weight:600;color:var(--text-color);margin-bottom:.5rem}.empty-state .empty-content .empty-message{color:var(--text-color-secondary);margin:0}@media (max-width: 768px){.layout-notifications-sidebar ::ng-deep .p-sidebar{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SidebarModule }, { kind: "component", type: i6$1.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MenuModule }, { kind: "component", type: i10$2.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i8.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: ButtonComponent, selector: "aril-button:not([click])", inputs: ["label", "loading", "disabled", "raised", "rounded", "text", "outlined", "badge", "size", "icon", "iconPos", "color"], outputs: ["clickEvent"] }, { kind: "component", type: SwitchComponent, selector: "aril-switch[ngModel], aril-switch[formControl], aril-switch[formControlName]", inputs: ["tabindex"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "directive", type: i5.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i10.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: SafePipe, name: "safe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: NotificationsSidebarComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'app-notifications-sidebar', imports: [
                         CommonModule,
+                        FormsModule,
                         SidebarModule,
-                        ScrollPanelModule,
-                        ConfirmDialogModule,
-                        PaginatorModule,
+                        MenuModule,
                         ButtonComponent,
+                        SwitchComponent,
                         TranslocoModule,
                         TooltipModule,
-                        BadgeModule,
                         FontAwesomeModule,
                         SafePipe
-                    ], template: "<p-sidebar\r\n\t[(visible)]=\"visible\"\r\n\tposition=\"right\"\r\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\r\n\tstyleClass=\"layout-notifications-sidebar w-full sm:w-30rem\"\r\n\t*transloco=\"let t; read: 'notifications'\">\r\n\t<ng-template pTemplate=\"header\">\r\n\t\t<div class=\"flex align-items-center justify-content-between w-full\">\r\n\t\t\t<div class=\"flex align-items-center\">\r\n\t\t\t\t<i class=\"pi pi-bell text-primary text-xl\"></i>\r\n\t\t\t\t<span class=\"font-bold text-lg\">{{ t('title') }}</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<div class=\"notifications-content\">\r\n\t\t@if (notifications().length > 0) {\r\n\t\t\t<div class=\"notifications-list\">\r\n\t\t\t\t<p-scrollPanel [style]=\"{ width: '100%', height: '100%' }\">\r\n\t\t\t\t\t<div class=\"notifications-items\">\r\n\t\t\t\t\t\t@for (notification of notifications(); track trackByNotificationId($index, notification)) {\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclass=\"notification-item\"\r\n\t\t\t\t\t\t\t\t[class.unread-item]=\"!notification.read\"\r\n\t\t\t\t\t\t\t\t(click)=\"\r\n\t\t\t\t\t\t\t\t\t(\r\n\t\t\t\t\t\t\t\t\t\tnotification?.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM ||\r\n\t\t\t\t\t\t\t\t\t\tnotification?.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB\r\n\t\t\t\t\t\t\t\t\t) ?\r\n\t\t\t\t\t\t\t\t\t\tmarkNotificationAsRead(notification)\r\n\t\t\t\t\t\t\t\t\t:\tnull\r\n\t\t\t\t\t\t\t\t\">\r\n\t\t\t\t\t\t\t\t<div class=\"item-content\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"item-header\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"item-title\">\r\n\t\t\t\t\t\t\t\t\t\t\t@if (notification.type === ActivityTypesEnum.SMS) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"notification-icon sms-icon\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<fa-icon [icon]=\"regularIcons.faMessage\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t@if (!notification.read) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"notification-icon email-icon unread\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<fa-icon [icon]=\"regularIcons.faEnvelope\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"notification-icon email-icon read\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<fa-icon [icon]=\"regularIcons.faEnvelopeOpen\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\t<p class=\"title-text ml-2\">{{ getNotificationTitle(notification) }}</p>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"notification-date\">{{ formatNotificationDate(notification.sendingDate) }}</span>\r\n\t\t\t\t\t\t\t\t\t\t@if (!notification.read) {\r\n\t\t\t\t\t\t\t\t\t\t\t<fa-icon\r\n\t\t\t\t\t\t\t\t\t\t\t\t[icon]=\"solidIcons.faCircle\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"unread-dot\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t[pTooltip]=\"t('markAsRead')\"\r\n\t\t\t\t\t\t\t\t\t\t\t\ttooltipPosition=\"left\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"markNotificationAsReadOnDotIcon(notification); $event.stopPropagation()\">\r\n\t\t\t\t\t\t\t\t\t\t\t</fa-icon>\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"item-meta\"></div>\r\n\t\t\t\t\t\t\t\t\t@if (getNotificationContent(notification)) {\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"item-content-preview\">\r\n\t\t\t\t\t\t\t\t\t\t\t@if (notification.type === ActivityTypesEnum.EMAIL) {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div [innerHTML]=\"notification.content | safe: 'html'\" class=\"html-preview line-clamp-3\"></div>\r\n\t\t\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"text-content\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{{ getNotificationContent(notification) }}\r\n\t\t\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</p-scrollPanel>\r\n\t\t\t</div>\r\n\t\t} @else {\r\n\t\t\t<div class=\"empty-state\">\r\n\t\t\t\t<div class=\"empty-content\">\r\n\t\t\t\t\t<i class=\"pi pi-bell empty-icon\"></i>\r\n\t\t\t\t\t<h3 class=\"empty-title\">{{ t('noNotifications') }}</h3>\r\n\t\t\t\t\t<p class=\"empty-message\">{{ t('noNotificationsDescription') }}</p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t}\r\n\r\n\t\t<div class=\"flex justify-content-center p-2 border-top-1 surface-border\">\r\n\t\t\t<aril-button\r\n\t\t\t\t[label]=\"t('allShow')\"\r\n\t\t\t\ticon=\"EXTERNAL_LINK\"\r\n\t\t\t\tcolor=\"primary\"\r\n\t\t\t\tsize=\"md\"\r\n\t\t\t\t(clickEvent)=\"navigateToAllNotifications()\">\r\n\t\t\t</aril-button>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<p-confirmDialog></p-confirmDialog>\r\n</p-sidebar>\r\n", styles: [":host ::ng-deep .layout-notifications-sidebar .p-sidebar-content{padding:0;background:var(--surface-ground)}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header{background:var(--primary-color);color:var(--primary-color-text);padding:1rem 1.5rem}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header span{font-size:1.1rem;font-weight:600}.notifications-content{display:flex;flex-direction:column;height:100%;background:var(--surface-0)}.add-section{display:flex;align-items:center;gap:.5rem;padding:1rem;border-bottom:1px solid var(--surface-border);background:var(--surface-0)}.notifications-list{flex:1;overflow:hidden}.notifications-items{padding:0}.notification-item{background:transparent;border-bottom:1px solid var(--surface-border);cursor:pointer;transition:background-color .2s ease;position:relative}.notification-item:hover{background:var(--surface-hover)}.notification-item:last-child{border-bottom:none}.notification-item.unread-item{background:var(--surface-50)}.notification-item.unread-item:hover{background:var(--surface-100)}.notification-item.unread-item .title-text{font-weight:500}.item-content{padding:1.125rem 1rem}.item-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.625rem;gap:1rem}.item-title{display:flex;align-items:center;flex:1;min-width:0;gap:.4em}.item-title .notification-icon{width:1.75rem;height:1.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease}.item-title .notification-icon fa-icon{font-size:.875rem;transition:all .2s ease}.item-title .notification-icon.email-icon.unread{background-color:#3b82f6;color:#fff;box-shadow:0 1px 4px #00000026}.item-title .notification-icon.email-icon.unread fa-icon{color:#fff}.item-title .notification-icon.email-icon.read{background:var(--surface-200);color:var(--text-color-secondary)}.item-title .notification-icon.email-icon.read fa-icon{color:var(--text-color-secondary)}.item-title .notification-icon.sms-icon{background:linear-gradient(135deg,var(--green-500),var(--green-600));color:#fff;box-shadow:0 2px 8px #22c55e40}.item-title .notification-icon.sms-icon fa-icon{color:#fff}.item-title .title-text{font-weight:500;line-height:1.5;font-size:.975rem;margin:0}.notification-date{font-size:.8rem;color:var(--text-color-secondary);font-weight:500;white-space:nowrap;background:var(--surface-100);padding:.2rem .4rem;border-radius:.25rem}.item-content-preview{margin-top:.625rem;color:var(--text-color-secondary);padding-left:1.5rem;border-left:2px solid var(--surface-200)}.item-content-preview .text-content{font-size:.875rem;line-height:1.5;margin:0;font-style:italic}.item-content-preview .html-preview{font-size:.875rem;line-height:1.5;max-height:75px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;word-break:break-word;white-space:normal;font-style:italic}.empty-state{display:flex;align-items:center;justify-content:center;flex:1;padding:2rem}.empty-state .empty-content{text-align:center}.empty-state .empty-content .empty-icon{font-size:4rem;color:var(--text-color-secondary);opacity:.3;margin-bottom:1rem}.empty-state .empty-content .empty-title{font-size:1.25rem;font-weight:600;color:var(--text-color);margin-bottom:.5rem}.empty-state .empty-content .empty-message{color:var(--text-color-secondary);margin:0}.unread-dot{color:#3b82f6;font-size:.625rem;cursor:pointer;transition:opacity .2s ease;opacity:.8}.unread-dot:hover{opacity:1}@media (max-width: 768px){.layout-notifications-sidebar ::ng-deep .p-sidebar{width:100%!important}}\n"] }]
+                    ], template: "<p-sidebar\r\n\t[(visible)]=\"visible\"\r\n\tposition=\"right\"\r\n\t[transitionOptions]=\"'.3s cubic-bezier(0, 0, 0.2, 1)'\"\r\n\tstyleClass=\"layout-notifications-sidebar w-full sm:w-30rem\"\r\n\t(onShow)=\"onSidebarShow()\"\r\n\t*transloco=\"let t; read: 'notifications'\">\r\n\t<ng-template pTemplate=\"header\">\r\n\t\t<div class=\"flex align-items-center justify-content-between w-full\">\r\n\t\t\t<div class=\"flex align-items-center gap-2\">\r\n\t\t\t\t<i class=\"pi pi-bell text-xl\"></i>\r\n\t\t\t\t<span class=\"font-bold text-lg\">{{ t('title') }}</span>\r\n\t\t\t\t@if (unreadCount > 0) {\r\n\t\t\t\t\t<span class=\"unread-count-chip\">{{ unreadCount }}</span>\r\n\t\t\t\t}\r\n\t\t\t</div>\r\n\t\t\t<div class=\"flex align-items-center gap-2 header-actions\">\r\n\t\t\t\t<span class=\"only-unread-label\">{{ t('onlyUnread') }}</span>\r\n\t\t\t\t<aril-switch [ngModel]=\"onlyUnread()\" (ngModelChange)=\"onOnlyUnreadChange($event)\"></aril-switch>\r\n\t\t\t\t<i class=\"pi pi-ellipsis-v header-menu-icon\" (click)=\"toggleMenu($event, headerMenu)\"></i>\r\n\t\t\t\t<p-menu #headerMenu [popup]=\"true\" [model]=\"menuItems\" appendTo=\"body\"></p-menu>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</ng-template>\r\n\r\n\t<div class=\"notifications-content\">\r\n\t\t@if (notifications().length > 0) {\r\n\t\t\t<div class=\"notifications-list\">\r\n\t\t\t\t<div class=\"notifications-items\">\r\n\t\t\t\t\t@for (notification of notifications(); track notification.id) {\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"notification-item\"\r\n\t\t\t\t\t\t\t[class.unread-item]=\"!notification.read\"\r\n\t\t\t\t\t\t\t[class.navigable]=\"isNavigable(notification)\"\r\n\t\t\t\t\t\t\t(click)=\"openNotification(notification)\">\r\n\t\t\t\t\t\t\t<div class=\"notification-icon\" [ngClass]=\"getNotificationIconClass(notification)\">\r\n\t\t\t\t\t\t\t\t<fa-icon [icon]=\"getNotificationIcon(notification)\" />\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div class=\"item-body\">\r\n\t\t\t\t\t\t\t\t<div class=\"item-header\">\r\n\t\t\t\t\t\t\t\t\t<p class=\"item-title\">{{ getNotificationTitle(notification) }}</p>\r\n\t\t\t\t\t\t\t\t\t<span class=\"item-time\">{{ formatNotificationDate(notification.sendingDate) }}</span>\r\n\t\t\t\t\t\t\t\t\t@if (!notification.read) {\r\n\t\t\t\t\t\t\t\t\t\t<span class=\"item-actions\">\r\n\t\t\t\t\t\t\t\t\t\t\t<fa-icon\r\n\t\t\t\t\t\t\t\t\t\t\t\t[icon]=\"solidIcons.faCircle\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"unread-dot\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t[pTooltip]=\"t('markAsRead')\"\r\n\t\t\t\t\t\t\t\t\t\t\t\ttooltipPosition=\"left\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"markNotificationAsRead(notification); $event.stopPropagation()\">\r\n\t\t\t\t\t\t\t\t\t\t\t</fa-icon>\r\n\t\t\t\t\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"mark-read-action\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t[pTooltip]=\"t('markAsRead')\"\r\n\t\t\t\t\t\t\t\t\t\t\t\ttooltipPosition=\"left\"\r\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"markNotificationAsRead(notification); $event.stopPropagation()\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"pi pi-check\"></i>\r\n\t\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t@if (getNotificationContent(notification)) {\r\n\t\t\t\t\t\t\t\t\t@if (notification.type === ActivityTypesEnum.EMAIL) {\r\n\t\t\t\t\t\t\t\t\t\t<div [innerHTML]=\"notification.content | safe: 'html'\" class=\"item-preview html-preview\"></div>\r\n\t\t\t\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t\t\t\t<p class=\"item-preview\">{{ getNotificationContent(notification) }}</p>\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t@if (notification.detailNotificationType === DetailNotificationTypeEnum.TODO_ITEM) {\r\n\t\t\t\t\t\t\t\t\t<span class=\"nav-chip\">{{ t('goToTaskDetail') }} <i class=\"pi pi-arrow-right\"></i></span>\r\n\t\t\t\t\t\t\t\t} @else if (notification.detailNotificationType === DetailNotificationTypeEnum.BATCH_JOB) {\r\n\t\t\t\t\t\t\t\t\t<span class=\"nav-chip\">{{ t('goToBulkOperations') }} <i class=\"pi pi-arrow-right\"></i></span>\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t\t@if (remainingCount() > 0) {\r\n\t\t\t\t\t\t<div class=\"show-more\">\r\n\t\t\t\t\t\t\t<aril-button\r\n\t\t\t\t\t\t\t\t[label]=\"t('showMore', { count: remainingCount() })\"\r\n\t\t\t\t\t\t\t\tcolor=\"primary\"\r\n\t\t\t\t\t\t\t\tsize=\"sm\"\r\n\t\t\t\t\t\t\t\t[outlined]=\"true\"\r\n\t\t\t\t\t\t\t\t[loading]=\"loading\"\r\n\t\t\t\t\t\t\t\t(clickEvent)=\"showMore()\">\r\n\t\t\t\t\t\t\t</aril-button>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t} @else if (!loading) {\r\n\t\t\t<div class=\"empty-state\">\r\n\t\t\t\t<div class=\"empty-content\">\r\n\t\t\t\t\t<i class=\"pi pi-bell empty-icon\"></i>\r\n\t\t\t\t\t<h3 class=\"empty-title\">{{ t('noNotifications') }}</h3>\r\n\t\t\t\t\t<p class=\"empty-message\">{{ t('noNotificationsDescription') }}</p>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t}\r\n\t</div>\r\n</p-sidebar>\r\n", styles: [":host ::ng-deep .layout-notifications-sidebar .p-sidebar-content{padding:0;background:var(--surface-ground)}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header{background:var(--primary-color);color:var(--primary-color-text);padding:1rem 1.5rem}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header span{font-size:1.1rem;font-weight:600}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header .p-sidebar-close{color:var(--primary-color-text)}:host ::ng-deep .layout-notifications-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover{background:#ffffff26;color:var(--primary-color-text)}:host ::ng-deep .layout-notifications-sidebar .header-actions .p-inputswitch{transform:scale(.8)}:host ::ng-deep .layout-notifications-sidebar .header-actions .p-inputswitch .p-inputswitch-slider{background:#ffffff4d}:host ::ng-deep .layout-notifications-sidebar .header-actions .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider{background:var(--green-500)}:host ::ng-deep .layout-notifications-sidebar .header-actions .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider{background:var(--green-600)}:host ::ng-deep .layout-notifications-sidebar .header-actions .only-unread-label{font-size:.78rem;font-weight:500}:host ::ng-deep .item-preview.html-preview *{font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;font-style:inherit!important;color:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;text-align:left!important;margin:0!important;padding:0!important;border:none!important;background:transparent!important;display:inline!important}:host ::ng-deep .item-preview.html-preview p:after,:host ::ng-deep .item-preview.html-preview div:after,:host ::ng-deep .item-preview.html-preview li:after{content:\" \"}:host ::ng-deep .item-preview.html-preview img,:host ::ng-deep .item-preview.html-preview table,:host ::ng-deep .item-preview.html-preview hr,:host ::ng-deep .item-preview.html-preview br{display:none!important}.notifications-content{display:flex;flex-direction:column;height:100%;background:var(--surface-ground)}.unread-count-chip{background:#ffffff40;border-radius:999px;font-size:.72rem!important;font-weight:600!important;padding:.1rem .55rem}.header-menu-icon{cursor:pointer;font-size:1.1rem;padding:.25rem;color:var(--primary-color-text);border-radius:6px;transition:background-color .15s ease}.header-menu-icon:hover{background:#ffffff26}.notifications-list{flex:1;overflow-y:auto}.notifications-items{display:flex;flex-direction:column;gap:.625rem;padding:.75rem}.notification-item{display:flex;gap:.75rem;padding:.875rem 1rem .875rem calc(1rem + 4px);background:var(--surface-card);border:1px solid var(--surface-border);border-radius:8px;transition:background-color .2s ease,border-color .2s ease}.notification-item:hover{background:var(--surface-hover)}.notification-item:hover .unread-dot{display:none}.notification-item:hover .mark-read-action{display:flex}.notification-item.navigable{cursor:pointer}.notification-item.unread-item{border-left-width:5px;border-left-color:var(--primary-color);padding-left:1rem}.notification-item.unread-item .item-title{font-weight:600;color:var(--text-color)}.notification-icon{width:2.25rem;height:2.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.notification-icon fa-icon{font-size:.9rem}.notification-icon.todo{background:var(--purple-100);color:var(--purple-600)}.notification-icon.batch{background:var(--orange-100);color:var(--orange-600)}.notification-icon.sms{background:var(--green-100);color:var(--green-600)}.notification-icon.email-unread{background:var(--blue-100);color:var(--blue-600)}.notification-icon.email-read{background:var(--surface-200);color:var(--text-color-secondary)}.item-body{flex:1;min-width:0}.item-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;min-height:1.5rem}.item-title{flex:1;min-width:0;margin:0;font-size:.875rem;font-weight:500;color:var(--text-color-secondary);line-height:1.4;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.item-time{font-size:.72rem;color:var(--text-color-secondary);white-space:nowrap}.item-actions{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;flex-shrink:0}.unread-dot{color:var(--primary-color);font-size:.5rem;cursor:pointer;opacity:.85}.unread-dot:hover{opacity:1}.mark-read-action{display:none;width:1.5rem;height:1.5rem;border-radius:6px;border:1px solid var(--surface-border);background:var(--surface-card);color:var(--text-color-secondary);align-items:center;justify-content:center;cursor:pointer;padding:0}.mark-read-action:hover{color:var(--primary-color);border-color:var(--primary-color)}.mark-read-action i{font-size:.7rem}.item-preview{margin:0;font-size:.8rem;color:var(--text-color-secondary);line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;word-break:break-word;white-space:normal}.nav-chip{display:inline-flex;align-items:center;gap:.3rem;margin-top:.4rem;font-size:.75rem;font-weight:600;color:var(--primary-color)}.nav-chip i{font-size:.65rem}.notification-item.navigable:hover .nav-chip{text-decoration:underline}.show-more{display:flex;justify-content:center;padding:.25rem 0 .5rem}.empty-state{display:flex;align-items:center;justify-content:center;flex:1;padding:2rem}.empty-state .empty-content{text-align:center}.empty-state .empty-content .empty-icon{font-size:4rem;color:var(--text-color-secondary);opacity:.3;margin-bottom:1rem}.empty-state .empty-content .empty-title{font-size:1.25rem;font-weight:600;color:var(--text-color);margin-bottom:.5rem}.empty-state .empty-content .empty-message{color:var(--text-color-secondary);margin:0}@media (max-width: 768px){.layout-notifications-sidebar ::ng-deep .p-sidebar{width:100%!important}}\n"] }]
         }], ctorParameters: () => [{ type: LayoutService }, { type: NotificationsService }, { type: i5.TranslocoService }, { type: i1$2.Router }, { type: i1.KeycloakService }] });
 
 class AppLayoutComponent {