ng-prime-tools 1.1.18 → 1.1.20

package/fesm2022/ng-prime-tools.mjs

@@ -52,7 +52,7 @@ import { InputOtpModule } from 'primeng/inputotp';
 import { Chart, registerables } from 'chart.js';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { Subject, interval, BehaviorSubject } from 'rxjs';
-import { takeUntil, filter } from 'rxjs/operators';
+import { takeUntil, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as i1$2 from '@angular/router';
 import { RouterModule, NavigationEnd } from '@angular/router';
 import * as i2$1 from 'primeng/breadcrumb';
@@ -67,6 +67,8 @@ import * as i2$4 from 'primeng/accordion';
 import { AccordionModule } from 'primeng/accordion';
 import * as i5$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
+import * as i2$5 from 'primeng/paginator';
+import { PaginatorModule } from 'primeng/paginator';
 
 /**
  * Calculates the width required for a column based on the header text (column title).
@@ -6080,17 +6082,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 
 class PTNotificationComponent {
     constructor() {
+        /**
+         * Notifications already loaded from the server.
+         *
+         * With infinite scroll, the consumer should append each
+         * newly loaded server page to this array.
+         */
         this.notifications = [];
         this.config = {};
+        /**
+         * Total number of notifications available on the server.
+         *
+         * Used to determine whether another page can be loaded.
+         */
+        this.totalRecords = 0;
+        /**
+         * Last server page currently loaded.
+         *
+         * Zero-based.
+         */
+        this.page = 0;
+        /**
+         * Server page size.
+         */
+        this.rows = 10;
+        /**
+         * True while the consumer is fetching the next page.
+         *
+         * Prevents duplicate loadMore events.
+         */
+        this.loading = false;
         this.notificationClick = new EventEmitter();
         this.action = new EventEmitter();
         this.globalAction = new EventEmitter();
         this.viewAll = new EventEmitter();
         this.panelOpened = new EventEmitter();
         this.panelClosed = new EventEmitter();
+        /**
+         * Emitted when the list approaches its bottom
+         * and another server page is available.
+         */
+        this.loadMore = new EventEmitter();
         this.isOpen = false;
         this.openedActionMenuId = null;
         this.isGlobalActionMenuOpen = false;
+        this.lastRequestedPage = null;
         this.defaultActions = [
             {
                 id: 'MARK_AS_READ',
@@ -6124,6 +6160,7 @@ class PTNotificationComponent {
         this.openedActionMenuId = null;
         this.isGlobalActionMenuOpen = false;
         if (this.isOpen) {
+            this.lastRequestedPage = null;
             this.panelOpened.emit();
             return;
         }
@@ -6136,6 +6173,7 @@ class PTNotificationComponent {
         this.isOpen = false;
         this.openedActionMenuId = null;
         this.isGlobalActionMenuOpen = false;
+        this.lastRequestedPage = null;
         this.panelClosed.emit();
     }
     onPanelClick(event) {
@@ -6143,6 +6181,27 @@ class PTNotificationComponent {
         this.openedActionMenuId = null;
         this.isGlobalActionMenuOpen = false;
     }
+    onListScroll(event) {
+        if (!this.isInfiniteScrollEnabled()) {
+            return;
+        }
+        if (this.loading) {
+            return;
+        }
+        if (!this.hasMoreNotifications()) {
+            return;
+        }
+        const element = event.target;
+        if (!element) {
+            return;
+        }
+        const threshold = this.getInfiniteScrollThreshold();
+        const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+        if (distanceFromBottom > threshold) {
+            return;
+        }
+        this.requestNextPage();
+    }
     onNotificationClick(notification, event) {
         event.stopPropagation();
         if (notification.disabled) {
@@ -6216,6 +6275,9 @@ class PTNotificationComponent {
         return this.getNotifications().length > 0;
     }
     getUnreadCount() {
+        if (this.totalUnreadRecords !== undefined) {
+            return Math.max(0, this.totalUnreadRecords);
+        }
         return this.getNotifications().filter((notification) => notification.read !== true).length;
     }
     hasUnreadNotifications() {
@@ -6242,6 +6304,27 @@ class PTNotificationComponent {
         return (this.config.showGlobalActions !== false &&
             this.getGlobalActions().length > 0);
     }
+    isInfiniteScrollEnabled() {
+        return this.config.infiniteScroll === true;
+    }
+    hasMoreNotifications() {
+        if (!this.isInfiniteScrollEnabled()) {
+            return false;
+        }
+        return this.getNotifications().length < Math.max(0, this.totalRecords);
+    }
+    showInfiniteScrollLoader() {
+        return (this.isInfiniteScrollEnabled() &&
+            this.loading &&
+            this.hasMoreNotifications());
+    }
+    getLoadingText() {
+        return this.config.loadingText?.trim() || 'Chargement...';
+    }
+    getInfiniteScrollThreshold() {
+        const threshold = this.config.infiniteScrollThreshold ?? 80;
+        return Math.max(0, threshold);
+    }
     getTitle() {
         return this.config.title?.trim() || 'Notifications';
     }
@@ -6269,7 +6352,7 @@ class PTNotificationComponent {
     }
     getNotificationClasses(notification) {
         const classes = ['pt-notification-item'];
-        if (!notification.read) {
+        if (notification.read !== true) {
             classes.push('unread');
         }
         if (notification.disabled) {
@@ -6347,6 +6430,25 @@ class PTNotificationComponent {
     hasMetadata(notification) {
         return !!(notification.date || notification.sender?.trim());
     }
+    requestNextPage() {
+        const size = Math.max(1, this.rows);
+        const nextPage = Math.max(0, this.page) + 1;
+        /*
+         * Scroll events may fire several times before
+         * the consumer switches loading=true.
+         *
+         * Avoid emitting the same page repeatedly.
+         */
+        if (this.lastRequestedPage === nextPage) {
+            return;
+        }
+        this.lastRequestedPage = nextPage;
+        this.loadMore.emit({
+            page: nextPage,
+            size,
+            first: nextPage * size,
+        });
+    }
     formatRelativeDate(date) {
         const now = new Date();
         const differenceMs = now.getTime() - date.getTime();
@@ -6375,10 +6477,9 @@ class PTNotificationComponent {
         return this.formatAbsoluteDate(date);
     }
     getCalendarDayDifference(left, right) {
-        const leftDate = new Date(left.getFullYear(), left.getMonth(), left.getDate());
-        const rightDate = new Date(right.getFullYear(), right.getMonth(), right.getDate());
-        const millisecondsPerDay = 24 * 60 * 60 * 1000;
-        return Math.round((leftDate.getTime() - rightDate.getTime()) / millisecondsPerDay);
+        const leftDay = Date.UTC(left.getFullYear(), left.getMonth(), left.getDate());
+        const rightDay = Date.UTC(right.getFullYear(), right.getMonth(), right.getDate());
+        return Math.round((leftDay - rightDay) / (24 * 60 * 60 * 1000));
     }
     toDate(value) {
         if (value instanceof Date) {
@@ -6388,20 +6489,18 @@ class PTNotificationComponent {
         if (!normalized) {
             return null;
         }
-        const parsedDate = new Date(normalized);
-        if (!Number.isNaN(parsedDate.getTime())) {
-            return parsedDate;
-        }
-        const isoWithoutTimezoneMatch = normalized.match(/^(\d{4})-(\d{2})-(\d{2})[T\s](\d{2}):(\d{2})(?::(\d{2}))?(?:\.(\d+))?$/);
-        if (!isoWithoutTimezoneMatch) {
-            return null;
+        /*
+         * Parse a Java LocalDateTime as local wall time.
+         */
+        const localDateMatch = normalized.match(/^(\d{4})-(\d{2})-(\d{2})[T\s](\d{2}):(\d{2})(?::(\d{2}))?(?:\.(\d+))?$/);
+        if (localDateMatch) {
+            const [, year, month, day, hours, minutes, seconds = '0', fraction = ''] = localDateMatch;
+            const milliseconds = Number(fraction.padEnd(3, '0').substring(0, 3) || '0');
+            const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hours), Number(minutes), Number(seconds), milliseconds);
+            return Number.isNaN(date.getTime()) ? null : date;
         }
-        const [, year, month, day, hours, minutes, seconds, fraction] = isoWithoutTimezoneMatch;
-        const milliseconds = fraction
-            ? Number(fraction.padEnd(3, '0').substring(0, 3))
-            : 0;
-        const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hours), Number(minutes), Number(seconds ?? 0), milliseconds);
-        return Number.isNaN(date.getTime()) ? null : date;
+        const parsedDate = new Date(normalized);
+        return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
     }
     formatAbsoluteDate(date) {
         const day = this.pad2(date.getDate());
@@ -6418,15 +6517,25 @@ class PTNotificationComponent {
         return String(value).padStart(2, '0');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNotificationComponent, isStandalone: false, selector: "pt-notification", inputs: { notifications: "notifications", config: "config" }, outputs: { notificationClick: "notificationClick", action: "action", globalAction: "globalAction", viewAll: "viewAll", panelOpened: "panelOpened", panelClosed: "panelClosed" }, host: { listeners: { "document:click": "onDocumentClick()" } }, ngImport: i0, template: "@if (isVisible()) {\n  <div class=\"pt-notification\">\n    <button\n      type=\"button\"\n      class=\"pt-notification-trigger\"\n      aria-label=\"Notifications\"\n      [attr.aria-expanded]=\"isOpen\"\n      (click)=\"togglePanel($event)\"\n    >\n      <i [class]=\"getBellIcon()\"></i>\n\n      @if (showBadge()) {\n        <span class=\"pt-notification-badge\">\n          {{ getBadgeText() }}\n        </span>\n      }\n    </button>\n\n    @if (isOpen) {\n      <div\n        class=\"pt-notification-panel\"\n        [ngStyle]=\"getPanelStyles()\"\n        (click)=\"onPanelClick($event)\"\n      >\n        <div class=\"pt-notification-header\">\n          <div class=\"pt-notification-header-left\">\n            <div class=\"pt-notification-header-title\">\n              {{ getTitle() }}\n            </div>\n\n            @if (showHeaderCount()) {\n              <span class=\"pt-notification-header-count\">\n                {{ getUnreadCount() }}\n              </span>\n            }\n          </div>\n\n          @if (showGlobalActions()) {\n            <div\n              class=\"pt-notification-global-actions\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"pt-notification-global-more-button\"\n                aria-label=\"Notification global actions\"\n                (click)=\"toggleGlobalActionMenu($event)\"\n              >\n                <i class=\"pi pi-ellipsis-v\"></i>\n              </button>\n\n              @if (isGlobalActionMenuOpen) {\n                <div\n                  class=\"pt-notification-global-action-menu\"\n                  (click)=\"onGlobalActionMenuClick($event)\"\n                >\n                  @for (menuAction of getGlobalActions(); track menuAction.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"getActionClasses(menuAction)\"\n                      [disabled]=\"menuAction.disabled\"\n                      (click)=\"onGlobalActionClick(menuAction, $event)\"\n                    >\n                      @if (menuAction.icon) {\n                        <i [class]=\"menuAction.icon\"></i>\n                      }\n\n                      <span>\n                        {{ menuAction.label }}\n                      </span>\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        @if (hasNotifications()) {\n          <div class=\"pt-notification-list\" [ngStyle]=\"getListStyles()\">\n            @for (notification of getNotifications(); track notification.id) {\n              <div\n                [class]=\"getNotificationClasses(notification)\"\n                (click)=\"onNotificationClick(notification, $event)\"\n              >\n                <div class=\"pt-notification-item-icon-wrapper\">\n                  <div class=\"pt-notification-item-icon\">\n                    <i\n                      [class]=\"getNotificationIcon(notification)\"\n                      [ngStyle]=\"getNotificationIconStyles(notification)\"\n                    ></i>\n                  </div>\n                </div>\n\n                <div class=\"pt-notification-item-content\">\n                  <div class=\"pt-notification-item-text\">\n                    {{ notification.text }}\n                  </div>\n\n                  @if (hasMetadata(notification)) {\n                    <div class=\"pt-notification-item-metadata\">\n                      @if (notification.date) {\n                        <span class=\"pt-notification-item-date\">\n                          <i class=\"pi pi-clock\"></i>\n                          {{ getDateText(notification) }}\n                        </span>\n                      }\n\n                      @if (notification.sender) {\n                        <span class=\"pt-notification-item-sender\">\n                          <i class=\"pi pi-user\"></i>\n                          {{ notification.sender }}\n                        </span>\n                      }\n                    </div>\n                  }\n                </div>\n\n                @if (hasActions(notification)) {\n                  <div\n                    class=\"pt-notification-item-actions\"\n                    (click)=\"$event.stopPropagation()\"\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"pt-notification-more-button\"\n                      aria-label=\"Notification actions\"\n                      [disabled]=\"notification.disabled\"\n                      (click)=\"toggleActionMenu(notification, $event)\"\n                    >\n                      <i class=\"pi pi-ellipsis-v\"></i>\n                    </button>\n\n                    @if (isActionMenuOpen(notification)) {\n                      <div\n                        class=\"pt-notification-action-menu\"\n                        (click)=\"onActionMenuClick($event)\"\n                      >\n                        @for (\n                          menuAction of getActions(notification);\n                          track menuAction.id\n                        ) {\n                          <button\n                            type=\"button\"\n                            [class]=\"getActionClasses(menuAction)\"\n                            [disabled]=\"menuAction.disabled\"\n                            (click)=\"\n                              onActionClick(notification, menuAction, $event)\n                            \"\n                          >\n                            @if (menuAction.icon) {\n                              <i [class]=\"menuAction.icon\"></i>\n                            }\n\n                            <span>\n                              {{ menuAction.label }}\n                            </span>\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (!notification.read) {\n                  <span class=\"pt-notification-unread-indicator\"></span>\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"pt-notification-empty\">\n            <i class=\"pi pi-bell-slash\"></i>\n\n            <span>\n              {{ getEmptyText() }}\n            </span>\n          </div>\n        }\n\n        @if (showViewAll()) {\n          <div class=\"pt-notification-footer\">\n            <button\n              type=\"button\"\n              class=\"pt-notification-view-all\"\n              (click)=\"onViewAllClick($event)\"\n            >\n              <span>\n                {{ getViewAllText() }}\n              </span>\n\n              <i [class]=\"getViewAllIcon()\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.pt-notification{position:relative;display:inline-flex;align-items:center;justify-content:center}.pt-notification-trigger{position:relative;width:40px;height:40px;min-width:40px;padding:0;border:none;border-radius:999px;background:transparent;color:var(--pt-notification-bell-color, #475569);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .2s ease,color .2s ease}.pt-notification-trigger:hover{background:var(--pt-notification-bell-hover-bg, #f1f5f9);color:var(--pt-notification-bell-hover-color, #0f172a)}.pt-notification-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-bell-focus-shadow, rgba(37, 99, 235, .16))}.pt-notification-trigger>i{font-size:1.25rem;line-height:1}.pt-notification-badge{position:absolute;top:-1px;right:-3px;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--pt-notification-badge-border, #ffffff);border-radius:999px;background:var(--pt-notification-badge-bg, #dc2626);color:var(--pt-notification-badge-text, #ffffff);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:.65rem;font-weight:800;line-height:1;pointer-events:none}.pt-notification-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;max-width:min(420px,calc(100vw - 24px));background:var(--pt-notification-panel-bg, #ffffff);color:var(--pt-notification-panel-text, #334155);border:1px solid var(--pt-notification-panel-border, #e2e8f0);border-radius:14px;box-shadow:var( --pt-notification-panel-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;overflow:visible;z-index:10000}.pt-notification-header{min-height:52px;padding:0 16px;border-bottom:1px solid var(--pt-notification-header-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}.pt-notification-header-title{min-width:0;color:var(--pt-notification-header-title, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-notification-header-count{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--pt-notification-header-count-bg, #eff6ff);color:var(--pt-notification-header-count-text, #2563eb);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;font-size:.75rem;font-weight:800;line-height:1}.pt-notification-list{overflow-y:auto;overflow-x:visible;overscroll-behavior:contain}.pt-notification-item{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 34px;align-items:flex-start;gap:10px;min-height:76px;padding:13px 14px 13px 12px;border-bottom:1px solid var(--pt-notification-item-border, #f1f5f9);background:var(--pt-notification-item-bg, #ffffff);cursor:pointer;box-sizing:border-box;transition:background-color .15s ease}.pt-notification-item:last-child{border-bottom:none}.pt-notification-item:hover{background:var(--pt-notification-item-hover-bg, #f8fafc)}.pt-notification-item.unread{background:var(--pt-notification-item-unread-bg, #f8fbff)}.pt-notification-item.unread:hover{background:var(--pt-notification-item-unread-hover-bg, #f1f7ff)}.pt-notification-item.disabled{opacity:.55;cursor:not-allowed}.pt-notification-item-icon-wrapper{display:flex;justify-content:center;align-items:flex-start}.pt-notification-item-icon{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-notification-item-icon-bg, #eff6ff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-item-icon i{font-size:1rem;line-height:1}.pt-notification-item-content{min-width:0;padding-top:1px}.pt-notification-item-text{color:var(--pt-notification-item-text, #1e293b);font-size:.86rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.pt-notification-item.unread .pt-notification-item-text{color:var(--pt-notification-item-unread-text, #0f172a);font-weight:700}.pt-notification-item-metadata{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;color:var(--pt-notification-metadata-text, #94a3b8);font-size:.71rem;font-weight:500;line-height:1.3}.pt-notification-item-date,.pt-notification-item-sender{min-width:0;display:inline-flex;align-items:center;gap:4px}.pt-notification-item-date i,.pt-notification-item-sender i{flex:0 0 auto;font-size:.68rem}.pt-notification-item-sender{max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pt-notification-item-actions{position:relative;display:flex;justify-content:flex-end;align-items:flex-start}.pt-notification-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-more-color, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-more-button:hover{background:var(--pt-notification-more-hover-bg, #e2e8f0);color:var(--pt-notification-more-hover-color, #0f172a)}.pt-notification-more-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-more-button:disabled{opacity:.5;cursor:not-allowed}.pt-notification-more-button i{font-size:.95rem;line-height:1}.pt-notification-action-menu{position:absolute;top:34px;right:0;width:200px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10002}.pt-notification-action-menu-item{width:100%;min-height:36px;padding:7px 9px;border:none;border-radius:7px;background:transparent;color:var(--pt-notification-action-text, #334155);display:flex;align-items:center;gap:8px;box-sizing:border-box;text-align:left;cursor:pointer;font-size:.78rem;font-weight:600;transition:background-color .15s ease,color .15s ease}.pt-notification-action-menu-item:hover{background:var(--pt-notification-action-hover-bg, #f1f5f9);color:var(--pt-notification-action-hover-text, #0f172a)}.pt-notification-action-menu-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-action-menu-item.danger{color:var(--pt-notification-action-danger-text, #dc2626)}.pt-notification-action-menu-item.danger:hover{background:var(--pt-notification-action-danger-hover-bg, #fef2f2);color:var(--pt-notification-action-danger-hover-text, #b91c1c)}.pt-notification-action-menu-item.disabled,.pt-notification-action-menu-item:disabled{opacity:.5;cursor:not-allowed}.pt-notification-action-menu-item i{width:16px;flex:0 0 16px;font-size:.82rem;text-align:center}.pt-notification-action-menu-item span{min-width:0;flex:1 1 auto}.pt-notification-unread-indicator{position:absolute;top:50%;right:4px;width:6px;height:6px;border-radius:999px;background:var(--pt-notification-unread-indicator, #2563eb);transform:translateY(-50%);pointer-events:none}.pt-notification-empty{min-height:160px;padding:25px;color:var(--pt-notification-empty-text, #94a3b8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;text-align:center}.pt-notification-empty i{font-size:1.8rem}.pt-notification-empty span{font-size:.84rem;font-weight:600}@media(max-width:520px){.pt-notification-panel{position:fixed;top:60px;right:8px;left:8px;width:auto!important;min-width:0;max-width:none}.pt-notification-item{grid-template-columns:38px minmax(0,1fr) 32px;gap:8px;padding-right:13px}.pt-notification-item-icon{width:36px;height:36px;min-width:36px}.pt-notification-item-metadata{flex-direction:column;align-items:flex-start;gap:4px}.pt-notification-item-sender{max-width:190px}.pt-notification-action-menu{right:0;width:190px}}.pt-notification-header-left{display:flex;align-items:center;gap:8px;min-width:0}.pt-notification-global-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}.pt-notification-global-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-global-more-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-global-more-button:hover{background:var(--pt-notification-global-more-hover-bg, #f1f5f9);color:var(--pt-notification-global-more-hover-color, #0f172a)}.pt-notification-global-more-button i{font-size:.95rem}.pt-notification-global-action-menu{position:absolute;top:36px;right:0;width:210px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10003}.pt-notification-footer{min-height:50px;padding:7px;border-top:1px solid var(--pt-notification-footer-border, #e2e8f0);background:var(--pt-notification-footer-bg, #ffffff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-view-all{width:100%;min-height:36px;padding:7px 12px;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-view-all-text, #2563eb);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:.82rem;font-weight:700;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-view-all:hover{background:var(--pt-notification-view-all-hover-bg, #eff6ff);color:var(--pt-notification-view-all-hover-text, #1d4ed8)}.pt-notification-view-all i{font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNotificationComponent, isStandalone: false, selector: "pt-notification", inputs: { notifications: "notifications", config: "config", totalRecords: "totalRecords", totalUnreadRecords: "totalUnreadRecords", page: "page", rows: "rows", loading: "loading" }, outputs: { notificationClick: "notificationClick", action: "action", globalAction: "globalAction", viewAll: "viewAll", panelOpened: "panelOpened", panelClosed: "panelClosed", loadMore: "loadMore" }, host: { listeners: { "document:click": "onDocumentClick()" } }, ngImport: i0, template: "@if (isVisible()) {\n  <div class=\"pt-notification\">\n    <button\n      type=\"button\"\n      class=\"pt-notification-trigger\"\n      [attr.aria-expanded]=\"isOpen\"\n      aria-label=\"Notifications\"\n      (click)=\"togglePanel($event)\"\n    >\n      <i [class]=\"getBellIcon()\"></i>\n\n      @if (showBadge()) {\n        <span class=\"pt-notification-badge\">\n          {{ getBadgeText() }}\n        </span>\n      }\n    </button>\n\n    @if (isOpen) {\n      <div\n        class=\"pt-notification-panel\"\n        [ngStyle]=\"getPanelStyles()\"\n        (click)=\"onPanelClick($event)\"\n      >\n        <div class=\"pt-notification-header\">\n          <div class=\"pt-notification-header-left\">\n            <div class=\"pt-notification-header-title\">\n              {{ getTitle() }}\n            </div>\n\n            @if (showHeaderCount()) {\n              <span class=\"pt-notification-header-count\">\n                {{ getUnreadCount() }}\n              </span>\n            }\n          </div>\n\n          @if (showGlobalActions()) {\n            <div\n              class=\"pt-notification-global-actions\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"pt-notification-global-more-button\"\n                aria-label=\"Notification global actions\"\n                (click)=\"toggleGlobalActionMenu($event)\"\n              >\n                <i class=\"pi pi-ellipsis-v\"></i>\n              </button>\n\n              @if (isGlobalActionMenuOpen) {\n                <div\n                  class=\"pt-notification-global-action-menu\"\n                  (click)=\"onGlobalActionMenuClick($event)\"\n                >\n                  @for (menuAction of getGlobalActions(); track menuAction.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"getActionClasses(menuAction)\"\n                      [disabled]=\"menuAction.disabled\"\n                      (click)=\"onGlobalActionClick(menuAction, $event)\"\n                    >\n                      @if (menuAction.icon) {\n                        <i [class]=\"menuAction.icon\"></i>\n                      }\n\n                      <span>\n                        {{ menuAction.label }}\n                      </span>\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        @if (hasNotifications()) {\n          <div\n            class=\"pt-notification-list\"\n            [ngStyle]=\"getListStyles()\"\n            (scroll)=\"onListScroll($event)\"\n          >\n            @for (notification of getNotifications(); track notification.id) {\n              <div\n                [class]=\"getNotificationClasses(notification)\"\n                (click)=\"onNotificationClick(notification, $event)\"\n              >\n                <div class=\"pt-notification-item-icon-wrapper\">\n                  <div class=\"pt-notification-item-icon\">\n                    <i\n                      [class]=\"getNotificationIcon(notification)\"\n                      [ngStyle]=\"getNotificationIconStyles(notification)\"\n                    ></i>\n                  </div>\n                </div>\n\n                <div class=\"pt-notification-item-content\">\n                  <div class=\"pt-notification-item-text\">\n                    {{ notification.text }}\n                  </div>\n\n                  @if (hasMetadata(notification)) {\n                    <div class=\"pt-notification-item-metadata\">\n                      @if (notification.date) {\n                        <span class=\"pt-notification-item-date\">\n                          <i class=\"pi pi-clock\"></i>\n\n                          {{ getDateText(notification) }}\n                        </span>\n                      }\n\n                      @if (notification.sender) {\n                        <span class=\"pt-notification-item-sender\">\n                          <i class=\"pi pi-user\"></i>\n\n                          {{ notification.sender }}\n                        </span>\n                      }\n                    </div>\n                  }\n                </div>\n\n                @if (hasActions(notification)) {\n                  <div\n                    class=\"pt-notification-item-actions\"\n                    (click)=\"$event.stopPropagation()\"\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"pt-notification-more-button\"\n                      aria-label=\"Notification actions\"\n                      [disabled]=\"notification.disabled\"\n                      (click)=\"toggleActionMenu(notification, $event)\"\n                    >\n                      <i class=\"pi pi-ellipsis-v\"></i>\n                    </button>\n\n                    @if (isActionMenuOpen(notification)) {\n                      <div\n                        class=\"pt-notification-action-menu\"\n                        (click)=\"onActionMenuClick($event)\"\n                      >\n                        @for (\n                          menuAction of getActions(notification);\n                          track menuAction.id\n                        ) {\n                          <button\n                            type=\"button\"\n                            [class]=\"getActionClasses(menuAction)\"\n                            [disabled]=\"menuAction.disabled\"\n                            (click)=\"\n                              onActionClick(notification, menuAction, $event)\n                            \"\n                          >\n                            @if (menuAction.icon) {\n                              <i [class]=\"menuAction.icon\"></i>\n                            }\n\n                            <span>\n                              {{ menuAction.label }}\n                            </span>\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (notification.read !== true) {\n                  <span class=\"pt-notification-unread-indicator\"></span>\n                }\n              </div>\n            }\n\n            @if (showInfiniteScrollLoader()) {\n              <div class=\"pt-notification-load-more\">\n                <i class=\"pi pi-spin pi-spinner\"></i>\n\n                <span>\n                  {{ getLoadingText() }}\n                </span>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"pt-notification-empty\">\n            @if (loading) {\n              <i class=\"pi pi-spin pi-spinner\"></i>\n\n              <span>\n                {{ getLoadingText() }}\n              </span>\n            } @else {\n              <i class=\"pi pi-bell-slash\"></i>\n\n              <span>\n                {{ getEmptyText() }}\n              </span>\n            }\n          </div>\n        }\n\n        @if (showViewAll()) {\n          <div class=\"pt-notification-footer\">\n            <button\n              type=\"button\"\n              class=\"pt-notification-view-all\"\n              (click)=\"onViewAllClick($event)\"\n            >\n              <span>\n                {{ getViewAllText() }}\n              </span>\n\n              <i [class]=\"getViewAllIcon()\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.pt-notification{position:relative;display:inline-flex;align-items:center;justify-content:center}.pt-notification-trigger{position:relative;width:40px;height:40px;min-width:40px;padding:0;border:none;border-radius:999px;background:transparent;color:var(--pt-notification-bell-color, #475569);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .2s ease,color .2s ease}.pt-notification-trigger:hover{background:var(--pt-notification-bell-hover-bg, #f1f5f9);color:var(--pt-notification-bell-hover-color, #0f172a)}.pt-notification-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-bell-focus-shadow, rgba(37, 99, 235, .16))}.pt-notification-trigger>i{font-size:1.25rem;line-height:1}.pt-notification-badge{position:absolute;top:-1px;right:-3px;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--pt-notification-badge-border, #ffffff);border-radius:999px;background:var(--pt-notification-badge-bg, #dc2626);color:var(--pt-notification-badge-text, #ffffff);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:.65rem;font-weight:800;line-height:1;pointer-events:none}.pt-notification-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;max-width:min(420px,calc(100vw - 24px));background:var(--pt-notification-panel-bg, #ffffff);color:var(--pt-notification-panel-text, #334155);border:1px solid var(--pt-notification-panel-border, #e2e8f0);border-radius:14px;box-shadow:var( --pt-notification-panel-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;overflow:visible;z-index:10000}.pt-notification-header{min-height:52px;padding:0 16px;border-bottom:1px solid var(--pt-notification-header-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}.pt-notification-header-title{min-width:0;color:var(--pt-notification-header-title, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-notification-header-count{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--pt-notification-header-count-bg, #eff6ff);color:var(--pt-notification-header-count-text, #2563eb);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;font-size:.75rem;font-weight:800;line-height:1}.pt-notification-list{overflow-y:auto;overflow-x:visible;overscroll-behavior:contain}.pt-notification-item{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 34px;align-items:flex-start;gap:10px;min-height:76px;padding:13px 14px 13px 12px;border-bottom:1px solid var(--pt-notification-item-border, #f1f5f9);background:var(--pt-notification-item-bg, #ffffff);cursor:pointer;box-sizing:border-box;transition:background-color .15s ease}.pt-notification-item:last-child{border-bottom:none}.pt-notification-item:hover{background:var(--pt-notification-item-hover-bg, #f8fafc)}.pt-notification-item.unread{background:var(--pt-notification-item-unread-bg, #f8fbff)}.pt-notification-item.unread:hover{background:var(--pt-notification-item-unread-hover-bg, #f1f7ff)}.pt-notification-item.disabled{opacity:.55;cursor:not-allowed}.pt-notification-item-icon-wrapper{display:flex;justify-content:center;align-items:flex-start}.pt-notification-item-icon{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-notification-item-icon-bg, #eff6ff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-item-icon i{font-size:1rem;line-height:1}.pt-notification-item-content{min-width:0;padding-top:1px}.pt-notification-item-text{color:var(--pt-notification-item-text, #1e293b);font-size:.86rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.pt-notification-item.unread .pt-notification-item-text{color:var(--pt-notification-item-unread-text, #0f172a);font-weight:700}.pt-notification-item-metadata{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;color:var(--pt-notification-metadata-text, #94a3b8);font-size:.71rem;font-weight:500;line-height:1.3}.pt-notification-item-date,.pt-notification-item-sender{min-width:0;display:inline-flex;align-items:center;gap:4px}.pt-notification-item-date i,.pt-notification-item-sender i{flex:0 0 auto;font-size:.68rem}.pt-notification-item-sender{max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pt-notification-item-actions{position:relative;display:flex;justify-content:flex-end;align-items:flex-start}.pt-notification-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-more-color, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-more-button:hover{background:var(--pt-notification-more-hover-bg, #e2e8f0);color:var(--pt-notification-more-hover-color, #0f172a)}.pt-notification-more-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-more-button:disabled{opacity:.5;cursor:not-allowed}.pt-notification-more-button i{font-size:.95rem;line-height:1}.pt-notification-action-menu{position:absolute;top:34px;right:0;width:200px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10002}.pt-notification-action-menu-item{width:100%;min-height:36px;padding:7px 9px;border:none;border-radius:7px;background:transparent;color:var(--pt-notification-action-text, #334155);display:flex;align-items:center;gap:8px;box-sizing:border-box;text-align:left;cursor:pointer;font-size:.78rem;font-weight:600;transition:background-color .15s ease,color .15s ease}.pt-notification-action-menu-item:hover{background:var(--pt-notification-action-hover-bg, #f1f5f9);color:var(--pt-notification-action-hover-text, #0f172a)}.pt-notification-action-menu-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-action-menu-item.danger{color:var(--pt-notification-action-danger-text, #dc2626)}.pt-notification-action-menu-item.danger:hover{background:var(--pt-notification-action-danger-hover-bg, #fef2f2);color:var(--pt-notification-action-danger-hover-text, #b91c1c)}.pt-notification-action-menu-item.disabled,.pt-notification-action-menu-item:disabled{opacity:.5;cursor:not-allowed}.pt-notification-action-menu-item i{width:16px;flex:0 0 16px;font-size:.82rem;text-align:center}.pt-notification-action-menu-item span{min-width:0;flex:1 1 auto}.pt-notification-unread-indicator{position:absolute;top:50%;right:4px;width:6px;height:6px;border-radius:999px;background:var(--pt-notification-unread-indicator, #2563eb);transform:translateY(-50%);pointer-events:none}.pt-notification-empty{min-height:160px;padding:25px;color:var(--pt-notification-empty-text, #94a3b8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;text-align:center}.pt-notification-empty i{font-size:1.8rem}.pt-notification-empty span{font-size:.84rem;font-weight:600}@media(max-width:520px){.pt-notification-panel{position:fixed;top:60px;right:8px;left:8px;width:auto!important;min-width:0;max-width:none}.pt-notification-item{grid-template-columns:38px minmax(0,1fr) 32px;gap:8px;padding-right:13px}.pt-notification-item-icon{width:36px;height:36px;min-width:36px}.pt-notification-item-metadata{flex-direction:column;align-items:flex-start;gap:4px}.pt-notification-item-sender{max-width:190px}.pt-notification-action-menu{right:0;width:190px}}.pt-notification-header-left{display:flex;align-items:center;gap:8px;min-width:0}.pt-notification-global-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}.pt-notification-global-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-global-more-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-global-more-button:hover{background:var(--pt-notification-global-more-hover-bg, #f1f5f9);color:var(--pt-notification-global-more-hover-color, #0f172a)}.pt-notification-global-more-button i{font-size:.95rem}.pt-notification-global-action-menu{position:absolute;top:36px;right:0;width:210px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10003}.pt-notification-footer{min-height:50px;padding:7px;border-top:1px solid var(--pt-notification-footer-border, #e2e8f0);background:var(--pt-notification-footer-bg, #ffffff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-view-all{width:100%;min-height:36px;padding:7px 12px;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-view-all-text, #2563eb);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:.82rem;font-weight:700;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-view-all:hover{background:var(--pt-notification-view-all-hover-bg, #eff6ff);color:var(--pt-notification-view-all-hover-text, #1d4ed8)}.pt-notification-view-all i{font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-notification', standalone: false, template: "@if (isVisible()) {\n  <div class=\"pt-notification\">\n    <button\n      type=\"button\"\n      class=\"pt-notification-trigger\"\n      aria-label=\"Notifications\"\n      [attr.aria-expanded]=\"isOpen\"\n      (click)=\"togglePanel($event)\"\n    >\n      <i [class]=\"getBellIcon()\"></i>\n\n      @if (showBadge()) {\n        <span class=\"pt-notification-badge\">\n          {{ getBadgeText() }}\n        </span>\n      }\n    </button>\n\n    @if (isOpen) {\n      <div\n        class=\"pt-notification-panel\"\n        [ngStyle]=\"getPanelStyles()\"\n        (click)=\"onPanelClick($event)\"\n      >\n        <div class=\"pt-notification-header\">\n          <div class=\"pt-notification-header-left\">\n            <div class=\"pt-notification-header-title\">\n              {{ getTitle() }}\n            </div>\n\n            @if (showHeaderCount()) {\n              <span class=\"pt-notification-header-count\">\n                {{ getUnreadCount() }}\n              </span>\n            }\n          </div>\n\n          @if (showGlobalActions()) {\n            <div\n              class=\"pt-notification-global-actions\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"pt-notification-global-more-button\"\n                aria-label=\"Notification global actions\"\n                (click)=\"toggleGlobalActionMenu($event)\"\n              >\n                <i class=\"pi pi-ellipsis-v\"></i>\n              </button>\n\n              @if (isGlobalActionMenuOpen) {\n                <div\n                  class=\"pt-notification-global-action-menu\"\n                  (click)=\"onGlobalActionMenuClick($event)\"\n                >\n                  @for (menuAction of getGlobalActions(); track menuAction.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"getActionClasses(menuAction)\"\n                      [disabled]=\"menuAction.disabled\"\n                      (click)=\"onGlobalActionClick(menuAction, $event)\"\n                    >\n                      @if (menuAction.icon) {\n                        <i [class]=\"menuAction.icon\"></i>\n                      }\n\n                      <span>\n                        {{ menuAction.label }}\n                      </span>\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        @if (hasNotifications()) {\n          <div class=\"pt-notification-list\" [ngStyle]=\"getListStyles()\">\n            @for (notification of getNotifications(); track notification.id) {\n              <div\n                [class]=\"getNotificationClasses(notification)\"\n                (click)=\"onNotificationClick(notification, $event)\"\n              >\n                <div class=\"pt-notification-item-icon-wrapper\">\n                  <div class=\"pt-notification-item-icon\">\n                    <i\n                      [class]=\"getNotificationIcon(notification)\"\n                      [ngStyle]=\"getNotificationIconStyles(notification)\"\n                    ></i>\n                  </div>\n                </div>\n\n                <div class=\"pt-notification-item-content\">\n                  <div class=\"pt-notification-item-text\">\n                    {{ notification.text }}\n                  </div>\n\n                  @if (hasMetadata(notification)) {\n                    <div class=\"pt-notification-item-metadata\">\n                      @if (notification.date) {\n                        <span class=\"pt-notification-item-date\">\n                          <i class=\"pi pi-clock\"></i>\n                          {{ getDateText(notification) }}\n                        </span>\n                      }\n\n                      @if (notification.sender) {\n                        <span class=\"pt-notification-item-sender\">\n                          <i class=\"pi pi-user\"></i>\n                          {{ notification.sender }}\n                        </span>\n                      }\n                    </div>\n                  }\n                </div>\n\n                @if (hasActions(notification)) {\n                  <div\n                    class=\"pt-notification-item-actions\"\n                    (click)=\"$event.stopPropagation()\"\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"pt-notification-more-button\"\n                      aria-label=\"Notification actions\"\n                      [disabled]=\"notification.disabled\"\n                      (click)=\"toggleActionMenu(notification, $event)\"\n                    >\n                      <i class=\"pi pi-ellipsis-v\"></i>\n                    </button>\n\n                    @if (isActionMenuOpen(notification)) {\n                      <div\n                        class=\"pt-notification-action-menu\"\n                        (click)=\"onActionMenuClick($event)\"\n                      >\n                        @for (\n                          menuAction of getActions(notification);\n                          track menuAction.id\n                        ) {\n                          <button\n                            type=\"button\"\n                            [class]=\"getActionClasses(menuAction)\"\n                            [disabled]=\"menuAction.disabled\"\n                            (click)=\"\n                              onActionClick(notification, menuAction, $event)\n                            \"\n                          >\n                            @if (menuAction.icon) {\n                              <i [class]=\"menuAction.icon\"></i>\n                            }\n\n                            <span>\n                              {{ menuAction.label }}\n                            </span>\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (!notification.read) {\n                  <span class=\"pt-notification-unread-indicator\"></span>\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"pt-notification-empty\">\n            <i class=\"pi pi-bell-slash\"></i>\n\n            <span>\n              {{ getEmptyText() }}\n            </span>\n          </div>\n        }\n\n        @if (showViewAll()) {\n          <div class=\"pt-notification-footer\">\n            <button\n              type=\"button\"\n              class=\"pt-notification-view-all\"\n              (click)=\"onViewAllClick($event)\"\n            >\n              <span>\n                {{ getViewAllText() }}\n              </span>\n\n              <i [class]=\"getViewAllIcon()\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.pt-notification{position:relative;display:inline-flex;align-items:center;justify-content:center}.pt-notification-trigger{position:relative;width:40px;height:40px;min-width:40px;padding:0;border:none;border-radius:999px;background:transparent;color:var(--pt-notification-bell-color, #475569);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .2s ease,color .2s ease}.pt-notification-trigger:hover{background:var(--pt-notification-bell-hover-bg, #f1f5f9);color:var(--pt-notification-bell-hover-color, #0f172a)}.pt-notification-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-bell-focus-shadow, rgba(37, 99, 235, .16))}.pt-notification-trigger>i{font-size:1.25rem;line-height:1}.pt-notification-badge{position:absolute;top:-1px;right:-3px;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--pt-notification-badge-border, #ffffff);border-radius:999px;background:var(--pt-notification-badge-bg, #dc2626);color:var(--pt-notification-badge-text, #ffffff);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:.65rem;font-weight:800;line-height:1;pointer-events:none}.pt-notification-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;max-width:min(420px,calc(100vw - 24px));background:var(--pt-notification-panel-bg, #ffffff);color:var(--pt-notification-panel-text, #334155);border:1px solid var(--pt-notification-panel-border, #e2e8f0);border-radius:14px;box-shadow:var( --pt-notification-panel-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;overflow:visible;z-index:10000}.pt-notification-header{min-height:52px;padding:0 16px;border-bottom:1px solid var(--pt-notification-header-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}.pt-notification-header-title{min-width:0;color:var(--pt-notification-header-title, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-notification-header-count{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--pt-notification-header-count-bg, #eff6ff);color:var(--pt-notification-header-count-text, #2563eb);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;font-size:.75rem;font-weight:800;line-height:1}.pt-notification-list{overflow-y:auto;overflow-x:visible;overscroll-behavior:contain}.pt-notification-item{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 34px;align-items:flex-start;gap:10px;min-height:76px;padding:13px 14px 13px 12px;border-bottom:1px solid var(--pt-notification-item-border, #f1f5f9);background:var(--pt-notification-item-bg, #ffffff);cursor:pointer;box-sizing:border-box;transition:background-color .15s ease}.pt-notification-item:last-child{border-bottom:none}.pt-notification-item:hover{background:var(--pt-notification-item-hover-bg, #f8fafc)}.pt-notification-item.unread{background:var(--pt-notification-item-unread-bg, #f8fbff)}.pt-notification-item.unread:hover{background:var(--pt-notification-item-unread-hover-bg, #f1f7ff)}.pt-notification-item.disabled{opacity:.55;cursor:not-allowed}.pt-notification-item-icon-wrapper{display:flex;justify-content:center;align-items:flex-start}.pt-notification-item-icon{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-notification-item-icon-bg, #eff6ff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-item-icon i{font-size:1rem;line-height:1}.pt-notification-item-content{min-width:0;padding-top:1px}.pt-notification-item-text{color:var(--pt-notification-item-text, #1e293b);font-size:.86rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.pt-notification-item.unread .pt-notification-item-text{color:var(--pt-notification-item-unread-text, #0f172a);font-weight:700}.pt-notification-item-metadata{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;color:var(--pt-notification-metadata-text, #94a3b8);font-size:.71rem;font-weight:500;line-height:1.3}.pt-notification-item-date,.pt-notification-item-sender{min-width:0;display:inline-flex;align-items:center;gap:4px}.pt-notification-item-date i,.pt-notification-item-sender i{flex:0 0 auto;font-size:.68rem}.pt-notification-item-sender{max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pt-notification-item-actions{position:relative;display:flex;justify-content:flex-end;align-items:flex-start}.pt-notification-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-more-color, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-more-button:hover{background:var(--pt-notification-more-hover-bg, #e2e8f0);color:var(--pt-notification-more-hover-color, #0f172a)}.pt-notification-more-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-more-button:disabled{opacity:.5;cursor:not-allowed}.pt-notification-more-button i{font-size:.95rem;line-height:1}.pt-notification-action-menu{position:absolute;top:34px;right:0;width:200px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10002}.pt-notification-action-menu-item{width:100%;min-height:36px;padding:7px 9px;border:none;border-radius:7px;background:transparent;color:var(--pt-notification-action-text, #334155);display:flex;align-items:center;gap:8px;box-sizing:border-box;text-align:left;cursor:pointer;font-size:.78rem;font-weight:600;transition:background-color .15s ease,color .15s ease}.pt-notification-action-menu-item:hover{background:var(--pt-notification-action-hover-bg, #f1f5f9);color:var(--pt-notification-action-hover-text, #0f172a)}.pt-notification-action-menu-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-action-menu-item.danger{color:var(--pt-notification-action-danger-text, #dc2626)}.pt-notification-action-menu-item.danger:hover{background:var(--pt-notification-action-danger-hover-bg, #fef2f2);color:var(--pt-notification-action-danger-hover-text, #b91c1c)}.pt-notification-action-menu-item.disabled,.pt-notification-action-menu-item:disabled{opacity:.5;cursor:not-allowed}.pt-notification-action-menu-item i{width:16px;flex:0 0 16px;font-size:.82rem;text-align:center}.pt-notification-action-menu-item span{min-width:0;flex:1 1 auto}.pt-notification-unread-indicator{position:absolute;top:50%;right:4px;width:6px;height:6px;border-radius:999px;background:var(--pt-notification-unread-indicator, #2563eb);transform:translateY(-50%);pointer-events:none}.pt-notification-empty{min-height:160px;padding:25px;color:var(--pt-notification-empty-text, #94a3b8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;text-align:center}.pt-notification-empty i{font-size:1.8rem}.pt-notification-empty span{font-size:.84rem;font-weight:600}@media(max-width:520px){.pt-notification-panel{position:fixed;top:60px;right:8px;left:8px;width:auto!important;min-width:0;max-width:none}.pt-notification-item{grid-template-columns:38px minmax(0,1fr) 32px;gap:8px;padding-right:13px}.pt-notification-item-icon{width:36px;height:36px;min-width:36px}.pt-notification-item-metadata{flex-direction:column;align-items:flex-start;gap:4px}.pt-notification-item-sender{max-width:190px}.pt-notification-action-menu{right:0;width:190px}}.pt-notification-header-left{display:flex;align-items:center;gap:8px;min-width:0}.pt-notification-global-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}.pt-notification-global-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-global-more-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-global-more-button:hover{background:var(--pt-notification-global-more-hover-bg, #f1f5f9);color:var(--pt-notification-global-more-hover-color, #0f172a)}.pt-notification-global-more-button i{font-size:.95rem}.pt-notification-global-action-menu{position:absolute;top:36px;right:0;width:210px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10003}.pt-notification-footer{min-height:50px;padding:7px;border-top:1px solid var(--pt-notification-footer-border, #e2e8f0);background:var(--pt-notification-footer-bg, #ffffff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-view-all{width:100%;min-height:36px;padding:7px 12px;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-view-all-text, #2563eb);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:.82rem;font-weight:700;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-view-all:hover{background:var(--pt-notification-view-all-hover-bg, #eff6ff);color:var(--pt-notification-view-all-hover-text, #1d4ed8)}.pt-notification-view-all i{font-size:.75rem}\n"] }]
+            args: [{ selector: 'pt-notification', standalone: false, template: "@if (isVisible()) {\n  <div class=\"pt-notification\">\n    <button\n      type=\"button\"\n      class=\"pt-notification-trigger\"\n      [attr.aria-expanded]=\"isOpen\"\n      aria-label=\"Notifications\"\n      (click)=\"togglePanel($event)\"\n    >\n      <i [class]=\"getBellIcon()\"></i>\n\n      @if (showBadge()) {\n        <span class=\"pt-notification-badge\">\n          {{ getBadgeText() }}\n        </span>\n      }\n    </button>\n\n    @if (isOpen) {\n      <div\n        class=\"pt-notification-panel\"\n        [ngStyle]=\"getPanelStyles()\"\n        (click)=\"onPanelClick($event)\"\n      >\n        <div class=\"pt-notification-header\">\n          <div class=\"pt-notification-header-left\">\n            <div class=\"pt-notification-header-title\">\n              {{ getTitle() }}\n            </div>\n\n            @if (showHeaderCount()) {\n              <span class=\"pt-notification-header-count\">\n                {{ getUnreadCount() }}\n              </span>\n            }\n          </div>\n\n          @if (showGlobalActions()) {\n            <div\n              class=\"pt-notification-global-actions\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"pt-notification-global-more-button\"\n                aria-label=\"Notification global actions\"\n                (click)=\"toggleGlobalActionMenu($event)\"\n              >\n                <i class=\"pi pi-ellipsis-v\"></i>\n              </button>\n\n              @if (isGlobalActionMenuOpen) {\n                <div\n                  class=\"pt-notification-global-action-menu\"\n                  (click)=\"onGlobalActionMenuClick($event)\"\n                >\n                  @for (menuAction of getGlobalActions(); track menuAction.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"getActionClasses(menuAction)\"\n                      [disabled]=\"menuAction.disabled\"\n                      (click)=\"onGlobalActionClick(menuAction, $event)\"\n                    >\n                      @if (menuAction.icon) {\n                        <i [class]=\"menuAction.icon\"></i>\n                      }\n\n                      <span>\n                        {{ menuAction.label }}\n                      </span>\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        @if (hasNotifications()) {\n          <div\n            class=\"pt-notification-list\"\n            [ngStyle]=\"getListStyles()\"\n            (scroll)=\"onListScroll($event)\"\n          >\n            @for (notification of getNotifications(); track notification.id) {\n              <div\n                [class]=\"getNotificationClasses(notification)\"\n                (click)=\"onNotificationClick(notification, $event)\"\n              >\n                <div class=\"pt-notification-item-icon-wrapper\">\n                  <div class=\"pt-notification-item-icon\">\n                    <i\n                      [class]=\"getNotificationIcon(notification)\"\n                      [ngStyle]=\"getNotificationIconStyles(notification)\"\n                    ></i>\n                  </div>\n                </div>\n\n                <div class=\"pt-notification-item-content\">\n                  <div class=\"pt-notification-item-text\">\n                    {{ notification.text }}\n                  </div>\n\n                  @if (hasMetadata(notification)) {\n                    <div class=\"pt-notification-item-metadata\">\n                      @if (notification.date) {\n                        <span class=\"pt-notification-item-date\">\n                          <i class=\"pi pi-clock\"></i>\n\n                          {{ getDateText(notification) }}\n                        </span>\n                      }\n\n                      @if (notification.sender) {\n                        <span class=\"pt-notification-item-sender\">\n                          <i class=\"pi pi-user\"></i>\n\n                          {{ notification.sender }}\n                        </span>\n                      }\n                    </div>\n                  }\n                </div>\n\n                @if (hasActions(notification)) {\n                  <div\n                    class=\"pt-notification-item-actions\"\n                    (click)=\"$event.stopPropagation()\"\n                  >\n                    <button\n                      type=\"button\"\n                      class=\"pt-notification-more-button\"\n                      aria-label=\"Notification actions\"\n                      [disabled]=\"notification.disabled\"\n                      (click)=\"toggleActionMenu(notification, $event)\"\n                    >\n                      <i class=\"pi pi-ellipsis-v\"></i>\n                    </button>\n\n                    @if (isActionMenuOpen(notification)) {\n                      <div\n                        class=\"pt-notification-action-menu\"\n                        (click)=\"onActionMenuClick($event)\"\n                      >\n                        @for (\n                          menuAction of getActions(notification);\n                          track menuAction.id\n                        ) {\n                          <button\n                            type=\"button\"\n                            [class]=\"getActionClasses(menuAction)\"\n                            [disabled]=\"menuAction.disabled\"\n                            (click)=\"\n                              onActionClick(notification, menuAction, $event)\n                            \"\n                          >\n                            @if (menuAction.icon) {\n                              <i [class]=\"menuAction.icon\"></i>\n                            }\n\n                            <span>\n                              {{ menuAction.label }}\n                            </span>\n                          </button>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n\n                @if (notification.read !== true) {\n                  <span class=\"pt-notification-unread-indicator\"></span>\n                }\n              </div>\n            }\n\n            @if (showInfiniteScrollLoader()) {\n              <div class=\"pt-notification-load-more\">\n                <i class=\"pi pi-spin pi-spinner\"></i>\n\n                <span>\n                  {{ getLoadingText() }}\n                </span>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"pt-notification-empty\">\n            @if (loading) {\n              <i class=\"pi pi-spin pi-spinner\"></i>\n\n              <span>\n                {{ getLoadingText() }}\n              </span>\n            } @else {\n              <i class=\"pi pi-bell-slash\"></i>\n\n              <span>\n                {{ getEmptyText() }}\n              </span>\n            }\n          </div>\n        }\n\n        @if (showViewAll()) {\n          <div class=\"pt-notification-footer\">\n            <button\n              type=\"button\"\n              class=\"pt-notification-view-all\"\n              (click)=\"onViewAllClick($event)\"\n            >\n              <span>\n                {{ getViewAllText() }}\n              </span>\n\n              <i [class]=\"getViewAllIcon()\"></i>\n            </button>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.pt-notification{position:relative;display:inline-flex;align-items:center;justify-content:center}.pt-notification-trigger{position:relative;width:40px;height:40px;min-width:40px;padding:0;border:none;border-radius:999px;background:transparent;color:var(--pt-notification-bell-color, #475569);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .2s ease,color .2s ease}.pt-notification-trigger:hover{background:var(--pt-notification-bell-hover-bg, #f1f5f9);color:var(--pt-notification-bell-hover-color, #0f172a)}.pt-notification-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-bell-focus-shadow, rgba(37, 99, 235, .16))}.pt-notification-trigger>i{font-size:1.25rem;line-height:1}.pt-notification-badge{position:absolute;top:-1px;right:-3px;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--pt-notification-badge-border, #ffffff);border-radius:999px;background:var(--pt-notification-badge-bg, #dc2626);color:var(--pt-notification-badge-text, #ffffff);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:.65rem;font-weight:800;line-height:1;pointer-events:none}.pt-notification-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;max-width:min(420px,calc(100vw - 24px));background:var(--pt-notification-panel-bg, #ffffff);color:var(--pt-notification-panel-text, #334155);border:1px solid var(--pt-notification-panel-border, #e2e8f0);border-radius:14px;box-shadow:var( --pt-notification-panel-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;overflow:visible;z-index:10000}.pt-notification-header{min-height:52px;padding:0 16px;border-bottom:1px solid var(--pt-notification-header-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}.pt-notification-header-title{min-width:0;color:var(--pt-notification-header-title, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-notification-header-count{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--pt-notification-header-count-bg, #eff6ff);color:var(--pt-notification-header-count-text, #2563eb);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;font-size:.75rem;font-weight:800;line-height:1}.pt-notification-list{overflow-y:auto;overflow-x:visible;overscroll-behavior:contain}.pt-notification-item{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 34px;align-items:flex-start;gap:10px;min-height:76px;padding:13px 14px 13px 12px;border-bottom:1px solid var(--pt-notification-item-border, #f1f5f9);background:var(--pt-notification-item-bg, #ffffff);cursor:pointer;box-sizing:border-box;transition:background-color .15s ease}.pt-notification-item:last-child{border-bottom:none}.pt-notification-item:hover{background:var(--pt-notification-item-hover-bg, #f8fafc)}.pt-notification-item.unread{background:var(--pt-notification-item-unread-bg, #f8fbff)}.pt-notification-item.unread:hover{background:var(--pt-notification-item-unread-hover-bg, #f1f7ff)}.pt-notification-item.disabled{opacity:.55;cursor:not-allowed}.pt-notification-item-icon-wrapper{display:flex;justify-content:center;align-items:flex-start}.pt-notification-item-icon{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-notification-item-icon-bg, #eff6ff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-item-icon i{font-size:1rem;line-height:1}.pt-notification-item-content{min-width:0;padding-top:1px}.pt-notification-item-text{color:var(--pt-notification-item-text, #1e293b);font-size:.86rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.pt-notification-item.unread .pt-notification-item-text{color:var(--pt-notification-item-unread-text, #0f172a);font-weight:700}.pt-notification-item-metadata{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;color:var(--pt-notification-metadata-text, #94a3b8);font-size:.71rem;font-weight:500;line-height:1.3}.pt-notification-item-date,.pt-notification-item-sender{min-width:0;display:inline-flex;align-items:center;gap:4px}.pt-notification-item-date i,.pt-notification-item-sender i{flex:0 0 auto;font-size:.68rem}.pt-notification-item-sender{max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pt-notification-item-actions{position:relative;display:flex;justify-content:flex-end;align-items:flex-start}.pt-notification-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-more-color, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-more-button:hover{background:var(--pt-notification-more-hover-bg, #e2e8f0);color:var(--pt-notification-more-hover-color, #0f172a)}.pt-notification-more-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-more-button:disabled{opacity:.5;cursor:not-allowed}.pt-notification-more-button i{font-size:.95rem;line-height:1}.pt-notification-action-menu{position:absolute;top:34px;right:0;width:200px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10002}.pt-notification-action-menu-item{width:100%;min-height:36px;padding:7px 9px;border:none;border-radius:7px;background:transparent;color:var(--pt-notification-action-text, #334155);display:flex;align-items:center;gap:8px;box-sizing:border-box;text-align:left;cursor:pointer;font-size:.78rem;font-weight:600;transition:background-color .15s ease,color .15s ease}.pt-notification-action-menu-item:hover{background:var(--pt-notification-action-hover-bg, #f1f5f9);color:var(--pt-notification-action-hover-text, #0f172a)}.pt-notification-action-menu-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-action-menu-item.danger{color:var(--pt-notification-action-danger-text, #dc2626)}.pt-notification-action-menu-item.danger:hover{background:var(--pt-notification-action-danger-hover-bg, #fef2f2);color:var(--pt-notification-action-danger-hover-text, #b91c1c)}.pt-notification-action-menu-item.disabled,.pt-notification-action-menu-item:disabled{opacity:.5;cursor:not-allowed}.pt-notification-action-menu-item i{width:16px;flex:0 0 16px;font-size:.82rem;text-align:center}.pt-notification-action-menu-item span{min-width:0;flex:1 1 auto}.pt-notification-unread-indicator{position:absolute;top:50%;right:4px;width:6px;height:6px;border-radius:999px;background:var(--pt-notification-unread-indicator, #2563eb);transform:translateY(-50%);pointer-events:none}.pt-notification-empty{min-height:160px;padding:25px;color:var(--pt-notification-empty-text, #94a3b8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;text-align:center}.pt-notification-empty i{font-size:1.8rem}.pt-notification-empty span{font-size:.84rem;font-weight:600}@media(max-width:520px){.pt-notification-panel{position:fixed;top:60px;right:8px;left:8px;width:auto!important;min-width:0;max-width:none}.pt-notification-item{grid-template-columns:38px minmax(0,1fr) 32px;gap:8px;padding-right:13px}.pt-notification-item-icon{width:36px;height:36px;min-width:36px}.pt-notification-item-metadata{flex-direction:column;align-items:flex-start;gap:4px}.pt-notification-item-sender{max-width:190px}.pt-notification-action-menu{right:0;width:190px}}.pt-notification-header-left{display:flex;align-items:center;gap:8px;min-width:0}.pt-notification-global-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}.pt-notification-global-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-global-more-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-global-more-button:hover{background:var(--pt-notification-global-more-hover-bg, #f1f5f9);color:var(--pt-notification-global-more-hover-color, #0f172a)}.pt-notification-global-more-button i{font-size:.95rem}.pt-notification-global-action-menu{position:absolute;top:36px;right:0;width:210px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10003}.pt-notification-footer{min-height:50px;padding:7px;border-top:1px solid var(--pt-notification-footer-border, #e2e8f0);background:var(--pt-notification-footer-bg, #ffffff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-view-all{width:100%;min-height:36px;padding:7px 12px;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-view-all-text, #2563eb);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:.82rem;font-weight:700;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-view-all:hover{background:var(--pt-notification-view-all-hover-bg, #eff6ff);color:var(--pt-notification-view-all-hover-text, #1d4ed8)}.pt-notification-view-all i{font-size:.75rem}\n"] }]
         }], propDecorators: { notifications: [{
                 type: Input
             }], config: [{
                 type: Input
+            }], totalRecords: [{
+                type: Input
+            }], totalUnreadRecords: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], loading: [{
+                type: Input
             }], notificationClick: [{
                 type: Output
             }], action: [{
@@ -6439,6 +6548,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }], panelClosed: [{
                 type: Output
+            }], loadMore: [{
+                type: Output
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click']
@@ -6449,6 +6560,10 @@ class PTNavbarMenuComponent {
         this.navBarMenuConfig = {};
         this.notifications = [];
         this.notificationConfig = {};
+        this.notificationTotalRecords = 0;
+        this.notificationPage = 0;
+        this.notificationRows = 10;
+        this.notificationLoading = false;
         this.toggleSidebar = new EventEmitter();
         this.notificationAction = new EventEmitter();
         this.notificationClick = new EventEmitter();
@@ -6456,6 +6571,7 @@ class PTNavbarMenuComponent {
         this.notificationPanelClosed = new EventEmitter();
         this.notificationGlobalAction = new EventEmitter();
         this.notificationViewAll = new EventEmitter();
+        this.notificationLoadMore = new EventEmitter();
         this.destroy$ = new Subject();
         this.dateTimeText = '';
         this.isUserMenuOpen = false;
@@ -6536,6 +6652,9 @@ class PTNavbarMenuComponent {
     onNotificationPanelClosed() {
         this.notificationPanelClosed.emit();
     }
+    onNotificationLoadMore(event) {
+        this.notificationLoadMore.emit(event);
+    }
     hasDateTime() {
         return !!this.navBarMenuConfig.dateTime;
     }
@@ -6877,11 +6996,11 @@ class PTNavbarMenuComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNavbarMenuComponent, isStandalone: false, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig", serverDateTime: "serverDateTime", notifications: "notifications", notificationConfig: "notificationConfig" }, outputs: { toggleSidebar: "toggleSidebar", notificationAction: "notificationAction", notificationClick: "notificationClick", notificationPanelOpened: "notificationPanelOpened", notificationPanelClosed: "notificationPanelClosed", notificationGlobalAction: "notificationGlobalAction", notificationViewAll: "notificationViewAll" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <div class=\"navbar-left\">\n    <a class=\"logo-link\" routerLink=\"/\">\n      @if (getLogoUrl()) {\n        <img\n          class=\"navbar-logo\"\n          [src]=\"getLogoUrl()\"\n          [alt]=\"getLogoAltText()\"\n          [ngStyle]=\"getLogoStyles()\"\n        />\n      }\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a class=\"toggle-btn\" (click)=\"toggleMenu()\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  @if (hasDateTime()) {\n    <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\"></div>\n\n    <pt-notification\n      [notifications]=\"notifications\"\n      [config]=\"notificationConfig\"\n      (notificationClick)=\"onNotificationClick($event)\"\n      (action)=\"onNotificationAction($event)\"\n      (globalAction)=\"onNotificationGlobalAction($event)\"\n      (viewAll)=\"onNotificationViewAll()\"\n      (panelOpened)=\"onNotificationPanelOpened()\"\n      (panelClosed)=\"onNotificationPanelClosed()\"\n    ></pt-notification>\n\n    @if (hasUser()) {\n      <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n        @if (showProfileLeftOfAvatar()) {\n          <div\n            class=\"navbar-user-profile-left\"\n            [ngStyle]=\"getUserProfileTextStyles()\"\n          >\n            {{ getUserProfile() }}\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"navbar-user-trigger\"\n          (click)=\"toggleUserMenu()\"\n        >\n          <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n            @if (isInitialsAvatar()) {\n              <span>\n                {{ getUserInitials() }}\n              </span>\n            } @else {\n              <i class=\"fa fa-user\"></i>\n            }\n          </div>\n        </button>\n\n        @if (isUserMenuOpen) {\n          <div class=\"navbar-user-menu\">\n            <div class=\"navbar-user-menu-header\">\n              <div\n                class=\"navbar-user-menu-avatar\"\n                [ngStyle]=\"getUserAvatarStyles()\"\n              >\n                @if (isInitialsAvatar()) {\n                  <span>\n                    {{ getUserInitials() }}\n                  </span>\n                } @else {\n                  <i class=\"fa fa-user\"></i>\n                }\n              </div>\n\n              <div class=\"navbar-user-menu-identity\">\n                <div class=\"navbar-user-menu-name\">\n                  {{ getUserFullName() }}\n                </div>\n\n                @if (showProfileInMenu()) {\n                  <div\n                    class=\"navbar-user-menu-profile\"\n                    [ngStyle]=\"getUserProfileTextStyles()\"\n                  >\n                    {{ getUserProfile() }}\n                  </div>\n                }\n\n                <div class=\"navbar-user-menu-username\">\n                  {{ getUsername() }}\n                </div>\n              </div>\n            </div>\n\n            @if (hasUserMenuItems()) {\n              <div class=\"navbar-user-menu-separator\"></div>\n\n              @for (item of getUserMenuItems(); track item) {\n                @if (item.separatorBefore) {\n                  <div class=\"navbar-user-menu-separator\"></div>\n                }\n\n                <button\n                  type=\"button\"\n                  [class]=\"getUserMenuItemClasses(item)\"\n                  [disabled]=\"item.disabled\"\n                  (click)=\"onUserMenuItemClick(item)\"\n                >\n                  @if (getUserMenuItemIcon(item)) {\n                    <i [class]=\"getUserMenuItemIcon(item)\"></i>\n                  }\n\n                  <span>\n                    {{ item.text }}\n                  </span>\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid var(--pt-navbar-border, #ddd);background-color:var(--pt-navbar-bg, #fff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid var(--pt-navbar-input-border, rgba(0, 0, 0, .18));border-radius:6px;background:var(--pt-navbar-input-bg, #fff);font-size:12px;color:var(--pt-navbar-input-text, #333);outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:var(--pt-navbar-link, #333);text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:var(--pt-navbar-link-hover, #000)}.pt-nav-bar-menu pt-notification{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:var(--pt-navbar-toggle-color, #333)}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f1f1)}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:var(--pt-navbar-user-profile-text, #334155);font-size:.82rem;font-weight:700;background:var(--pt-navbar-user-profile-bg, #eff6ff);border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:var(--pt-navbar-user-menu-separator, #e5e7eb);margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:var(--pt-navbar-user-menu-item-text, #334155);display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}.pt-nav-bar-menu .navbar-actions{gap:8px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTNotificationComponent, selector: "pt-notification", inputs: ["notifications", "config"], outputs: ["notificationClick", "action", "globalAction", "viewAll", "panelOpened", "panelClosed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNavbarMenuComponent, isStandalone: false, selector: "pt-nav-bar-menu", inputs: { navBarMenuConfig: "navBarMenuConfig", serverDateTime: "serverDateTime", notifications: "notifications", notificationConfig: "notificationConfig", notificationTotalRecords: "notificationTotalRecords", notificationTotalUnreadRecords: "notificationTotalUnreadRecords", notificationPage: "notificationPage", notificationRows: "notificationRows", notificationLoading: "notificationLoading" }, outputs: { toggleSidebar: "toggleSidebar", notificationAction: "notificationAction", notificationClick: "notificationClick", notificationPanelOpened: "notificationPanelOpened", notificationPanelClosed: "notificationPanelClosed", notificationGlobalAction: "notificationGlobalAction", notificationViewAll: "notificationViewAll", notificationLoadMore: "notificationLoadMore" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <div class=\"navbar-left\">\n    <a class=\"logo-link\" routerLink=\"/\">\n      @if (getLogoUrl()) {\n        <img\n          class=\"navbar-logo\"\n          [src]=\"getLogoUrl()\"\n          [alt]=\"getLogoAltText()\"\n          [ngStyle]=\"getLogoStyles()\"\n        />\n      }\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a class=\"toggle-btn\" (click)=\"toggleMenu()\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  @if (hasDateTime()) {\n    <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\"></div>\n\n    <pt-notification\n      [notifications]=\"notifications\"\n      [config]=\"notificationConfig\"\n      [totalRecords]=\"notificationTotalRecords\"\n      [totalUnreadRecords]=\"notificationTotalUnreadRecords\"\n      [page]=\"notificationPage\"\n      [rows]=\"notificationRows\"\n      [loading]=\"notificationLoading\"\n      (loadMore)=\"onNotificationLoadMore($event)\"\n      (notificationClick)=\"onNotificationClick($event)\"\n      (action)=\"onNotificationAction($event)\"\n      (globalAction)=\"onNotificationGlobalAction($event)\"\n      (viewAll)=\"onNotificationViewAll()\"\n      (panelOpened)=\"onNotificationPanelOpened()\"\n      (panelClosed)=\"onNotificationPanelClosed()\"\n    ></pt-notification>\n\n    @if (hasUser()) {\n      <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n        @if (showProfileLeftOfAvatar()) {\n          <div\n            class=\"navbar-user-profile-left\"\n            [ngStyle]=\"getUserProfileTextStyles()\"\n          >\n            {{ getUserProfile() }}\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"navbar-user-trigger\"\n          (click)=\"toggleUserMenu()\"\n        >\n          <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n            @if (isInitialsAvatar()) {\n              <span>\n                {{ getUserInitials() }}\n              </span>\n            } @else {\n              <i class=\"fa fa-user\"></i>\n            }\n          </div>\n        </button>\n\n        @if (isUserMenuOpen) {\n          <div class=\"navbar-user-menu\">\n            <div class=\"navbar-user-menu-header\">\n              <div\n                class=\"navbar-user-menu-avatar\"\n                [ngStyle]=\"getUserAvatarStyles()\"\n              >\n                @if (isInitialsAvatar()) {\n                  <span>\n                    {{ getUserInitials() }}\n                  </span>\n                } @else {\n                  <i class=\"fa fa-user\"></i>\n                }\n              </div>\n\n              <div class=\"navbar-user-menu-identity\">\n                <div class=\"navbar-user-menu-name\">\n                  {{ getUserFullName() }}\n                </div>\n\n                @if (showProfileInMenu()) {\n                  <div\n                    class=\"navbar-user-menu-profile\"\n                    [ngStyle]=\"getUserProfileTextStyles()\"\n                  >\n                    {{ getUserProfile() }}\n                  </div>\n                }\n\n                <div class=\"navbar-user-menu-username\">\n                  {{ getUsername() }}\n                </div>\n              </div>\n            </div>\n\n            @if (hasUserMenuItems()) {\n              <div class=\"navbar-user-menu-separator\"></div>\n\n              @for (item of getUserMenuItems(); track item) {\n                @if (item.separatorBefore) {\n                  <div class=\"navbar-user-menu-separator\"></div>\n                }\n\n                <button\n                  type=\"button\"\n                  [class]=\"getUserMenuItemClasses(item)\"\n                  [disabled]=\"item.disabled\"\n                  (click)=\"onUserMenuItemClick(item)\"\n                >\n                  @if (getUserMenuItemIcon(item)) {\n                    <i [class]=\"getUserMenuItemIcon(item)\"></i>\n                  }\n\n                  <span>\n                    {{ item.text }}\n                  </span>\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid var(--pt-navbar-border, #ddd);background-color:var(--pt-navbar-bg, #fff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid var(--pt-navbar-input-border, rgba(0, 0, 0, .18));border-radius:6px;background:var(--pt-navbar-input-bg, #fff);font-size:12px;color:var(--pt-navbar-input-text, #333);outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:var(--pt-navbar-link, #333);text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:var(--pt-navbar-link-hover, #000)}.pt-nav-bar-menu pt-notification{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:var(--pt-navbar-toggle-color, #333)}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f1f1)}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:var(--pt-navbar-user-profile-text, #334155);font-size:.82rem;font-weight:700;background:var(--pt-navbar-user-profile-bg, #eff6ff);border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:var(--pt-navbar-user-menu-separator, #e5e7eb);margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:var(--pt-navbar-user-menu-item-text, #334155);display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}.pt-nav-bar-menu .navbar-actions{gap:8px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: PTNotificationComponent, selector: "pt-notification", inputs: ["notifications", "config", "totalRecords", "totalUnreadRecords", "page", "rows", "loading"], outputs: ["notificationClick", "action", "globalAction", "viewAll", "panelOpened", "panelClosed", "loadMore"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <div class=\"navbar-left\">\n    <a class=\"logo-link\" routerLink=\"/\">\n      @if (getLogoUrl()) {\n        <img\n          class=\"navbar-logo\"\n          [src]=\"getLogoUrl()\"\n          [alt]=\"getLogoAltText()\"\n          [ngStyle]=\"getLogoStyles()\"\n        />\n      }\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a class=\"toggle-btn\" (click)=\"toggleMenu()\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  @if (hasDateTime()) {\n    <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\"></div>\n\n    <pt-notification\n      [notifications]=\"notifications\"\n      [config]=\"notificationConfig\"\n      (notificationClick)=\"onNotificationClick($event)\"\n      (action)=\"onNotificationAction($event)\"\n      (globalAction)=\"onNotificationGlobalAction($event)\"\n      (viewAll)=\"onNotificationViewAll()\"\n      (panelOpened)=\"onNotificationPanelOpened()\"\n      (panelClosed)=\"onNotificationPanelClosed()\"\n    ></pt-notification>\n\n    @if (hasUser()) {\n      <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n        @if (showProfileLeftOfAvatar()) {\n          <div\n            class=\"navbar-user-profile-left\"\n            [ngStyle]=\"getUserProfileTextStyles()\"\n          >\n            {{ getUserProfile() }}\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"navbar-user-trigger\"\n          (click)=\"toggleUserMenu()\"\n        >\n          <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n            @if (isInitialsAvatar()) {\n              <span>\n                {{ getUserInitials() }}\n              </span>\n            } @else {\n              <i class=\"fa fa-user\"></i>\n            }\n          </div>\n        </button>\n\n        @if (isUserMenuOpen) {\n          <div class=\"navbar-user-menu\">\n            <div class=\"navbar-user-menu-header\">\n              <div\n                class=\"navbar-user-menu-avatar\"\n                [ngStyle]=\"getUserAvatarStyles()\"\n              >\n                @if (isInitialsAvatar()) {\n                  <span>\n                    {{ getUserInitials() }}\n                  </span>\n                } @else {\n                  <i class=\"fa fa-user\"></i>\n                }\n              </div>\n\n              <div class=\"navbar-user-menu-identity\">\n                <div class=\"navbar-user-menu-name\">\n                  {{ getUserFullName() }}\n                </div>\n\n                @if (showProfileInMenu()) {\n                  <div\n                    class=\"navbar-user-menu-profile\"\n                    [ngStyle]=\"getUserProfileTextStyles()\"\n                  >\n                    {{ getUserProfile() }}\n                  </div>\n                }\n\n                <div class=\"navbar-user-menu-username\">\n                  {{ getUsername() }}\n                </div>\n              </div>\n            </div>\n\n            @if (hasUserMenuItems()) {\n              <div class=\"navbar-user-menu-separator\"></div>\n\n              @for (item of getUserMenuItems(); track item) {\n                @if (item.separatorBefore) {\n                  <div class=\"navbar-user-menu-separator\"></div>\n                }\n\n                <button\n                  type=\"button\"\n                  [class]=\"getUserMenuItemClasses(item)\"\n                  [disabled]=\"item.disabled\"\n                  (click)=\"onUserMenuItemClick(item)\"\n                >\n                  @if (getUserMenuItemIcon(item)) {\n                    <i [class]=\"getUserMenuItemIcon(item)\"></i>\n                  }\n\n                  <span>\n                    {{ item.text }}\n                  </span>\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid var(--pt-navbar-border, #ddd);background-color:var(--pt-navbar-bg, #fff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid var(--pt-navbar-input-border, rgba(0, 0, 0, .18));border-radius:6px;background:var(--pt-navbar-input-bg, #fff);font-size:12px;color:var(--pt-navbar-input-text, #333);outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:var(--pt-navbar-link, #333);text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:var(--pt-navbar-link-hover, #000)}.pt-nav-bar-menu pt-notification{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:var(--pt-navbar-toggle-color, #333)}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f1f1)}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:var(--pt-navbar-user-profile-text, #334155);font-size:.82rem;font-weight:700;background:var(--pt-navbar-user-profile-bg, #eff6ff);border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:var(--pt-navbar-user-menu-separator, #e5e7eb);margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:var(--pt-navbar-user-menu-item-text, #334155);display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}.pt-nav-bar-menu .navbar-actions{gap:8px}}\n"] }]
+            args: [{ selector: 'pt-nav-bar-menu', standalone: false, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <div class=\"navbar-left\">\n    <a class=\"logo-link\" routerLink=\"/\">\n      @if (getLogoUrl()) {\n        <img\n          class=\"navbar-logo\"\n          [src]=\"getLogoUrl()\"\n          [alt]=\"getLogoAltText()\"\n          [ngStyle]=\"getLogoStyles()\"\n        />\n      }\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a class=\"toggle-btn\" (click)=\"toggleMenu()\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  @if (hasDateTime()) {\n    <div class=\"navbar-middle\" [ngClass]=\"getDateTimePositionClass()\">\n      <div class=\"navbar-datetime\">\n        <span class=\"dt-value\" [ngStyle]=\"getDateTimeTextStyles()\">\n          {{ dateTimeText }}\n        </span>\n\n        @if (isFixedMode()) {\n          <input\n            class=\"dt-input\"\n            type=\"datetime-local\"\n            step=\"1\"\n            [value]=\"manualDateTimeLocal\"\n            (input)=\"onManualDateTimeChange($any($event.target).value)\"\n          />\n        }\n      </div>\n    </div>\n  }\n\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\"></div>\n\n    <pt-notification\n      [notifications]=\"notifications\"\n      [config]=\"notificationConfig\"\n      [totalRecords]=\"notificationTotalRecords\"\n      [totalUnreadRecords]=\"notificationTotalUnreadRecords\"\n      [page]=\"notificationPage\"\n      [rows]=\"notificationRows\"\n      [loading]=\"notificationLoading\"\n      (loadMore)=\"onNotificationLoadMore($event)\"\n      (notificationClick)=\"onNotificationClick($event)\"\n      (action)=\"onNotificationAction($event)\"\n      (globalAction)=\"onNotificationGlobalAction($event)\"\n      (viewAll)=\"onNotificationViewAll()\"\n      (panelOpened)=\"onNotificationPanelOpened()\"\n      (panelClosed)=\"onNotificationPanelClosed()\"\n    ></pt-notification>\n\n    @if (hasUser()) {\n      <div class=\"navbar-user\" (click)=\"$event.stopPropagation()\">\n        @if (showProfileLeftOfAvatar()) {\n          <div\n            class=\"navbar-user-profile-left\"\n            [ngStyle]=\"getUserProfileTextStyles()\"\n          >\n            {{ getUserProfile() }}\n          </div>\n        }\n\n        <button\n          type=\"button\"\n          class=\"navbar-user-trigger\"\n          (click)=\"toggleUserMenu()\"\n        >\n          <div class=\"navbar-user-avatar\" [ngStyle]=\"getUserAvatarStyles()\">\n            @if (isInitialsAvatar()) {\n              <span>\n                {{ getUserInitials() }}\n              </span>\n            } @else {\n              <i class=\"fa fa-user\"></i>\n            }\n          </div>\n        </button>\n\n        @if (isUserMenuOpen) {\n          <div class=\"navbar-user-menu\">\n            <div class=\"navbar-user-menu-header\">\n              <div\n                class=\"navbar-user-menu-avatar\"\n                [ngStyle]=\"getUserAvatarStyles()\"\n              >\n                @if (isInitialsAvatar()) {\n                  <span>\n                    {{ getUserInitials() }}\n                  </span>\n                } @else {\n                  <i class=\"fa fa-user\"></i>\n                }\n              </div>\n\n              <div class=\"navbar-user-menu-identity\">\n                <div class=\"navbar-user-menu-name\">\n                  {{ getUserFullName() }}\n                </div>\n\n                @if (showProfileInMenu()) {\n                  <div\n                    class=\"navbar-user-menu-profile\"\n                    [ngStyle]=\"getUserProfileTextStyles()\"\n                  >\n                    {{ getUserProfile() }}\n                  </div>\n                }\n\n                <div class=\"navbar-user-menu-username\">\n                  {{ getUsername() }}\n                </div>\n              </div>\n            </div>\n\n            @if (hasUserMenuItems()) {\n              <div class=\"navbar-user-menu-separator\"></div>\n\n              @for (item of getUserMenuItems(); track item) {\n                @if (item.separatorBefore) {\n                  <div class=\"navbar-user-menu-separator\"></div>\n                }\n\n                <button\n                  type=\"button\"\n                  [class]=\"getUserMenuItemClasses(item)\"\n                  [disabled]=\"item.disabled\"\n                  (click)=\"onUserMenuItemClick(item)\"\n                >\n                  @if (getUserMenuItemIcon(item)) {\n                    <i [class]=\"getUserMenuItemIcon(item)\"></i>\n                  }\n\n                  <span>\n                    {{ item.text }}\n                  </span>\n                </button>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [".pt-nav-bar-menu{display:flex;align-items:center;justify-content:space-between;padding-right:10px;padding-left:10px;border-bottom:1px solid var(--pt-navbar-border, #ddd);background-color:var(--pt-navbar-bg, #fff);color:var(--pt-navbar-text, #1f2937);background-size:cover;background-position:center;gap:12px;min-width:0;width:100%;box-sizing:border-box}.pt-nav-bar-menu .navbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 0 auto}.pt-nav-bar-menu .logo-link{display:flex;align-items:center;text-decoration:none;color:inherit;min-width:0}.pt-nav-bar-menu .navbar-logo{margin-left:10px;margin-right:20px}.pt-nav-bar-menu .navbar-title{color:var(--pt-navbar-title, inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-middle{flex:1 1 auto;display:flex;align-items:center;min-width:0;padding:0 12px}.pt-nav-bar-menu .navbar-middle.dt-pos-left{justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-center{justify-content:center}.pt-nav-bar-menu .navbar-middle.dt-pos-right{justify-content:flex-end}.pt-nav-bar-menu .navbar-datetime{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;white-space:nowrap;max-width:100%}.pt-nav-bar-menu .navbar-datetime .dt-value{color:var(--pt-navbar-datetime-text, inherit);white-space:nowrap}.pt-nav-bar-menu .navbar-datetime .dt-input{height:32px;padding:0 8px;border:1px solid var(--pt-navbar-input-border, rgba(0, 0, 0, .18));border-radius:6px;background:var(--pt-navbar-input-bg, #fff);font-size:12px;color:var(--pt-navbar-input-text, #333);outline:none}.pt-nav-bar-menu .navbar-datetime .dt-input:focus{border-color:var(--pt-navbar-input-focus-border, rgba(3, 76, 131, .7));box-shadow:0 0 0 3px var(--pt-navbar-input-focus-shadow, rgba(3, 76, 131, .12))}.pt-nav-bar-menu .navbar-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}.pt-nav-bar-menu .navbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}.pt-nav-bar-menu .navbar-right a{margin-left:20px;color:var(--pt-navbar-link, #333);text-decoration:none;font-size:20px;cursor:pointer}.pt-nav-bar-menu .navbar-right a:hover{color:var(--pt-navbar-link-hover, #000)}.pt-nav-bar-menu pt-notification{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}.pt-nav-bar-menu .toggle-btn{margin-left:2rem;cursor:pointer;padding:7px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center}.pt-nav-bar-menu .toggle-btn>.pi.pi-bars{font-size:1.5rem;color:var(--pt-navbar-toggle-color, #333)}.pt-nav-bar-menu .toggle-btn:hover{background-color:var(--pt-navbar-toggle-hover-bg, #f1f1f1)}.pt-nav-bar-menu .navbar-user{position:relative;display:flex;align-items:center;gap:.65rem;flex:0 0 auto}.pt-nav-bar-menu .navbar-user-profile-left{max-width:170px;color:var(--pt-navbar-user-profile-text, #334155);font-size:.82rem;font-weight:700;background:var(--pt-navbar-user-profile-bg, #eff6ff);border:1px solid var(--pt-navbar-user-profile-border, #bfdbfe);border-radius:999px;padding:.28rem .65rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-trigger{border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}.pt-nav-bar-menu .navbar-user-avatar,.pt-nav-bar-menu .navbar-user-menu-avatar{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-navbar-user-avatar-bg, #eff6ff);color:var(--pt-navbar-user-avatar-text, #2563eb);border:1px solid var(--pt-navbar-user-avatar-border, #bfdbfe);display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-avatar i,.pt-nav-bar-menu .navbar-user-menu-avatar i{font-size:1rem}.pt-nav-bar-menu .navbar-user-menu{position:absolute;top:calc(100% + 10px);right:0;width:260px;background:var(--pt-navbar-user-menu-bg, #ffffff);color:var(--pt-navbar-user-menu-text, #334155);border:1px solid var(--pt-navbar-user-menu-border, #e5e7eb);border-radius:14px;box-shadow:var( --pt-navbar-user-menu-shadow, 0 18px 45px rgba(15, 23, 42, .16) );z-index:9999;padding:.75rem;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-header{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem .65rem}.pt-nav-bar-menu .navbar-user-menu-avatar{width:46px;height:46px;min-width:46px;font-size:1.05rem}.pt-nav-bar-menu .navbar-user-menu-identity{min-width:0}.pt-nav-bar-menu .navbar-user-menu-name{color:var(--pt-navbar-user-menu-name, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-profile{margin-top:.15rem;color:var(--pt-navbar-user-menu-profile, #2563eb);font-size:.8rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-username{margin-top:.15rem;color:var(--pt-navbar-user-menu-username, #64748b);font-size:.78rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-nav-bar-menu .navbar-user-menu-separator{height:1px;background:var(--pt-navbar-user-menu-separator, #e5e7eb);margin:.4rem 0}.pt-nav-bar-menu .navbar-user-menu-item{width:100%;min-height:36px;border:none;background:transparent;border-radius:9px;color:var(--pt-navbar-user-menu-item-text, #334155);display:flex;align-items:center;gap:.55rem;padding:.5rem .55rem;font-size:.86rem;font-weight:600;cursor:pointer;text-align:left;box-sizing:border-box}.pt-nav-bar-menu .navbar-user-menu-item:hover{background:var(--pt-navbar-user-menu-item-hover-bg, #f1f5f9);color:var(--pt-navbar-user-menu-item-hover-text, #0f172a)}.pt-nav-bar-menu .navbar-user-menu-item.danger{color:var(--pt-navbar-user-menu-item-danger-text, #dc2626)}.pt-nav-bar-menu .navbar-user-menu-item.danger:hover{background:var(--pt-navbar-user-menu-item-danger-hover-bg, #fef2f2);color:var(--pt-navbar-user-menu-item-danger-hover-text, #b91c1c)}.pt-nav-bar-menu .navbar-user-menu-item.disabled,.pt-nav-bar-menu .navbar-user-menu-item:disabled{opacity:.55;cursor:not-allowed}@media(max-width:900px){.pt-nav-bar-menu{flex-wrap:wrap;row-gap:8px}.pt-nav-bar-menu .navbar-left{width:100%;justify-content:space-between}.pt-nav-bar-menu .navbar-middle{width:100%;padding:0;justify-content:flex-start}.pt-nav-bar-menu .navbar-middle.dt-pos-right .navbar-datetime,.pt-nav-bar-menu .navbar-middle.dt-pos-center .navbar-datetime{padding-left:0;border-left:none}.pt-nav-bar-menu .navbar-actions{width:100%;justify-content:flex-end}.pt-nav-bar-menu .navbar-user-menu{right:0}.pt-nav-bar-menu .navbar-user-profile-left{max-width:130px}}@media(max-width:520px){.pt-nav-bar-menu .navbar-datetime .dt-value,.pt-nav-bar-menu .navbar-user-profile-left{display:none}.pt-nav-bar-menu .navbar-user-menu{width:240px}.pt-nav-bar-menu .navbar-actions{gap:8px}}\n"] }]
         }], propDecorators: { navBarMenuConfig: [{
                 type: Input
             }], serverDateTime: [{
@@ -6890,6 +7009,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Input
             }], notificationConfig: [{
                 type: Input
+            }], notificationTotalRecords: [{
+                type: Input
+            }], notificationTotalUnreadRecords: [{
+                type: Input
+            }], notificationPage: [{
+                type: Input
+            }], notificationRows: [{
+                type: Input
+            }], notificationLoading: [{
+                type: Input
             }], toggleSidebar: [{
                 type: Output
             }], notificationAction: [{
@@ -6904,6 +7033,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }], notificationViewAll: [{
                 type: Output
+            }], notificationLoadMore: [{
+                type: Output
             }], closeUserMenu: [{
                 type: HostListener,
                 args: ['document:click']
@@ -7530,6 +7661,10 @@ class PTPageSkeletonComponent {
     constructor() {
         this.notifications = [];
         this.notificationConfig = {};
+        this.notificationTotalRecords = 0;
+        this.notificationPage = 0;
+        this.notificationRows = 10;
+        this.notificationLoading = false;
         this.toggleSidebar = new EventEmitter();
         this.notificationAction = new EventEmitter();
         this.notificationClick = new EventEmitter();
@@ -7537,6 +7672,7 @@ class PTPageSkeletonComponent {
         this.notificationPanelClosed = new EventEmitter();
         this.notificationGlobalAction = new EventEmitter();
         this.notificationViewAll = new EventEmitter();
+        this.notificationLoadMore = new EventEmitter();
         this.isSidebarVisible = true;
     }
     ngOnInit() {
@@ -7565,6 +7701,9 @@ class PTPageSkeletonComponent {
     onNotificationPanelClosed() {
         this.notificationPanelClosed.emit();
     }
+    onNotificationLoadMore(event) {
+        this.notificationLoadMore.emit(event);
+    }
     initializeBackgroundCardConfig() {
         this.pageSkeletonConfig.backgroundCardConfig = {
             identifier: 'pt-page-skeleton/background',
@@ -7597,11 +7736,11 @@ class PTPageSkeletonComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPageSkeletonComponent, isStandalone: false, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig", serverDateTime: "serverDateTime", notifications: "notifications", notificationConfig: "notificationConfig" }, outputs: { toggleSidebar: "toggleSidebar", notificationAction: "notificationAction", notificationClick: "notificationClick", notificationPanelOpened: "notificationPanelOpened", notificationPanelClosed: "notificationPanelClosed", notificationGlobalAction: "notificationGlobalAction", notificationViewAll: "notificationViewAll" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    [notifications]=\"notifications\"\n    [notificationConfig]=\"notificationConfig\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n    (notificationClick)=\"onNotificationClick($event)\"\n    (notificationAction)=\"onNotificationAction($event)\"\n    (notificationGlobalAction)=\"onNotificationGlobalAction($event)\"\n    (notificationViewAll)=\"onNotificationViewAll()\"\n    (notificationPanelOpened)=\"onNotificationPanelOpened()\"\n    (notificationPanelClosed)=\"onNotificationPanelClosed()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    @if (pageSkeletonConfig.sideMenuBarConfig) {\n      <pt-side-bar-menu\n        class=\"sidebar\"\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        [ngClass]=\"{ hidden: !isSidebarVisible }\"\n      ></pt-side-bar-menu>\n    }\n\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        @if (pageSkeletonConfig.breadCrumbConfig) {\n          <pt-bread-crumb\n            [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n            class=\"bread-crumb\"\n          ></pt-bread-crumb>\n        }\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px;color:var(--pt-page-skeleton-breadcrumb-text, inherit)}.app-container{display:flex;flex-direction:column;height:100vh;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out;background:var(--pt-page-skeleton-main-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden;background:var(--pt-page-skeleton-content-area-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}.sidebar{transition:all .3s ease-in-out;background:var(--pt-page-skeleton-sidebar-bg, transparent);color:var(--pt-page-skeleton-sidebar-text, inherit)}.content-area.full-width{margin-left:0;width:100%}:host{display:block;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-content-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0;background:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important;background:var(--pt-page-skeleton-footer-bg, transparent)!important;color:var(--pt-page-skeleton-footer-text, inherit)!important}.footer-card{width:100%;background-color:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig", "serverDateTime", "notifications", "notificationConfig"], outputs: ["toggleSidebar", "notificationAction", "notificationClick", "notificationPanelOpened", "notificationPanelClosed", "notificationGlobalAction", "notificationViewAll"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTSideBarMenuComponent, selector: "pt-side-bar-menu", inputs: ["menuConfig"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTPageSkeletonComponent, isStandalone: false, selector: "pt-page-skeleton", inputs: { pageSkeletonConfig: "pageSkeletonConfig", serverDateTime: "serverDateTime", notifications: "notifications", notificationConfig: "notificationConfig", notificationTotalRecords: "notificationTotalRecords", notificationTotalUnreadRecords: "notificationTotalUnreadRecords", notificationPage: "notificationPage", notificationRows: "notificationRows", notificationLoading: "notificationLoading" }, outputs: { toggleSidebar: "toggleSidebar", notificationAction: "notificationAction", notificationClick: "notificationClick", notificationPanelOpened: "notificationPanelOpened", notificationPanelClosed: "notificationPanelClosed", notificationGlobalAction: "notificationGlobalAction", notificationViewAll: "notificationViewAll", notificationLoadMore: "notificationLoadMore" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    [notifications]=\"notifications\"\n    [notificationConfig]=\"notificationConfig\"\n    [notificationTotalRecords]=\"notificationTotalRecords\"\n    [notificationTotalUnreadRecords]=\"notificationTotalUnreadRecords\"\n    [notificationPage]=\"notificationPage\"\n    [notificationRows]=\"notificationRows\"\n    [notificationLoading]=\"notificationLoading\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n    (notificationClick)=\"onNotificationClick($event)\"\n    (notificationAction)=\"onNotificationAction($event)\"\n    (notificationGlobalAction)=\"onNotificationGlobalAction($event)\"\n    (notificationViewAll)=\"onNotificationViewAll()\"\n    (notificationLoadMore)=\"onNotificationLoadMore($event)\"\n    (notificationPanelOpened)=\"onNotificationPanelOpened()\"\n    (notificationPanelClosed)=\"onNotificationPanelClosed()\"\n  ></pt-nav-bar-menu>\n\n  <div\n    class=\"content-area\"\n    [ngClass]=\"{\n      'full-width': !isSidebarVisible,\n    }\"\n  >\n    <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n      @if (pageSkeletonConfig.breadCrumbConfig) {\n        <pt-bread-crumb\n          [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n          class=\"bread-crumb\"\n        ></pt-bread-crumb>\n      }\n\n      <router-outlet></router-outlet>\n    </pt-card>\n  </div>\n\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px;color:var(--pt-page-skeleton-breadcrumb-text, inherit)}.app-container{display:flex;flex-direction:column;height:100vh;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out;background:var(--pt-page-skeleton-main-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden;background:var(--pt-page-skeleton-content-area-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}.sidebar{transition:all .3s ease-in-out;background:var(--pt-page-skeleton-sidebar-bg, transparent);color:var(--pt-page-skeleton-sidebar-text, inherit)}.content-area.full-width{margin-left:0;width:100%}:host{display:block;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-content-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0;background:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important;background:var(--pt-page-skeleton-footer-bg, transparent)!important;color:var(--pt-page-skeleton-footer-text, inherit)!important}.footer-card{width:100%;background-color:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PTNavbarMenuComponent, selector: "pt-nav-bar-menu", inputs: ["navBarMenuConfig", "serverDateTime", "notifications", "notificationConfig", "notificationTotalRecords", "notificationTotalUnreadRecords", "notificationPage", "notificationRows", "notificationLoading"], outputs: ["toggleSidebar", "notificationAction", "notificationClick", "notificationPanelOpened", "notificationPanelClosed", "notificationGlobalAction", "notificationViewAll", "notificationLoadMore"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "directive", type: i1$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: PTFooterComponent, selector: "pt-footer", inputs: ["footerConfig"] }, { kind: "component", type: PTBreadCrumbComponent, selector: "pt-bread-crumb", inputs: ["breadCrumbConfig"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTPageSkeletonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-page-skeleton', standalone: false, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    [notifications]=\"notifications\"\n    [notificationConfig]=\"notificationConfig\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n    (notificationClick)=\"onNotificationClick($event)\"\n    (notificationAction)=\"onNotificationAction($event)\"\n    (notificationGlobalAction)=\"onNotificationGlobalAction($event)\"\n    (notificationViewAll)=\"onNotificationViewAll()\"\n    (notificationPanelOpened)=\"onNotificationPanelOpened()\"\n    (notificationPanelClosed)=\"onNotificationPanelClosed()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    @if (pageSkeletonConfig.sideMenuBarConfig) {\n      <pt-side-bar-menu\n        class=\"sidebar\"\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        [ngClass]=\"{ hidden: !isSidebarVisible }\"\n      ></pt-side-bar-menu>\n    }\n\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        @if (pageSkeletonConfig.breadCrumbConfig) {\n          <pt-bread-crumb\n            [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n            class=\"bread-crumb\"\n          ></pt-bread-crumb>\n        }\n\n        <router-outlet></router-outlet>\n      </pt-card>\n    </div>\n  </div>\n\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px;color:var(--pt-page-skeleton-breadcrumb-text, inherit)}.app-container{display:flex;flex-direction:column;height:100vh;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out;background:var(--pt-page-skeleton-main-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden;background:var(--pt-page-skeleton-content-area-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}.sidebar{transition:all .3s ease-in-out;background:var(--pt-page-skeleton-sidebar-bg, transparent);color:var(--pt-page-skeleton-sidebar-text, inherit)}.content-area.full-width{margin-left:0;width:100%}:host{display:block;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-content-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0;background:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important;background:var(--pt-page-skeleton-footer-bg, transparent)!important;color:var(--pt-page-skeleton-footer-text, inherit)!important}.footer-card{width:100%;background-color:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}\n"] }]
+            args: [{ selector: 'pt-page-skeleton', standalone: false, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    [notifications]=\"notifications\"\n    [notificationConfig]=\"notificationConfig\"\n    [notificationTotalRecords]=\"notificationTotalRecords\"\n    [notificationTotalUnreadRecords]=\"notificationTotalUnreadRecords\"\n    [notificationPage]=\"notificationPage\"\n    [notificationRows]=\"notificationRows\"\n    [notificationLoading]=\"notificationLoading\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n    (notificationClick)=\"onNotificationClick($event)\"\n    (notificationAction)=\"onNotificationAction($event)\"\n    (notificationGlobalAction)=\"onNotificationGlobalAction($event)\"\n    (notificationViewAll)=\"onNotificationViewAll()\"\n    (notificationLoadMore)=\"onNotificationLoadMore($event)\"\n    (notificationPanelOpened)=\"onNotificationPanelOpened()\"\n    (notificationPanelClosed)=\"onNotificationPanelClosed()\"\n  ></pt-nav-bar-menu>\n\n  <div\n    class=\"content-area\"\n    [ngClass]=\"{\n      'full-width': !isSidebarVisible,\n    }\"\n  >\n    <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n      @if (pageSkeletonConfig.breadCrumbConfig) {\n        <pt-bread-crumb\n          [breadCrumbConfig]=\"pageSkeletonConfig.breadCrumbConfig\"\n          class=\"bread-crumb\"\n        ></pt-bread-crumb>\n      }\n\n      <router-outlet></router-outlet>\n    </pt-card>\n  </div>\n\n  @if (pageSkeletonConfig.footerConfig) {\n    <pt-footer\n      [footerConfig]=\"pageSkeletonConfig.footerConfig\"\n      class=\"pt-footer\"\n    ></pt-footer>\n  }\n</pt-card>\n", styles: [".bread-crumb{margin-bottom:15px;color:var(--pt-page-skeleton-breadcrumb-text, inherit)}.app-container{display:flex;flex-direction:column;height:100vh;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.main-content{display:flex;flex-grow:1;transition:all .3s ease-in-out;background:var(--pt-page-skeleton-main-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area{flex-grow:1;display:flex;justify-content:center;align-items:flex-start;transition:all .3s ease-in-out;margin-left:14px;width:100%;overflow-x:hidden;background:var(--pt-page-skeleton-content-area-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}.sidebar{transition:all .3s ease-in-out;background:var(--pt-page-skeleton-sidebar-bg, transparent);color:var(--pt-page-skeleton-sidebar-text, inherit)}.content-area.full-width{margin-left:0;width:100%}:host{display:block;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}:host>pt-card{width:100%;min-height:100vh;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-bg, transparent);color:var(--pt-page-skeleton-text, inherit)}.content-area>pt-card{width:100%;height:100%;max-width:100%;overflow:hidden;background:var(--pt-page-skeleton-content-bg, transparent);color:var(--pt-page-skeleton-content-text, inherit)}pt-card .card-body-scrollable{overflow-x:auto}.pt-footer{display:block;width:100%;position:relative;z-index:0;margin-top:0;background:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}:host ::ng-deep .pt-footer .footer-card,:host ::ng-deep .pt-footer pt-card{height:auto!important;overflow:visible!important;background:var(--pt-page-skeleton-footer-bg, transparent)!important;color:var(--pt-page-skeleton-footer-text, inherit)!important}.footer-card{width:100%;background-color:var(--pt-page-skeleton-footer-bg, transparent);color:var(--pt-page-skeleton-footer-text, inherit)}\n"] }]
         }], propDecorators: { pageSkeletonConfig: [{
                 type: Input
             }], serverDateTime: [{
@@ -7610,6 +7749,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Input
             }], notificationConfig: [{
                 type: Input
+            }], notificationTotalRecords: [{
+                type: Input
+            }], notificationTotalUnreadRecords: [{
+                type: Input
+            }], notificationPage: [{
+                type: Input
+            }], notificationRows: [{
+                type: Input
+            }], notificationLoading: [{
+                type: Input
             }], toggleSidebar: [{
                 type: Output
             }], notificationAction: [{
@@ -7624,6 +7773,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }], notificationViewAll: [{
                 type: Output
+            }], notificationLoadMore: [{
+                type: Output
             }] } });
 
 class PTFooterModule {
@@ -11642,6 +11793,486 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+class PTNotificationsPageComponent {
+    constructor() {
+        /**
+         * Current server page only.
+         */
+        this.notifications = [];
+        /**
+         * Number of records matching the current:
+         *
+         * search + selected filter
+         *
+         * This value is used by the paginator.
+         */
+        this.totalRecords = 0;
+        /**
+         * Number of all notifications matching the current search,
+         * before applying ALL / UNREAD / READ.
+         *
+         * Used by the "Toutes" counter.
+         */
+        this.totalAllRecords = 0;
+        /**
+         * Current zero-based page.
+         */
+        this.page = 0;
+        /**
+         * Current server page size.
+         */
+        this.rows = 10;
+        this.config = {};
+        this.notificationClick = new EventEmitter();
+        this.action = new EventEmitter();
+        this.globalAction = new EventEmitter();
+        /**
+         * Request for a new server page.
+         *
+         * Emitted on:
+         * - pagination
+         * - page size change
+         * - filter change
+         * - search
+         */
+        this.queryChange = new EventEmitter();
+        this.searchText = '';
+        this.selectedFilter = 'ALL';
+        this.openedActionMenuId = null;
+        this.isGlobalActionMenuOpen = false;
+        this.destroy$ = new Subject();
+        this.searchSubject = new Subject();
+        this.defaultActions = [
+            {
+                id: 'MARK_AS_READ',
+                label: 'Marquer comme lue',
+                icon: 'pi pi-check',
+            },
+            {
+                id: 'DELETE',
+                label: 'Supprimer',
+                icon: 'pi pi-trash',
+                danger: true,
+            },
+        ];
+        this.defaultGlobalActions = [
+            {
+                id: 'MARK_ALL_AS_READ',
+                label: 'Tout marquer comme lu',
+                icon: 'pi pi-check-circle',
+            },
+        ];
+        this.searchSubject
+            .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.page = 0;
+            this.closeMenus();
+            this.emitQueryChange();
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['config']?.firstChange) {
+            this.selectedFilter = this.config.defaultFilter ?? 'ALL';
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    getNotifications() {
+        return this.notifications ?? [];
+    }
+    /**
+     * The supplied notifications already correspond
+     * to one server page.
+     *
+     * No filtering, sorting or pagination is performed here.
+     */
+    getDisplayedNotifications() {
+        return this.getNotifications();
+    }
+    getTotalCount() {
+        return Math.max(0, this.totalAllRecords ?? 0);
+    }
+    getUnreadCount() {
+        if (this.totalUnreadRecords !== undefined) {
+            return Math.max(0, this.totalUnreadRecords);
+        }
+        return this.getNotifications().filter((notification) => notification.read !== true).length;
+    }
+    getReadCount() {
+        if (this.totalReadRecords !== undefined) {
+            return Math.max(0, this.totalReadRecords);
+        }
+        return this.getNotifications().filter((notification) => notification.read === true).length;
+    }
+    hasNotifications() {
+        return this.getDisplayedNotifications().length > 0;
+    }
+    hasSearch() {
+        return this.searchText.trim().length > 0;
+    }
+    showSearch() {
+        return this.config.showSearch !== false;
+    }
+    showFilters() {
+        return this.config.showFilters !== false;
+    }
+    showCounters() {
+        return this.config.showCounters !== false;
+    }
+    showPagination() {
+        return this.config.showPagination !== false && this.totalRecords > 0;
+    }
+    showGlobalActions() {
+        return (this.config.showGlobalActions !== false &&
+            this.getGlobalActions().length > 0);
+    }
+    getTitle() {
+        return this.config.title?.trim() || 'Notifications';
+    }
+    getSubtitle() {
+        return this.config.subtitle?.trim() || 'Consultez toutes vos notifications';
+    }
+    getEmptyText() {
+        return this.config.emptyText?.trim() || 'Aucune notification';
+    }
+    getNoSearchResultText() {
+        return (this.config.noSearchResultText?.trim() ||
+            'Aucune notification ne correspond à votre recherche');
+    }
+    getEmptyIcon() {
+        return this.config.emptyIcon?.trim() || 'pi pi-bell-slash';
+    }
+    getSearchPlaceholder() {
+        return (this.config.searchPlaceholder?.trim() || 'Rechercher une notification...');
+    }
+    getAllLabel() {
+        return this.config.allLabel?.trim() || 'Toutes';
+    }
+    getUnreadLabel() {
+        return this.config.unreadLabel?.trim() || 'Non lues';
+    }
+    getReadLabel() {
+        return this.config.readLabel?.trim() || 'Lues';
+    }
+    getRowsPerPageOptions() {
+        return this.config.rowsPerPageOptions ?? [5, 10, 20, 50];
+    }
+    showCurrentPageReport() {
+        return this.config.showCurrentPageReport !== false;
+    }
+    getCurrentPageReportTemplate() {
+        return (this.config.currentPageReportTemplate?.trim() ||
+            '{first} - {last} sur {totalRecords}');
+    }
+    getFirst() {
+        return Math.max(0, this.page) * Math.max(1, this.rows);
+    }
+    selectFilter(filter) {
+        if (this.selectedFilter === filter) {
+            return;
+        }
+        this.selectedFilter = filter;
+        /*
+         * A server-side filter always restarts
+         * pagination from the first page.
+         */
+        this.page = 0;
+        this.closeMenus();
+        this.emitQueryChange();
+    }
+    isFilterSelected(filter) {
+        return this.selectedFilter === filter;
+    }
+    onSearch(value) {
+        this.searchText = value ?? '';
+        this.searchSubject.next(this.searchText.trim());
+    }
+    clearSearch() {
+        if (!this.hasSearch()) {
+            return;
+        }
+        this.searchText = '';
+        this.page = 0;
+        this.closeMenus();
+        /*
+         * Explicit clear must execute immediately
+         * without waiting for the debounce.
+         */
+        this.emitQueryChange();
+    }
+    onPageChange(event) {
+        const nextRows = event.rows ?? this.rows;
+        const nextFirst = event.first ?? 0;
+        this.rows = nextRows > 0 ? nextRows : this.rows;
+        this.page = this.rows > 0 ? Math.floor(nextFirst / this.rows) : 0;
+        this.closeMenus();
+        this.emitQueryChange();
+    }
+    onNotificationClick(notification, event) {
+        event.stopPropagation();
+        if (notification.disabled) {
+            return;
+        }
+        this.closeMenus();
+        this.notificationClick.emit({
+            notification,
+        });
+    }
+    toggleActionMenu(notification, event) {
+        event.stopPropagation();
+        if (notification.disabled) {
+            return;
+        }
+        this.isGlobalActionMenuOpen = false;
+        this.openedActionMenuId =
+            this.openedActionMenuId === notification.id ? null : notification.id;
+    }
+    onActionMenuClick(event) {
+        event.stopPropagation();
+    }
+    onActionClick(notification, menuAction, event) {
+        event.stopPropagation();
+        if (notification.disabled || menuAction.disabled) {
+            return;
+        }
+        this.action.emit({
+            notification,
+            action: menuAction,
+        });
+        this.openedActionMenuId = null;
+    }
+    toggleGlobalActionMenu(event) {
+        event.stopPropagation();
+        this.openedActionMenuId = null;
+        this.isGlobalActionMenuOpen = !this.isGlobalActionMenuOpen;
+    }
+    onGlobalActionMenuClick(event) {
+        event.stopPropagation();
+    }
+    onGlobalActionClick(menuAction, event) {
+        event.stopPropagation();
+        if (menuAction.disabled) {
+            return;
+        }
+        this.globalAction.emit({
+            action: menuAction,
+            /*
+             * Since this is server pagination,
+             * notifications contains only the current page.
+             */
+            notifications: this.getNotifications(),
+        });
+        this.isGlobalActionMenuOpen = false;
+    }
+    closeMenus() {
+        this.openedActionMenuId = null;
+        this.isGlobalActionMenuOpen = false;
+    }
+    getNotificationClasses(notification) {
+        const classes = ['pt-notifications-page-item'];
+        if (notification.read !== true) {
+            classes.push('unread');
+        }
+        if (notification.disabled) {
+            classes.push('disabled');
+        }
+        if (notification.styleClass) {
+            classes.push(notification.styleClass);
+        }
+        return classes.join(' ');
+    }
+    getNotificationIcon(notification) {
+        return notification.icon?.trim() || 'pi pi-bell';
+    }
+    getNotificationIconStyles(notification) {
+        return {
+            color: notification.iconColor ??
+                'var(--pt-notifications-page-icon-color, #3F2564)',
+        };
+    }
+    getActions(notification) {
+        const configuredActions = notification.actions !== undefined
+            ? notification.actions
+            : this.defaultActions;
+        return configuredActions.filter((menuAction) => {
+            if (menuAction.visible === false) {
+                return false;
+            }
+            if (menuAction.id === 'MARK_AS_READ' && notification.read === true) {
+                return false;
+            }
+            return true;
+        });
+    }
+    getGlobalActions() {
+        const configuredActions = this.config.globalActions !== undefined
+            ? this.config.globalActions
+            : this.defaultGlobalActions;
+        return configuredActions.filter((menuAction) => {
+            if (menuAction.visible === false) {
+                return false;
+            }
+            if (menuAction.id === 'MARK_ALL_AS_READ' && this.getUnreadCount() === 0) {
+                return false;
+            }
+            return true;
+        });
+    }
+    hasActions(notification) {
+        return this.getActions(notification).length > 0;
+    }
+    isActionMenuOpen(notification) {
+        return this.openedActionMenuId === notification.id;
+    }
+    getActionClasses(menuAction) {
+        const classes = ['pt-notifications-page-action-item'];
+        if (menuAction.danger) {
+            classes.push('danger');
+        }
+        if (menuAction.disabled) {
+            classes.push('disabled');
+        }
+        return classes.join(' ');
+    }
+    hasMetadata(notification) {
+        return !!(notification.date || notification.sender?.trim());
+    }
+    getDateText(notification) {
+        if (!notification.date) {
+            return '';
+        }
+        const date = this.toDate(notification.date);
+        if (!date) {
+            return String(notification.date);
+        }
+        return this.formatRelativeDate(date);
+    }
+    emitQueryChange() {
+        this.queryChange.emit({
+            page: Math.max(0, this.page),
+            size: Math.max(1, this.rows),
+            first: this.getFirst(),
+            filter: this.selectedFilter,
+            search: this.searchText.trim(),
+        });
+    }
+    formatRelativeDate(date) {
+        const now = new Date();
+        const differenceMs = now.getTime() - date.getTime();
+        if (differenceMs < 0) {
+            return this.formatAbsoluteDate(date);
+        }
+        const differenceSeconds = Math.floor(differenceMs / 1000);
+        const differenceMinutes = Math.floor(differenceSeconds / 60);
+        const differenceHours = Math.floor(differenceMinutes / 60);
+        const differenceDays = this.getCalendarDayDifference(now, date);
+        if (differenceSeconds < 60) {
+            return "À l'instant";
+        }
+        if (differenceMinutes < 60) {
+            return `Il y a ${differenceMinutes} min`;
+        }
+        if (differenceDays === 0) {
+            return `Il y a ${differenceHours} h`;
+        }
+        if (differenceDays === 1) {
+            return `Hier à ${this.formatTime(date)}`;
+        }
+        if (differenceDays < 7) {
+            return `Il y a ${differenceDays} j`;
+        }
+        return this.formatAbsoluteDate(date);
+    }
+    getCalendarDayDifference(left, right) {
+        const leftDay = Date.UTC(left.getFullYear(), left.getMonth(), left.getDate());
+        const rightDay = Date.UTC(right.getFullYear(), right.getMonth(), right.getDate());
+        return Math.round((leftDay - rightDay) / (24 * 60 * 60 * 1000));
+    }
+    toDate(value) {
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : value;
+        }
+        const normalized = value.trim();
+        if (!normalized) {
+            return null;
+        }
+        /*
+         * Java LocalDateTime / local date-time
+         * without timezone.
+         *
+         * Example:
+         * 2026-08-10T11:15:32.653839
+         */
+        const localDateMatch = normalized.match(/^(\d{4})-(\d{2})-(\d{2})[T\s](\d{2}):(\d{2})(?::(\d{2}))?(?:\.(\d+))?$/);
+        if (localDateMatch) {
+            const [, year, month, day, hour, minute, second = '0', fraction = ''] = localDateMatch;
+            const milliseconds = Number(fraction.padEnd(3, '0').substring(0, 3) || '0');
+            const parsedDate = new Date(Number(year), Number(month) - 1, Number(day), Number(hour), Number(minute), Number(second), milliseconds);
+            return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
+        }
+        const parsedDate = new Date(normalized);
+        return Number.isNaN(parsedDate.getTime()) ? null : parsedDate;
+    }
+    formatAbsoluteDate(date) {
+        const day = this.pad2(date.getDate());
+        const month = this.pad2(date.getMonth() + 1);
+        const year = date.getFullYear();
+        return `${day}/${month}/${year} ${this.formatTime(date)}`;
+    }
+    formatTime(date) {
+        return `${this.pad2(date.getHours())}:${this.pad2(date.getMinutes())}`;
+    }
+    pad2(value) {
+        return String(value).padStart(2, '0');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNotificationsPageComponent, isStandalone: false, selector: "pt-notifications-page", inputs: { notifications: "notifications", totalRecords: "totalRecords", totalAllRecords: "totalAllRecords", totalUnreadRecords: "totalUnreadRecords", totalReadRecords: "totalReadRecords", page: "page", rows: "rows", config: "config" }, outputs: { notificationClick: "notificationClick", action: "action", globalAction: "globalAction", queryChange: "queryChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-notifications-page\" (click)=\"closeMenus()\">\n  <div class=\"pt-notifications-page-header\">\n    <div class=\"pt-notifications-page-heading\">\n      <div class=\"pt-notifications-page-title-row\">\n        <div class=\"pt-notifications-page-title-icon\">\n          <i class=\"pi pi-bell\"></i>\n        </div>\n\n        <div>\n          <h2 class=\"pt-notifications-page-title\">\n            {{ getTitle() }}\n          </h2>\n\n          <div class=\"pt-notifications-page-subtitle\">\n            {{ getSubtitle() }}\n          </div>\n        </div>\n      </div>\n\n      @if (showCounters()) {\n        <div class=\"pt-notifications-page-counters\">\n          <span class=\"pt-notifications-page-counter\">\n            {{ getTotalCount() }}\n            notification(s)\n          </span>\n\n          @if (getUnreadCount() > 0) {\n            <span class=\"pt-notifications-page-counter unread\">\n              {{ getUnreadCount() }}\n              non lue(s)\n            </span>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showGlobalActions()) {\n      <div\n        class=\"pt-notifications-page-global-actions\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-global-button\"\n          aria-label=\"Actions globales\"\n          (click)=\"toggleGlobalActionMenu($event)\"\n        >\n          <i class=\"pi pi-ellipsis-v\"></i>\n        </button>\n\n        @if (isGlobalActionMenuOpen) {\n          <div\n            class=\"pt-notifications-page-global-menu\"\n            (click)=\"onGlobalActionMenuClick($event)\"\n          >\n            @for (menuAction of getGlobalActions(); track menuAction.id) {\n              <button\n                type=\"button\"\n                [class]=\"getActionClasses(menuAction)\"\n                [disabled]=\"menuAction.disabled\"\n                (click)=\"onGlobalActionClick(menuAction, $event)\"\n              >\n                @if (menuAction.icon) {\n                  <i [class]=\"menuAction.icon\"></i>\n                }\n\n                <span>\n                  {{ menuAction.label }}\n                </span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"pt-notifications-page-toolbar\">\n    @if (showFilters()) {\n      <div class=\"pt-notifications-page-filters\">\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('ALL')\"\n          (click)=\"selectFilter('ALL')\"\n        >\n          {{ getAllLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getTotalCount() }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('UNREAD')\"\n          (click)=\"selectFilter('UNREAD')\"\n        >\n          {{ getUnreadLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getUnreadCount() }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('READ')\"\n          (click)=\"selectFilter('READ')\"\n        >\n          {{ getReadLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getReadCount() }}\n          </span>\n        </button>\n      </div>\n    }\n\n    @if (showSearch()) {\n      <div class=\"pt-notifications-page-search\">\n        <i class=\"pi pi-search\"></i>\n\n        <input\n          type=\"text\"\n          [value]=\"searchText\"\n          [placeholder]=\"getSearchPlaceholder()\"\n          (input)=\"onSearch($any($event.target).value)\"\n        />\n\n        @if (hasSearch()) {\n          <button\n            type=\"button\"\n            class=\"pt-notifications-page-search-clear\"\n            aria-label=\"Effacer la recherche\"\n            (click)=\"clearSearch()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hasNotifications()) {\n    <div class=\"pt-notifications-page-list\">\n      @for (\n        notification of getDisplayedNotifications();\n        track notification.id\n      ) {\n        <div\n          [class]=\"getNotificationClasses(notification)\"\n          (click)=\"onNotificationClick(notification, $event)\"\n        >\n          <div class=\"pt-notifications-page-item-icon-wrapper\">\n            <div class=\"pt-notifications-page-item-icon\">\n              <i\n                [class]=\"getNotificationIcon(notification)\"\n                [ngStyle]=\"getNotificationIconStyles(notification)\"\n              ></i>\n            </div>\n          </div>\n\n          <div class=\"pt-notifications-page-item-content\">\n            <div class=\"pt-notifications-page-item-text\">\n              {{ notification.text }}\n            </div>\n\n            @if (hasMetadata(notification)) {\n              <div class=\"pt-notifications-page-item-metadata\">\n                @if (notification.date) {\n                  <span>\n                    <i class=\"pi pi-clock\"></i>\n\n                    {{ getDateText(notification) }}\n                  </span>\n                }\n\n                @if (notification.sender?.trim()) {\n                  <span>\n                    <i class=\"pi pi-user\"></i>\n\n                    {{ notification.sender }}\n                  </span>\n                }\n              </div>\n            }\n          </div>\n\n          @if (hasActions(notification)) {\n            <div\n              class=\"pt-notifications-page-item-actions\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"pt-notifications-page-more-button\"\n                aria-label=\"Actions notification\"\n                [disabled]=\"notification.disabled\"\n                (click)=\"toggleActionMenu(notification, $event)\"\n              >\n                <i class=\"pi pi-ellipsis-v\"></i>\n              </button>\n\n              @if (isActionMenuOpen(notification)) {\n                <div\n                  class=\"pt-notifications-page-action-menu\"\n                  (click)=\"onActionMenuClick($event)\"\n                >\n                  @for (\n                    menuAction of getActions(notification);\n                    track menuAction.id\n                  ) {\n                    <button\n                      type=\"button\"\n                      [class]=\"getActionClasses(menuAction)\"\n                      [disabled]=\"menuAction.disabled\"\n                      (click)=\"onActionClick(notification, menuAction, $event)\"\n                    >\n                      @if (menuAction.icon) {\n                        <i [class]=\"menuAction.icon\"></i>\n                      }\n\n                      <span>\n                        {{ menuAction.label }}\n                      </span>\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          @if (notification.read !== true) {\n            <span class=\"pt-notifications-page-unread-indicator\"></span>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"pt-notifications-page-empty\">\n      <div class=\"pt-notifications-page-empty-icon\">\n        <i [class]=\"getEmptyIcon()\"></i>\n      </div>\n\n      <div class=\"pt-notifications-page-empty-text\">\n        @if (hasSearch()) {\n          {{ getNoSearchResultText() }}\n        } @else {\n          {{ getEmptyText() }}\n        }\n      </div>\n    </div>\n  }\n\n  @if (showPagination()) {\n    <div class=\"pt-notifications-page-pagination\">\n      <p-paginator\n        [first]=\"getFirst()\"\n        [rows]=\"rows\"\n        [totalRecords]=\"totalRecords\"\n        [rowsPerPageOptions]=\"getRowsPerPageOptions()\"\n        [showCurrentPageReport]=\"showCurrentPageReport()\"\n        [currentPageReportTemplate]=\"getCurrentPageReportTemplate()\"\n        (onPageChange)=\"onPageChange($event)\"\n      ></p-paginator>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.pt-notifications-page{position:relative;width:100%;background:var(--pt-notifications-page-bg, #ffffff);border:1px solid var(--pt-notifications-page-border, #e5e7eb);border-radius:14px;overflow:visible}.pt-notifications-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb)}.pt-notifications-page-heading{display:flex;flex-direction:column;gap:.85rem}.pt-notifications-page-title-row{display:flex;align-items:center;gap:.8rem}.pt-notifications-page-title-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--pt-notifications-page-title-icon-bg, #f3f0f8);color:var(--pt-notifications-page-title-icon-color, #3f2564);font-size:1.15rem}.pt-notifications-page-title{margin:0;color:var(--pt-notifications-page-title-color, #1f2937);font-size:1.25rem;font-weight:700}.pt-notifications-page-subtitle{margin-top:.2rem;color:var(--pt-notifications-page-subtitle-color, #6b7280);font-size:.875rem}.pt-notifications-page-counters{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.pt-notifications-page-counter{display:inline-flex;align-items:center;padding:.3rem .65rem;border-radius:999px;background:var(--pt-notifications-page-counter-bg, #f3f4f6);color:var(--pt-notifications-page-counter-color, #4b5563);font-size:.78rem;font-weight:600}.pt-notifications-page-counter.unread{background:var(--pt-notifications-page-unread-counter-bg, #f3f0f8);color:var(--pt-notifications-page-unread-counter-color, #3f2564)}.pt-notifications-page-global-actions{position:relative}.pt-notifications-page-global-button,.pt-notifications-page-more-button,.pt-notifications-page-search-clear{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;color:var(--pt-notifications-page-action-color, #6b7280)}.pt-notifications-page-global-button{width:36px;height:36px;border-radius:50%}.pt-notifications-page-global-button:hover,.pt-notifications-page-more-button:hover{background:var(--pt-notifications-page-action-hover-bg, #f3f4f6)}.pt-notifications-page-global-menu,.pt-notifications-page-action-menu{position:absolute;z-index:1000;min-width:200px;padding:.35rem;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 25px #0f172a24}.pt-notifications-page-global-menu{top:calc(100% + 5px);right:0}.pt-notifications-page-action-menu{top:30px;right:0}.pt-notifications-page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb)}.pt-notifications-page-filters{display:flex;align-items:center;gap:.4rem}.pt-notifications-page-filter{display:flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border:1px solid var(--pt-notifications-page-filter-border, #e5e7eb);border-radius:8px;background:var(--pt-notifications-page-filter-bg, #ffffff);color:var(--pt-notifications-page-filter-color, #4b5563);font-size:.82rem;font-weight:600;cursor:pointer}.pt-notifications-page-filter:hover{background:#f9fafb}.pt-notifications-page-filter.selected{border-color:var(--pt-notifications-page-primary, #3f2564);background:var(--pt-notifications-page-selected-bg, #f3f0f8);color:var(--pt-notifications-page-primary, #3f2564)}.pt-notifications-page-filter-count{min-width:20px;padding:.1rem .35rem;border-radius:999px;background:#0000000d;text-align:center;font-size:.72rem}.pt-notifications-page-search{position:relative;display:flex;align-items:center;width:min(360px,100%)}.pt-notifications-page-search>.pi-search{position:absolute;left:.85rem;color:#9ca3af}.pt-notifications-page-search input{width:100%;padding:.65rem 2.5rem .65rem 2.4rem;border:1px solid #d1d5db;border-radius:8px;outline:none;font-size:.85rem}.pt-notifications-page-search input:focus{border-color:var(--pt-notifications-page-primary, #3f2564);box-shadow:0 0 0 2px #3f256414}.pt-notifications-page-search-clear{position:absolute;right:.6rem;width:28px;height:28px}.pt-notifications-page-list{width:100%}.pt-notifications-page-item{position:relative;display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb);background:var(--pt-notifications-page-item-bg, #ffffff);cursor:pointer;transition:background .15s ease}.pt-notifications-page-item:last-child{border-bottom:0}.pt-notifications-page-item:hover{background:var(--pt-notifications-page-item-hover-bg, #f9fafb)}.pt-notifications-page-item.unread{background:var(--pt-notifications-page-unread-bg, #faf8fd)}.pt-notifications-page-item.unread:hover{background:var(--pt-notifications-page-unread-hover-bg, #f6f2fa)}.pt-notifications-page-item.disabled{opacity:.55;cursor:default}.pt-notifications-page-item-icon-wrapper{flex:0 0 auto}.pt-notifications-page-item-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--pt-notifications-page-item-icon-bg, #f3f4f6);font-size:1rem}.pt-notifications-page-item-content{flex:1 1 auto;min-width:0}.pt-notifications-page-item-text{color:var(--pt-notifications-page-text-color, #1f2937);font-size:.9rem;line-height:1.5}.pt-notifications-page-item.unread .pt-notifications-page-item-text{font-weight:600}.pt-notifications-page-item-metadata{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:.5rem;color:var(--pt-notifications-page-metadata-color, #6b7280);font-size:.78rem}.pt-notifications-page-item-metadata span{display:inline-flex;align-items:center;gap:.35rem}.pt-notifications-page-item-actions{position:relative;flex:0 0 auto}.pt-notifications-page-more-button{width:30px;height:30px;border-radius:50%}.pt-notifications-page-action-item{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .7rem;border:0;border-radius:6px;background:transparent;color:#374151;font-size:.8rem;text-align:left;cursor:pointer}.pt-notifications-page-action-item:hover{background:#f3f4f6}.pt-notifications-page-action-item.danger{color:#dc2626}.pt-notifications-page-action-item.disabled{opacity:.5;cursor:default}.pt-notifications-page-unread-indicator{position:absolute;top:50%;right:.5rem;width:7px;height:7px;border-radius:50%;background:var(--pt-notifications-page-unread-indicator, #3f2564);transform:translateY(-50%)}.pt-notifications-page-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;padding:3rem;color:#6b7280;text-align:center}.pt-notifications-page-empty-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:1rem;border-radius:50%;background:#f3f4f6;color:#9ca3af;font-size:1.6rem}.pt-notifications-page-empty-text{max-width:450px;font-size:.9rem}@media(max-width:768px){.pt-notifications-page-header,.pt-notifications-page-toolbar{flex-direction:column;align-items:stretch}.pt-notifications-page-filters{overflow-x:auto}.pt-notifications-page-search{width:100%}.pt-notifications-page-item{padding:1rem 1.1rem}.pt-notifications-page-item-metadata{gap:.5rem 1rem}}.pt-notifications-page-pagination{display:flex;align-items:center;justify-content:center;width:100%;padding:.75rem 1rem;box-sizing:border-box;border-top:1px solid var(--pt-notifications-page-border, #e5e7eb);background:var(--pt-notifications-page-pagination-bg, #ffffff)}.pt-notifications-page-pagination ::ng-deep .p-paginator{width:100%;border:0;background:transparent}@media(max-width:768px){.pt-notifications-page-pagination{padding:.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$5.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-notifications-page', standalone: false, template: "<div class=\"pt-notifications-page\" (click)=\"closeMenus()\">\n  <div class=\"pt-notifications-page-header\">\n    <div class=\"pt-notifications-page-heading\">\n      <div class=\"pt-notifications-page-title-row\">\n        <div class=\"pt-notifications-page-title-icon\">\n          <i class=\"pi pi-bell\"></i>\n        </div>\n\n        <div>\n          <h2 class=\"pt-notifications-page-title\">\n            {{ getTitle() }}\n          </h2>\n\n          <div class=\"pt-notifications-page-subtitle\">\n            {{ getSubtitle() }}\n          </div>\n        </div>\n      </div>\n\n      @if (showCounters()) {\n        <div class=\"pt-notifications-page-counters\">\n          <span class=\"pt-notifications-page-counter\">\n            {{ getTotalCount() }}\n            notification(s)\n          </span>\n\n          @if (getUnreadCount() > 0) {\n            <span class=\"pt-notifications-page-counter unread\">\n              {{ getUnreadCount() }}\n              non lue(s)\n            </span>\n          }\n        </div>\n      }\n    </div>\n\n    @if (showGlobalActions()) {\n      <div\n        class=\"pt-notifications-page-global-actions\"\n        (click)=\"$event.stopPropagation()\"\n      >\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-global-button\"\n          aria-label=\"Actions globales\"\n          (click)=\"toggleGlobalActionMenu($event)\"\n        >\n          <i class=\"pi pi-ellipsis-v\"></i>\n        </button>\n\n        @if (isGlobalActionMenuOpen) {\n          <div\n            class=\"pt-notifications-page-global-menu\"\n            (click)=\"onGlobalActionMenuClick($event)\"\n          >\n            @for (menuAction of getGlobalActions(); track menuAction.id) {\n              <button\n                type=\"button\"\n                [class]=\"getActionClasses(menuAction)\"\n                [disabled]=\"menuAction.disabled\"\n                (click)=\"onGlobalActionClick(menuAction, $event)\"\n              >\n                @if (menuAction.icon) {\n                  <i [class]=\"menuAction.icon\"></i>\n                }\n\n                <span>\n                  {{ menuAction.label }}\n                </span>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"pt-notifications-page-toolbar\">\n    @if (showFilters()) {\n      <div class=\"pt-notifications-page-filters\">\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('ALL')\"\n          (click)=\"selectFilter('ALL')\"\n        >\n          {{ getAllLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getTotalCount() }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('UNREAD')\"\n          (click)=\"selectFilter('UNREAD')\"\n        >\n          {{ getUnreadLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getUnreadCount() }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"pt-notifications-page-filter\"\n          [class.selected]=\"isFilterSelected('READ')\"\n          (click)=\"selectFilter('READ')\"\n        >\n          {{ getReadLabel() }}\n\n          <span class=\"pt-notifications-page-filter-count\">\n            {{ getReadCount() }}\n          </span>\n        </button>\n      </div>\n    }\n\n    @if (showSearch()) {\n      <div class=\"pt-notifications-page-search\">\n        <i class=\"pi pi-search\"></i>\n\n        <input\n          type=\"text\"\n          [value]=\"searchText\"\n          [placeholder]=\"getSearchPlaceholder()\"\n          (input)=\"onSearch($any($event.target).value)\"\n        />\n\n        @if (hasSearch()) {\n          <button\n            type=\"button\"\n            class=\"pt-notifications-page-search-clear\"\n            aria-label=\"Effacer la recherche\"\n            (click)=\"clearSearch()\"\n          >\n            <i class=\"pi pi-times\"></i>\n          </button>\n        }\n      </div>\n    }\n  </div>\n\n  @if (hasNotifications()) {\n    <div class=\"pt-notifications-page-list\">\n      @for (\n        notification of getDisplayedNotifications();\n        track notification.id\n      ) {\n        <div\n          [class]=\"getNotificationClasses(notification)\"\n          (click)=\"onNotificationClick(notification, $event)\"\n        >\n          <div class=\"pt-notifications-page-item-icon-wrapper\">\n            <div class=\"pt-notifications-page-item-icon\">\n              <i\n                [class]=\"getNotificationIcon(notification)\"\n                [ngStyle]=\"getNotificationIconStyles(notification)\"\n              ></i>\n            </div>\n          </div>\n\n          <div class=\"pt-notifications-page-item-content\">\n            <div class=\"pt-notifications-page-item-text\">\n              {{ notification.text }}\n            </div>\n\n            @if (hasMetadata(notification)) {\n              <div class=\"pt-notifications-page-item-metadata\">\n                @if (notification.date) {\n                  <span>\n                    <i class=\"pi pi-clock\"></i>\n\n                    {{ getDateText(notification) }}\n                  </span>\n                }\n\n                @if (notification.sender?.trim()) {\n                  <span>\n                    <i class=\"pi pi-user\"></i>\n\n                    {{ notification.sender }}\n                  </span>\n                }\n              </div>\n            }\n          </div>\n\n          @if (hasActions(notification)) {\n            <div\n              class=\"pt-notifications-page-item-actions\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              <button\n                type=\"button\"\n                class=\"pt-notifications-page-more-button\"\n                aria-label=\"Actions notification\"\n                [disabled]=\"notification.disabled\"\n                (click)=\"toggleActionMenu(notification, $event)\"\n              >\n                <i class=\"pi pi-ellipsis-v\"></i>\n              </button>\n\n              @if (isActionMenuOpen(notification)) {\n                <div\n                  class=\"pt-notifications-page-action-menu\"\n                  (click)=\"onActionMenuClick($event)\"\n                >\n                  @for (\n                    menuAction of getActions(notification);\n                    track menuAction.id\n                  ) {\n                    <button\n                      type=\"button\"\n                      [class]=\"getActionClasses(menuAction)\"\n                      [disabled]=\"menuAction.disabled\"\n                      (click)=\"onActionClick(notification, menuAction, $event)\"\n                    >\n                      @if (menuAction.icon) {\n                        <i [class]=\"menuAction.icon\"></i>\n                      }\n\n                      <span>\n                        {{ menuAction.label }}\n                      </span>\n                    </button>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          @if (notification.read !== true) {\n            <span class=\"pt-notifications-page-unread-indicator\"></span>\n          }\n        </div>\n      }\n    </div>\n  } @else {\n    <div class=\"pt-notifications-page-empty\">\n      <div class=\"pt-notifications-page-empty-icon\">\n        <i [class]=\"getEmptyIcon()\"></i>\n      </div>\n\n      <div class=\"pt-notifications-page-empty-text\">\n        @if (hasSearch()) {\n          {{ getNoSearchResultText() }}\n        } @else {\n          {{ getEmptyText() }}\n        }\n      </div>\n    </div>\n  }\n\n  @if (showPagination()) {\n    <div class=\"pt-notifications-page-pagination\">\n      <p-paginator\n        [first]=\"getFirst()\"\n        [rows]=\"rows\"\n        [totalRecords]=\"totalRecords\"\n        [rowsPerPageOptions]=\"getRowsPerPageOptions()\"\n        [showCurrentPageReport]=\"showCurrentPageReport()\"\n        [currentPageReportTemplate]=\"getCurrentPageReportTemplate()\"\n        (onPageChange)=\"onPageChange($event)\"\n      ></p-paginator>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.pt-notifications-page{position:relative;width:100%;background:var(--pt-notifications-page-bg, #ffffff);border:1px solid var(--pt-notifications-page-border, #e5e7eb);border-radius:14px;overflow:visible}.pt-notifications-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb)}.pt-notifications-page-heading{display:flex;flex-direction:column;gap:.85rem}.pt-notifications-page-title-row{display:flex;align-items:center;gap:.8rem}.pt-notifications-page-title-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--pt-notifications-page-title-icon-bg, #f3f0f8);color:var(--pt-notifications-page-title-icon-color, #3f2564);font-size:1.15rem}.pt-notifications-page-title{margin:0;color:var(--pt-notifications-page-title-color, #1f2937);font-size:1.25rem;font-weight:700}.pt-notifications-page-subtitle{margin-top:.2rem;color:var(--pt-notifications-page-subtitle-color, #6b7280);font-size:.875rem}.pt-notifications-page-counters{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.pt-notifications-page-counter{display:inline-flex;align-items:center;padding:.3rem .65rem;border-radius:999px;background:var(--pt-notifications-page-counter-bg, #f3f4f6);color:var(--pt-notifications-page-counter-color, #4b5563);font-size:.78rem;font-weight:600}.pt-notifications-page-counter.unread{background:var(--pt-notifications-page-unread-counter-bg, #f3f0f8);color:var(--pt-notifications-page-unread-counter-color, #3f2564)}.pt-notifications-page-global-actions{position:relative}.pt-notifications-page-global-button,.pt-notifications-page-more-button,.pt-notifications-page-search-clear{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;color:var(--pt-notifications-page-action-color, #6b7280)}.pt-notifications-page-global-button{width:36px;height:36px;border-radius:50%}.pt-notifications-page-global-button:hover,.pt-notifications-page-more-button:hover{background:var(--pt-notifications-page-action-hover-bg, #f3f4f6)}.pt-notifications-page-global-menu,.pt-notifications-page-action-menu{position:absolute;z-index:1000;min-width:200px;padding:.35rem;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 25px #0f172a24}.pt-notifications-page-global-menu{top:calc(100% + 5px);right:0}.pt-notifications-page-action-menu{top:30px;right:0}.pt-notifications-page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb)}.pt-notifications-page-filters{display:flex;align-items:center;gap:.4rem}.pt-notifications-page-filter{display:flex;align-items:center;gap:.45rem;padding:.5rem .85rem;border:1px solid var(--pt-notifications-page-filter-border, #e5e7eb);border-radius:8px;background:var(--pt-notifications-page-filter-bg, #ffffff);color:var(--pt-notifications-page-filter-color, #4b5563);font-size:.82rem;font-weight:600;cursor:pointer}.pt-notifications-page-filter:hover{background:#f9fafb}.pt-notifications-page-filter.selected{border-color:var(--pt-notifications-page-primary, #3f2564);background:var(--pt-notifications-page-selected-bg, #f3f0f8);color:var(--pt-notifications-page-primary, #3f2564)}.pt-notifications-page-filter-count{min-width:20px;padding:.1rem .35rem;border-radius:999px;background:#0000000d;text-align:center;font-size:.72rem}.pt-notifications-page-search{position:relative;display:flex;align-items:center;width:min(360px,100%)}.pt-notifications-page-search>.pi-search{position:absolute;left:.85rem;color:#9ca3af}.pt-notifications-page-search input{width:100%;padding:.65rem 2.5rem .65rem 2.4rem;border:1px solid #d1d5db;border-radius:8px;outline:none;font-size:.85rem}.pt-notifications-page-search input:focus{border-color:var(--pt-notifications-page-primary, #3f2564);box-shadow:0 0 0 2px #3f256414}.pt-notifications-page-search-clear{position:absolute;right:.6rem;width:28px;height:28px}.pt-notifications-page-list{width:100%}.pt-notifications-page-item{position:relative;display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.5rem;border-bottom:1px solid var(--pt-notifications-page-border, #e5e7eb);background:var(--pt-notifications-page-item-bg, #ffffff);cursor:pointer;transition:background .15s ease}.pt-notifications-page-item:last-child{border-bottom:0}.pt-notifications-page-item:hover{background:var(--pt-notifications-page-item-hover-bg, #f9fafb)}.pt-notifications-page-item.unread{background:var(--pt-notifications-page-unread-bg, #faf8fd)}.pt-notifications-page-item.unread:hover{background:var(--pt-notifications-page-unread-hover-bg, #f6f2fa)}.pt-notifications-page-item.disabled{opacity:.55;cursor:default}.pt-notifications-page-item-icon-wrapper{flex:0 0 auto}.pt-notifications-page-item-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--pt-notifications-page-item-icon-bg, #f3f4f6);font-size:1rem}.pt-notifications-page-item-content{flex:1 1 auto;min-width:0}.pt-notifications-page-item-text{color:var(--pt-notifications-page-text-color, #1f2937);font-size:.9rem;line-height:1.5}.pt-notifications-page-item.unread .pt-notifications-page-item-text{font-weight:600}.pt-notifications-page-item-metadata{display:flex;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:.5rem;color:var(--pt-notifications-page-metadata-color, #6b7280);font-size:.78rem}.pt-notifications-page-item-metadata span{display:inline-flex;align-items:center;gap:.35rem}.pt-notifications-page-item-actions{position:relative;flex:0 0 auto}.pt-notifications-page-more-button{width:30px;height:30px;border-radius:50%}.pt-notifications-page-action-item{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .7rem;border:0;border-radius:6px;background:transparent;color:#374151;font-size:.8rem;text-align:left;cursor:pointer}.pt-notifications-page-action-item:hover{background:#f3f4f6}.pt-notifications-page-action-item.danger{color:#dc2626}.pt-notifications-page-action-item.disabled{opacity:.5;cursor:default}.pt-notifications-page-unread-indicator{position:absolute;top:50%;right:.5rem;width:7px;height:7px;border-radius:50%;background:var(--pt-notifications-page-unread-indicator, #3f2564);transform:translateY(-50%)}.pt-notifications-page-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:280px;padding:3rem;color:#6b7280;text-align:center}.pt-notifications-page-empty-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:1rem;border-radius:50%;background:#f3f4f6;color:#9ca3af;font-size:1.6rem}.pt-notifications-page-empty-text{max-width:450px;font-size:.9rem}@media(max-width:768px){.pt-notifications-page-header,.pt-notifications-page-toolbar{flex-direction:column;align-items:stretch}.pt-notifications-page-filters{overflow-x:auto}.pt-notifications-page-search{width:100%}.pt-notifications-page-item{padding:1rem 1.1rem}.pt-notifications-page-item-metadata{gap:.5rem 1rem}}.pt-notifications-page-pagination{display:flex;align-items:center;justify-content:center;width:100%;padding:.75rem 1rem;box-sizing:border-box;border-top:1px solid var(--pt-notifications-page-border, #e5e7eb);background:var(--pt-notifications-page-pagination-bg, #ffffff)}.pt-notifications-page-pagination ::ng-deep .p-paginator{width:100%;border:0;background:transparent}@media(max-width:768px){.pt-notifications-page-pagination{padding:.5rem}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { notifications: [{
+                type: Input
+            }], totalRecords: [{
+                type: Input
+            }], totalAllRecords: [{
+                type: Input
+            }], totalUnreadRecords: [{
+                type: Input
+            }], totalReadRecords: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], notificationClick: [{
+                type: Output
+            }], action: [{
+                type: Output
+            }], globalAction: [{
+                type: Output
+            }], queryChange: [{
+                type: Output
+            }] } });
+
+class PTNotificationsPageModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageModule, declarations: [PTNotificationsPageComponent], imports: [CommonModule, PaginatorModule], exports: [PTNotificationsPageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageModule, imports: [CommonModule, PaginatorModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationsPageModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTNotificationsPageComponent],
+                    imports: [CommonModule, PaginatorModule],
+                    exports: [PTNotificationsPageComponent],
+                }]
+        }] });
+
 // projects/ng-prime-tools/src/lib/models/form-multi-select.model.ts
 
 // projects/ng-prime-tools/src/lib/models/pt-accordion-config.model.ts
@@ -11708,5 +12339,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAccordionComponent, PTAccordionModule, PTAccordionPanelDirective, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChangePasswordPageComponent, PTChangePasswordPageModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNewsTickerComponent, PTNewsTickerDirection, PTNewsTickerModule, PTNewsTickerTrend, PTNewsTickerType, PTNotificationComponent, PTNotificationModule, PTNumberInputComponent, PTNumberInputModule, PTOtpInputComponent, PTOtpInputModule, PTOtpPageComponent, PTOtpPageModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTPasswordInputComponent, PTPasswordInputModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
+export { AlignEnum, BadgeType, BadgeTypeStyles, ButtonColorEnum, DateUtilityService, FormInputTypeEnum, InputValidationEnum, MultiSearchCriteriaComponent, MultiSearchCriteriaModule, NgPrimeToolsModule, PTAccordionComponent, PTAccordionModule, PTAccordionPanelDirective, PTAdvancedPrimeTableComponent, PTAdvancedPrimeTableModule, PTBreadCrumbComponent, PTBreadCrumbModule, PTButtonComponent, PTButtonModule, PTCardComponent, PTCardModule, PTChangePasswordPageComponent, PTChangePasswordPageModule, PTChartComparisonComponent, PTChartComparisonModule, PTChartComponent, PTChartModule, PTCheckBoxInputComponent, PTCheckBoxInputModule, PTConfirmDialogComponent, PTConfirmDialogModule, PTDateInputComponent, PTDateInputModule, PTDialogComponent, PTDialogModule, PTDropdownComponent, PTDropdownModule, PTFooterComponent, PTFooterModule, PTFormBuilderComponent, PTFormBuilderModule, PTGroupComponent, PTGroupModule, PTLineChartComponent, PTLineChartModule, PTLoginPageComponent, PTLoginPageModule, PTMenuComponent, PTMenuFancyComponent, PTMenuFancyModule, PTMenuModule, PTMetricCardComponent, PTMetricCardGroupComponent, PTMetricCardGroupModule, PTMetricCardModule, PTMetricPanelComponent, PTMetricPanelModule, PTMultiSelectComponent, PTMultiSelectModule, PTNavbarMenuComponent, PTNavbarMenuModule, PTNewsTickerComponent, PTNewsTickerDirection, PTNewsTickerModule, PTNewsTickerTrend, PTNewsTickerType, PTNotificationComponent, PTNotificationModule, PTNotificationsPageComponent, PTNotificationsPageModule, PTNumberInputComponent, PTNumberInputModule, PTOtpInputComponent, PTOtpInputModule, PTOtpPageComponent, PTOtpPageModule, PTPageSkeletonComponent, PTPageSkeletonModule, PTPasswordInputComponent, PTPasswordInputModule, PTSideBarMenuComponent, PTSideBarMenuModule, PTSwitchInputComponent, PTSwitchInputModule, PTTextAreaInputComponent, PTTextAreaInputModule, PTTextInputComponent, PTTextInputModule, PTToastNotifierComponent, PTToastNotifierModule, SearchCriteriaTypeEnum, SeverityEnum, TableTypeEnum };
 //# sourceMappingURL=ng-prime-tools.mjs.map