ng-prime-tools 1.1.25 → 1.1.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6517,11 +6517,11 @@ class PTNotificationComponent {
|
|
|
6517
6517
|
return String(value).padStart(2, '0');
|
|
6518
6518
|
}
|
|
6519
6519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNotificationComponent, isStandalone: false, selector: "pt-notification", inputs: { notifications: "notifications", config: "config", totalRecords: "totalRecords", totalUnreadRecords: "totalUnreadRecords", page: "page", rows: "rows", loading: "loading" }, outputs: { notificationClick: "notificationClick", action: "action", globalAction: "globalAction", viewAll: "viewAll", panelOpened: "panelOpened", panelClosed: "panelClosed", loadMore: "loadMore" }, host: { listeners: { "document:click": "onDocumentClick()" } }, ngImport: i0, template: "@if (isVisible()) {\n <div class=\"pt-notification\">\n <button\n type=\"button\"\n class=\"pt-notification-trigger\"\n [attr.aria-expanded]=\"isOpen\"\n aria-label=\"Notifications\"\n (click)=\"togglePanel($event)\"\n >\n <i [class]=\"getBellIcon()\"></i>\n\n @if (showBadge()) {\n <span class=\"pt-notification-badge\">\n {{ getBadgeText() }}\n </span>\n }\n </button>\n\n @if (isOpen) {\n <div\n class=\"pt-notification-panel\"\n [ngStyle]=\"getPanelStyles()\"\n (click)=\"onPanelClick($event)\"\n >\n <div class=\"pt-notification-header\">\n <div class=\"pt-notification-header-left\">\n <div class=\"pt-notification-header-title\">\n {{ getTitle() }}\n </div>\n\n @if (showHeaderCount()) {\n <span class=\"pt-notification-header-count\">\n {{ getUnreadCount() }}\n </span>\n }\n </div>\n\n @if (showGlobalActions()) {\n <div\n class=\"pt-notification-global-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"pt-notification-global-more-button\"\n aria-label=\"Notification global actions\"\n (click)=\"toggleGlobalActionMenu($event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n @if (isGlobalActionMenuOpen) {\n <div\n class=\"pt-notification-global-action-menu\"\n (click)=\"onGlobalActionMenuClick($event)\"\n >\n @for (menuAction of getGlobalActions(); track menuAction.id) {\n <button\n type=\"button\"\n [class]=\"getActionClasses(menuAction)\"\n [disabled]=\"menuAction.disabled\"\n (click)=\"onGlobalActionClick(menuAction, $event)\"\n >\n @if (menuAction.icon) {\n <i [class]=\"menuAction.icon\"></i>\n }\n\n <span>\n {{ menuAction.label }}\n </span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n\n @if (hasNotifications()) {\n <div\n class=\"pt-notification-list\"\n [ngStyle]=\"getListStyles()\"\n (scroll)=\"onListScroll($event)\"\n >\n @for (notification of getNotifications(); track notification.id) {\n <div\n [class]=\"getNotificationClasses(notification)\"\n (click)=\"onNotificationClick(notification, $event)\"\n >\n <div class=\"pt-notification-item-icon-wrapper\">\n <div class=\"pt-notification-item-icon\">\n <i\n [class]=\"getNotificationIcon(notification)\"\n [ngStyle]=\"getNotificationIconStyles(notification)\"\n ></i>\n </div>\n </div>\n\n <div class=\"pt-notification-item-content\">\n <div class=\"pt-notification-item-text\">\n {{ notification.text }}\n </div>\n\n @if (hasMetadata(notification)) {\n <div class=\"pt-notification-item-metadata\">\n @if (notification.date) {\n <span class=\"pt-notification-item-date\">\n <i class=\"pi pi-clock\"></i>\n\n {{ getDateText(notification) }}\n </span>\n }\n\n @if (notification.sender) {\n <span class=\"pt-notification-item-sender\">\n <i class=\"pi pi-user\"></i>\n\n {{ notification.sender }}\n </span>\n }\n </div>\n }\n </div>\n\n @if (hasActions(notification)) {\n <div\n class=\"pt-notification-item-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"pt-notification-more-button\"\n aria-label=\"Notification actions\"\n [disabled]=\"notification.disabled\"\n (click)=\"toggleActionMenu(notification, $event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n @if (isActionMenuOpen(notification)) {\n <div\n class=\"pt-notification-action-menu\"\n (click)=\"onActionMenuClick($event)\"\n >\n @for (\n menuAction of getActions(notification);\n track menuAction.id\n ) {\n <button\n type=\"button\"\n [class]=\"getActionClasses(menuAction)\"\n [disabled]=\"menuAction.disabled\"\n (click)=\"\n onActionClick(notification, menuAction, $event)\n \"\n >\n @if (menuAction.icon) {\n <i [class]=\"menuAction.icon\"></i>\n }\n\n <span>\n {{ menuAction.label }}\n </span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (notification.read !== true) {\n <span class=\"pt-notification-unread-indicator\"></span>\n }\n </div>\n }\n\n @if (showInfiniteScrollLoader()) {\n <div class=\"pt-notification-load-more\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n\n <span>\n {{ getLoadingText() }}\n </span>\n </div>\n }\n </div>\n } @else {\n <div class=\"pt-notification-empty\">\n @if (loading) {\n <i class=\"pi pi-spin pi-spinner\"></i>\n\n <span>\n {{ getLoadingText() }}\n </span>\n } @else {\n <i class=\"pi pi-bell-slash\"></i>\n\n <span>\n {{ getEmptyText() }}\n </span>\n }\n </div>\n }\n\n @if (showViewAll()) {\n <div class=\"pt-notification-footer\">\n <button\n type=\"button\"\n class=\"pt-notification-view-all\"\n (click)=\"onViewAllClick($event)\"\n >\n <span>\n {{ getViewAllText() }}\n </span>\n\n <i [class]=\"getViewAllIcon()\"></i>\n </button>\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.pt-notification{position:relative;display:inline-flex;align-items:center;justify-content:center}.pt-notification-trigger{position:relative;width:40px;height:40px;min-width:40px;padding:0;border:none;border-radius:999px;background:transparent;color:var(--pt-notification-bell-color, #475569);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .2s ease,color .2s ease}.pt-notification-trigger:hover{background:var(--pt-notification-bell-hover-bg, #f1f5f9);color:var(--pt-notification-bell-hover-color, #0f172a)}.pt-notification-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-bell-focus-shadow, rgba(37, 99, 235, .16))}.pt-notification-trigger>i{font-size:1.25rem;line-height:1}.pt-notification-badge{position:absolute;top:-1px;right:-3px;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--pt-notification-badge-border, #ffffff);border-radius:999px;background:var(--pt-notification-badge-bg, #dc2626);color:var(--pt-notification-badge-text, #ffffff);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:.65rem;font-weight:800;line-height:1;pointer-events:none}.pt-notification-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;max-width:min(420px,calc(100vw - 24px));background:var(--pt-notification-panel-bg, #ffffff);color:var(--pt-notification-panel-text, #334155);border:1px solid var(--pt-notification-panel-border, #e2e8f0);border-radius:14px;box-shadow:var( --pt-notification-panel-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;overflow:visible;z-index:10000}.pt-notification-header{min-height:52px;padding:0 16px;border-bottom:1px solid var(--pt-notification-header-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}.pt-notification-header-title{min-width:0;color:var(--pt-notification-header-title, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-notification-header-count{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--pt-notification-header-count-bg, #eff6ff);color:var(--pt-notification-header-count-text, #2563eb);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;font-size:.75rem;font-weight:800;line-height:1}.pt-notification-list{overflow-y:auto;overflow-x:visible;overscroll-behavior:contain}.pt-notification-item{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 34px;align-items:flex-start;gap:10px;min-height:76px;padding:13px 14px 13px 12px;border-bottom:1px solid var(--pt-notification-item-border, #f1f5f9);background:var(--pt-notification-item-bg, #ffffff);cursor:pointer;box-sizing:border-box;transition:background-color .15s ease}.pt-notification-item:last-child{border-bottom:none}.pt-notification-item:hover{background:var(--pt-notification-item-hover-bg, #f8fafc)}.pt-notification-item.unread{background:var(--pt-notification-item-unread-bg, #f8fbff)}.pt-notification-item.unread:hover{background:var(--pt-notification-item-unread-hover-bg, #f1f7ff)}.pt-notification-item.disabled{opacity:.55;cursor:not-allowed}.pt-notification-item-icon-wrapper{display:flex;justify-content:center;align-items:flex-start}.pt-notification-item-icon{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-notification-item-icon-bg, #eff6ff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-item-icon i{font-size:1rem;line-height:1}.pt-notification-item-content{min-width:0;padding-top:1px}.pt-notification-item-text{color:var(--pt-notification-item-text, #1e293b);font-size:.86rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.pt-notification-item.unread .pt-notification-item-text{color:var(--pt-notification-item-unread-text, #0f172a);font-weight:700}.pt-notification-item-metadata{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;color:var(--pt-notification-metadata-text, #94a3b8);font-size:.71rem;font-weight:500;line-height:1.3}.pt-notification-item-date,.pt-notification-item-sender{min-width:0;display:inline-flex;align-items:center;gap:4px}.pt-notification-item-date i,.pt-notification-item-sender i{flex:0 0 auto;font-size:.68rem}.pt-notification-item-sender{max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pt-notification-item-actions{position:relative;display:flex;justify-content:flex-end;align-items:flex-start}.pt-notification-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-more-color, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-more-button:hover{background:var(--pt-notification-more-hover-bg, #e2e8f0);color:var(--pt-notification-more-hover-color, #0f172a)}.pt-notification-more-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-more-button:disabled{opacity:.5;cursor:not-allowed}.pt-notification-more-button i{font-size:.95rem;line-height:1}.pt-notification-action-menu{position:absolute;top:34px;right:0;width:200px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10002}.pt-notification-action-menu-item{width:100%;min-height:36px;padding:7px 9px;border:none;border-radius:7px;background:transparent;color:var(--pt-notification-action-text, #334155);display:flex;align-items:center;gap:8px;box-sizing:border-box;text-align:left;cursor:pointer;font-size:.78rem;font-weight:600;transition:background-color .15s ease,color .15s ease}.pt-notification-action-menu-item:hover{background:var(--pt-notification-action-hover-bg, #f1f5f9);color:var(--pt-notification-action-hover-text, #0f172a)}.pt-notification-action-menu-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-action-menu-item.danger{color:var(--pt-notification-action-danger-text, #dc2626)}.pt-notification-action-menu-item.danger:hover{background:var(--pt-notification-action-danger-hover-bg, #fef2f2);color:var(--pt-notification-action-danger-hover-text, #b91c1c)}.pt-notification-action-menu-item.disabled,.pt-notification-action-menu-item:disabled{opacity:.5;cursor:not-allowed}.pt-notification-action-menu-item i{width:16px;flex:0 0 16px;font-size:.82rem;text-align:center}.pt-notification-action-menu-item span{min-width:0;flex:1 1 auto}.pt-notification-unread-indicator{position:absolute;top:50%;right:4px;width:6px;height:6px;border-radius:999px;background:var(--pt-notification-unread-indicator, #2563eb);transform:translateY(-50%);pointer-events:none}.pt-notification-empty{min-height:160px;padding:25px;color:var(--pt-notification-empty-text, #94a3b8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;text-align:center}.pt-notification-empty i{font-size:1.8rem}.pt-notification-empty span{font-size:.84rem;font-weight:600}@media(max-width:520px){.pt-notification-panel{position:fixed;top:60px;right:8px;left:8px;width:auto!important;min-width:0;max-width:none}.pt-notification-item{grid-template-columns:38px minmax(0,1fr) 32px;gap:8px;padding-right:13px}.pt-notification-item-icon{width:36px;height:36px;min-width:36px}.pt-notification-item-metadata{flex-direction:column;align-items:flex-start;gap:4px}.pt-notification-item-sender{max-width:190px}.pt-notification-action-menu{right:0;width:190px}}.pt-notification-header-left{display:flex;align-items:center;gap:8px;min-width:0}.pt-notification-global-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}.pt-notification-global-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-global-more-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-global-more-button:hover{background:var(--pt-notification-global-more-hover-bg, #f1f5f9);color:var(--pt-notification-global-more-hover-color, #0f172a)}.pt-notification-global-more-button i{font-size:.95rem}.pt-notification-global-action-menu{position:absolute;top:36px;right:0;width:210px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10003}.pt-notification-footer{min-height:50px;padding:7px;border-top:1px solid var(--pt-notification-footer-border, #e2e8f0);background:var(--pt-notification-footer-bg, #ffffff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-view-all{width:100%;min-height:36px;padding:7px 12px;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-view-all-text, #2563eb);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:.82rem;font-weight:700;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-view-all:hover{background:var(--pt-notification-view-all-hover-bg, #eff6ff);color:var(--pt-notification-view-all-hover-text, #1d4ed8)}.pt-notification-view-all i{font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
6520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTNotificationComponent, isStandalone: false, selector: "pt-notification", inputs: { notifications: "notifications", config: "config", totalRecords: "totalRecords", totalUnreadRecords: "totalUnreadRecords", page: "page", rows: "rows", loading: "loading" }, outputs: { notificationClick: "notificationClick", action: "action", globalAction: "globalAction", viewAll: "viewAll", panelOpened: "panelOpened", panelClosed: "panelClosed", loadMore: "loadMore" }, host: { listeners: { "document:click": "onDocumentClick()" } }, ngImport: i0, template: "@if (isVisible()) {\n <div class=\"pt-notification\">\n <button\n type=\"button\"\n class=\"pt-notification-trigger\"\n [attr.aria-expanded]=\"isOpen\"\n aria-label=\"Notifications\"\n (click)=\"togglePanel($event)\"\n >\n <i [class]=\"getBellIcon()\"></i>\n\n @if (showBadge()) {\n <span class=\"pt-notification-badge\">\n {{ getBadgeText() }}\n </span>\n }\n </button>\n\n @if (isOpen) {\n <div\n class=\"pt-notification-panel\"\n [ngStyle]=\"getPanelStyles()\"\n (click)=\"onPanelClick($event)\"\n >\n <div class=\"pt-notification-header\">\n <div class=\"pt-notification-header-left\">\n <div class=\"pt-notification-header-title\">\n {{ getTitle() }}\n </div>\n\n @if (showHeaderCount()) {\n <span class=\"pt-notification-header-count\">\n {{ getUnreadCount() }}\n </span>\n }\n </div>\n\n @if (showGlobalActions()) {\n <div\n class=\"pt-notification-global-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"pt-notification-global-more-button\"\n aria-label=\"Notification global actions\"\n (click)=\"toggleGlobalActionMenu($event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n @if (isGlobalActionMenuOpen) {\n <div\n class=\"pt-notification-global-action-menu\"\n (click)=\"onGlobalActionMenuClick($event)\"\n >\n @for (menuAction of getGlobalActions(); track menuAction.id) {\n <button\n type=\"button\"\n [class]=\"getActionClasses(menuAction)\"\n [disabled]=\"menuAction.disabled\"\n (click)=\"onGlobalActionClick(menuAction, $event)\"\n >\n @if (menuAction.icon) {\n <i [class]=\"menuAction.icon\"></i>\n }\n\n <span>\n {{ menuAction.label }}\n </span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n\n @if (hasNotifications()) {\n <div\n class=\"pt-notification-list\"\n [ngStyle]=\"getListStyles()\"\n (scroll)=\"onListScroll($event)\"\n >\n @for (notification of getNotifications(); track notification.id) {\n <div\n [class]=\"getNotificationClasses(notification)\"\n (click)=\"onNotificationClick(notification, $event)\"\n >\n <div class=\"pt-notification-item-icon-wrapper\">\n <div class=\"pt-notification-item-icon\">\n <i\n [class]=\"getNotificationIcon(notification)\"\n [ngStyle]=\"getNotificationIconStyles(notification)\"\n ></i>\n </div>\n </div>\n\n <div class=\"pt-notification-item-content\">\n <div class=\"pt-notification-item-text\">\n {{ notification.text }}\n </div>\n\n @if (hasMetadata(notification)) {\n <div class=\"pt-notification-item-metadata\">\n @if (notification.date) {\n <span class=\"pt-notification-item-date\">\n <i class=\"pi pi-clock\"></i>\n\n {{ getDateText(notification) }}\n </span>\n }\n\n @if (notification.sender) {\n <span class=\"pt-notification-item-sender\">\n <i class=\"pi pi-user\"></i>\n\n {{ notification.sender }}\n </span>\n }\n </div>\n }\n </div>\n\n @if (hasActions(notification)) {\n <div\n class=\"pt-notification-item-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"pt-notification-more-button\"\n aria-label=\"Notification actions\"\n [disabled]=\"notification.disabled\"\n (click)=\"toggleActionMenu(notification, $event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n @if (isActionMenuOpen(notification)) {\n <div\n class=\"pt-notification-action-menu\"\n (click)=\"onActionMenuClick($event)\"\n >\n @for (\n menuAction of getActions(notification);\n track menuAction.id\n ) {\n <button\n type=\"button\"\n [class]=\"getActionClasses(menuAction)\"\n [disabled]=\"menuAction.disabled\"\n (click)=\"\n onActionClick(notification, menuAction, $event)\n \"\n >\n @if (menuAction.icon) {\n <i [class]=\"menuAction.icon\"></i>\n }\n\n <span>\n {{ menuAction.label }}\n </span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (notification.read !== true) {\n <span class=\"pt-notification-unread-indicator\"></span>\n }\n </div>\n }\n\n @if (showInfiniteScrollLoader()) {\n <div class=\"pt-notification-load-more\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n\n <span>\n {{ getLoadingText() }}\n </span>\n </div>\n }\n </div>\n } @else {\n <div class=\"pt-notification-empty\">\n @if (loading) {\n <i class=\"pi pi-spin pi-spinner\"></i>\n\n <span>\n {{ getLoadingText() }}\n </span>\n } @else {\n <i class=\"pi pi-bell-slash\"></i>\n\n <span>\n {{ getEmptyText() }}\n </span>\n }\n </div>\n }\n\n @if (showViewAll()) {\n <div class=\"pt-notification-footer\">\n <button\n type=\"button\"\n class=\"pt-notification-view-all\"\n (click)=\"onViewAllClick($event)\"\n >\n <span>\n {{ getViewAllText() }}\n </span>\n\n <i [class]=\"getViewAllIcon()\"></i>\n </button>\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.pt-notification{position:relative;display:inline-flex;align-items:center;justify-content:center}.pt-notification-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;border:none;border-radius:999px;background:transparent;color:var(--pt-notification-bell-color, #475569);box-sizing:border-box;cursor:pointer;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:-2px;right:-4px;display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;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);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;display:flex;flex-direction:column;width:min(500px,calc(100vw - 24px));min-width:360px;max-width:calc(100vw - 24px);border:1px solid var(--pt-notification-panel-border, #e2e8f0);border-radius:14px;background:var(--pt-notification-panel-bg, #ffffff);color:var(--pt-notification-panel-text, #334155);box-shadow:var( --pt-notification-panel-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;overflow:hidden;z-index:10000}.pt-notification-header{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:0 16px;border-bottom:1px solid var(--pt-notification-header-border, #e2e8f0);box-sizing:border-box;gap:12px}.pt-notification-header-left{display:flex;align-items:center;min-width:0;gap:8px}.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{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--pt-notification-header-count-bg, #eff6ff);color:var(--pt-notification-header-count-text, #2563eb);box-sizing:border-box;font-size:.75rem;font-weight:800;line-height:1}.pt-notification-global-actions{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.pt-notification-global-more-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-global-more-color, #64748b);box-sizing:border-box;cursor:pointer;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:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-global-more-button i{font-size:.95rem}.pt-notification-global-action-menu{position:absolute;top:36px;right:0;width:210px;padding:5px;border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;background:var(--pt-notification-action-menu-bg, #ffffff);box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10005}.pt-notification-list{display:block;width:100%;min-width:0;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.pt-notification-item{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 32px;align-items:start;width:100%;min-width:0;gap:11px;min-height:76px;padding:14px 16px;border-bottom:1px solid var(--pt-notification-item-border, #f1f5f9);background:var(--pt-notification-item-bg, #ffffff);box-sizing:border-box;overflow:hidden;cursor:pointer;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;align-items:flex-start;justify-content:center;width:40px;min-width:40px}.pt-notification-item-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-notification-item-icon-bg, #eff6ff);box-sizing:border-box}.pt-notification-item-icon i{font-size:1rem;line-height:1}.pt-notification-item-content{width:100%;min-width:0;max-width:100%;padding-top:1px;box-sizing:border-box;overflow:hidden}.pt-notification-item-text{display:block;width:100%;min-width:0;max-width:100%;color:var(--pt-notification-item-text, #1e293b);font-size:.86rem;font-weight:600;line-height:1.45;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-notification-item.unread .pt-notification-item-text{color:var(--pt-notification-item-unread-text, #0f172a);font-weight:700}.pt-notification-item-metadata{display:flex;align-items:center;flex-wrap:wrap;width:100%;min-width:0;gap:5px 12px;margin-top:7px;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{display:inline-flex;align-items:center;min-width:0;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:180px;white-space:normal;overflow-wrap:anywhere}.pt-notification-item-actions{position:relative;display:flex;align-items:flex-start;justify-content:center;width:32px;min-width:32px}.pt-notification-more-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-more-color, #64748b);box-sizing:border-box;cursor:pointer;transition:background-color .15s ease,color .15s ease}.pt-notification-more-button:hover:not(:disabled){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;border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;background:var(--pt-notification-action-menu-bg, #ffffff);box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10006}.pt-notification-action-menu-item{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:7px 9px;border:none;border-radius:7px;background:transparent;color:var(--pt-notification-action-text, #334155);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:not(:disabled){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:not(:disabled){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:15px;right:7px;width:6px;height:6px;border-radius:999px;background:var(--pt-notification-unread-indicator, #2563eb);pointer-events:none}.pt-notification-load-more{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:10px 16px;color:var(--pt-notification-loading-text, #64748b);box-sizing:border-box;gap:8px;font-size:.78rem;font-weight:600}.pt-notification-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:160px;padding:25px;color:var(--pt-notification-empty-text, #94a3b8);box-sizing:border-box;gap:10px;text-align:center}.pt-notification-empty i{font-size:1.8rem}.pt-notification-empty span{font-size:.84rem;font-weight:600}.pt-notification-footer{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:7px;border-top:1px solid var(--pt-notification-footer-border, #e2e8f0);background:var(--pt-notification-footer-bg, #ffffff);box-sizing:border-box}.pt-notification-view-all{display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;padding:7px 12px;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-view-all-text, #2563eb);box-sizing:border-box;gap:8px;cursor:pointer;font-size:.82rem;font-weight:700;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}@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:36px minmax(0,1fr) 30px;gap:8px;padding:12px}.pt-notification-item-icon-wrapper{width:36px;min-width:36px}.pt-notification-item-icon{width:34px;height:34px;min-width:34px}.pt-notification-item-metadata{flex-direction:column;align-items:flex-start;gap:4px}.pt-notification-item-sender{max-width:100%}.pt-notification-action-menu{right:0;width:190px}}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
6521
6521
|
}
|
|
6522
6522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTNotificationComponent, decorators: [{
|
|
6523
6523
|
type: Component,
|
|
6524
|
-
args: [{ selector: 'pt-notification', standalone: false, template: "@if (isVisible()) {\n <div class=\"pt-notification\">\n <button\n type=\"button\"\n class=\"pt-notification-trigger\"\n [attr.aria-expanded]=\"isOpen\"\n aria-label=\"Notifications\"\n (click)=\"togglePanel($event)\"\n >\n <i [class]=\"getBellIcon()\"></i>\n\n @if (showBadge()) {\n <span class=\"pt-notification-badge\">\n {{ getBadgeText() }}\n </span>\n }\n </button>\n\n @if (isOpen) {\n <div\n class=\"pt-notification-panel\"\n [ngStyle]=\"getPanelStyles()\"\n (click)=\"onPanelClick($event)\"\n >\n <div class=\"pt-notification-header\">\n <div class=\"pt-notification-header-left\">\n <div class=\"pt-notification-header-title\">\n {{ getTitle() }}\n </div>\n\n @if (showHeaderCount()) {\n <span class=\"pt-notification-header-count\">\n {{ getUnreadCount() }}\n </span>\n }\n </div>\n\n @if (showGlobalActions()) {\n <div\n class=\"pt-notification-global-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"pt-notification-global-more-button\"\n aria-label=\"Notification global actions\"\n (click)=\"toggleGlobalActionMenu($event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n @if (isGlobalActionMenuOpen) {\n <div\n class=\"pt-notification-global-action-menu\"\n (click)=\"onGlobalActionMenuClick($event)\"\n >\n @for (menuAction of getGlobalActions(); track menuAction.id) {\n <button\n type=\"button\"\n [class]=\"getActionClasses(menuAction)\"\n [disabled]=\"menuAction.disabled\"\n (click)=\"onGlobalActionClick(menuAction, $event)\"\n >\n @if (menuAction.icon) {\n <i [class]=\"menuAction.icon\"></i>\n }\n\n <span>\n {{ menuAction.label }}\n </span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n\n @if (hasNotifications()) {\n <div\n class=\"pt-notification-list\"\n [ngStyle]=\"getListStyles()\"\n (scroll)=\"onListScroll($event)\"\n >\n @for (notification of getNotifications(); track notification.id) {\n <div\n [class]=\"getNotificationClasses(notification)\"\n (click)=\"onNotificationClick(notification, $event)\"\n >\n <div class=\"pt-notification-item-icon-wrapper\">\n <div class=\"pt-notification-item-icon\">\n <i\n [class]=\"getNotificationIcon(notification)\"\n [ngStyle]=\"getNotificationIconStyles(notification)\"\n ></i>\n </div>\n </div>\n\n <div class=\"pt-notification-item-content\">\n <div class=\"pt-notification-item-text\">\n {{ notification.text }}\n </div>\n\n @if (hasMetadata(notification)) {\n <div class=\"pt-notification-item-metadata\">\n @if (notification.date) {\n <span class=\"pt-notification-item-date\">\n <i class=\"pi pi-clock\"></i>\n\n {{ getDateText(notification) }}\n </span>\n }\n\n @if (notification.sender) {\n <span class=\"pt-notification-item-sender\">\n <i class=\"pi pi-user\"></i>\n\n {{ notification.sender }}\n </span>\n }\n </div>\n }\n </div>\n\n @if (hasActions(notification)) {\n <div\n class=\"pt-notification-item-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"pt-notification-more-button\"\n aria-label=\"Notification actions\"\n [disabled]=\"notification.disabled\"\n (click)=\"toggleActionMenu(notification, $event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n @if (isActionMenuOpen(notification)) {\n <div\n class=\"pt-notification-action-menu\"\n (click)=\"onActionMenuClick($event)\"\n >\n @for (\n menuAction of getActions(notification);\n track menuAction.id\n ) {\n <button\n type=\"button\"\n [class]=\"getActionClasses(menuAction)\"\n [disabled]=\"menuAction.disabled\"\n (click)=\"\n onActionClick(notification, menuAction, $event)\n \"\n >\n @if (menuAction.icon) {\n <i [class]=\"menuAction.icon\"></i>\n }\n\n <span>\n {{ menuAction.label }}\n </span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (notification.read !== true) {\n <span class=\"pt-notification-unread-indicator\"></span>\n }\n </div>\n }\n\n @if (showInfiniteScrollLoader()) {\n <div class=\"pt-notification-load-more\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n\n <span>\n {{ getLoadingText() }}\n </span>\n </div>\n }\n </div>\n } @else {\n <div class=\"pt-notification-empty\">\n @if (loading) {\n <i class=\"pi pi-spin pi-spinner\"></i>\n\n <span>\n {{ getLoadingText() }}\n </span>\n } @else {\n <i class=\"pi pi-bell-slash\"></i>\n\n <span>\n {{ getEmptyText() }}\n </span>\n }\n </div>\n }\n\n @if (showViewAll()) {\n <div class=\"pt-notification-footer\">\n <button\n type=\"button\"\n class=\"pt-notification-view-all\"\n (click)=\"onViewAllClick($event)\"\n >\n <span>\n {{ getViewAllText() }}\n </span>\n\n <i [class]=\"getViewAllIcon()\"></i>\n </button>\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.pt-notification{position:relative;display:inline-flex;align-items:center;justify-content:center}.pt-notification-trigger{position:relative;width:40px;height:40px;min-width:40px;padding:0;border:none;border-radius:999px;background:transparent;color:var(--pt-notification-bell-color, #475569);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .2s ease,color .2s ease}.pt-notification-trigger:hover{background:var(--pt-notification-bell-hover-bg, #f1f5f9);color:var(--pt-notification-bell-hover-color, #0f172a)}.pt-notification-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-bell-focus-shadow, rgba(37, 99, 235, .16))}.pt-notification-trigger>i{font-size:1.25rem;line-height:1}.pt-notification-badge{position:absolute;top:-1px;right:-3px;min-width:18px;height:18px;padding:0 4px;border:2px solid var(--pt-notification-badge-border, #ffffff);border-radius:999px;background:var(--pt-notification-badge-bg, #dc2626);color:var(--pt-notification-badge-text, #ffffff);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;font-size:.65rem;font-weight:800;line-height:1;pointer-events:none}.pt-notification-panel{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;max-width:min(420px,calc(100vw - 24px));background:var(--pt-notification-panel-bg, #ffffff);color:var(--pt-notification-panel-text, #334155);border:1px solid var(--pt-notification-panel-border, #e2e8f0);border-radius:14px;box-shadow:var( --pt-notification-panel-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;overflow:visible;z-index:10000}.pt-notification-header{min-height:52px;padding:0 16px;border-bottom:1px solid var(--pt-notification-header-border, #e2e8f0);display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}.pt-notification-header-title{min-width:0;color:var(--pt-notification-header-title, #0f172a);font-size:.95rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pt-notification-header-count{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--pt-notification-header-count-bg, #eff6ff);color:var(--pt-notification-header-count-text, #2563eb);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;font-size:.75rem;font-weight:800;line-height:1}.pt-notification-list{overflow-y:auto;overflow-x:visible;overscroll-behavior:contain}.pt-notification-item{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr) 34px;align-items:flex-start;gap:10px;min-height:76px;padding:13px 14px 13px 12px;border-bottom:1px solid var(--pt-notification-item-border, #f1f5f9);background:var(--pt-notification-item-bg, #ffffff);cursor:pointer;box-sizing:border-box;transition:background-color .15s ease}.pt-notification-item:last-child{border-bottom:none}.pt-notification-item:hover{background:var(--pt-notification-item-hover-bg, #f8fafc)}.pt-notification-item.unread{background:var(--pt-notification-item-unread-bg, #f8fbff)}.pt-notification-item.unread:hover{background:var(--pt-notification-item-unread-hover-bg, #f1f7ff)}.pt-notification-item.disabled{opacity:.55;cursor:not-allowed}.pt-notification-item-icon-wrapper{display:flex;justify-content:center;align-items:flex-start}.pt-notification-item-icon{width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-notification-item-icon-bg, #eff6ff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-item-icon i{font-size:1rem;line-height:1}.pt-notification-item-content{min-width:0;padding-top:1px}.pt-notification-item-text{color:var(--pt-notification-item-text, #1e293b);font-size:.86rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}.pt-notification-item.unread .pt-notification-item-text{color:var(--pt-notification-item-unread-text, #0f172a);font-weight:700}.pt-notification-item-metadata{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;color:var(--pt-notification-metadata-text, #94a3b8);font-size:.71rem;font-weight:500;line-height:1.3}.pt-notification-item-date,.pt-notification-item-sender{min-width:0;display:inline-flex;align-items:center;gap:4px}.pt-notification-item-date i,.pt-notification-item-sender i{flex:0 0 auto;font-size:.68rem}.pt-notification-item-sender{max-width:160px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pt-notification-item-actions{position:relative;display:flex;justify-content:flex-end;align-items:flex-start}.pt-notification-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-more-color, #64748b);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-more-button:hover{background:var(--pt-notification-more-hover-bg, #e2e8f0);color:var(--pt-notification-more-hover-color, #0f172a)}.pt-notification-more-button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-more-button:disabled{opacity:.5;cursor:not-allowed}.pt-notification-more-button i{font-size:.95rem;line-height:1}.pt-notification-action-menu{position:absolute;top:34px;right:0;width:200px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10002}.pt-notification-action-menu-item{width:100%;min-height:36px;padding:7px 9px;border:none;border-radius:7px;background:transparent;color:var(--pt-notification-action-text, #334155);display:flex;align-items:center;gap:8px;box-sizing:border-box;text-align:left;cursor:pointer;font-size:.78rem;font-weight:600;transition:background-color .15s ease,color .15s ease}.pt-notification-action-menu-item:hover{background:var(--pt-notification-action-hover-bg, #f1f5f9);color:var(--pt-notification-action-hover-text, #0f172a)}.pt-notification-action-menu-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-action-menu-item.danger{color:var(--pt-notification-action-danger-text, #dc2626)}.pt-notification-action-menu-item.danger:hover{background:var(--pt-notification-action-danger-hover-bg, #fef2f2);color:var(--pt-notification-action-danger-hover-text, #b91c1c)}.pt-notification-action-menu-item.disabled,.pt-notification-action-menu-item:disabled{opacity:.5;cursor:not-allowed}.pt-notification-action-menu-item i{width:16px;flex:0 0 16px;font-size:.82rem;text-align:center}.pt-notification-action-menu-item span{min-width:0;flex:1 1 auto}.pt-notification-unread-indicator{position:absolute;top:50%;right:4px;width:6px;height:6px;border-radius:999px;background:var(--pt-notification-unread-indicator, #2563eb);transform:translateY(-50%);pointer-events:none}.pt-notification-empty{min-height:160px;padding:25px;color:var(--pt-notification-empty-text, #94a3b8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;text-align:center}.pt-notification-empty i{font-size:1.8rem}.pt-notification-empty span{font-size:.84rem;font-weight:600}@media(max-width:520px){.pt-notification-panel{position:fixed;top:60px;right:8px;left:8px;width:auto!important;min-width:0;max-width:none}.pt-notification-item{grid-template-columns:38px minmax(0,1fr) 32px;gap:8px;padding-right:13px}.pt-notification-item-icon{width:36px;height:36px;min-width:36px}.pt-notification-item-metadata{flex-direction:column;align-items:flex-start;gap:4px}.pt-notification-item-sender{max-width:190px}.pt-notification-action-menu{right:0;width:190px}}.pt-notification-header-left{display:flex;align-items:center;gap:8px;min-width:0}.pt-notification-global-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}.pt-notification-global-more-button{width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-global-more-color, #64748b);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-global-more-button:hover{background:var(--pt-notification-global-more-hover-bg, #f1f5f9);color:var(--pt-notification-global-more-hover-color, #0f172a)}.pt-notification-global-more-button i{font-size:.95rem}.pt-notification-global-action-menu{position:absolute;top:36px;right:0;width:210px;padding:5px;background:var(--pt-notification-action-menu-bg, #ffffff);border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10003}.pt-notification-footer{min-height:50px;padding:7px;border-top:1px solid var(--pt-notification-footer-border, #e2e8f0);background:var(--pt-notification-footer-bg, #ffffff);display:flex;align-items:center;justify-content:center;box-sizing:border-box}.pt-notification-view-all{width:100%;min-height:36px;padding:7px 12px;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-view-all-text, #2563eb);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:.82rem;font-weight:700;box-sizing:border-box;transition:background-color .15s ease,color .15s ease}.pt-notification-view-all:hover{background:var(--pt-notification-view-all-hover-bg, #eff6ff);color:var(--pt-notification-view-all-hover-text, #1d4ed8)}.pt-notification-view-all i{font-size:.75rem}\n"] }]
|
|
6524
|
+
args: [{ selector: 'pt-notification', standalone: false, template: "@if (isVisible()) {\n <div class=\"pt-notification\">\n <button\n type=\"button\"\n class=\"pt-notification-trigger\"\n [attr.aria-expanded]=\"isOpen\"\n aria-label=\"Notifications\"\n (click)=\"togglePanel($event)\"\n >\n <i [class]=\"getBellIcon()\"></i>\n\n @if (showBadge()) {\n <span class=\"pt-notification-badge\">\n {{ getBadgeText() }}\n </span>\n }\n </button>\n\n @if (isOpen) {\n <div\n class=\"pt-notification-panel\"\n [ngStyle]=\"getPanelStyles()\"\n (click)=\"onPanelClick($event)\"\n >\n <div class=\"pt-notification-header\">\n <div class=\"pt-notification-header-left\">\n <div class=\"pt-notification-header-title\">\n {{ getTitle() }}\n </div>\n\n @if (showHeaderCount()) {\n <span class=\"pt-notification-header-count\">\n {{ getUnreadCount() }}\n </span>\n }\n </div>\n\n @if (showGlobalActions()) {\n <div\n class=\"pt-notification-global-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"pt-notification-global-more-button\"\n aria-label=\"Notification global actions\"\n (click)=\"toggleGlobalActionMenu($event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n @if (isGlobalActionMenuOpen) {\n <div\n class=\"pt-notification-global-action-menu\"\n (click)=\"onGlobalActionMenuClick($event)\"\n >\n @for (menuAction of getGlobalActions(); track menuAction.id) {\n <button\n type=\"button\"\n [class]=\"getActionClasses(menuAction)\"\n [disabled]=\"menuAction.disabled\"\n (click)=\"onGlobalActionClick(menuAction, $event)\"\n >\n @if (menuAction.icon) {\n <i [class]=\"menuAction.icon\"></i>\n }\n\n <span>\n {{ menuAction.label }}\n </span>\n </button>\n }\n </div>\n }\n </div>\n }\n </div>\n\n @if (hasNotifications()) {\n <div\n class=\"pt-notification-list\"\n [ngStyle]=\"getListStyles()\"\n (scroll)=\"onListScroll($event)\"\n >\n @for (notification of getNotifications(); track notification.id) {\n <div\n [class]=\"getNotificationClasses(notification)\"\n (click)=\"onNotificationClick(notification, $event)\"\n >\n <div class=\"pt-notification-item-icon-wrapper\">\n <div class=\"pt-notification-item-icon\">\n <i\n [class]=\"getNotificationIcon(notification)\"\n [ngStyle]=\"getNotificationIconStyles(notification)\"\n ></i>\n </div>\n </div>\n\n <div class=\"pt-notification-item-content\">\n <div class=\"pt-notification-item-text\">\n {{ notification.text }}\n </div>\n\n @if (hasMetadata(notification)) {\n <div class=\"pt-notification-item-metadata\">\n @if (notification.date) {\n <span class=\"pt-notification-item-date\">\n <i class=\"pi pi-clock\"></i>\n\n {{ getDateText(notification) }}\n </span>\n }\n\n @if (notification.sender) {\n <span class=\"pt-notification-item-sender\">\n <i class=\"pi pi-user\"></i>\n\n {{ notification.sender }}\n </span>\n }\n </div>\n }\n </div>\n\n @if (hasActions(notification)) {\n <div\n class=\"pt-notification-item-actions\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"pt-notification-more-button\"\n aria-label=\"Notification actions\"\n [disabled]=\"notification.disabled\"\n (click)=\"toggleActionMenu(notification, $event)\"\n >\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n\n @if (isActionMenuOpen(notification)) {\n <div\n class=\"pt-notification-action-menu\"\n (click)=\"onActionMenuClick($event)\"\n >\n @for (\n menuAction of getActions(notification);\n track menuAction.id\n ) {\n <button\n type=\"button\"\n [class]=\"getActionClasses(menuAction)\"\n [disabled]=\"menuAction.disabled\"\n (click)=\"\n onActionClick(notification, menuAction, $event)\n \"\n >\n @if (menuAction.icon) {\n <i [class]=\"menuAction.icon\"></i>\n }\n\n <span>\n {{ menuAction.label }}\n </span>\n </button>\n }\n </div>\n }\n </div>\n }\n\n @if (notification.read !== true) {\n <span class=\"pt-notification-unread-indicator\"></span>\n }\n </div>\n }\n\n @if (showInfiniteScrollLoader()) {\n <div class=\"pt-notification-load-more\">\n <i class=\"pi pi-spin pi-spinner\"></i>\n\n <span>\n {{ getLoadingText() }}\n </span>\n </div>\n }\n </div>\n } @else {\n <div class=\"pt-notification-empty\">\n @if (loading) {\n <i class=\"pi pi-spin pi-spinner\"></i>\n\n <span>\n {{ getLoadingText() }}\n </span>\n } @else {\n <i class=\"pi pi-bell-slash\"></i>\n\n <span>\n {{ getEmptyText() }}\n </span>\n }\n </div>\n }\n\n @if (showViewAll()) {\n <div class=\"pt-notification-footer\">\n <button\n type=\"button\"\n class=\"pt-notification-view-all\"\n (click)=\"onViewAllClick($event)\"\n >\n <span>\n {{ getViewAllText() }}\n </span>\n\n <i [class]=\"getViewAllIcon()\"></i>\n </button>\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}.pt-notification{position:relative;display:inline-flex;align-items:center;justify-content:center}.pt-notification-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;border:none;border-radius:999px;background:transparent;color:var(--pt-notification-bell-color, #475569);box-sizing:border-box;cursor:pointer;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:-2px;right:-4px;display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;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);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;display:flex;flex-direction:column;width:min(500px,calc(100vw - 24px));min-width:360px;max-width:calc(100vw - 24px);border:1px solid var(--pt-notification-panel-border, #e2e8f0);border-radius:14px;background:var(--pt-notification-panel-bg, #ffffff);color:var(--pt-notification-panel-text, #334155);box-shadow:var( --pt-notification-panel-shadow, 0 18px 45px rgba(15, 23, 42, .16) );box-sizing:border-box;overflow:hidden;z-index:10000}.pt-notification-header{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:0 16px;border-bottom:1px solid var(--pt-notification-header-border, #e2e8f0);box-sizing:border-box;gap:12px}.pt-notification-header-left{display:flex;align-items:center;min-width:0;gap:8px}.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{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-width:26px;height:26px;padding:0 7px;border-radius:999px;background:var(--pt-notification-header-count-bg, #eff6ff);color:var(--pt-notification-header-count-text, #2563eb);box-sizing:border-box;font-size:.75rem;font-weight:800;line-height:1}.pt-notification-global-actions{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.pt-notification-global-more-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-global-more-color, #64748b);box-sizing:border-box;cursor:pointer;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:focus-visible{outline:none;box-shadow:0 0 0 3px var(--pt-notification-action-focus-shadow, rgba(37, 99, 235, .14))}.pt-notification-global-more-button i{font-size:.95rem}.pt-notification-global-action-menu{position:absolute;top:36px;right:0;width:210px;padding:5px;border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;background:var(--pt-notification-action-menu-bg, #ffffff);box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10005}.pt-notification-list{display:block;width:100%;min-width:0;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}.pt-notification-item{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 32px;align-items:start;width:100%;min-width:0;gap:11px;min-height:76px;padding:14px 16px;border-bottom:1px solid var(--pt-notification-item-border, #f1f5f9);background:var(--pt-notification-item-bg, #ffffff);box-sizing:border-box;overflow:hidden;cursor:pointer;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;align-items:flex-start;justify-content:center;width:40px;min-width:40px}.pt-notification-item-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;border-radius:999px;background:var(--pt-notification-item-icon-bg, #eff6ff);box-sizing:border-box}.pt-notification-item-icon i{font-size:1rem;line-height:1}.pt-notification-item-content{width:100%;min-width:0;max-width:100%;padding-top:1px;box-sizing:border-box;overflow:hidden}.pt-notification-item-text{display:block;width:100%;min-width:0;max-width:100%;color:var(--pt-notification-item-text, #1e293b);font-size:.86rem;font-weight:600;line-height:1.45;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.pt-notification-item.unread .pt-notification-item-text{color:var(--pt-notification-item-unread-text, #0f172a);font-weight:700}.pt-notification-item-metadata{display:flex;align-items:center;flex-wrap:wrap;width:100%;min-width:0;gap:5px 12px;margin-top:7px;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{display:inline-flex;align-items:center;min-width:0;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:180px;white-space:normal;overflow-wrap:anywhere}.pt-notification-item-actions{position:relative;display:flex;align-items:flex-start;justify-content:center;width:32px;min-width:32px}.pt-notification-more-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-more-color, #64748b);box-sizing:border-box;cursor:pointer;transition:background-color .15s ease,color .15s ease}.pt-notification-more-button:hover:not(:disabled){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;border:1px solid var(--pt-notification-action-menu-border, #e2e8f0);border-radius:10px;background:var(--pt-notification-action-menu-bg, #ffffff);box-shadow:var( --pt-notification-action-menu-shadow, 0 12px 30px rgba(15, 23, 42, .16) );box-sizing:border-box;z-index:10006}.pt-notification-action-menu-item{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:7px 9px;border:none;border-radius:7px;background:transparent;color:var(--pt-notification-action-text, #334155);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:not(:disabled){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:not(:disabled){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:15px;right:7px;width:6px;height:6px;border-radius:999px;background:var(--pt-notification-unread-indicator, #2563eb);pointer-events:none}.pt-notification-load-more{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:10px 16px;color:var(--pt-notification-loading-text, #64748b);box-sizing:border-box;gap:8px;font-size:.78rem;font-weight:600}.pt-notification-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:160px;padding:25px;color:var(--pt-notification-empty-text, #94a3b8);box-sizing:border-box;gap:10px;text-align:center}.pt-notification-empty i{font-size:1.8rem}.pt-notification-empty span{font-size:.84rem;font-weight:600}.pt-notification-footer{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:7px;border-top:1px solid var(--pt-notification-footer-border, #e2e8f0);background:var(--pt-notification-footer-bg, #ffffff);box-sizing:border-box}.pt-notification-view-all{display:flex;align-items:center;justify-content:center;width:100%;min-height:36px;padding:7px 12px;border:none;border-radius:8px;background:transparent;color:var(--pt-notification-view-all-text, #2563eb);box-sizing:border-box;gap:8px;cursor:pointer;font-size:.82rem;font-weight:700;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}@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:36px minmax(0,1fr) 30px;gap:8px;padding:12px}.pt-notification-item-icon-wrapper{width:36px;min-width:36px}.pt-notification-item-icon{width:34px;height:34px;min-width:34px}.pt-notification-item-metadata{flex-direction:column;align-items:flex-start;gap:4px}.pt-notification-item-sender{max-width:100%}.pt-notification-action-menu{right:0;width:190px}}\n"] }]
|
|
6525
6525
|
}], propDecorators: { notifications: [{
|
|
6526
6526
|
type: Input
|
|
6527
6527
|
}], config: [{
|