ng-prime-tools 1.1.25 → 1.1.27
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: [{
|
|
@@ -8373,6 +8373,7 @@ class PTLoginCardComponent {
|
|
|
8373
8373
|
constructor(fb) {
|
|
8374
8374
|
this.fb = fb;
|
|
8375
8375
|
this.loginErrorMessage = null;
|
|
8376
|
+
this.loginLoading = false;
|
|
8376
8377
|
this.loginSubmit = new EventEmitter();
|
|
8377
8378
|
this.destroy$ = new Subject();
|
|
8378
8379
|
this.formGroup = this.fb.group({});
|
|
@@ -8384,13 +8385,20 @@ class PTLoginCardComponent {
|
|
|
8384
8385
|
username: this.loginPageConfig?.login?.username || '',
|
|
8385
8386
|
password: this.loginPageConfig?.login?.password || '',
|
|
8386
8387
|
});
|
|
8387
|
-
this.
|
|
8388
|
+
this.updateButtonState();
|
|
8388
8389
|
this.formGroup.statusChanges
|
|
8389
8390
|
.pipe(takeUntil(this.destroy$))
|
|
8390
|
-
.subscribe((
|
|
8391
|
-
this.
|
|
8391
|
+
.subscribe(() => {
|
|
8392
|
+
this.updateButtonState();
|
|
8392
8393
|
});
|
|
8393
8394
|
}
|
|
8395
|
+
ngOnChanges(changes) {
|
|
8396
|
+
if (changes['loginLoading'] &&
|
|
8397
|
+
!changes['loginLoading'].firstChange &&
|
|
8398
|
+
this.loginPageConfig?.buttonConfig) {
|
|
8399
|
+
this.updateButtonState();
|
|
8400
|
+
}
|
|
8401
|
+
}
|
|
8394
8402
|
ngOnDestroy() {
|
|
8395
8403
|
this.destroy$.next();
|
|
8396
8404
|
this.destroy$.complete();
|
|
@@ -8463,6 +8471,7 @@ class PTLoginCardComponent {
|
|
|
8463
8471
|
iconPos: this.loginPageConfig.buttonConfig?.iconPos || 'left',
|
|
8464
8472
|
styleClass: this.loginPageConfig.buttonConfig?.styleClass || 'p-button-success',
|
|
8465
8473
|
disabled: this.loginPageConfig.buttonConfig?.disabled ?? true,
|
|
8474
|
+
loading: this.loginLoading,
|
|
8466
8475
|
width: this.loginPageConfig.buttonConfig?.width ?? '100%',
|
|
8467
8476
|
...this.loginPageConfig.buttonConfig,
|
|
8468
8477
|
};
|
|
@@ -8477,6 +8486,9 @@ class PTLoginCardComponent {
|
|
|
8477
8486
|
})) ?? [];
|
|
8478
8487
|
}
|
|
8479
8488
|
onSubmit() {
|
|
8489
|
+
if (this.loginLoading) {
|
|
8490
|
+
return;
|
|
8491
|
+
}
|
|
8480
8492
|
if (this.formGroup.valid) {
|
|
8481
8493
|
this.loginSubmit.emit(this.formGroup.getRawValue());
|
|
8482
8494
|
return;
|
|
@@ -8518,14 +8530,18 @@ class PTLoginCardComponent {
|
|
|
8518
8530
|
}
|
|
8519
8531
|
return 'text';
|
|
8520
8532
|
}
|
|
8521
|
-
|
|
8533
|
+
updateButtonState() {
|
|
8534
|
+
if (!this.loginPageConfig?.buttonConfig) {
|
|
8535
|
+
return;
|
|
8536
|
+
}
|
|
8522
8537
|
this.loginPageConfig.buttonConfig = {
|
|
8523
8538
|
...this.loginPageConfig.buttonConfig,
|
|
8524
|
-
|
|
8539
|
+
loading: this.loginLoading,
|
|
8540
|
+
disabled: this.loginLoading || this.formGroup.invalid,
|
|
8525
8541
|
};
|
|
8526
8542
|
}
|
|
8527
8543
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8528
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n @if (loginPageConfig.logoUrl; as logoUrl) {\n @if (logoUrl.imageUrl) {\n <div class=\"logo-container\">\n <img\n [src]=\"logoUrl.imageUrl\"\n [alt]=\"logoUrl.altText || 'Logo'\"\n [style.width]=\"logoUrl.width || '100px'\"\n [style.height]=\"logoUrl.height || 'auto'\"\n />\n </div>\n }\n }\n\n <div class=\"title-container\">\n <h1\n [ngStyle]=\"{\n color: loginPageConfig.title?.color || '#333',\n 'font-size': loginPageConfig.title?.fontSize || '24px',\n }\"\n >\n {{ loginPageConfig.title?.text || \"Default Title\" }}\n </h1>\n </div>\n\n @if (loginErrorMessage) {\n <div class=\"error-message\" role=\"alert\">\n {{ loginErrorMessage }}\n </div>\n }\n\n <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n @if (loginPageConfig.login; as login) {\n @if (login.errorMessage) {\n <div class=\"error-message\" role=\"alert\">\n {{ login.errorMessage }}\n </div>\n }\n }\n\n <div class=\"field\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [formField]=\"loginPageConfig.usernameField!\"\n ></pt-text-input>\n </div>\n\n <div class=\"field\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [formField]=\"loginPageConfig.passwordField!\"\n ></pt-text-input>\n </div>\n\n <div class=\"submit-btn\">\n <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n </div>\n\n @if (loginPageConfig.forgotPasswordConfig; as forgotPasswordConfig) {\n @if (forgotPasswordConfig.text && forgotPasswordConfig.url) {\n <div\n class=\"forgot-password-container\"\n [ngClass]=\"\n 'forgot-password-' + (forgotPasswordConfig.align || 'center')\n \"\n >\n <a\n [href]=\"forgotPasswordConfig.url\"\n [target]=\"forgotPasswordConfig.target || '_self'\"\n [rel]=\"\n forgotPasswordConfig.target === '_blank'\n ? 'noopener noreferrer'\n : null\n \"\n [ngStyle]=\"forgotPasswordConfig.style\"\n [class]=\"forgotPasswordConfig.styleClass || 'forgot-password-link'\"\n >\n {{ forgotPasswordConfig.text }}\n </a>\n </div>\n }\n }\n\n @if (visibleAdditionalContent.length > 0) {\n <div class=\"additional-content-list\">\n @for (item of visibleAdditionalContent; track item.id || $index) {\n <div\n class=\"additional-content-item\"\n [ngClass]=\"getAdditionalContentClass(item)\"\n [ngStyle]=\"item.style\"\n >\n @switch (item.type) {\n @case (\"link\") {\n @if (item.linkText && item.url) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n }\n }\n\n @case (\"text-with-link\") {\n @if (\n item.linkPosition === \"before\" && item.linkText && item.url\n ) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n } @else {\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n\n @if (item.linkText && item.url) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n }\n }\n }\n\n @default {\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n }\n }\n </div>\n }\n </div>\n }\n </form>\n\n <div class=\"login-footer\">\n {{ loginPageConfig.footer?.version }}\n\n <span>\n {{ loginPageConfig.footer?.copyright }}\n </span>\n </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
|
|
8544
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginCardComponent, isStandalone: true, selector: "pt-login-card", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage", loginLoading: "loginLoading" }, outputs: { loginSubmit: "loginSubmit" }, usesOnChanges: true, ngImport: i0, template: "<pt-card [config]=\"loginPageConfig.loginCardConfig!\">\n @if (loginPageConfig.logoUrl; as logoUrl) {\n @if (logoUrl.imageUrl) {\n <div class=\"logo-container\">\n <img\n [src]=\"logoUrl.imageUrl\"\n [alt]=\"logoUrl.altText || 'Logo'\"\n [style.width]=\"logoUrl.width || '100px'\"\n [style.height]=\"logoUrl.height || 'auto'\"\n />\n </div>\n }\n }\n\n <div class=\"title-container\">\n <h1\n [ngStyle]=\"{\n color: loginPageConfig.title?.color || '#333',\n 'font-size': loginPageConfig.title?.fontSize || '24px',\n }\"\n >\n {{ loginPageConfig.title?.text || \"Default Title\" }}\n </h1>\n </div>\n\n @if (loginErrorMessage) {\n <div class=\"error-message\" role=\"alert\">\n {{ loginErrorMessage }}\n </div>\n }\n\n <form class=\"form-container\" [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n @if (loginPageConfig.login; as login) {\n @if (login.errorMessage) {\n <div class=\"error-message\" role=\"alert\">\n {{ login.errorMessage }}\n </div>\n }\n }\n\n <div class=\"field\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [formField]=\"loginPageConfig.usernameField!\"\n ></pt-text-input>\n </div>\n\n <div class=\"field\">\n <pt-text-input\n [formGroup]=\"formGroup\"\n [formField]=\"loginPageConfig.passwordField!\"\n ></pt-text-input>\n </div>\n\n <div class=\"submit-btn\">\n <pt-button [buttonConfig]=\"loginPageConfig.buttonConfig!\"></pt-button>\n </div>\n\n @if (loginPageConfig.forgotPasswordConfig; as forgotPasswordConfig) {\n @if (forgotPasswordConfig.text && forgotPasswordConfig.url) {\n <div\n class=\"forgot-password-container\"\n [ngClass]=\"\n 'forgot-password-' + (forgotPasswordConfig.align || 'center')\n \"\n >\n <a\n [href]=\"forgotPasswordConfig.url\"\n [target]=\"forgotPasswordConfig.target || '_self'\"\n [rel]=\"\n forgotPasswordConfig.target === '_blank'\n ? 'noopener noreferrer'\n : null\n \"\n [ngStyle]=\"forgotPasswordConfig.style\"\n [class]=\"forgotPasswordConfig.styleClass || 'forgot-password-link'\"\n >\n {{ forgotPasswordConfig.text }}\n </a>\n </div>\n }\n }\n\n @if (visibleAdditionalContent.length > 0) {\n <div class=\"additional-content-list\">\n @for (item of visibleAdditionalContent; track item.id || $index) {\n <div\n class=\"additional-content-item\"\n [ngClass]=\"getAdditionalContentClass(item)\"\n [ngStyle]=\"item.style\"\n >\n @switch (item.type) {\n @case (\"link\") {\n @if (item.linkText && item.url) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n }\n }\n\n @case (\"text-with-link\") {\n @if (\n item.linkPosition === \"before\" && item.linkText && item.url\n ) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n } @else {\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n\n @if (item.linkText && item.url) {\n <a\n [href]=\"item.url\"\n [target]=\"item.target || '_self'\"\n [rel]=\"getLinkRel(item)\"\n [class]=\"item.linkStyleClass || 'additional-content-link'\"\n [ngStyle]=\"item.linkStyle\"\n >\n {{ item.linkText }}\n </a>\n }\n }\n }\n\n @default {\n @if (item.text) {\n <span class=\"additional-content-text\">\n {{ item.text }}\n </span>\n }\n }\n }\n </div>\n }\n </div>\n }\n </form>\n\n <div class=\"login-footer\">\n {{ loginPageConfig.footer?.version }}\n\n <span>\n {{ loginPageConfig.footer?.copyright }}\n </span>\n </div>\n</pt-card>\n", styles: [":host{display:block;width:100%;min-width:0}.logo-container{display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem}.logo-container img{display:block;max-width:100%;object-fit:contain}.title-container{margin-bottom:1.25rem;text-align:center}.title-container h1{margin:0;line-height:1.25}.form-container{width:100%}.field{display:flex;flex-direction:column;width:100%;margin-bottom:1.25rem}.error-message{width:100%;box-sizing:border-box;margin-bottom:.75rem;padding:.75rem .875rem;color:var(--p-message-error-color, #b91c1c);background:var(--p-message-error-background, #fef2f2);border:1px solid var(--p-message-error-border-color, #fecaca);border-radius:var(--p-content-border-radius, .5rem);font-size:.875rem;line-height:1.4;text-align:center}.submit-btn{display:flex;justify-content:center;width:100%}:host ::ng-deep .submit-btn pt-button{display:block;width:100%}:host ::ng-deep .submit-btn p-button,:host ::ng-deep .submit-btn p-button button{width:100%}.forgot-password-container{display:flex;width:100%;box-sizing:border-box;margin-top:.875rem;margin-bottom:0;font-size:.875rem;line-height:1.4}.forgot-password-left{justify-content:flex-start;text-align:left}.forgot-password-center{justify-content:center;text-align:center}.forgot-password-right{justify-content:flex-end;text-align:right}.forgot-password-link,.additional-content-link{color:var(--p-primary-color, #2563eb);font-size:.875rem;font-weight:500;line-height:1.4;text-decoration:none;cursor:pointer;transition:color .16s ease,text-decoration-color .16s ease}.forgot-password-link:hover,.additional-content-link:hover{color:var(--p-primary-hover-color, #1d4ed8);text-decoration:underline;text-underline-offset:.2rem}.forgot-password-link:focus-visible,.additional-content-link:focus-visible{outline:2px solid var(--p-primary-color, #2563eb);outline-offset:.2rem;border-radius:.2rem}.additional-content-list{display:flex;flex-direction:column;width:100%;margin-top:1rem;gap:.55rem}.forgot-password-container+.additional-content-list{margin-top:.75rem}.additional-content-item{display:flex;flex-wrap:wrap;align-items:baseline;width:100%;box-sizing:border-box;gap:.3rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.875rem;line-height:1.45}.additional-content-left{justify-content:flex-start;text-align:left}.additional-content-center{justify-content:center;text-align:center}.additional-content-right{justify-content:flex-end;text-align:right}.additional-content-text{color:inherit}.login-footer{margin-top:1.25rem;color:var(--p-text-muted-color, var(--text-color-secondary, #64748b));font-size:.8rem;line-height:1.4;text-align:center}.login-footer span{display:block;margin-top:.25rem}:host-context(.p-dark) .error-message,:host-context(.app-dark) .error-message,:host-context(.dark) .error-message,:host-context(.dark-mode) .error-message,:host-context([data-theme=\"dark\"]) .error-message{color:var(--p-message-error-color, #fca5a5);background:var(--p-message-error-background, rgba(127, 29, 29, .25));border-color:var(--p-message-error-border-color, rgba(248, 113, 113, .4))}:host-context(.p-dark) .forgot-password-link,:host-context(.app-dark) .forgot-password-link,:host-context(.dark) .forgot-password-link,:host-context(.dark-mode) .forgot-password-link,:host-context([data-theme=\"dark\"]) .forgot-password-link,:host-context(.p-dark) .additional-content-link,:host-context(.app-dark) .additional-content-link,:host-context(.dark) .additional-content-link,:host-context(.dark-mode) .additional-content-link,:host-context([data-theme=\"dark\"]) .additional-content-link{color:var(--p-primary-color, #60a5fa)}:host-context(.p-dark) .forgot-password-link:hover,:host-context(.app-dark) .forgot-password-link:hover,:host-context(.dark) .forgot-password-link:hover,:host-context(.dark-mode) .forgot-password-link:hover,:host-context([data-theme=\"dark\"]) .forgot-password-link:hover,:host-context(.p-dark) .additional-content-link:hover,:host-context(.app-dark) .additional-content-link:hover,:host-context(.dark) .additional-content-link:hover,:host-context(.dark-mode) .additional-content-link:hover,:host-context([data-theme=\"dark\"]) .additional-content-link:hover{color:var(--p-primary-hover-color, #93c5fd)}:host-context(.p-dark) .additional-content-item,:host-context(.app-dark) .additional-content-item,:host-context(.dark) .additional-content-item,:host-context(.dark-mode) .additional-content-item,:host-context([data-theme=\"dark\"]) .additional-content-item,:host-context(.p-dark) .login-footer,:host-context(.app-dark) .login-footer,:host-context(.dark) .login-footer,:host-context(.dark-mode) .login-footer,:host-context([data-theme=\"dark\"]) .login-footer{color:var(--p-text-muted-color, var(--text-color-secondary, #cbd5e1))}@media(max-width:768px){:host ::ng-deep pt-card{width:100%;max-width:100%}.submit-btn{min-width:100%}.forgot-password-container{margin-top:.75rem}.additional-content-list{margin-top:.875rem}.forgot-password-container+.additional-content-list{margin-top:.65rem}}@media(max-width:480px){.logo-container,.title-container,.field{margin-bottom:1rem}.forgot-password-container,.forgot-password-link,.additional-content-item,.additional-content-link{font-size:.82rem}.additional-content-list{gap:.5rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PTCardModule }, { kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "ngmodule", type: PTButtonModule }, { kind: "component", type: PTButtonComponent, selector: "pt-button", inputs: ["buttonConfig"] }, { kind: "ngmodule", type: PTTextInputModule }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }] }); }
|
|
8529
8545
|
}
|
|
8530
8546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginCardComponent, decorators: [{
|
|
8531
8547
|
type: Component,
|
|
@@ -8541,6 +8557,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
8541
8557
|
type: Input
|
|
8542
8558
|
}], loginErrorMessage: [{
|
|
8543
8559
|
type: Input
|
|
8560
|
+
}], loginLoading: [{
|
|
8561
|
+
type: Input
|
|
8544
8562
|
}], loginSubmit: [{
|
|
8545
8563
|
type: Output
|
|
8546
8564
|
}] } });
|
|
@@ -8548,6 +8566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
8548
8566
|
class PTLoginPageComponent {
|
|
8549
8567
|
constructor() {
|
|
8550
8568
|
this.loginErrorMessage = null;
|
|
8569
|
+
this.loginLoading = false;
|
|
8551
8570
|
this.loginSubmit = new EventEmitter();
|
|
8552
8571
|
this.defaultCardConfig = {
|
|
8553
8572
|
borderRadius: '0',
|
|
@@ -8562,12 +8581,15 @@ class PTLoginPageComponent {
|
|
|
8562
8581
|
ngOnInit() {
|
|
8563
8582
|
this.applyDefaultConfigs();
|
|
8564
8583
|
}
|
|
8584
|
+
onLoginSubmit(loginModel) {
|
|
8585
|
+
if (this.loginLoading) {
|
|
8586
|
+
return;
|
|
8587
|
+
}
|
|
8588
|
+
this.loginSubmit.emit(loginModel);
|
|
8589
|
+
}
|
|
8565
8590
|
applyDefaultConfigs() {
|
|
8566
|
-
// Apply defaults to centerCardConfig
|
|
8567
8591
|
this.loginPageConfig.centerCardConfig = this.applyDefaults(this.loginPageConfig.centerCardConfig);
|
|
8568
|
-
// Apply defaults to leftCardConfig
|
|
8569
8592
|
this.loginPageConfig.leftCardConfig = this.applyDefaults(this.loginPageConfig.leftCardConfig);
|
|
8570
|
-
// Apply defaults to rightCardConfig
|
|
8571
8593
|
this.loginPageConfig.rightCardConfig = this.applyDefaults(this.loginPageConfig.rightCardConfig);
|
|
8572
8594
|
}
|
|
8573
8595
|
applyDefaults(config) {
|
|
@@ -8576,19 +8598,18 @@ class PTLoginPageComponent {
|
|
|
8576
8598
|
...(config || {}),
|
|
8577
8599
|
};
|
|
8578
8600
|
}
|
|
8579
|
-
onLoginSubmit(loginModel) {
|
|
8580
|
-
this.loginSubmit.emit(loginModel);
|
|
8581
|
-
}
|
|
8582
8601
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8583
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginPageComponent, isStandalone: false, selector: "pt-login-page", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<!-- Center Position -->\n<ng-container>\n @if (loginPageConfig.position ===
|
|
8602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTLoginPageComponent, isStandalone: false, selector: "pt-login-page", inputs: { loginPageConfig: "loginPageConfig", loginErrorMessage: "loginErrorMessage", loginLoading: "loginLoading" }, outputs: { loginSubmit: "loginSubmit" }, ngImport: i0, template: "<!-- Center Position -->\n<ng-container>\n @if (loginPageConfig.position === \"center\") {\n <div class=\"center-container\">\n @if (loginPageConfig.centerCardConfig) {\n <pt-card [config]=\"loginPageConfig.centerCardConfig\">\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n </pt-card>\n }\n </div>\n }\n\n <!-- Left and Right Positions -->\n @if (\n loginPageConfig.position === \"left\" || loginPageConfig.position === \"right\"\n ) {\n <div class=\"left-right-container\">\n <!-- Left Card -->\n @if (loginPageConfig.leftCardConfig) {\n <pt-card [config]=\"loginPageConfig.leftCardConfig\">\n @if (loginPageConfig.position === \"left\") {\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n }\n </pt-card>\n }\n\n <!-- Right Card -->\n @if (loginPageConfig.rightCardConfig) {\n <pt-card [config]=\"loginPageConfig.rightCardConfig\">\n @if (loginPageConfig.position === \"right\") {\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n }\n </pt-card>\n }\n </div>\n }\n</ng-container>\n", styles: [".left-right-container{display:flex;height:100vh;width:100%}.left-right-container pt-card{flex:1;max-width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.center-container pt-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px;box-sizing:border-box;margin:0}\n"], dependencies: [{ kind: "component", type: PTCardComponent, selector: "pt-card", inputs: ["config"] }, { kind: "component", type: PTLoginCardComponent, selector: "pt-login-card", inputs: ["loginPageConfig", "loginErrorMessage", "loginLoading"], outputs: ["loginSubmit"] }] }); }
|
|
8584
8603
|
}
|
|
8585
8604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTLoginPageComponent, decorators: [{
|
|
8586
8605
|
type: Component,
|
|
8587
|
-
args: [{ selector: 'pt-login-page', standalone: false, template: "<!-- Center Position -->\n<ng-container>\n @if (loginPageConfig.position ===
|
|
8606
|
+
args: [{ selector: 'pt-login-page', standalone: false, template: "<!-- Center Position -->\n<ng-container>\n @if (loginPageConfig.position === \"center\") {\n <div class=\"center-container\">\n @if (loginPageConfig.centerCardConfig) {\n <pt-card [config]=\"loginPageConfig.centerCardConfig\">\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n </pt-card>\n }\n </div>\n }\n\n <!-- Left and Right Positions -->\n @if (\n loginPageConfig.position === \"left\" || loginPageConfig.position === \"right\"\n ) {\n <div class=\"left-right-container\">\n <!-- Left Card -->\n @if (loginPageConfig.leftCardConfig) {\n <pt-card [config]=\"loginPageConfig.leftCardConfig\">\n @if (loginPageConfig.position === \"left\") {\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n }\n </pt-card>\n }\n\n <!-- Right Card -->\n @if (loginPageConfig.rightCardConfig) {\n <pt-card [config]=\"loginPageConfig.rightCardConfig\">\n @if (loginPageConfig.position === \"right\") {\n <pt-login-card\n [loginErrorMessage]=\"loginErrorMessage\"\n [loginLoading]=\"loginLoading\"\n [loginPageConfig]=\"loginPageConfig\"\n (loginSubmit)=\"onLoginSubmit($event)\"\n ></pt-login-card>\n }\n </pt-card>\n }\n </div>\n }\n</ng-container>\n", styles: [".left-right-container{display:flex;height:100vh;width:100%}.left-right-container pt-card{flex:1;max-width:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}.center-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;margin:0;padding:0;box-sizing:border-box;overflow:hidden}.center-container pt-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;box-sizing:border-box}.center-container pt-card pt-login-card{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:16px;box-sizing:border-box;margin:0}\n"] }]
|
|
8588
8607
|
}], propDecorators: { loginPageConfig: [{
|
|
8589
8608
|
type: Input
|
|
8590
8609
|
}], loginErrorMessage: [{
|
|
8591
8610
|
type: Input
|
|
8611
|
+
}], loginLoading: [{
|
|
8612
|
+
type: Input
|
|
8592
8613
|
}], loginSubmit: [{
|
|
8593
8614
|
type: Output
|
|
8594
8615
|
}] } });
|