cat-qw-lib 2.6.74 → 2.6.78
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.
package/fesm2022/cat-qw-lib.mjs
CHANGED
|
@@ -3370,11 +3370,11 @@ class TableSecondaryComponent {
|
|
|
3370
3370
|
return 'default';
|
|
3371
3371
|
}
|
|
3372
3372
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableSecondaryComponent, deps: [{ token: i3$4.Router }, { token: BaseService }, { token: SessionService }, { token: BaseQuery }, { token: BaseStore }, { token: QueueBusinessService }, { token: QueueQuery$1 }], target: i0.ɵɵFactoryTarget.Component });
|
|
3373
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: TableSecondaryComponent, isStandalone: true, selector: "lib-table-secondary", inputs: { table: "table", metaData: "metaData", title: "title", builder: "builder", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", isShowSkeleton: "isShowSkeleton", pathName: "pathName", selectionMode: "selectionMode", selection: "selection", usePagination: "usePagination", scrollHeight: "scrollHeight", rowSelection: "rowSelection", enableSelection: "enableSelection", noRecordsMessage: "noRecordsMessage", sortField: "sortField", sortOrder: "sortOrder", searchTerm: "searchTerm", filterQuery: "filterQuery" }, outputs: { selectionChange: "selectionChange", rowSelectionChange: "rowSelectionChange", sortChanged: "sortChanged", onDeleteRow: "onDeleteRow", onPage: "onPage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: " <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\r\n <p-table\r\n *ngIf=\"table && table.headers && !isShowSkeleton\"\r\n #dt2\r\n [lazy]=\"true\"\r\n (onSort)=\"onSort($event)\"\r\n [paginator]=\"false\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [columns]=\"table.headers\"\r\n class=\"table-secondary-container\"\r\n [value]=\"table.records\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [dataKey]=\"table.dataKey\"\r\n [selectionMode]=\"selectionMode\"\r\n [(selection)]=\"selection\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n >\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <th\r\n *ngFor=\"let col of table.headers; let i = index\"\r\n class=\"table-header-wrapper bg-white\"\r\n [pSortableColumn]=\"col.name\"\r\n [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\r\n [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n style=\"min-width: 100px\"\r\n > \r\n <h4\r\n [ngClass]=\"[\r\n col.class || '', \r\n getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\r\n ]\"\r\n class=\"flex align-items-center table-header-title font-semibold m-0\">\r\n {{ col.displayName || col.name }}\r\n @if(table.isSortingAllow && col.isShowSortIcon){\r\n <p-sortIcon [field]=\"col.name\" />\r\n }\r\n </h4>\r\n </th>\r\n \r\n <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \r\n class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\r\n <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\r\n <span *ngIf=\"headerSelectionCount > 0\">\r\n ({{ headerSelectionCount }})\r\n </span>\r\n <p-checkbox\r\n [binary]=\"true\"\r\n [ngModel]=\"isAllCurrentPageSelected\"\r\n (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\r\n </h4>\r\n </th>\r\n \r\n <th\r\n *ngIf=\"showActions\"\r\n class=\"table-action-title table-header-wrapper\"\r\n [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n >\r\n </th>\r\n \r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Body -->\r\n<ng-template pTemplate=\"body\" let-rowData>\r\n <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\r\n <!-- one TD per column -->\r\n <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\r\n (click)=\"handleRowClick(rowData)\"\r\n [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\r\n <div class=\"table-body-wrapper table-row-card-wrapper\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\">\r\n \r\n <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n <!-- your existing inner column wrapper -->\r\n <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\r\n <!-- task items - check this first -->\r\n <ng-container *ngSwitchCase=\"'taskItems'\">\r\n <div class=\"col-tasks\">\r\n <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\r\n <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\r\n <span class=\"font-semibold\">{{ taskItem.type }}</span>\r\n <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- Finance amount with special styling -->\r\n <ng-container *ngSwitchCase=\"'finance'\">\r\n <p class=\"text-black font-semibold mb-0\">\r\n {{ rowData[col.name].amount }}\r\n </p>\r\n </ng-container>\r\n \r\n <!-- App ID with type and risk tags -->\r\n <ng-container *ngSwitchCase=\"'appId'\">\r\n <div class=\"w-full text-left\">\r\n <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\r\n <div class=\"flex gap-2 justify-content-start app-id-tags\">\r\n <!-- Type chip using style config (lending) -->\r\n <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\r\n <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\r\n {{ rowData[col.name].type }}\r\n </small>\r\n </div>\r\n <!-- Risk chip using style config (riskRating) -->\r\n <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\r\n [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\r\n <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\r\n {{ rowData[col.name].risk }}\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- Broker with name and company name -->\r\n <ng-container *ngSwitchCase=\"'broker'\">\r\n <div class=\"w-full text-left\">\r\n <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\r\n <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\r\n {{ rowData[col.name].brokerCompanyName }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!--Render two lines with dynamic classes for any two-line column -->\r\n <ng-container *ngSwitchCase=\"'twoLine'\">\r\n <div class=\"w-full\" [ngClass]=\"[\r\n getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\r\n rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\r\n ]\">\r\n <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\r\n <i\r\n *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\r\n class=\"pi\"\r\n [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\r\n ></i>\r\n <span\r\n *ngIf=\"!rowData[col.name]?.iconClass\"\r\n [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\r\n >\r\n {{ rowData[col.name]?.addressLine1 }}\r\n </span>\r\n </div>\r\n <p class=\"row-multi-line-wrapper\"\r\n [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\r\n {{ rowData[col.name]?.postCode }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- progress bar -->\r\n <ng-container *ngSwitchCase=\"'progress'\">\r\n <div class=\"progress-wrapper\">\r\n <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\r\n [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\r\n [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\r\n [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\r\n [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\r\n </round-progress>\r\n <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\r\n {{ rowData[col.name] }}\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n <!-- Default cell rendering for other columns -->\r\n <ng-container *ngSwitchDefault>\r\n <!-- Don't render default content if we have task items -->\r\n <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\r\n <div\r\n class=\"table-text-wrapper text-center p-0 flex align-items-center\"\r\n [ngClass]=\"[\r\n getRowClass(col, rowData),\r\n j === 0 ? 'justify-content-start' : 'justify-content-center'\r\n ]\"\r\n [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n >\r\n <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.skipParentNgClass\">\r\n <div class=\"w-full text-left\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #bubbleOrFallback>\r\n <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length\">\r\n <div class=\"flex flex-column gap-1\">\r\n <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n <p\r\n *ngIf=\"bubble.fullName\"\r\n class=\"mb-0\"\r\n [ngClass]=\"[\r\n col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700',\r\n ]\"\r\n >\r\n {{ bubble.fullName }}\r\n </p>\r\n <p\r\n *ngIf=\"bubble.inviteEmail\"\r\n class=\"mb-0 text-gray-800\"\r\n >\r\n {{ bubble.inviteEmail }}\r\n </p>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i\r\n *ngIf=\"rowData[col.name]?.icon\"\r\n class=\"pi\"\r\n [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n ></i>\r\n <p class=\"mb-0\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\r\n {{ rowData[col.name]?.text || rowData[col.name] }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n <div\r\n *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n class=\"text-black-500 text-sm mt-1\"\r\n style=\"font-weight: 600;\"\r\n >\r\n {{ rowData[table.descriptionColumnName] }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- Checkbox column -->\r\n <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\r\n style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\">\r\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n </div>\r\n </td>\r\n\r\n <!-- Actions column -->\r\n <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n <p-button\r\n icon=\"pi pi-trash\"\r\n (click)=\"deleteRow($event, rowData)\"\r\n class=\"delete-icon-wrapper mr-3\"\r\n [disabled]=\"!enableSelection\"\r\n ></p-button>\r\n </div>\r\n </td>\r\n </tr>\r\n</ng-template>\r\n \r\n <!-- Empty Message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n class=\"text-center text-color font-semibold p-4\"\r\n >\r\n {{ noRecordsMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n\r\n<!-- Paginator -->\r\n <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n <div class=\"pagination-text text-color\">\r\n Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n </div>\r\n\r\n <p-paginator\r\n #paginator\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPageChange)=\"handleLoadRecords($event)\"\r\n ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.queue-chip{display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;min-height:1.5rem;border-radius:9999px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;gap:.25rem;background-color:#e5e7eb;color:#111827;border:1px solid transparent;width:fit-content;max-width:100%}.queue-chip--danger{background-color:var(--color-red-600, #dc2626);color:#fff}.queue-chip--warning{background-color:var(--color-amber-500, #f59e0b);color:#fff}.queue-chip--neutral{background-color:var(--color-gray-300, #d1d5db);color:#111827}.queue-chip--success{background-color:var(--color-green-500, #22c55e);color:#fff}.queue-chip--info{background-color:var(--color-blue-500, #3b82f6);color:#fff}.queue-chip--light-green-success{background-color:var(--color-green-50, #f0fdf4);color:var(--color-green-700, #15803d);border:1px solid var(--color-green-200, #bbf7d0)}.queue-chip--light-amber-warning{background-color:var(--color-amber-50, #fffbeb);color:var(--color-amber-700, #b45309);border:1px solid var(--color-amber-200, #fde68a)}.queue-chip--light-red-danger{background-color:var(--color-red-50, #fef2f2);color:var(--color-red-700, #b91c1c);border:1px solid var(--color-red-200, #fecaca)}.queue-chip--light-neutral{background-color:var(--color-blue-50, #eff6ff);color:var(--color-blue-700, #1e40af);border:1px solid var(--color-blue-200, #bfdbfe)}.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:96px;margin-bottom:16px}.column-style-wrapper-tall{height:132px}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-wrapper{background-color:#0f8bfd05}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-default{background-color:transparent;color:#1f2937;border:1px solid #d1d5db}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: SkeletonComponent, selector: "lib-skeleton", inputs: ["count", "columns", "width", "height", "isAllowCard"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i9.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i9.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RoundProgressModule }, { kind: "component", type: i14.RoundProgressComponent, selector: "round-progress", inputs: ["current", "max", "radius", "animation", "animationDelay", "duration", "stroke", "color", "background", "responsive", "clockwise", "semicircle", "rounded"], outputs: ["onRender"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3373
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: TableSecondaryComponent, isStandalone: true, selector: "lib-table-secondary", inputs: { table: "table", metaData: "metaData", title: "title", builder: "builder", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", isShowSkeleton: "isShowSkeleton", pathName: "pathName", selectionMode: "selectionMode", selection: "selection", usePagination: "usePagination", scrollHeight: "scrollHeight", rowSelection: "rowSelection", enableSelection: "enableSelection", noRecordsMessage: "noRecordsMessage", sortField: "sortField", sortOrder: "sortOrder", searchTerm: "searchTerm", filterQuery: "filterQuery" }, outputs: { selectionChange: "selectionChange", rowSelectionChange: "rowSelectionChange", sortChanged: "sortChanged", onDeleteRow: "onDeleteRow", onPage: "onPage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: " <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\r\n <p-table\r\n *ngIf=\"table && table.headers && !isShowSkeleton\"\r\n #dt2\r\n [lazy]=\"true\"\r\n (onSort)=\"onSort($event)\"\r\n [paginator]=\"false\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [columns]=\"table.headers\"\r\n class=\"table-secondary-container\"\r\n [value]=\"table.records\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [dataKey]=\"table.dataKey\"\r\n [selectionMode]=\"selectionMode\"\r\n [(selection)]=\"selection\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n >\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <th\r\n *ngFor=\"let col of table.headers; let i = index\"\r\n class=\"table-header-wrapper bg-white\"\r\n [pSortableColumn]=\"col.name\"\r\n [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\r\n [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n style=\"min-width: 100px\"\r\n > \r\n <h4\r\n [ngClass]=\"[\r\n col.class || '', \r\n getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\r\n ]\"\r\n class=\"flex align-items-center table-header-title font-semibold m-0\">\r\n {{ col.displayName || col.name }}\r\n @if(table.isSortingAllow && col.isShowSortIcon){\r\n <p-sortIcon [field]=\"col.name\" />\r\n }\r\n </h4>\r\n </th>\r\n \r\n <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \r\n class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\r\n <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\r\n <span *ngIf=\"headerSelectionCount > 0\">\r\n ({{ headerSelectionCount }})\r\n </span>\r\n <p-checkbox\r\n [binary]=\"true\"\r\n [ngModel]=\"isAllCurrentPageSelected\"\r\n (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\r\n </h4>\r\n </th>\r\n \r\n <th\r\n *ngIf=\"showActions\"\r\n class=\"table-action-title table-header-wrapper\"\r\n [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n >\r\n </th>\r\n \r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Body -->\r\n<ng-template pTemplate=\"body\" let-rowData>\r\n <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\r\n <!-- one TD per column -->\r\n <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\r\n (click)=\"handleRowClick(rowData)\"\r\n [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\r\n <div class=\"table-body-wrapper table-row-card-wrapper\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\">\r\n \r\n <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n <!-- your existing inner column wrapper -->\r\n <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\r\n <!-- task items - check this first -->\r\n <ng-container *ngSwitchCase=\"'taskItems'\">\r\n <div class=\"col-tasks\">\r\n <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\r\n <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\r\n <span class=\"font-semibold\">{{ taskItem.type }}</span>\r\n <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- Finance amount with special styling -->\r\n <ng-container *ngSwitchCase=\"'finance'\">\r\n <p class=\"text-black font-semibold mb-0\">\r\n {{ rowData[col.name].amount }}\r\n </p>\r\n </ng-container>\r\n \r\n <!-- App ID with type and risk tags -->\r\n <ng-container *ngSwitchCase=\"'appId'\">\r\n <div class=\"w-full text-left\">\r\n <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\r\n <div class=\"flex gap-2 justify-content-start app-id-tags\">\r\n <!-- Type chip using style config (lending) -->\r\n <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\r\n <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\r\n {{ rowData[col.name].type }}\r\n </small>\r\n </div>\r\n <!-- Risk chip using style config (riskRating) -->\r\n <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\r\n [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\r\n <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\r\n {{ rowData[col.name].risk }}\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- Broker with name and company name -->\r\n <ng-container *ngSwitchCase=\"'broker'\">\r\n <div class=\"w-full text-left\">\r\n <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\r\n <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\r\n {{ rowData[col.name].brokerCompanyName }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!--Render two lines with dynamic classes for any two-line column -->\r\n <ng-container *ngSwitchCase=\"'twoLine'\">\r\n <div class=\"w-full\" [ngClass]=\"[\r\n getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\r\n rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\r\n ]\">\r\n <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\r\n <i\r\n *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\r\n class=\"pi\"\r\n [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\r\n ></i>\r\n <span\r\n *ngIf=\"!rowData[col.name]?.iconClass\"\r\n [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\r\n >\r\n {{ rowData[col.name]?.addressLine1 }}\r\n </span>\r\n </div>\r\n <p class=\"row-multi-line-wrapper\"\r\n [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\r\n {{ rowData[col.name]?.postCode }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- progress bar -->\r\n <ng-container *ngSwitchCase=\"'progress'\">\r\n <div class=\"progress-wrapper\">\r\n <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\r\n [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\r\n [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\r\n [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\r\n [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\r\n </round-progress>\r\n <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\r\n {{ rowData[col.name] }}\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n <!-- Default cell rendering for other columns -->\r\n <ng-container *ngSwitchDefault>\r\n <!-- Don't render default content if we have task items -->\r\n <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\r\n <div\r\n class=\"table-text-wrapper text-center p-0 flex align-items-center\"\r\n [ngClass]=\"[\r\n getRowClass(col, rowData),\r\n j === 0 ? 'justify-content-start' : 'justify-content-center'\r\n ]\"\r\n [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n >\r\n <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.skipParentNgClass\">\r\n <div class=\"w-full text-left\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #bubbleOrFallback>\r\n <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length\">\r\n <div class=\"flex flex-column gap-1\">\r\n <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n <p\r\n *ngIf=\"bubble.fullName\"\r\n class=\"mb-0\"\r\n [ngClass]=\"[\r\n col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700',\r\n 'text-black font-semibold'\r\n ]\"\r\n >\r\n {{ bubble.fullName }}\r\n </p>\r\n <p\r\n *ngIf=\"bubble.inviteEmail\"\r\n class=\"mb-0 text-black font-semibold\"\r\n >\r\n {{ bubble.inviteEmail }}\r\n </p>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i\r\n *ngIf=\"rowData[col.name]?.icon\"\r\n class=\"pi\"\r\n [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n ></i>\r\n <p class=\"mb-0 text-black font-semibold\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\r\n {{ rowData[col.name]?.text || rowData[col.name] }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n <div\r\n *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n class=\"text-black-500 text-sm mt-1\"\r\n style=\"font-weight: 600;\"\r\n >\r\n {{ rowData[table.descriptionColumnName] }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- Checkbox column -->\r\n <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\r\n style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\">\r\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n </div>\r\n </td>\r\n\r\n <!-- Actions column -->\r\n <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n <p-button\r\n icon=\"pi pi-trash\"\r\n (click)=\"deleteRow($event, rowData)\"\r\n class=\"delete-icon-wrapper mr-3\"\r\n [disabled]=\"!enableSelection\"\r\n ></p-button>\r\n </div>\r\n </td>\r\n </tr>\r\n</ng-template>\r\n \r\n <!-- Empty Message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n class=\"text-center text-color font-semibold p-4\"\r\n >\r\n {{ noRecordsMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n\r\n<!-- Paginator -->\r\n <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n <div class=\"pagination-text text-color\">\r\n Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n </div>\r\n\r\n <p-paginator\r\n #paginator\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPageChange)=\"handleLoadRecords($event)\"\r\n ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.queue-chip{display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;min-height:1.5rem;border-radius:9999px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;gap:.25rem;background-color:#e5e7eb;color:#111827;border:1px solid transparent;width:fit-content;max-width:100%}.queue-chip--danger{background-color:var(--color-red-600, #dc2626);color:#fff}.queue-chip--warning{background-color:var(--color-amber-500, #f59e0b);color:#fff}.queue-chip--neutral{background-color:var(--color-gray-300, #d1d5db);color:#111827}.queue-chip--success{background-color:var(--color-green-500, #22c55e);color:#fff}.queue-chip--info{background-color:var(--color-blue-500, #3b82f6);color:#fff}.queue-chip--light-green-success{background-color:var(--color-green-50, #f0fdf4);color:var(--color-green-700, #15803d);border:1px solid var(--color-green-200, #bbf7d0)}.queue-chip--light-amber-warning{background-color:var(--color-amber-50, #fffbeb);color:var(--color-amber-700, #b45309);border:1px solid var(--color-amber-200, #fde68a)}.queue-chip--light-red-danger{background-color:var(--color-red-50, #fef2f2);color:var(--color-red-700, #b91c1c);border:1px solid var(--color-red-200, #fecaca)}.queue-chip--light-neutral{background-color:var(--color-blue-50, #eff6ff);color:var(--color-blue-700, #1e40af);border:1px solid var(--color-blue-200, #bfdbfe)}.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:96px;margin-bottom:16px}.column-style-wrapper-tall{height:132px}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-wrapper{background-color:#0f8bfd05}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-default{background-color:transparent;color:#1f2937;border:1px solid #d1d5db}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: SkeletonComponent, selector: "lib-skeleton", inputs: ["count", "columns", "width", "height", "isAllowCard"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i9.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i9.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RoundProgressModule }, { kind: "component", type: i14.RoundProgressComponent, selector: "round-progress", inputs: ["current", "max", "radius", "animation", "animationDelay", "duration", "stroke", "color", "background", "responsive", "clockwise", "semicircle", "rounded"], outputs: ["onRender"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3374
3374
|
}
|
|
3375
3375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableSecondaryComponent, decorators: [{
|
|
3376
3376
|
type: Component,
|
|
3377
|
-
args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, SkeletonComponent, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule, RoundProgressModule, CheckboxModule], changeDetection: ChangeDetectionStrategy.OnPush, template: " <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\r\n <p-table\r\n *ngIf=\"table && table.headers && !isShowSkeleton\"\r\n #dt2\r\n [lazy]=\"true\"\r\n (onSort)=\"onSort($event)\"\r\n [paginator]=\"false\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [columns]=\"table.headers\"\r\n class=\"table-secondary-container\"\r\n [value]=\"table.records\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [dataKey]=\"table.dataKey\"\r\n [selectionMode]=\"selectionMode\"\r\n [(selection)]=\"selection\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n >\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <th\r\n *ngFor=\"let col of table.headers; let i = index\"\r\n class=\"table-header-wrapper bg-white\"\r\n [pSortableColumn]=\"col.name\"\r\n [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\r\n [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n style=\"min-width: 100px\"\r\n > \r\n <h4\r\n [ngClass]=\"[\r\n col.class || '', \r\n getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\r\n ]\"\r\n class=\"flex align-items-center table-header-title font-semibold m-0\">\r\n {{ col.displayName || col.name }}\r\n @if(table.isSortingAllow && col.isShowSortIcon){\r\n <p-sortIcon [field]=\"col.name\" />\r\n }\r\n </h4>\r\n </th>\r\n \r\n <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \r\n class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\r\n <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\r\n <span *ngIf=\"headerSelectionCount > 0\">\r\n ({{ headerSelectionCount }})\r\n </span>\r\n <p-checkbox\r\n [binary]=\"true\"\r\n [ngModel]=\"isAllCurrentPageSelected\"\r\n (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\r\n </h4>\r\n </th>\r\n \r\n <th\r\n *ngIf=\"showActions\"\r\n class=\"table-action-title table-header-wrapper\"\r\n [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n >\r\n </th>\r\n \r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Body -->\r\n<ng-template pTemplate=\"body\" let-rowData>\r\n <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\r\n <!-- one TD per column -->\r\n <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\r\n (click)=\"handleRowClick(rowData)\"\r\n [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\r\n <div class=\"table-body-wrapper table-row-card-wrapper\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\">\r\n \r\n <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n <!-- your existing inner column wrapper -->\r\n <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\r\n <!-- task items - check this first -->\r\n <ng-container *ngSwitchCase=\"'taskItems'\">\r\n <div class=\"col-tasks\">\r\n <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\r\n <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\r\n <span class=\"font-semibold\">{{ taskItem.type }}</span>\r\n <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- Finance amount with special styling -->\r\n <ng-container *ngSwitchCase=\"'finance'\">\r\n <p class=\"text-black font-semibold mb-0\">\r\n {{ rowData[col.name].amount }}\r\n </p>\r\n </ng-container>\r\n \r\n <!-- App ID with type and risk tags -->\r\n <ng-container *ngSwitchCase=\"'appId'\">\r\n <div class=\"w-full text-left\">\r\n <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\r\n <div class=\"flex gap-2 justify-content-start app-id-tags\">\r\n <!-- Type chip using style config (lending) -->\r\n <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\r\n <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\r\n {{ rowData[col.name].type }}\r\n </small>\r\n </div>\r\n <!-- Risk chip using style config (riskRating) -->\r\n <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\r\n [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\r\n <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\r\n {{ rowData[col.name].risk }}\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- Broker with name and company name -->\r\n <ng-container *ngSwitchCase=\"'broker'\">\r\n <div class=\"w-full text-left\">\r\n <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\r\n <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\r\n {{ rowData[col.name].brokerCompanyName }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!--Render two lines with dynamic classes for any two-line column -->\r\n <ng-container *ngSwitchCase=\"'twoLine'\">\r\n <div class=\"w-full\" [ngClass]=\"[\r\n getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\r\n rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\r\n ]\">\r\n <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\r\n <i\r\n *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\r\n class=\"pi\"\r\n [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\r\n ></i>\r\n <span\r\n *ngIf=\"!rowData[col.name]?.iconClass\"\r\n [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\r\n >\r\n {{ rowData[col.name]?.addressLine1 }}\r\n </span>\r\n </div>\r\n <p class=\"row-multi-line-wrapper\"\r\n [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\r\n {{ rowData[col.name]?.postCode }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- progress bar -->\r\n <ng-container *ngSwitchCase=\"'progress'\">\r\n <div class=\"progress-wrapper\">\r\n <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\r\n [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\r\n [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\r\n [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\r\n [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\r\n </round-progress>\r\n <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\r\n {{ rowData[col.name] }}\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n <!-- Default cell rendering for other columns -->\r\n <ng-container *ngSwitchDefault>\r\n <!-- Don't render default content if we have task items -->\r\n <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\r\n <div\r\n class=\"table-text-wrapper text-center p-0 flex align-items-center\"\r\n [ngClass]=\"[\r\n getRowClass(col, rowData),\r\n j === 0 ? 'justify-content-start' : 'justify-content-center'\r\n ]\"\r\n [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n >\r\n <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.skipParentNgClass\">\r\n <div class=\"w-full text-left\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #bubbleOrFallback>\r\n <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length\">\r\n <div class=\"flex flex-column gap-1\">\r\n <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n <p\r\n *ngIf=\"bubble.fullName\"\r\n class=\"mb-0\"\r\n [ngClass]=\"[\r\n col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700',\r\n ]\"\r\n >\r\n {{ bubble.fullName }}\r\n </p>\r\n <p\r\n *ngIf=\"bubble.inviteEmail\"\r\n class=\"mb-0 text-gray-800\"\r\n >\r\n {{ bubble.inviteEmail }}\r\n </p>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i\r\n *ngIf=\"rowData[col.name]?.icon\"\r\n class=\"pi\"\r\n [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n ></i>\r\n <p class=\"mb-0\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\r\n {{ rowData[col.name]?.text || rowData[col.name] }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n <div\r\n *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n class=\"text-black-500 text-sm mt-1\"\r\n style=\"font-weight: 600;\"\r\n >\r\n {{ rowData[table.descriptionColumnName] }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- Checkbox column -->\r\n <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\r\n style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\">\r\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n </div>\r\n </td>\r\n\r\n <!-- Actions column -->\r\n <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n <p-button\r\n icon=\"pi pi-trash\"\r\n (click)=\"deleteRow($event, rowData)\"\r\n class=\"delete-icon-wrapper mr-3\"\r\n [disabled]=\"!enableSelection\"\r\n ></p-button>\r\n </div>\r\n </td>\r\n </tr>\r\n</ng-template>\r\n \r\n <!-- Empty Message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n class=\"text-center text-color font-semibold p-4\"\r\n >\r\n {{ noRecordsMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n\r\n<!-- Paginator -->\r\n <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n <div class=\"pagination-text text-color\">\r\n Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n </div>\r\n\r\n <p-paginator\r\n #paginator\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPageChange)=\"handleLoadRecords($event)\"\r\n ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.queue-chip{display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;min-height:1.5rem;border-radius:9999px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;gap:.25rem;background-color:#e5e7eb;color:#111827;border:1px solid transparent;width:fit-content;max-width:100%}.queue-chip--danger{background-color:var(--color-red-600, #dc2626);color:#fff}.queue-chip--warning{background-color:var(--color-amber-500, #f59e0b);color:#fff}.queue-chip--neutral{background-color:var(--color-gray-300, #d1d5db);color:#111827}.queue-chip--success{background-color:var(--color-green-500, #22c55e);color:#fff}.queue-chip--info{background-color:var(--color-blue-500, #3b82f6);color:#fff}.queue-chip--light-green-success{background-color:var(--color-green-50, #f0fdf4);color:var(--color-green-700, #15803d);border:1px solid var(--color-green-200, #bbf7d0)}.queue-chip--light-amber-warning{background-color:var(--color-amber-50, #fffbeb);color:var(--color-amber-700, #b45309);border:1px solid var(--color-amber-200, #fde68a)}.queue-chip--light-red-danger{background-color:var(--color-red-50, #fef2f2);color:var(--color-red-700, #b91c1c);border:1px solid var(--color-red-200, #fecaca)}.queue-chip--light-neutral{background-color:var(--color-blue-50, #eff6ff);color:var(--color-blue-700, #1e40af);border:1px solid var(--color-blue-200, #bfdbfe)}.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:96px;margin-bottom:16px}.column-style-wrapper-tall{height:132px}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-wrapper{background-color:#0f8bfd05}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-default{background-color:transparent;color:#1f2937;border:1px solid #d1d5db}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"] }]
|
|
3377
|
+
args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, SkeletonComponent, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule, RoundProgressModule, CheckboxModule], changeDetection: ChangeDetectionStrategy.OnPush, template: " <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\r\n <p-table\r\n *ngIf=\"table && table.headers && !isShowSkeleton\"\r\n #dt2\r\n [lazy]=\"true\"\r\n (onSort)=\"onSort($event)\"\r\n [paginator]=\"false\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [columns]=\"table.headers\"\r\n class=\"table-secondary-container\"\r\n [value]=\"table.records\"\r\n [sortField]=\"sortField\"\r\n [sortOrder]=\"sortOrder\"\r\n [dataKey]=\"table.dataKey\"\r\n [selectionMode]=\"selectionMode\"\r\n [(selection)]=\"selection\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n >\r\n <!-- Header -->\r\n <ng-template pTemplate=\"header\" let-columns>\r\n <tr *ngIf=\"table.headers.length > 0\">\r\n <th\r\n *ngFor=\"let col of table.headers; let i = index\"\r\n class=\"table-header-wrapper bg-white\"\r\n [pSortableColumn]=\"col.name\"\r\n [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\r\n [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n style=\"min-width: 100px\"\r\n > \r\n <h4\r\n [ngClass]=\"[\r\n col.class || '', \r\n getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\r\n ]\"\r\n class=\"flex align-items-center table-header-title font-semibold m-0\">\r\n {{ col.displayName || col.name }}\r\n @if(table.isSortingAllow && col.isShowSortIcon){\r\n <p-sortIcon [field]=\"col.name\" />\r\n }\r\n </h4>\r\n </th>\r\n \r\n <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \r\n class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\r\n <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\r\n <span *ngIf=\"headerSelectionCount > 0\">\r\n ({{ headerSelectionCount }})\r\n </span>\r\n <p-checkbox\r\n [binary]=\"true\"\r\n [ngModel]=\"isAllCurrentPageSelected\"\r\n (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\r\n </h4>\r\n </th>\r\n \r\n <th\r\n *ngIf=\"showActions\"\r\n class=\"table-action-title table-header-wrapper\"\r\n [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n >\r\n </th>\r\n \r\n </tr>\r\n </ng-template>\r\n \r\n <!-- Body -->\r\n<ng-template pTemplate=\"body\" let-rowData>\r\n <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\r\n <!-- one TD per column -->\r\n <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\r\n (click)=\"handleRowClick(rowData)\"\r\n [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\r\n <div class=\"table-body-wrapper table-row-card-wrapper\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\">\r\n \r\n <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n <!-- your existing inner column wrapper -->\r\n <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\r\n <!-- task items - check this first -->\r\n <ng-container *ngSwitchCase=\"'taskItems'\">\r\n <div class=\"col-tasks\">\r\n <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\r\n <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\r\n <span class=\"font-semibold\">{{ taskItem.type }}</span>\r\n <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- Finance amount with special styling -->\r\n <ng-container *ngSwitchCase=\"'finance'\">\r\n <p class=\"text-black font-semibold mb-0\">\r\n {{ rowData[col.name].amount }}\r\n </p>\r\n </ng-container>\r\n \r\n <!-- App ID with type and risk tags -->\r\n <ng-container *ngSwitchCase=\"'appId'\">\r\n <div class=\"w-full text-left\">\r\n <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\r\n <div class=\"flex gap-2 justify-content-start app-id-tags\">\r\n <!-- Type chip using style config (lending) -->\r\n <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\r\n <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\r\n {{ rowData[col.name].type }}\r\n </small>\r\n </div>\r\n <!-- Risk chip using style config (riskRating) -->\r\n <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\r\n [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\r\n <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\r\n {{ rowData[col.name].risk }}\r\n </small>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n <!-- Broker with name and company name -->\r\n <ng-container *ngSwitchCase=\"'broker'\">\r\n <div class=\"w-full text-left\">\r\n <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\r\n <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\r\n {{ rowData[col.name].brokerCompanyName }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!--Render two lines with dynamic classes for any two-line column -->\r\n <ng-container *ngSwitchCase=\"'twoLine'\">\r\n <div class=\"w-full\" [ngClass]=\"[\r\n getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\r\n rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\r\n ]\">\r\n <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\r\n <i\r\n *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\r\n class=\"pi\"\r\n [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\r\n ></i>\r\n <span\r\n *ngIf=\"!rowData[col.name]?.iconClass\"\r\n [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\r\n >\r\n {{ rowData[col.name]?.addressLine1 }}\r\n </span>\r\n </div>\r\n <p class=\"row-multi-line-wrapper\"\r\n [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\r\n {{ rowData[col.name]?.postCode }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- progress bar -->\r\n <ng-container *ngSwitchCase=\"'progress'\">\r\n <div class=\"progress-wrapper\">\r\n <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\r\n [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\r\n [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\r\n [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\r\n [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\r\n </round-progress>\r\n <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\r\n {{ rowData[col.name] }}\r\n </div>\r\n </div>\r\n \r\n </ng-container>\r\n <!-- Default cell rendering for other columns -->\r\n <ng-container *ngSwitchDefault>\r\n <!-- Don't render default content if we have task items -->\r\n <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\r\n <div\r\n class=\"table-text-wrapper text-center p-0 flex align-items-center\"\r\n [ngClass]=\"[\r\n getRowClass(col, rowData),\r\n j === 0 ? 'justify-content-start' : 'justify-content-center'\r\n ]\"\r\n [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n >\r\n <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"col.skipParentNgClass\">\r\n <div class=\"w-full text-left\">\r\n <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #bubbleOrFallback>\r\n <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length\">\r\n <div class=\"flex flex-column gap-1\">\r\n <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n <p\r\n *ngIf=\"bubble.fullName\"\r\n class=\"mb-0\"\r\n [ngClass]=\"[\r\n col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700',\r\n 'text-black font-semibold'\r\n ]\"\r\n >\r\n {{ bubble.fullName }}\r\n </p>\r\n <p\r\n *ngIf=\"bubble.inviteEmail\"\r\n class=\"mb-0 text-black font-semibold\"\r\n >\r\n {{ bubble.inviteEmail }}\r\n </p>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n <div class=\"flex align-items-center gap-2\">\r\n <i\r\n *ngIf=\"rowData[col.name]?.icon\"\r\n class=\"pi\"\r\n [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n ></i>\r\n <p class=\"mb-0 text-black font-semibold\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\r\n {{ rowData[col.name]?.text || rowData[col.name] }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n </ng-template>\r\n <div\r\n *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n class=\"text-black-500 text-sm mt-1\"\r\n style=\"font-weight: 600;\"\r\n >\r\n {{ rowData[table.descriptionColumnName] }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <!-- Checkbox column -->\r\n <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\r\n style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\r\n [ngClass]=\"[\r\n rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n isRowSelected(rowData) ? 'row-selected' : '',\r\n selection?.includes(rowData) ? 'green-highlight' : ''\r\n ]\">\r\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n </div>\r\n </td>\r\n\r\n <!-- Actions column -->\r\n <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n <p-button\r\n icon=\"pi pi-trash\"\r\n (click)=\"deleteRow($event, rowData)\"\r\n class=\"delete-icon-wrapper mr-3\"\r\n [disabled]=\"!enableSelection\"\r\n ></p-button>\r\n </div>\r\n </td>\r\n </tr>\r\n</ng-template>\r\n \r\n <!-- Empty Message -->\r\n <ng-template pTemplate=\"emptymessage\">\r\n <tr>\r\n <td\r\n [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n class=\"text-center text-color font-semibold p-4\"\r\n >\r\n {{ noRecordsMessage }}\r\n </td>\r\n </tr>\r\n </ng-template>\r\n </p-table>\r\n\r\n<!-- Paginator -->\r\n <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n <div class=\"pagination-text text-color\">\r\n Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n </div>\r\n\r\n <p-paginator\r\n #paginator\r\n [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n (onPageChange)=\"handleLoadRecords($event)\"\r\n ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.queue-chip{display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;min-height:1.5rem;border-radius:9999px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;gap:.25rem;background-color:#e5e7eb;color:#111827;border:1px solid transparent;width:fit-content;max-width:100%}.queue-chip--danger{background-color:var(--color-red-600, #dc2626);color:#fff}.queue-chip--warning{background-color:var(--color-amber-500, #f59e0b);color:#fff}.queue-chip--neutral{background-color:var(--color-gray-300, #d1d5db);color:#111827}.queue-chip--success{background-color:var(--color-green-500, #22c55e);color:#fff}.queue-chip--info{background-color:var(--color-blue-500, #3b82f6);color:#fff}.queue-chip--light-green-success{background-color:var(--color-green-50, #f0fdf4);color:var(--color-green-700, #15803d);border:1px solid var(--color-green-200, #bbf7d0)}.queue-chip--light-amber-warning{background-color:var(--color-amber-50, #fffbeb);color:var(--color-amber-700, #b45309);border:1px solid var(--color-amber-200, #fde68a)}.queue-chip--light-red-danger{background-color:var(--color-red-50, #fef2f2);color:var(--color-red-700, #b91c1c);border:1px solid var(--color-red-200, #fecaca)}.queue-chip--light-neutral{background-color:var(--color-blue-50, #eff6ff);color:var(--color-blue-700, #1e40af);border:1px solid var(--color-blue-200, #bfdbfe)}.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:96px;margin-bottom:16px}.column-style-wrapper-tall{height:132px}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-wrapper{background-color:#0f8bfd05}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-default{background-color:transparent;color:#1f2937;border:1px solid #d1d5db}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"] }]
|
|
3378
3378
|
}], ctorParameters: () => [{ type: i3$4.Router }, { type: BaseService }, { type: SessionService }, { type: BaseQuery }, { type: BaseStore }, { type: QueueBusinessService }, { type: QueueQuery$1 }], propDecorators: { table: [{
|
|
3379
3379
|
type: Input
|
|
3380
3380
|
}], metaData: [{
|
|
@@ -7688,22 +7688,15 @@ class QueueItemComponent {
|
|
|
7688
7688
|
return queueId === this.selectedQueueId;
|
|
7689
7689
|
}
|
|
7690
7690
|
iconMap = [
|
|
7691
|
-
['
|
|
7692
|
-
['
|
|
7693
|
-
['
|
|
7694
|
-
['
|
|
7695
|
-
['
|
|
7691
|
+
['all applications', 'pi-th-large'],
|
|
7692
|
+
['invite sent', 'ri-mail-open-line'],
|
|
7693
|
+
['underwriter pipeline', 'ri-flow-chart'],
|
|
7694
|
+
['approval pipeline', 'ri-flow-chart'],
|
|
7695
|
+
['completed', 'ri-check-double-line'],
|
|
7696
7696
|
['decline', 'pi-ban'],
|
|
7697
|
-
['
|
|
7698
|
-
['
|
|
7699
|
-
['
|
|
7700
|
-
['exception', 'pi-exclamation-circle'],
|
|
7701
|
-
['referred', 'pi-directions'],
|
|
7702
|
-
['completion', 'pi-check-circle'],
|
|
7703
|
-
['new application', 'pi-plus-circle'],
|
|
7704
|
-
['offer', 'pi-gift'],
|
|
7705
|
-
['valuation', 'pi-chart-bar'],
|
|
7706
|
-
['issue', 'pi-send']
|
|
7697
|
+
['withdrawn', 'ri-file-reduce-line'],
|
|
7698
|
+
['archived', 'ri-archive-line'],
|
|
7699
|
+
['kyc failed', 'pi-times-circle']
|
|
7707
7700
|
];
|
|
7708
7701
|
getQueueIcon(name) {
|
|
7709
7702
|
if (!name)
|
|
@@ -7716,11 +7709,11 @@ class QueueItemComponent {
|
|
|
7716
7709
|
return 'pi-list';
|
|
7717
7710
|
}
|
|
7718
7711
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueItemComponent, deps: [{ token: QueueStore$1 }], target: i0.ɵɵFactoryTarget.Component });
|
|
7719
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: QueueItemComponent, isStandalone: false, selector: "app-queue-item", inputs: { filteredQueueData: "filteredQueueData", selectedQueueId: "selectedQueueId", selectedStatus: "selectedStatus", userRole: "userRole", showQueueDataForm: "showQueueDataForm" }, outputs: { queueSelected: "queueSelected", statusChanged: "statusChanged", insertQueueRequested: "insertQueueRequested" }, ngImport: i0, template: "<div class=\"queue-nav-wrapper\">\r\n <h4 class=\"queue-title m-0 mb-3\">Queues</h4>\r\n <div class=\"queue-items-list\">\r\n @for(queue of filteredQueueData; let i = $index; track queue){\r\n <div class=\"queue-nav-item\"\r\n [ngClass]=\"{'queue-nav-item--active': isQueueSelected(queue._id), 'queue-nav-item--inactive': !isQueueActive(queue)}\"\r\n (click)=\"onQueueClick(queue._id)\">\r\n <div class=\"queue-nav-item__inner\">\r\n <i class=\"pi queue-nav-item__icon\"\r\n [ngClass]=\"getQueueIcon(queue.name)\"></i>\r\n <span class=\"queue-nav-item__label\"\r\n [ngClass]=\"{'queue-nav-item__label--active': isQueueSelected(queue._id)}\">{{queue.name}}</span>\r\n </div>\r\n @if(queue.itemCount !== null){\r\n <span class=\"queue-nav-item__badge\"\r\n [ngClass]=\"{'queue-nav-item__badge--active': isQueueSelected(queue._id)}\">{{queue.itemCount}}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".queue-nav-wrapper{background:#fff;border-radius:15px;padding:20px;width:100%}.queue-title{font-family:Open Sans,sans-serif;font-weight:600;font-size:18px;line-height:1.2em;color:#1f2937}.queue-items-list{display:flex;flex-direction:column;gap:8px}.queue-nav-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:transparent;cursor:pointer;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent}.queue-nav-item:hover{background:#0066ff0f;border-color:#0066ff1f;box-shadow:0 2px 8px #0066ff14;transform:translate(2px)}.queue-nav-item:hover .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item:hover .queue-nav-item__label{color:#06f}.queue-nav-item:active{transform:translate(1px);box-shadow:0 1px 4px #0066ff1a}.queue-nav-item--active{background:#0066ff1a;border-color:#06f3;box-shadow:0 2px 8px #0066ff1a}.queue-nav-item--active:hover{background:#0066ff24;border-color:#0066ff40;box-shadow:0 3px 12px #0066ff1f}.queue-nav-item--active .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item--inactive{opacity:.5}.queue-nav-item--inactive:hover{opacity:.7}.queue-nav-item__inner{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;flex:1}.queue-nav-item__icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#9ea0b3;flex-shrink:0;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label{font-family:Open Sans,sans-serif;font-weight:600;font-size:12px;line-height:1.4em;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label--active{color:#06f}.queue-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 8px;border-radius:100px;background:#e5e7eb;font-family:Open Sans,sans-serif;font-weight:700;font-size:11px;line-height:1.4em;color:#7d879b;flex-shrink:0;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__badge--active{background:#0f8bfd;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7712
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: QueueItemComponent, isStandalone: false, selector: "app-queue-item", inputs: { filteredQueueData: "filteredQueueData", selectedQueueId: "selectedQueueId", selectedStatus: "selectedStatus", userRole: "userRole", showQueueDataForm: "showQueueDataForm" }, outputs: { queueSelected: "queueSelected", statusChanged: "statusChanged", insertQueueRequested: "insertQueueRequested" }, ngImport: i0, template: "<div class=\"queue-nav-wrapper\">\r\n <h4 [attr.data-tour]=\"'queue-page'\" class=\"queue-title m-0 mb-3\">Queues</h4>\r\n <div class=\"queue-items-list\">\r\n @for(queue of filteredQueueData; let i = $index; track queue){\r\n <div [attr.data-tour]=\"queue.name\" class=\"queue-nav-item\"\r\n [ngClass]=\"{'queue-nav-item--active': isQueueSelected(queue._id), 'queue-nav-item--inactive': !isQueueActive(queue)}\"\r\n (click)=\"onQueueClick(queue._id)\">\r\n <div class=\"queue-nav-item__inner\">\r\n <i class=\"pi queue-nav-item__icon\"\r\n [ngClass]=\"getQueueIcon(queue.name)\"></i>\r\n <span class=\"queue-nav-item__label\" [pTooltip]=\"queue.name\" tooltipPosition=\"top\"\r\n [ngClass]=\"{'queue-nav-item__label--active': isQueueSelected(queue._id)}\">{{queue.name}}</span>\r\n </div>\r\n @if(queue.itemCount !== null){\r\n <span class=\"queue-nav-item__badge\"\r\n [ngClass]=\"{'queue-nav-item__badge--active': isQueueSelected(queue._id)}\">{{queue.itemCount}}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".queue-nav-wrapper{background:#fff;border-radius:15px;padding:20px;width:100%}.queue-title{font-family:Open Sans,sans-serif;font-weight:600;font-size:18px;line-height:1.2em;color:#1f2937}.queue-items-list{display:flex;flex-direction:column;gap:8px}.queue-nav-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:transparent;cursor:pointer;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent}.queue-nav-item:hover{background:#0066ff0f;border-color:#0066ff1f;box-shadow:0 2px 8px #0066ff14;transform:translate(2px)}.queue-nav-item:hover .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item:hover .queue-nav-item__label{color:#06f}.queue-nav-item:active{transform:translate(1px);box-shadow:0 1px 4px #0066ff1a}.queue-nav-item--active{background:#0066ff1a;border-color:#06f3;box-shadow:0 2px 8px #0066ff1a}.queue-nav-item--active:hover{background:#0066ff24;border-color:#0066ff40;box-shadow:0 3px 12px #0066ff1f}.queue-nav-item--active .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item--inactive{opacity:.5}.queue-nav-item--inactive:hover{opacity:.7}.queue-nav-item__inner{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;flex:1}.queue-nav-item__icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#9ea0b3;flex-shrink:0;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label{font-family:Open Sans,sans-serif;font-weight:600;font-size:12px;line-height:1.4em;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label--active{color:#06f}.queue-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 8px;border-radius:100px;background:#e5e7eb;font-family:Open Sans,sans-serif;font-weight:700;font-size:11px;line-height:1.4em;color:#7d879b;flex-shrink:0;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__badge--active{background:#0f8bfd;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
7720
7713
|
}
|
|
7721
7714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueItemComponent, decorators: [{
|
|
7722
7715
|
type: Component,
|
|
7723
|
-
args: [{ selector: 'app-queue-item', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"queue-nav-wrapper\">\r\n <h4 class=\"queue-title m-0 mb-3\">Queues</h4>\r\n <div class=\"queue-items-list\">\r\n @for(queue of filteredQueueData; let i = $index; track queue){\r\n <div class=\"queue-nav-item\"\r\n [ngClass]=\"{'queue-nav-item--active': isQueueSelected(queue._id), 'queue-nav-item--inactive': !isQueueActive(queue)}\"\r\n (click)=\"onQueueClick(queue._id)\">\r\n <div class=\"queue-nav-item__inner\">\r\n <i class=\"pi queue-nav-item__icon\"\r\n [ngClass]=\"getQueueIcon(queue.name)\"></i>\r\n <span class=\"queue-nav-item__label\"\r\n [ngClass]=\"{'queue-nav-item__label--active': isQueueSelected(queue._id)}\">{{queue.name}}</span>\r\n </div>\r\n @if(queue.itemCount !== null){\r\n <span class=\"queue-nav-item__badge\"\r\n [ngClass]=\"{'queue-nav-item__badge--active': isQueueSelected(queue._id)}\">{{queue.itemCount}}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".queue-nav-wrapper{background:#fff;border-radius:15px;padding:20px;width:100%}.queue-title{font-family:Open Sans,sans-serif;font-weight:600;font-size:18px;line-height:1.2em;color:#1f2937}.queue-items-list{display:flex;flex-direction:column;gap:8px}.queue-nav-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:transparent;cursor:pointer;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent}.queue-nav-item:hover{background:#0066ff0f;border-color:#0066ff1f;box-shadow:0 2px 8px #0066ff14;transform:translate(2px)}.queue-nav-item:hover .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item:hover .queue-nav-item__label{color:#06f}.queue-nav-item:active{transform:translate(1px);box-shadow:0 1px 4px #0066ff1a}.queue-nav-item--active{background:#0066ff1a;border-color:#06f3;box-shadow:0 2px 8px #0066ff1a}.queue-nav-item--active:hover{background:#0066ff24;border-color:#0066ff40;box-shadow:0 3px 12px #0066ff1f}.queue-nav-item--active .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item--inactive{opacity:.5}.queue-nav-item--inactive:hover{opacity:.7}.queue-nav-item__inner{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;flex:1}.queue-nav-item__icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#9ea0b3;flex-shrink:0;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label{font-family:Open Sans,sans-serif;font-weight:600;font-size:12px;line-height:1.4em;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label--active{color:#06f}.queue-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 8px;border-radius:100px;background:#e5e7eb;font-family:Open Sans,sans-serif;font-weight:700;font-size:11px;line-height:1.4em;color:#7d879b;flex-shrink:0;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__badge--active{background:#0f8bfd;color:#fff}\n"] }]
|
|
7716
|
+
args: [{ selector: 'app-queue-item', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"queue-nav-wrapper\">\r\n <h4 [attr.data-tour]=\"'queue-page'\" class=\"queue-title m-0 mb-3\">Queues</h4>\r\n <div class=\"queue-items-list\">\r\n @for(queue of filteredQueueData; let i = $index; track queue){\r\n <div [attr.data-tour]=\"queue.name\" class=\"queue-nav-item\"\r\n [ngClass]=\"{'queue-nav-item--active': isQueueSelected(queue._id), 'queue-nav-item--inactive': !isQueueActive(queue)}\"\r\n (click)=\"onQueueClick(queue._id)\">\r\n <div class=\"queue-nav-item__inner\">\r\n <i class=\"pi queue-nav-item__icon\"\r\n [ngClass]=\"getQueueIcon(queue.name)\"></i>\r\n <span class=\"queue-nav-item__label\" [pTooltip]=\"queue.name\" tooltipPosition=\"top\"\r\n [ngClass]=\"{'queue-nav-item__label--active': isQueueSelected(queue._id)}\">{{queue.name}}</span>\r\n </div>\r\n @if(queue.itemCount !== null){\r\n <span class=\"queue-nav-item__badge\"\r\n [ngClass]=\"{'queue-nav-item__badge--active': isQueueSelected(queue._id)}\">{{queue.itemCount}}</span>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".queue-nav-wrapper{background:#fff;border-radius:15px;padding:20px;width:100%}.queue-title{font-family:Open Sans,sans-serif;font-weight:600;font-size:18px;line-height:1.2em;color:#1f2937}.queue-items-list{display:flex;flex-direction:column;gap:8px}.queue-nav-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:transparent;cursor:pointer;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent}.queue-nav-item:hover{background:#0066ff0f;border-color:#0066ff1f;box-shadow:0 2px 8px #0066ff14;transform:translate(2px)}.queue-nav-item:hover .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item:hover .queue-nav-item__label{color:#06f}.queue-nav-item:active{transform:translate(1px);box-shadow:0 1px 4px #0066ff1a}.queue-nav-item--active{background:#0066ff1a;border-color:#06f3;box-shadow:0 2px 8px #0066ff1a}.queue-nav-item--active:hover{background:#0066ff24;border-color:#0066ff40;box-shadow:0 3px 12px #0066ff1f}.queue-nav-item--active .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item--inactive{opacity:.5}.queue-nav-item--inactive:hover{opacity:.7}.queue-nav-item__inner{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;flex:1}.queue-nav-item__icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#9ea0b3;flex-shrink:0;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label{font-family:Open Sans,sans-serif;font-weight:600;font-size:12px;line-height:1.4em;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label--active{color:#06f}.queue-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 8px;border-radius:100px;background:#e5e7eb;font-family:Open Sans,sans-serif;font-weight:700;font-size:11px;line-height:1.4em;color:#7d879b;flex-shrink:0;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__badge--active{background:#0f8bfd;color:#fff}\n"] }]
|
|
7724
7717
|
}], ctorParameters: () => [{ type: QueueStore$1 }], propDecorators: { filteredQueueData: [{
|
|
7725
7718
|
type: Input
|
|
7726
7719
|
}], selectedQueueId: [{
|
|
@@ -8058,11 +8051,11 @@ class QueueFilterDropdownComponent {
|
|
|
8058
8051
|
}
|
|
8059
8052
|
}
|
|
8060
8053
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownComponent, deps: [{ token: QueueFilterDropdownService }], target: i0.ɵɵFactoryTarget.Component });
|
|
8061
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueFilterDropdownComponent, isStandalone: false, selector: "lib-queue-filter-dropdown", inputs: { appliedFilters: "appliedFilters" }, outputs: { filterApplied: "filterApplied", filtersCleared: "filtersCleared" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"queue-filter-dropdown-wrapper\">\r\n <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\r\n <div class=\"flex align-items-center\">\r\n <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\r\n <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\r\n <p class=\"mb-0\">Filter(s) Applied</p>\r\n <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\r\n </div>\r\n </p-button>\r\n\r\n <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\r\n <h3 class=\"filter-title\">Queue Filters</h3>\r\n <div class=\"grid form-grid col-12\">\r\n <div class=\"col-12 md:col-6\">\r\n\r\n\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\r\n (onClick)=\"setRiskRating('Low')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Low</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\r\n (onClick)=\"setRiskRating('Medium')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Medium</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\r\n (onClick)=\"setRiskRating('High')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">High</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 p-0 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Application Type</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\r\n (onClick)=\"setApplicationType('BTL')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">BTL</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\r\n (onClick)=\"setApplicationType('HPP')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">HPP</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"grid form-grid col-12\">\r\n <div class=\"col-12 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Category</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\r\n (onClick)=\"setCategory('UK')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">UK</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\r\n (onClick)=\"setCategory('Ex-Pat')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Ex-Pat</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\r\n (onClick)=\"setCategory('Intl')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Intl</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">EPC</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\r\n (onClick)=\"setEpc('A or B (Green)')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">A or B (Green)</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"grid form-grid col-12\">\r\n <div class=\"col-12 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\r\n (onClick)=\"setPurchaseType('Purchase')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Purchase</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\"\r\n [class.selected]=\"filters.purchaseType.includes('Refinance')\"\r\n (onClick)=\"setPurchaseType('Refinance')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Refinance</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Task Status</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\"\r\n [class.selected]=\"filters.taskStatus.includes('Not Started')\"\r\n (onClick)=\"setTaskStatus('Not Started')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Not Started</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\"\r\n [class.selected]=\"filters.taskStatus.includes('In-progress')\"\r\n (onClick)=\"setTaskStatus('In-progress')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">In-progress</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\r\n (onClick)=\"setTaskStatus('Completed')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Completed</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"grid p-0 form-grid col-12\">\r\n <div class=\"col-12 pl-3 md:col-6\"> \r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\r\n <div class=\"filter-options two-inputs\">\r\n <div class=\"grid p-0 form-grid col-12\">\r\n <div class=\"col-12 md:col-6\">\r\n <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\r\n (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\r\n </div>\r\n <div class=\"col-12 md:col-6\">\r\n <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\r\n (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Pending Days</p>\r\n <div class=\"filter-options one-input\">\r\n <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\r\n (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"grid p-0 form-grid col-12\">\r\n <div class=\"col-12 pl-4 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\r\n (onClick)=\"setVulnerableCustomer(true)\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Yes</p>\r\n </div>\r\n </p-button>\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\r\n (onClick)=\"setVulnerableCustomer(false)\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">No</p>\r\n </div>\r\n </p-button>\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\r\n (onClick)=\"setVulnerableCustomer(null)\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Any</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 pl-3 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\r\n <div class=\"filter-options one-input\">\r\n <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\r\n placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\r\n [filter]=\"true\" [loading]=\"loadingUnderwriters\"\r\n [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\r\n (onFilter)=\"onUnderwriterFilter($event)\">\r\n </p-multiSelect>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"filter-actions w-full flex justify-content-between\">\r\n <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\r\n <div class=\"flex align-items-center btn-text-wrapper\">\r\n <p class=\"mb-0 mr-2\">Clear All</p>\r\n <i class=\"pi pi-times\"></i>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Apply Filters</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:500%;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #E2E8F0;border-radius:8px;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;box-shadow:none;height:40px}::ng-deep .filter-option-btn-wrapper .p-button{border:none;border-radius:8px;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
8054
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueFilterDropdownComponent, isStandalone: false, selector: "lib-queue-filter-dropdown", inputs: { appliedFilters: "appliedFilters" }, outputs: { filterApplied: "filterApplied", filtersCleared: "filtersCleared" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"queue-filter-dropdown-wrapper\">\n <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\n <div class=\"flex align-items-center\">\n <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\n <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\n <p class=\"mb-0\">Filter(s) Applied</p>\n <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\n </div>\n </p-button>\n\n <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\n <h3 class=\"filter-title\">Queue Filters</h3>\n <div class=\"grid form-grid col-12\">\n <div class=\"col-12 md:col-6\">\n\n\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\n (onClick)=\"setRiskRating('Low')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Low</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\n (onClick)=\"setRiskRating('Medium')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Medium</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\n (onClick)=\"setRiskRating('High')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">High</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n <div class=\"col-12 p-0 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Application Type</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\n (onClick)=\"setApplicationType('BTL')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">BTL</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\n (onClick)=\"setApplicationType('HPP')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">HPP</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n\n <div class=\"grid form-grid col-12\">\n <div class=\"col-12 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Category</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\n (onClick)=\"setCategory('UK')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">UK</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\n (onClick)=\"setCategory('Ex-Pat')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Ex-Pat</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\n (onClick)=\"setCategory('Intl')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Intl</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n <div class=\"col-12 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">EPC</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\n (onClick)=\"setEpc('A or B (Green)')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">A or B (Green)</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n <div class=\"grid form-grid col-12\">\n <div class=\"col-12 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\n (onClick)=\"setPurchaseType('Purchase')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Purchase</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\"\n [class.selected]=\"filters.purchaseType.includes('Refinance')\"\n (onClick)=\"setPurchaseType('Refinance')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Refinance</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n <div class=\"col-12 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Task Status</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\"\n [class.selected]=\"filters.taskStatus.includes('Not Started')\"\n (onClick)=\"setTaskStatus('Not Started')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Not Started</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\"\n [class.selected]=\"filters.taskStatus.includes('In-progress')\"\n (onClick)=\"setTaskStatus('In-progress')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">In-progress</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\n (onClick)=\"setTaskStatus('Completed')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Completed</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"grid p-0 form-grid col-12\">\n <div class=\"col-12 pl-3 md:col-6\"> \n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\n <div class=\"filter-options two-inputs\">\n <div class=\"grid p-0 form-grid col-12\">\n <div class=\"col-12 md:col-6\">\n <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\n (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\n </div>\n <div class=\"col-12 md:col-6\">\n <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\n (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Pending Days</p>\n <div class=\"filter-options one-input\">\n <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\n (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\n </div>\n </div>\n </div>\n\n <div class=\"grid p-0 form-grid col-12\">\n <div class=\"col-12 pl-4 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\n (onClick)=\"setVulnerableCustomer(true)\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Yes</p>\n </div>\n </p-button>\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\n (onClick)=\"setVulnerableCustomer(false)\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">No</p>\n </div>\n </p-button>\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\n (onClick)=\"setVulnerableCustomer(null)\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Any</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n <div class=\"col-12 pl-3 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\n <div class=\"filter-options one-input\">\n <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\n placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\n [filter]=\"true\" [loading]=\"loadingUnderwriters\"\n [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\n (onFilter)=\"onUnderwriterFilter($event)\">\n </p-multiSelect>\n </div>\n </div>\n </div>\n </div>\n <div class=\"filter-actions w-full flex justify-content-between\">\n <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\n <div class=\"flex align-items-center btn-text-wrapper\">\n <p class=\"mb-0 mr-2\">Clear All</p>\n <i class=\"pi pi-times\"></i>\n </div>\n </p-button>\n\n <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Apply Filters</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:500%;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #E2E8F0;border-radius:8px;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;box-shadow:none;height:40px}::ng-deep .filter-option-btn-wrapper .p-button{border:none;border-radius:8px;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] });
|
|
8062
8055
|
}
|
|
8063
8056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownComponent, decorators: [{
|
|
8064
8057
|
type: Component,
|
|
8065
|
-
args: [{ selector: 'lib-queue-filter-dropdown', standalone: false, template: "<div class=\"queue-filter-dropdown-wrapper\">\r\n <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\r\n <div class=\"flex align-items-center\">\r\n <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\r\n <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\r\n <p class=\"mb-0\">Filter(s) Applied</p>\r\n <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\r\n </div>\r\n </p-button>\r\n\r\n <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\r\n <h3 class=\"filter-title\">Queue Filters</h3>\r\n <div class=\"grid form-grid col-12\">\r\n <div class=\"col-12 md:col-6\">\r\n\r\n\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\r\n (onClick)=\"setRiskRating('Low')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Low</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\r\n (onClick)=\"setRiskRating('Medium')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Medium</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\r\n (onClick)=\"setRiskRating('High')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">High</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 p-0 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Application Type</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\r\n (onClick)=\"setApplicationType('BTL')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">BTL</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\r\n (onClick)=\"setApplicationType('HPP')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">HPP</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"grid form-grid col-12\">\r\n <div class=\"col-12 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Category</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\r\n (onClick)=\"setCategory('UK')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">UK</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\r\n (onClick)=\"setCategory('Ex-Pat')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Ex-Pat</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\r\n (onClick)=\"setCategory('Intl')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Intl</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">EPC</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\r\n (onClick)=\"setEpc('A or B (Green)')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">A or B (Green)</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"grid form-grid col-12\">\r\n <div class=\"col-12 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\r\n (onClick)=\"setPurchaseType('Purchase')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Purchase</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\"\r\n [class.selected]=\"filters.purchaseType.includes('Refinance')\"\r\n (onClick)=\"setPurchaseType('Refinance')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Refinance</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Task Status</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\"\r\n [class.selected]=\"filters.taskStatus.includes('Not Started')\"\r\n (onClick)=\"setTaskStatus('Not Started')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Not Started</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\"\r\n [class.selected]=\"filters.taskStatus.includes('In-progress')\"\r\n (onClick)=\"setTaskStatus('In-progress')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">In-progress</p>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\r\n (onClick)=\"setTaskStatus('Completed')\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Completed</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"grid p-0 form-grid col-12\">\r\n <div class=\"col-12 pl-3 md:col-6\"> \r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\r\n <div class=\"filter-options two-inputs\">\r\n <div class=\"grid p-0 form-grid col-12\">\r\n <div class=\"col-12 md:col-6\">\r\n <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\r\n (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\r\n </div>\r\n <div class=\"col-12 md:col-6\">\r\n <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\r\n (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Pending Days</p>\r\n <div class=\"filter-options one-input\">\r\n <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\r\n (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"grid p-0 form-grid col-12\">\r\n <div class=\"col-12 pl-4 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\r\n <div class=\"filter-options\">\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\r\n (onClick)=\"setVulnerableCustomer(true)\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Yes</p>\r\n </div>\r\n </p-button>\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\r\n (onClick)=\"setVulnerableCustomer(false)\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">No</p>\r\n </div>\r\n </p-button>\r\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\r\n (onClick)=\"setVulnerableCustomer(null)\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Any</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-12 pl-3 md:col-6\">\r\n <div class=\"filter-section\">\r\n <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\r\n <div class=\"filter-options one-input\">\r\n <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\r\n placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\r\n [filter]=\"true\" [loading]=\"loadingUnderwriters\"\r\n [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\r\n (onFilter)=\"onUnderwriterFilter($event)\">\r\n </p-multiSelect>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"filter-actions w-full flex justify-content-between\">\r\n <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\r\n <div class=\"flex align-items-center btn-text-wrapper\">\r\n <p class=\"mb-0 mr-2\">Clear All</p>\r\n <i class=\"pi pi-times\"></i>\r\n </div>\r\n </p-button>\r\n\r\n <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\r\n <div class=\"flex align-items-center\">\r\n <p class=\"mb-0\">Apply Filters</p>\r\n </div>\r\n </p-button>\r\n </div>\r\n </div>\r\n </div>", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:500%;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #E2E8F0;border-radius:8px;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;box-shadow:none;height:40px}::ng-deep .filter-option-btn-wrapper .p-button{border:none;border-radius:8px;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"] }]
|
|
8058
|
+
args: [{ selector: 'lib-queue-filter-dropdown', standalone: false, template: "<div class=\"queue-filter-dropdown-wrapper\">\n <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\n <div class=\"flex align-items-center\">\n <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\n <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\n <p class=\"mb-0\">Filter(s) Applied</p>\n <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\n </div>\n </p-button>\n\n <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\n <h3 class=\"filter-title\">Queue Filters</h3>\n <div class=\"grid form-grid col-12\">\n <div class=\"col-12 md:col-6\">\n\n\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\n (onClick)=\"setRiskRating('Low')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Low</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\n (onClick)=\"setRiskRating('Medium')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Medium</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\n (onClick)=\"setRiskRating('High')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">High</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n <div class=\"col-12 p-0 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Application Type</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\n (onClick)=\"setApplicationType('BTL')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">BTL</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\n (onClick)=\"setApplicationType('HPP')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">HPP</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n\n <div class=\"grid form-grid col-12\">\n <div class=\"col-12 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Category</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\n (onClick)=\"setCategory('UK')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">UK</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\n (onClick)=\"setCategory('Ex-Pat')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Ex-Pat</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\n (onClick)=\"setCategory('Intl')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Intl</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n <div class=\"col-12 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">EPC</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\n (onClick)=\"setEpc('A or B (Green)')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">A or B (Green)</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n <div class=\"grid form-grid col-12\">\n <div class=\"col-12 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\n (onClick)=\"setPurchaseType('Purchase')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Purchase</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\"\n [class.selected]=\"filters.purchaseType.includes('Refinance')\"\n (onClick)=\"setPurchaseType('Refinance')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Refinance</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n <div class=\"col-12 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Task Status</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\"\n [class.selected]=\"filters.taskStatus.includes('Not Started')\"\n (onClick)=\"setTaskStatus('Not Started')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Not Started</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\"\n [class.selected]=\"filters.taskStatus.includes('In-progress')\"\n (onClick)=\"setTaskStatus('In-progress')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">In-progress</p>\n </div>\n </p-button>\n\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\n (onClick)=\"setTaskStatus('Completed')\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Completed</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"grid p-0 form-grid col-12\">\n <div class=\"col-12 pl-3 md:col-6\"> \n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\n <div class=\"filter-options two-inputs\">\n <div class=\"grid p-0 form-grid col-12\">\n <div class=\"col-12 md:col-6\">\n <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\n (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\n </div>\n <div class=\"col-12 md:col-6\">\n <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\n (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-12 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Pending Days</p>\n <div class=\"filter-options one-input\">\n <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\n (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\n </div>\n </div>\n </div>\n\n <div class=\"grid p-0 form-grid col-12\">\n <div class=\"col-12 pl-4 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\n <div class=\"filter-options\">\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\n (onClick)=\"setVulnerableCustomer(true)\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Yes</p>\n </div>\n </p-button>\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\n (onClick)=\"setVulnerableCustomer(false)\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">No</p>\n </div>\n </p-button>\n <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\n (onClick)=\"setVulnerableCustomer(null)\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Any</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>\n <div class=\"col-12 pl-3 md:col-6\">\n <div class=\"filter-section\">\n <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\n <div class=\"filter-options one-input\">\n <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\n placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\n [filter]=\"true\" [loading]=\"loadingUnderwriters\"\n [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\n (onFilter)=\"onUnderwriterFilter($event)\">\n </p-multiSelect>\n </div>\n </div>\n </div>\n </div>\n <div class=\"filter-actions w-full flex justify-content-between\">\n <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\n <div class=\"flex align-items-center btn-text-wrapper\">\n <p class=\"mb-0 mr-2\">Clear All</p>\n <i class=\"pi pi-times\"></i>\n </div>\n </p-button>\n\n <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\n <div class=\"flex align-items-center\">\n <p class=\"mb-0\">Apply Filters</p>\n </div>\n </p-button>\n </div>\n </div>\n </div>", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:500%;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #E2E8F0;border-radius:8px;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;box-shadow:none;height:40px}::ng-deep .filter-option-btn-wrapper .p-button{border:none;border-radius:8px;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"] }]
|
|
8066
8059
|
}], ctorParameters: () => [{ type: QueueFilterDropdownService }], propDecorators: { dropdownPanel: [{
|
|
8067
8060
|
type: ViewChild,
|
|
8068
8061
|
args: ['dropdownPanel', { static: false }]
|
|
@@ -8398,7 +8391,8 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
8398
8391
|
});
|
|
8399
8392
|
filterQueryString = existingParams.toString();
|
|
8400
8393
|
}
|
|
8401
|
-
|
|
8394
|
+
const apiUrl = this.replaceWithLocalhost(this.selectedQueue.apiConfig);
|
|
8395
|
+
this.queueService.getPaginatedQueueRecords(apiUrl, this.currentSearchTerm, targetPage, targetLimit, filterQueryString, this.sortBy, this.getSortOrderString(this.sortOrder), !forceRefresh).pipe(finalize(() => {
|
|
8402
8396
|
if (this.latestRequestSnapshot === requestSnapshot) {
|
|
8403
8397
|
this.isShowSkeleton = false;
|
|
8404
8398
|
}
|
|
@@ -8456,6 +8450,17 @@ class QueueContainerComponent extends BaseContainerComponent {
|
|
|
8456
8450
|
}
|
|
8457
8451
|
});
|
|
8458
8452
|
}
|
|
8453
|
+
replaceWithLocalhost(url) {
|
|
8454
|
+
try {
|
|
8455
|
+
const parsed = new URL(url);
|
|
8456
|
+
parsed.host = 'localhost:3300';
|
|
8457
|
+
parsed.protocol = 'http:'; // ensure localhost uses http
|
|
8458
|
+
return parsed.toString();
|
|
8459
|
+
}
|
|
8460
|
+
catch (e) {
|
|
8461
|
+
return url; // fallback if invalid URL
|
|
8462
|
+
}
|
|
8463
|
+
}
|
|
8459
8464
|
getSortOrderString(order) {
|
|
8460
8465
|
if (order === 1)
|
|
8461
8466
|
return 'asc';
|
|
@@ -8580,7 +8585,8 @@ class QueueModule {
|
|
|
8580
8585
|
SharedModule,
|
|
8581
8586
|
TagModule,
|
|
8582
8587
|
TableSecondaryComponent,
|
|
8583
|
-
SkeletonComponent
|
|
8588
|
+
SkeletonComponent,
|
|
8589
|
+
TooltipModule], exports: [QueueContainerComponent] });
|
|
8584
8590
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueModule, imports: [CommonModule,
|
|
8585
8591
|
QueueRoutingModule,
|
|
8586
8592
|
FormsModule,
|
|
@@ -8591,7 +8597,8 @@ class QueueModule {
|
|
|
8591
8597
|
SharedModule,
|
|
8592
8598
|
TagModule,
|
|
8593
8599
|
TableSecondaryComponent,
|
|
8594
|
-
SkeletonComponent
|
|
8600
|
+
SkeletonComponent,
|
|
8601
|
+
TooltipModule] });
|
|
8595
8602
|
}
|
|
8596
8603
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueModule, decorators: [{
|
|
8597
8604
|
type: NgModule,
|
|
@@ -8615,7 +8622,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
8615
8622
|
SharedModule,
|
|
8616
8623
|
TagModule,
|
|
8617
8624
|
TableSecondaryComponent,
|
|
8618
|
-
SkeletonComponent
|
|
8625
|
+
SkeletonComponent,
|
|
8626
|
+
TooltipModule
|
|
8619
8627
|
],
|
|
8620
8628
|
exports: [
|
|
8621
8629
|
QueueContainerComponent
|