ng-prime-tools 1.1.15 → 1.1.16

package/fesm2022/ng-prime-tools.mjs

@@ -6078,111 +6078,324 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
-class PTMenuFancyComponent {
+class PTNotificationComponent {
     constructor() {
-        this.config = {
-            icon: { code: 'pi pi-ellipsis-v', color: '#000', fontSize: '15px' },
-            menuDirection: 'right',
-        };
-        this.cardMenuConfig = {
-            noBorder: true,
-            margin: '0',
-            padding: '5px',
-        };
+        this.notifications = [];
+        this.config = {};
+        this.notificationClick = new EventEmitter();
+        this.action = new EventEmitter();
+        this.globalAction = new EventEmitter();
+        this.viewAll = new EventEmitter();
+        this.panelOpened = new EventEmitter();
+        this.panelClosed = new EventEmitter();
         this.isOpen = false;
+        this.openedActionMenuId = null;
+        this.isGlobalActionMenuOpen = false;
+        this.defaultActions = [
+            {
+                id: 'MARK_AS_READ',
+                label: 'Mark as read',
+                icon: 'pi pi-check',
+            },
+            {
+                id: 'DELETE',
+                label: 'Delete notification',
+                icon: 'pi pi-trash',
+                danger: true,
+            },
+        ];
+        this.defaultGlobalActions = [
+            {
+                id: 'MARK_ALL_AS_READ',
+                label: 'Mark all as read',
+                icon: 'pi pi-check-circle',
+            },
+        ];
     }
-    static { this.DEFAULT_TEXT_COLOR = '#000'; }
-    static { this.DEFAULT_TEXT_FONT_SIZE = '15px'; }
-    static { this.DEFAULT_ICON_COLOR = '#000'; }
-    static { this.DEFAULT_ICON_FONT_SIZE = '15px'; }
-    static { this.DEFAULT_ICON_CODE = 'pi pi-ellipsis-v'; }
-    static { this.openMenuInstance = null; }
-    toggleMenu() {
-        if (PTMenuFancyComponent.openMenuInstance &&
-            PTMenuFancyComponent.openMenuInstance !== this) {
-            PTMenuFancyComponent.openMenuInstance.closeMenu();
-        }
+    onDocumentClick() {
+        this.closePanel();
+    }
+    isVisible() {
+        return this.config.visible === true;
+    }
+    togglePanel(event) {
+        event.stopPropagation();
         this.isOpen = !this.isOpen;
+        this.openedActionMenuId = null;
+        this.isGlobalActionMenuOpen = false;
         if (this.isOpen) {
-            PTMenuFancyComponent.openMenuInstance = this;
+            this.panelOpened.emit();
         }
         else {
-            PTMenuFancyComponent.openMenuInstance = null;
+            this.panelClosed.emit();
         }
     }
-    closeMenu() {
+    closePanel() {
+        if (!this.isOpen) {
+            return;
+        }
         this.isOpen = false;
-        if (PTMenuFancyComponent.openMenuInstance === this) {
-            PTMenuFancyComponent.openMenuInstance = null;
+        this.openedActionMenuId = null;
+        this.isGlobalActionMenuOpen = false;
+        this.panelClosed.emit();
+    }
+    onPanelClick(event) {
+        event.stopPropagation();
+        this.openedActionMenuId = null;
+        this.isGlobalActionMenuOpen = false;
+    }
+    onNotificationClick(notification, event) {
+        event.stopPropagation();
+        if (notification.disabled) {
+            return;
+        }
+        this.notificationClick.emit({
+            notification,
+        });
+        if (this.config.closePanelOnNotificationClick === true) {
+            this.closePanel();
         }
     }
-    getMenuItemIconClass(item) {
-        // Assuming that icons starting with "fa" are FontAwesome icons
-        return typeof item.icon === 'string' ? item.icon : item.icon?.code || '';
+    toggleActionMenu(notification, event) {
+        event.stopPropagation();
+        if (notification.disabled) {
+            return;
+        }
+        this.isGlobalActionMenuOpen = false;
+        if (this.openedActionMenuId === notification.id) {
+            this.openedActionMenuId = null;
+            return;
+        }
+        this.openedActionMenuId = notification.id;
     }
-    getMenuItemIconStyles(item) {
-        if (typeof item.icon !== 'string') {
-            return {
-                color: item.icon?.color || PTMenuFancyComponent.DEFAULT_ICON_COLOR,
-                fontSize: item.icon?.fontSize || PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
-            };
+    onActionMenuClick(event) {
+        event.stopPropagation();
+    }
+    onActionClick(notification, menuAction, event) {
+        event.stopPropagation();
+        if (notification.disabled || menuAction.disabled) {
+            return;
+        }
+        this.action.emit({
+            notification,
+            action: menuAction,
+        });
+        if (this.config.closeActionMenuOnAction !== false) {
+            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,
+            notifications: this.getNotifications(),
+        });
+        if (this.config.closeGlobalActionMenuOnAction !== false) {
+            this.isGlobalActionMenuOpen = false;
+        }
+    }
+    onViewAllClick(event) {
+        event.stopPropagation();
+        this.viewAll.emit();
+    }
+    getNotifications() {
+        return this.notifications ?? [];
+    }
+    hasNotifications() {
+        return this.getNotifications().length > 0;
+    }
+    getUnreadCount() {
+        return this.getNotifications().filter((notification) => notification.read !== true).length;
+    }
+    hasUnreadNotifications() {
+        return this.getUnreadCount() > 0;
+    }
+    getBadgeText() {
+        const count = this.getUnreadCount();
+        const limit = this.config.badgeLimit ?? 99;
+        if (count > limit) {
+            return `${limit}+`;
         }
+        return `${count}`;
+    }
+    showBadge() {
+        return this.config.showBadge !== false && this.hasUnreadNotifications();
+    }
+    showHeaderCount() {
+        return this.config.showHeaderCount !== false;
+    }
+    showViewAll() {
+        return this.config.showViewAll === true;
+    }
+    showGlobalActions() {
+        return (this.config.showGlobalActions !== false &&
+            this.getGlobalActions().length > 0);
+    }
+    getTitle() {
+        return this.config.title?.trim() || 'Notifications';
+    }
+    getEmptyText() {
+        return this.config.emptyText?.trim() || 'No notifications';
+    }
+    getBellIcon() {
+        return this.config.bellIcon?.trim() || 'pi pi-bell';
+    }
+    getViewAllText() {
+        return this.config.viewAllText?.trim() || 'View all notifications';
+    }
+    getViewAllIcon() {
+        return this.config.viewAllIcon?.trim() || 'pi pi-arrow-right';
+    }
+    getPanelStyles() {
         return {
-            color: PTMenuFancyComponent.DEFAULT_ICON_COLOR,
-            fontSize: PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
+            width: this.config.width ?? '420px',
         };
     }
-    getIconClass() {
-        return this.config.icon?.code || PTMenuFancyComponent.DEFAULT_ICON_CODE;
-    }
-    getIconStyles() {
+    getListStyles() {
         return {
-            color: this.config.color ||
-                this.config.icon?.color ||
-                PTMenuFancyComponent.DEFAULT_ICON_COLOR,
-            fontSize: this.config.fontSize ||
-                this.config.icon?.fontSize ||
-                PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
+            maxHeight: this.config.maxHeight ?? '420px',
         };
     }
-    getTextStyles(item) {
+    getNotificationClasses(notification) {
+        const classes = ['pt-notification-item'];
+        if (!notification.read) {
+            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: item.color || PTMenuFancyComponent.DEFAULT_TEXT_COLOR,
-            fontSize: item.fontSize || PTMenuFancyComponent.DEFAULT_TEXT_FONT_SIZE,
+            color: notification.iconColor ??
+                'var(--pt-notification-item-icon-color, #2563eb)',
         };
     }
-    isItemDisabled(item) {
-        return !!item?.disabled || !!item?.isHeader || !item?.action;
+    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;
+        });
     }
-    onItemClick(item) {
-        if (this.isItemDisabled(item))
-            return;
-        item.action?.();
-        this.closeMenu(); // optional UX: close after click
+    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.hasUnreadNotifications()) {
+                return false;
+            }
+            return true;
+        });
     }
-    onDocumentClick(event) {
-        const clickedInside = event.target.closest('.pt-menu-fancy');
-        if (!clickedInside) {
-            this.closeMenu();
+    hasActions(notification) {
+        return this.getActions(notification).length > 0;
+    }
+    isActionMenuOpen(notification) {
+        return this.openedActionMenuId === notification.id;
+    }
+    getActionClasses(menuAction) {
+        const classes = ['pt-notification-action-menu-item'];
+        if (menuAction.danger) {
+            classes.push('danger');
         }
+        if (menuAction.disabled) {
+            classes.push('disabled');
+        }
+        return classes.join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMenuFancyComponent, isStandalone: false, selector: "pt-menu-fancy", inputs: { config: "config" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    open: isOpen,\n    'menu-left': config.menuDirection === 'left',\n    'menu-right': config.menuDirection === 'right'\n  }\"\n  class=\"pt-menu-fancy\"\n  >\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n\n  @if (isOpen) {\n    <div class=\"menu-dropdown\">\n      <pt-card [config]=\"cardMenuConfig\">\n        @for (item of config.menuItems; track item) {\n          <div\n            class=\"menu-item\"\n            [class.menu-item-disabled]=\"isItemDisabled(item)\"\n            [class.menu-item-header]=\"item.isHeader\"\n            (click)=\"onItemClick(item)\"\n            >\n            @if (getMenuItemIconClass(item)) {\n              <i\n                [ngClass]=\"getMenuItemIconClass(item)\"\n                [ngStyle]=\"getMenuItemIconStyles(item)\"\n              ></i>\n            }\n            <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n          </div>\n        }\n      </pt-card>\n    </div>\n  }\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:calc(100% + 8px);background-color:#fff;min-width:220px;z-index:3;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px #0000001f;opacity:0;transform:translateY(-12px);pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease-in-out}.pt-menu-fancy .menu-item i{margin-right:0}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}.pt-menu-fancy .menu-item.menu-item-header{cursor:default;background:#fafafa;font-weight:700;opacity:.98;border-bottom:1px solid rgba(0,0,0,.08)}.pt-menu-fancy .menu-item.menu-item-header:hover{background:#fafafa}.pt-menu-fancy .menu-item.menu-item-disabled{cursor:not-allowed}.pt-menu-fancy .menu-item.menu-item-disabled:hover{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
+    getDateText(notification) {
+        if (!notification.date) {
+            return '';
+        }
+        if (notification.date instanceof Date) {
+            return this.formatDate(notification.date);
+        }
+        return notification.date;
+    }
+    hasMetadata(notification) {
+        return !!(notification.date || notification.sender?.trim());
+    }
+    formatDate(date) {
+        const day = this.pad2(date.getDate());
+        const month = this.pad2(date.getMonth() + 1);
+        const year = date.getFullYear();
+        const hours = this.pad2(date.getHours());
+        const minutes = this.pad2(date.getMinutes());
+        return `${day}/${month}/${year} ${hours}:${minutes}`;
+    }
+    pad2(value) {
+        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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pt-menu-fancy', standalone: false, template: "<div\n  [ngClass]=\"{\n    open: isOpen,\n    'menu-left': config.menuDirection === 'left',\n    'menu-right': config.menuDirection === 'right'\n  }\"\n  class=\"pt-menu-fancy\"\n  >\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n\n  @if (isOpen) {\n    <div class=\"menu-dropdown\">\n      <pt-card [config]=\"cardMenuConfig\">\n        @for (item of config.menuItems; track item) {\n          <div\n            class=\"menu-item\"\n            [class.menu-item-disabled]=\"isItemDisabled(item)\"\n            [class.menu-item-header]=\"item.isHeader\"\n            (click)=\"onItemClick(item)\"\n            >\n            @if (getMenuItemIconClass(item)) {\n              <i\n                [ngClass]=\"getMenuItemIconClass(item)\"\n                [ngStyle]=\"getMenuItemIconStyles(item)\"\n              ></i>\n            }\n            <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n          </div>\n        }\n      </pt-card>\n    </div>\n  }\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:calc(100% + 8px);background-color:#fff;min-width:220px;z-index:3;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px #0000001f;opacity:0;transform:translateY(-12px);pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease-in-out}.pt-menu-fancy .menu-item i{margin-right:0}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}.pt-menu-fancy .menu-item.menu-item-header{cursor:default;background:#fafafa;font-weight:700;opacity:.98;border-bottom:1px solid rgba(0,0,0,.08)}.pt-menu-fancy .menu-item.menu-item-header:hover{background:#fafafa}.pt-menu-fancy .menu-item.menu-item-disabled{cursor:not-allowed}.pt-menu-fancy .menu-item.menu-item-disabled:hover{background-color:transparent}\n"] }]
-        }], propDecorators: { config: [{
+            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"] }]
+        }], propDecorators: { notifications: [{
+                type: Input
+            }], config: [{
                 type: Input
+            }], notificationClick: [{
+                type: Output
+            }], action: [{
+                type: Output
+            }], globalAction: [{
+                type: Output
+            }], viewAll: [{
+                type: Output
+            }], panelOpened: [{
+                type: Output
+            }], panelClosed: [{
+                type: Output
             }], onDocumentClick: [{
                 type: HostListener,
-                args: ['document:click', ['$event']]
+                args: ['document:click']
             }] } });
 
 class PTNavbarMenuComponent {
     constructor() {
         this.navBarMenuConfig = {};
+        this.notifications = [];
+        this.notificationConfig = {};
         this.toggleSidebar = new EventEmitter();
+        this.notificationAction = new EventEmitter();
+        this.notificationClick = new EventEmitter();
+        this.notificationPanelOpened = new EventEmitter();
+        this.notificationPanelClosed = new EventEmitter();
+        this.notificationGlobalAction = new EventEmitter();
+        this.notificationViewAll = new EventEmitter();
         this.destroy$ = new Subject();
         this.dateTimeText = '';
         this.isUserMenuOpen = false;
@@ -6207,7 +6420,9 @@ class PTNavbarMenuComponent {
         this.applyConfigFormatsAndFixedBase();
         interval(1000)
             .pipe(takeUntil(this.destroy$))
-            .subscribe(() => this.refreshDateTime());
+            .subscribe(() => {
+            this.refreshDateTime();
+        });
         this.refreshDateTime();
     }
     ngOnChanges(changes) {
@@ -6239,9 +6454,28 @@ class PTNavbarMenuComponent {
             }
         }
     }
-    // =========================
-    // DateTime helpers
-    // =========================
+    hasNotifications() {
+        return (this.notifications ?? []).length > 0;
+    }
+    onNotificationAction(event) {
+        this.notificationAction.emit(event);
+    }
+    onNotificationClick(event) {
+        this.notificationClick.emit(event);
+    }
+    onNotificationGlobalAction(event) {
+        this.notificationGlobalAction.emit(event);
+    }
+    onNotificationViewAll() {
+        this.notificationViewAll.emit();
+    }
+    onNotificationPanelOpened() {
+        this.isUserMenuOpen = false;
+        this.notificationPanelOpened.emit();
+    }
+    onNotificationPanelClosed() {
+        this.notificationPanelClosed.emit();
+    }
     hasDateTime() {
         return !!this.navBarMenuConfig.dateTime;
     }
@@ -6345,9 +6579,6 @@ class PTNavbarMenuComponent {
             return null;
         }
     }
-    // =========================
-    // User profile helpers
-    // =========================
     hasUser() {
         return !!this.navBarMenuConfig.user;
     }
@@ -6441,9 +6672,6 @@ class PTNavbarMenuComponent {
         this.isUserMenuOpen = false;
         item.action?.();
     }
-    // =========================
-    // Formatting utils
-    // =========================
     pad2(n) {
         return String(n).padStart(2, '0');
     }
@@ -6483,9 +6711,6 @@ class PTNavbarMenuComponent {
         const dt = new Date(value);
         return isNaN(dt.getTime()) ? null : dt;
     }
-    // =========================
-    // Existing navbar helpers
-    // =========================
     isImageStyle(object) {
         return typeof object === 'object' && 'imageUrl' in object;
     }
@@ -6592,22 +6817,139 @@ 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" }, outputs: { toggleSidebar: "toggleSidebar" }, host: { listeners: { "document:click": "closeUserMenu()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pt-nav-bar-menu\" [ngStyle]=\"getNavbarStyles()\">\n  <!-- LEFT -->\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  <!-- MIDDLE DateTime -->\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  <!-- RIGHT -->\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\">\n      @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n        <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n      }\n    </div>\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>{{ getUserInitials() }}</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>{{ getUserInitials() }}</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>{{ item.text }}</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 .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}}\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: PTMenuFancyComponent, selector: "pt-menu-fancy", inputs: ["config"] }] }); }
+    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"] }] }); }
 }
 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  <!-- LEFT -->\n  <div class=\"navbar-left\">\n    <a\n      [routerLink]=\"\n        isImageStyle(navBarMenuConfig.logo)\n          ? navBarMenuConfig.logo.routerLink\n          : '/'\n      \"\n      class=\"logo-link\"\n    >\n      <img\n        [src]=\"getLogoUrl()\"\n        [alt]=\"getLogoAltText()\"\n        [ngStyle]=\"getLogoStyles()\"\n        class=\"navbar-logo\"\n      />\n\n      <span class=\"navbar-title\" [ngStyle]=\"getAppNameStyles()\">\n        {{ getAppName() }}\n      </span>\n    </a>\n\n    <a (click)=\"toggleMenu()\" class=\"toggle-btn\">\n      <i\n        [class]=\"getToggleButtonIcon()\"\n        [ngStyle]=\"getToggleButtonStyles()\"\n      ></i>\n    </a>\n  </div>\n\n  <!-- MIDDLE DateTime -->\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  <!-- RIGHT -->\n  <div class=\"navbar-actions\">\n    <div class=\"navbar-right\">\n      @for (menuConfig of navBarMenuConfig.menus; track menuConfig) {\n        <pt-menu-fancy [config]=\"menuConfig\"></pt-menu-fancy>\n      }\n    </div>\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>{{ getUserInitials() }}</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>{{ getUserInitials() }}</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>{{ item.text }}</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 .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}}\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      (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: [{
                 type: Input
+            }], notifications: [{
+                type: Input
+            }], notificationConfig: [{
+                type: Input
             }], toggleSidebar: [{
                 type: Output
+            }], notificationAction: [{
+                type: Output
+            }], notificationClick: [{
+                type: Output
+            }], notificationPanelOpened: [{
+                type: Output
+            }], notificationPanelClosed: [{
+                type: Output
+            }], notificationGlobalAction: [{
+                type: Output
+            }], notificationViewAll: [{
+                type: Output
             }], closeUserMenu: [{
                 type: HostListener,
                 args: ['document:click']
             }] } });
 
+class PTMenuFancyComponent {
+    constructor() {
+        this.config = {
+            icon: { code: 'pi pi-ellipsis-v', color: '#000', fontSize: '15px' },
+            menuDirection: 'right',
+        };
+        this.cardMenuConfig = {
+            noBorder: true,
+            margin: '0',
+            padding: '5px',
+        };
+        this.isOpen = false;
+    }
+    static { this.DEFAULT_TEXT_COLOR = '#000'; }
+    static { this.DEFAULT_TEXT_FONT_SIZE = '15px'; }
+    static { this.DEFAULT_ICON_COLOR = '#000'; }
+    static { this.DEFAULT_ICON_FONT_SIZE = '15px'; }
+    static { this.DEFAULT_ICON_CODE = 'pi pi-ellipsis-v'; }
+    static { this.openMenuInstance = null; }
+    toggleMenu() {
+        if (PTMenuFancyComponent.openMenuInstance &&
+            PTMenuFancyComponent.openMenuInstance !== this) {
+            PTMenuFancyComponent.openMenuInstance.closeMenu();
+        }
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            PTMenuFancyComponent.openMenuInstance = this;
+        }
+        else {
+            PTMenuFancyComponent.openMenuInstance = null;
+        }
+    }
+    closeMenu() {
+        this.isOpen = false;
+        if (PTMenuFancyComponent.openMenuInstance === this) {
+            PTMenuFancyComponent.openMenuInstance = null;
+        }
+    }
+    getMenuItemIconClass(item) {
+        // Assuming that icons starting with "fa" are FontAwesome icons
+        return typeof item.icon === 'string' ? item.icon : item.icon?.code || '';
+    }
+    getMenuItemIconStyles(item) {
+        if (typeof item.icon !== 'string') {
+            return {
+                color: item.icon?.color || PTMenuFancyComponent.DEFAULT_ICON_COLOR,
+                fontSize: item.icon?.fontSize || PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
+            };
+        }
+        return {
+            color: PTMenuFancyComponent.DEFAULT_ICON_COLOR,
+            fontSize: PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
+        };
+    }
+    getIconClass() {
+        return this.config.icon?.code || PTMenuFancyComponent.DEFAULT_ICON_CODE;
+    }
+    getIconStyles() {
+        return {
+            color: this.config.color ||
+                this.config.icon?.color ||
+                PTMenuFancyComponent.DEFAULT_ICON_COLOR,
+            fontSize: this.config.fontSize ||
+                this.config.icon?.fontSize ||
+                PTMenuFancyComponent.DEFAULT_ICON_FONT_SIZE,
+        };
+    }
+    getTextStyles(item) {
+        return {
+            color: item.color || PTMenuFancyComponent.DEFAULT_TEXT_COLOR,
+            fontSize: item.fontSize || PTMenuFancyComponent.DEFAULT_TEXT_FONT_SIZE,
+        };
+    }
+    isItemDisabled(item) {
+        return !!item?.disabled || !!item?.isHeader || !item?.action;
+    }
+    onItemClick(item) {
+        if (this.isItemDisabled(item))
+            return;
+        item.action?.();
+        this.closeMenu(); // optional UX: close after click
+    }
+    onDocumentClick(event) {
+        const clickedInside = event.target.closest('.pt-menu-fancy');
+        if (!clickedInside) {
+            this.closeMenu();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTMenuFancyComponent, isStandalone: false, selector: "pt-menu-fancy", inputs: { config: "config" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    open: isOpen,\n    'menu-left': config.menuDirection === 'left',\n    'menu-right': config.menuDirection === 'right'\n  }\"\n  class=\"pt-menu-fancy\"\n  >\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n\n  @if (isOpen) {\n    <div class=\"menu-dropdown\">\n      <pt-card [config]=\"cardMenuConfig\">\n        @for (item of config.menuItems; track item) {\n          <div\n            class=\"menu-item\"\n            [class.menu-item-disabled]=\"isItemDisabled(item)\"\n            [class.menu-item-header]=\"item.isHeader\"\n            (click)=\"onItemClick(item)\"\n            >\n            @if (getMenuItemIconClass(item)) {\n              <i\n                [ngClass]=\"getMenuItemIconClass(item)\"\n                [ngStyle]=\"getMenuItemIconStyles(item)\"\n              ></i>\n            }\n            <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n          </div>\n        }\n      </pt-card>\n    </div>\n  }\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:calc(100% + 8px);background-color:#fff;min-width:220px;z-index:3;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px #0000001f;opacity:0;transform:translateY(-12px);pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease-in-out}.pt-menu-fancy .menu-item i{margin-right:0}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}.pt-menu-fancy .menu-item.menu-item-header{cursor:default;background:#fafafa;font-weight:700;opacity:.98;border-bottom:1px solid rgba(0,0,0,.08)}.pt-menu-fancy .menu-item.menu-item-header:hover{background:#fafafa}.pt-menu-fancy .menu-item.menu-item-disabled{cursor:not-allowed}.pt-menu-fancy .menu-item.menu-item-disabled:hover{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pt-menu-fancy', standalone: false, template: "<div\n  [ngClass]=\"{\n    open: isOpen,\n    'menu-left': config.menuDirection === 'left',\n    'menu-right': config.menuDirection === 'right'\n  }\"\n  class=\"pt-menu-fancy\"\n  >\n  <i\n    class=\"menu-icon\"\n    (click)=\"toggleMenu()\"\n    [ngClass]=\"getIconClass()\"\n    [ngStyle]=\"getIconStyles()\"\n  ></i>\n\n  @if (isOpen) {\n    <div class=\"menu-dropdown\">\n      <pt-card [config]=\"cardMenuConfig\">\n        @for (item of config.menuItems; track item) {\n          <div\n            class=\"menu-item\"\n            [class.menu-item-disabled]=\"isItemDisabled(item)\"\n            [class.menu-item-header]=\"item.isHeader\"\n            (click)=\"onItemClick(item)\"\n            >\n            @if (getMenuItemIconClass(item)) {\n              <i\n                [ngClass]=\"getMenuItemIconClass(item)\"\n                [ngStyle]=\"getMenuItemIconStyles(item)\"\n              ></i>\n            }\n            <span [ngStyle]=\"getTextStyles(item)\">{{ item.text }}</span>\n          </div>\n        }\n      </pt-card>\n    </div>\n  }\n</div>\n", styles: [".pt-menu-fancy{position:relative;display:inline-block}.pt-menu-fancy .menu-icon{font-style:normal;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;padding:8px;transition:background-color .2s,box-shadow .2s}.pt-menu-fancy .menu-icon:hover{background-color:#5959591a;box-shadow:0 0 0 1px #5959591a}.pt-menu-fancy .menu-dropdown{position:absolute;top:calc(100% + 8px);background-color:#fff;min-width:220px;z-index:3;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 22px #0000001f;opacity:0;transform:translateY(-12px);pointer-events:none;transition:transform .18s ease-out,opacity .18s ease-out}.pt-menu-fancy.open .menu-dropdown{display:block;opacity:1;transform:translateY(0);pointer-events:auto}.pt-menu-fancy.menu-left .menu-dropdown{right:0;left:auto}.pt-menu-fancy.menu-right .menu-dropdown{left:0;right:auto}.pt-menu-fancy .menu-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;transition:background-color .15s ease-in-out}.pt-menu-fancy .menu-item i{margin-right:0}.pt-menu-fancy .menu-item:hover{background-color:#f1f1f1}.pt-menu-fancy .menu-item.menu-item-header{cursor:default;background:#fafafa;font-weight:700;opacity:.98;border-bottom:1px solid rgba(0,0,0,.08)}.pt-menu-fancy .menu-item.menu-item-header:hover{background:#fafafa}.pt-menu-fancy .menu-item.menu-item-disabled{cursor:not-allowed}.pt-menu-fancy .menu-item.menu-item-disabled:hover{background-color:transparent}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
 class PTMenuFancyModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTMenuFancyModule, declarations: [PTMenuFancyComponent], imports: [CommonModule, PTCardModule], exports: [PTMenuFancyComponent] }); }
@@ -6622,16 +6964,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+class PTNotificationModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationModule, declarations: [PTNotificationComponent], imports: [CommonModule], exports: [PTNotificationComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PTNotificationComponent],
+                    imports: [CommonModule],
+                    exports: [PTNotificationComponent],
+                }]
+        }] });
+
 class PTNavbarMenuModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuModule, declarations: [PTNavbarMenuComponent], imports: [CommonModule, RouterModule, PTMenuFancyModule], exports: [PTNavbarMenuComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuModule, imports: [CommonModule, RouterModule, PTMenuFancyModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuModule, declarations: [PTNavbarMenuComponent], imports: [CommonModule,
+            RouterModule,
+            PTMenuFancyModule,
+            PTNotificationModule], exports: [PTNavbarMenuComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuModule, imports: [CommonModule,
+            RouterModule,
+            PTMenuFancyModule,
+            PTNotificationModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNavbarMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PTNavbarMenuComponent],
-                    imports: [CommonModule, RouterModule, PTMenuFancyModule],
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        PTMenuFancyModule,
+                        PTNotificationModule,
+                    ],
                     exports: [PTNavbarMenuComponent],
                 }]
         }] });
@@ -7101,7 +7468,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 
 class PTPageSkeletonComponent {
     constructor() {
+        this.notifications = [];
+        this.notificationConfig = {};
         this.toggleSidebar = new EventEmitter();
+        this.notificationAction = new EventEmitter();
+        this.notificationClick = new EventEmitter();
+        this.notificationPanelOpened = new EventEmitter();
+        this.notificationPanelClosed = new EventEmitter();
+        this.notificationGlobalAction = new EventEmitter();
+        this.notificationViewAll = new EventEmitter();
         this.isSidebarVisible = true;
     }
     ngOnInit() {
@@ -7112,6 +7487,24 @@ class PTPageSkeletonComponent {
         this.isSidebarVisible = !this.isSidebarVisible;
         this.toggleSidebar.emit();
     }
+    onNotificationAction(event) {
+        this.notificationAction.emit(event);
+    }
+    onNotificationClick(event) {
+        this.notificationClick.emit(event);
+    }
+    onNotificationGlobalAction(event) {
+        this.notificationGlobalAction.emit(event);
+    }
+    onNotificationViewAll() {
+        this.notificationViewAll.emit();
+    }
+    onNotificationPanelOpened() {
+        this.notificationPanelOpened.emit();
+    }
+    onNotificationPanelClosed() {
+        this.notificationPanelClosed.emit();
+    }
     initializeBackgroundCardConfig() {
         this.pageSkeletonConfig.backgroundCardConfig = {
             identifier: 'pt-page-skeleton/background',
@@ -7144,17 +7537,33 @@ 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" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "<pt-card [config]=\"pageSkeletonConfig.backgroundCardConfig!\">\n  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar -->\n    @if (isSidebarVisible) {\n      <pt-side-bar-menu\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        class=\"sidebar\"\n      ></pt-side-bar-menu>\n    }\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\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  <!-- Footer -->\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"], outputs: ["toggleSidebar"] }, { 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" }, 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"] }] }); }
 }
 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  <!-- Navbar -->\n  <pt-nav-bar-menu\n    [navBarMenuConfig]=\"pageSkeletonConfig.navBarMenuConfig\"\n    [serverDateTime]=\"serverDateTime\"\n    (toggleSidebar)=\"onToggleSidebar()\"\n  ></pt-nav-bar-menu>\n\n  <div class=\"main-content\">\n    <!-- Sidebar -->\n    @if (isSidebarVisible) {\n      <pt-side-bar-menu\n        [menuConfig]=\"pageSkeletonConfig.sideMenuBarConfig\"\n        class=\"sidebar\"\n      ></pt-side-bar-menu>\n    }\n\n    <!-- Main View Area -->\n    <div class=\"content-area\" [ngClass]=\"{ 'full-width': !isSidebarVisible }\">\n      <pt-card [config]=\"pageSkeletonConfig.contentCardConfig\">\n        <!-- Breadcrumb -->\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  <!-- Footer -->\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    (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"] }]
         }], propDecorators: { pageSkeletonConfig: [{
                 type: Input
             }], serverDateTime: [{
                 type: Input
+            }], notifications: [{
+                type: Input
+            }], notificationConfig: [{
+                type: Input
             }], toggleSidebar: [{
                 type: Output
+            }], notificationAction: [{
+                type: Output
+            }], notificationClick: [{
+                type: Output
+            }], notificationPanelOpened: [{
+                type: Output
+            }], notificationPanelClosed: [{
+                type: Output
+            }], notificationGlobalAction: [{
+                type: Output
+            }], notificationViewAll: [{
+                type: Output
             }] } });
 
 class PTFooterModule {
@@ -11239,5 +11648,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, 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, 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