cat-qw-lib 2.6.87-uw → 2.6.87

package/fesm2022/cat-qw-lib.mjs

@@ -198,8 +198,6 @@ class SHARED {
     static REFERRED = 'referred';
     static FINANCE = 'finance';
     static TOTAL_FINANCE_AMOUNT = 'totalFinanceAmount';
-    static BASE_PRICE = 'basePrice';
-    static MONTHLY_PAYMENT = 'monthlyPayment';
     static VALUATION_STATUS = 'valuationStatus';
     static TASKS = 'tasks';
     static TASK_BROKER_LABEL = 'B';
@@ -499,7 +497,7 @@ const queuePriorityOrder = ["All Applications", "Unassigned", "Assigned To Me"];
 const QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST = {
     brokerName: 'w-3',
     securityAddress: 'w-3',
-    applicants: 'w-2',
+    applicants: 'w-4',
     finance: 'w-1',
     totalFinanceAmount: 'w-2',
     valuationStatus: 'w-2',
@@ -508,15 +506,15 @@ const QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST = {
     appId: 'w-2',
     age: 'w-1',
     tasks: 'w-1',
-    productName: 'w-2',
-    basePrice: 'w-2',
-    monthlyPayment: 'w-6',
-    submittedDate: 'w-14'
+    productName: 'w-4',
+    baseRate: 'w-2',
+    monthlyPayment: 'w-2',
+    submittedDate: 'w-3'
 };
 const FIELD_DISPLAY_NAMES = {
     riskRating: 'Risk Rating',
     appId: 'App. ID',
-    applicants: 'Applicant',
+    applicants: 'Applicant(s)',
     brokerName: 'Broker',
     finance: 'Finance',
     totalFinanceAmount: 'Total Finance Amount',
@@ -528,7 +526,7 @@ const FIELD_DISPLAY_NAMES = {
     lending: 'Type',
     tasks: 'Tasks',
     productName: 'Product',
-    basePrice: 'Base Price',
+    baseRate: 'Base Rate',
     monthlyPayment: 'Monthly Payment',
     submittedDate: 'Submitted Date'
 };
@@ -536,10 +534,9 @@ const FIELD_DISPLAY_NAMES = {
 const QUEUE_RECORD_TABLE_COLUMN_ORDER = [
     'riskRating',
     'appId', // App. ID
-    'applicants', // Applicant
+    'applicants', // Applicant(s)
     'brokerName',
     'finance',
-    'productName', // Product
     'totalFinanceAmount', // Total Finance
     'securityAddress',
     'pending',
@@ -547,7 +544,8 @@ const QUEUE_RECORD_TABLE_COLUMN_ORDER = [
     'valuationStatus',
     'lending',
     'tasks',
-    'basePrice', // Base Price
+    'productName', // Product
+    'baseRate', // Base Rate
     'monthlyPayment', // Monthly Payment
     'submittedDate' // Submitted Date
 ];
@@ -2326,7 +2324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 
 var columnStyles = {
 	riskRating: {
-		containerNgClass: "rowData['riskRating'] === 'Low' ? 'queue-chip queue-chip--light-green-success' : rowData['riskRating'] === 'Med' ? 'queue-chip queue-chip--light-amber-warning' : rowData['riskRating'] === 'High' ? 'queue-chip queue-chip--light-red-danger' : ''",
+		containerNgClass: "rowData['riskRating'] === 'Low' ? 'queue-chip queue-chip--light-green-success' : rowData['riskRating'] === 'Med' ? 'queue-chip queue-chip--light-amber-warning' : (rowData['riskRating'] === 'High' || rowData['riskRating'] === 'Unacceptable') ? 'queue-chip queue-chip--light-red-danger' : ''",
 		textNgClass: "",
 		isShowSortIcon: true
 	},
@@ -2348,7 +2346,7 @@ var columnStyles = {
 		isShowSortIcon: true
 	},
 	appId: {
-		isShowSortIcon: false,
+		isShowSortIcon: true,
 		textNgClass: "text-black font-semibold"
 	},
 	brokerName: {
@@ -2374,28 +2372,13 @@ var columnStyles = {
 		textNgClass: "text-black font-semibold",
 		isShowSortIcon: false
 	},
-	basePrice: {
-		containerNgClass: "",
-		textNgClass: "text-black font-semibold",
-		isShowSortIcon: false
-	},
-	monthlyPayment: {
-		containerNgClass: "",
-		textNgClass: "text-black font-semibold",
-		isShowSortIcon: false
-	},
-	submittedDate: {
-		containerNgClass: "",
-		textNgClass: "text-black font-semibold white-space-nowrap",
-		isShowSortIcon: false
-	},
 	pending: {
 		containerNgClass: "rowData['pending'] && rowData['pending'] !== '' ? 'queue-chip queue-chip--neutral' : ''",
 		textNgClass: "text-black font-semibold",
 		isShowSortIcon: true
 	},
 	applicants: {
-		containerNgClass: "rowData.isSeperateBubble ? 'border-round-full  bg-blue-400 text-white' : rowData.isCustomerVulnerable === 'true' ? 'border-round-full applicant-vulnerable-customer-wrapper text-white' : rowData.riskRating === 'Low' ? 'border-round-full applicant-success-badge-wrapper text-white' : rowData.riskRating === 'Med' ? 'border-round-full applicant-amber-badge-wrapper text-white' : rowData.riskRating === 'High' ? 'border-round-full applicant-red-badge-wrapper text-white' : 'border-round-full bg-gray-200 text-white'",
+		containerNgClass: "rowData.isSeperateBubble ? 'border-round-full  bg-blue-400 text-white' : rowData.isCustomerVulnerable === 'true' ? 'border-round-full applicant-vulnerable-customer-wrapper text-white' : rowData.riskRating === 'Low' ? 'border-round-full applicant-success-badge-wrapper text-white' : rowData.riskRating === 'Med' ? 'border-round-full applicant-amber-badge-wrapper text-white' : (rowData.riskRating === 'High' || rowData.riskRating === 'Unacceptable') ? 'border-round-full applicant-red-badge-wrapper text-white' : 'border-round-full bg-gray-200 text-white'",
 		containerNgStyle: "{ minWidth: 'fit-content', maxWidth: '200px', minHeight: '32px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', padding: '6px 14px', whiteSpace: 'normal', wordBreak: 'break-word', lineHeight: '1.4' }",
 		textNgClass: "text-black"
 	},
@@ -3370,11 +3353,11 @@ class TableSecondaryComponent {
         return 'default';
     }
     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 });
-    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>\n  <p-table\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\n    #dt2\n    [lazy]=\"true\"\n    (onSort)=\"onSort($event)\"\n    [paginator]=\"false\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [columns]=\"table.headers\"\n    class=\"table-secondary-container\"\n    [value]=\"table.records\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\"\n    [dataKey]=\"table.dataKey\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\n  >\n    <!-- Header -->\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr *ngIf=\"table.headers.length > 0\">\n        <th\n          *ngFor=\"let col of table.headers; let i = index\"\n          class=\"table-header-wrapper bg-white\"\n          [pSortableColumn]=\"col.name\"\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\n          style=\"min-width: 100px\"\n        >      \n          <h4\n          [ngClass]=\"[\n            col.class || '', \n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\n          ]\"\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\n            {{ col.displayName || col.name }}\n            @if(table.isSortingAllow && col.isShowSortIcon){\n              <p-sortIcon [field]=\"col.name\" />\n            }\n          </h4>\n        </th>\n  \n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\n          <span *ngIf=\"headerSelectionCount > 0\">\n            ({{ headerSelectionCount }})\n          </span>\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isAllCurrentPageSelected\"\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\n        </h4>\n        </th>\n  \n        <th\n          *ngIf=\"showActions\"\n          class=\"table-action-title table-header-wrapper\"\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\n        >\n        </th>\n  \n      </tr>\n    </ng-template>\n  \n    <!-- Body -->\n<ng-template pTemplate=\"body\" let-rowData>\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n    <!-- one TD per column -->\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\n        (click)=\"handleRowClick(rowData)\"\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\n        [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n      \n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\n          <!-- your existing inner column wrapper -->\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\n                <!-- task items - check this first -->\n                <ng-container *ngSwitchCase=\"'taskItems'\">\n                  <div class=\"col-tasks\">\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\n                        <span class=\"font-semibold\">{{ taskItem.type }}</span>\n                        <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              \n                <!-- Finance amount with special styling -->\n                <ng-container *ngSwitchCase=\"'finance'\">\n                  <p class=\"text-black font-semibold mb-0\">\n                    {{ rowData[col.name].amount }}\n                  </p>\n                </ng-container>\n              \n                <!-- App ID with type and risk tags -->\n                <ng-container *ngSwitchCase=\"'appId'\">\n                  <div class=\"w-full text-left\">\n                    <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\n                      <!-- Type chip using style config (lending) -->\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\n                        <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\n                          {{ rowData[col.name].type }}\n                        </small>\n                      </div>\n                      <!-- Risk chip using style config (riskRating) -->\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\n                        <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\n                          {{ rowData[col.name].risk }}\n                        </small>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n                \n                <!-- Broker with name and company name -->\n                <ng-container *ngSwitchCase=\"'broker'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\n                      {{ rowData[col.name].brokerCompanyName }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!--Render two lines with dynamic classes for any two-line column -->\n                <ng-container *ngSwitchCase=\"'twoLine'\">\n                  <div class=\"w-full\" [ngClass]=\"[\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\n                      rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\n                    ]\">\n                    <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\n                      <i\n                        *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\n                        class=\"pi\"\n                        [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\n                      ></i>\n                      <span\n                        *ngIf=\"!rowData[col.name]?.iconClass\"\n                        [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\n                      >\n                        {{ rowData[col.name]?.addressLine1 }}\n                      </span>\n                    </div>\n                    <p class=\"row-multi-line-wrapper\"\n                      [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\n                      {{ rowData[col.name]?.postCode }}\n                  </p>\n                  </div>\n                </ng-container>\n                <!-- progress bar -->\n                <ng-container *ngSwitchCase=\"'progress'\">\n                  <div class=\"progress-wrapper\">\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\n                    </round-progress>\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\n                      {{ rowData[col.name] }}\n                    </div>\n                  </div>\n              \n                </ng-container>\n                <!-- Default cell rendering for other columns -->\n                <ng-container *ngSwitchDefault>\n                  <!-- Don't render default content if we have task items -->\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\n                  <div\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\n                    [ngClass]=\"[\n                      getRowClass(col, rowData),\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\n                    ]\"\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\n                  >\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                    </div>\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\n                      <div class=\"w-full text-left\">\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                      </div>\n                    </ng-container>\n                    <ng-template #bubbleOrFallback>\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length\">\n                        <div class=\"flex flex-column gap-1\">\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\n                            <p\n                              *ngIf=\"bubble.fullName\"\n                              class=\"mb-0\"\n                              [ngClass]=\"[\n                                col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700',\n                                'text-black font-semibold'\n                              ]\"\n                            >\n                              {{ bubble.fullName }}\n                            </p>\n                            <p\n                              *ngIf=\"bubble.inviteEmail\"\n                              class=\"mb-0 text-black font-semibold\"\n                            >\n                              {{ bubble.inviteEmail }}\n                            </p>\n                          </ng-container>\n                        </div>\n                      </ng-container>\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\n                        <div class=\"flex align-items-center gap-2\">\n                          <i\n                            *ngIf=\"rowData[col.name]?.icon\"\n                            class=\"pi\"\n                            [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\n                          ></i>\n                          <p class=\"mb-0 text-black font-semibold\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\n                            {{ rowData[col.name]?.text || rowData[col.name] }}\n                          </p>\n                        </div>\n                      </ng-container>\n                    </ng-template>\n                    <div\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\n                      class=\"text-black-500 text-sm mt-1\"\n                      style=\"font-weight: 600;\"\n                    >\n                      {{ rowData[table.descriptionColumnName] }}\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n              </ng-container>\n            </div>\n        </div>\n        </div>\n    </td>\n    <!-- Checkbox column -->\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\n       [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\n      </div>\n    </td>\n\n    <!-- Actions column -->\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\n        <p-button\n          icon=\"pi pi-trash\"\n          (click)=\"deleteRow($event, rowData)\"\n          class=\"delete-icon-wrapper mr-3\"\n          [disabled]=\"!enableSelection\"\n        ></p-button>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n  \n    <!-- Empty Message -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\n          class=\"text-center text-color font-semibold p-4\"\n        >\n           {{ noRecordsMessage }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n<!-- Paginator -->\n  <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\n  <div class=\"pagination-text text-color\">\n    Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\n  </div>\n\n  <p-paginator\n    #paginator\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    (onPageChange)=\"handleLoadRecords($event)\"\n  ></p-paginator>\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 });
+    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>\n  <p-table\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\n    #dt2\n    [lazy]=\"true\"\n    (onSort)=\"onSort($event)\"\n    [paginator]=\"false\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [columns]=\"table.headers\"\n    class=\"table-secondary-container\"\n    [value]=\"table.records\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\"\n    [dataKey]=\"table.dataKey\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\n  >\n    <!-- Header -->\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr *ngIf=\"table.headers.length > 0\">\n        <th\n          *ngFor=\"let col of table.headers; let i = index\"\n          class=\"table-header-wrapper bg-white\"\n          [pSortableColumn]=\"col.name\"\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\n          style=\"min-width: 100px\"\n        >      \n          <h4\n          [ngClass]=\"[\n            col.class || '', \n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\n          ]\"\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\n            {{ col.displayName || col.name }}\n            @if(table.isSortingAllow && col.isShowSortIcon){\n              <p-sortIcon [field]=\"col.name\" />\n            }\n          </h4>\n        </th>\n  \n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\n          <span *ngIf=\"headerSelectionCount > 0\">\n            ({{ headerSelectionCount }})\n          </span>\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isAllCurrentPageSelected\"\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\n        </h4>\n        </th>\n  \n        <th\n          *ngIf=\"showActions\"\n          class=\"table-action-title table-header-wrapper\"\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\n        >\n        </th>\n  \n      </tr>\n    </ng-template>\n  \n    <!-- Body -->\n<ng-template pTemplate=\"body\" let-rowData>\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n    <!-- one TD per column -->\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\n        (click)=\"handleRowClick(rowData)\"\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\n        [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n      \n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\n          <!-- your existing inner column wrapper -->\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\n                <!-- task items - check this first -->\n                <ng-container *ngSwitchCase=\"'taskItems'\">\n                  <div class=\"col-tasks\">\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\n                        <span class=\"font-semibold\">{{ taskItem.type }}</span>\n                        <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              \n                <!-- Finance amount with special styling -->\n                <ng-container *ngSwitchCase=\"'finance'\">\n                  <p class=\"text-black font-semibold mb-0\">\n                    {{ rowData[col.name].amount }}\n                  </p>\n                </ng-container>\n              \n                <!-- App ID with type and risk tags -->\n                <ng-container *ngSwitchCase=\"'appId'\">\n                  <div class=\"w-full text-left\">\n                    <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\n                      <!-- Type chip using style config (lending) -->\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\n                        <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\n                          {{ rowData[col.name].type }}\n                        </small>\n                      </div>\n                      <!-- Risk chip using style config (riskRating) -->\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\n                        <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\n                          {{ rowData[col.name].risk }}\n                        </small>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n                \n                <!-- Broker with name and company name -->\n                <ng-container *ngSwitchCase=\"'broker'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\n                      {{ rowData[col.name].brokerCompanyName }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!--Render two lines with dynamic classes for any two-line column -->\n                <ng-container *ngSwitchCase=\"'twoLine'\">\n                  <div class=\"w-full\" [ngClass]=\"[\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\n                      rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\n                    ]\">\n                    <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\n                      <i\n                        *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\n                        class=\"pi\"\n                        [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\n                      ></i>\n                      <span\n                        *ngIf=\"!rowData[col.name]?.iconClass\"\n                        [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\n                      >\n                        {{ rowData[col.name]?.addressLine1 }}\n                      </span>\n                    </div>\n                    <p class=\"row-multi-line-wrapper\"\n                      [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\n                      {{ rowData[col.name]?.postCode }}\n                  </p>\n                  </div>\n                </ng-container>\n                <!-- progress bar -->\n                <ng-container *ngSwitchCase=\"'progress'\">\n                  <div class=\"progress-wrapper\">\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\n                    </round-progress>\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\n                      {{ rowData[col.name] }}\n                    </div>\n                  </div>\n              \n                </ng-container>\n                <!-- Default cell rendering for other columns -->\n                <ng-container *ngSwitchDefault>\n                  <!-- Don't render default content if we have task items -->\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\n                  <div\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\n                    [ngClass]=\"[\n                      getRowClass(col, rowData),\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\n                    ]\"\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\n                  >\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                    </div>\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\n                      <div class=\"w-full text-left\">\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                      </div>\n                    </ng-container>\n                    <ng-template #bubbleOrFallback>\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\n                        <div class=\"flex flex-column gap-1\">\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\n                            <p\n                              class=\"mb-0\"\n                              [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700'\"\n                            >\n                              {{ bubble.fullName }}\n                          </p>\n                          </ng-container>\n                        </div>\n                      </ng-container>\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\n                        <div class=\"flex align-items-center gap-2\">\n                          <i\n                            *ngIf=\"rowData[col.name]?.icon\"\n                            class=\"pi\"\n                            [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\n                          ></i>\n                          <p class=\"mb-0\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\n                            {{ rowData[col.name]?.text || rowData[col.name] }}\n                          </p>\n                        </div>\n                      </ng-container>\n                    </ng-template>\n                    <div\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\n                      class=\"text-black-500 text-sm mt-1\"\n                      style=\"font-weight: 600;\"\n                    >\n                      {{ rowData[table.descriptionColumnName] }}\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n              </ng-container>\n            </div>\n        </div>\n        </div>\n    </td>\n    <!-- Checkbox column -->\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\n       [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\n      </div>\n    </td>\n\n    <!-- Actions column -->\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\n        <p-button\n          icon=\"pi pi-trash\"\n          (click)=\"deleteRow($event, rowData)\"\n          class=\"delete-icon-wrapper mr-3\"\n          [disabled]=\"!enableSelection\"\n        ></p-button>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n  \n    <!-- Empty Message -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\n          class=\"text-center text-color font-semibold p-4\"\n        >\n           {{ noRecordsMessage }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n<!-- Paginator -->\n  <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\n  <div class=\"pagination-text text-color\">\n    Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\n  </div>\n\n  <p-paginator\n    #paginator\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    (onPageChange)=\"handleLoadRecords($event)\"\n  ></p-paginator>\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:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableSecondaryComponent, decorators: [{
             type: Component,
-            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>\n  <p-table\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\n    #dt2\n    [lazy]=\"true\"\n    (onSort)=\"onSort($event)\"\n    [paginator]=\"false\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [columns]=\"table.headers\"\n    class=\"table-secondary-container\"\n    [value]=\"table.records\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\"\n    [dataKey]=\"table.dataKey\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\n  >\n    <!-- Header -->\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr *ngIf=\"table.headers.length > 0\">\n        <th\n          *ngFor=\"let col of table.headers; let i = index\"\n          class=\"table-header-wrapper bg-white\"\n          [pSortableColumn]=\"col.name\"\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\n          style=\"min-width: 100px\"\n        >      \n          <h4\n          [ngClass]=\"[\n            col.class || '', \n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\n          ]\"\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\n            {{ col.displayName || col.name }}\n            @if(table.isSortingAllow && col.isShowSortIcon){\n              <p-sortIcon [field]=\"col.name\" />\n            }\n          </h4>\n        </th>\n  \n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\n          <span *ngIf=\"headerSelectionCount > 0\">\n            ({{ headerSelectionCount }})\n          </span>\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isAllCurrentPageSelected\"\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\n        </h4>\n        </th>\n  \n        <th\n          *ngIf=\"showActions\"\n          class=\"table-action-title table-header-wrapper\"\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\n        >\n        </th>\n  \n      </tr>\n    </ng-template>\n  \n    <!-- Body -->\n<ng-template pTemplate=\"body\" let-rowData>\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n    <!-- one TD per column -->\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\n        (click)=\"handleRowClick(rowData)\"\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\n        [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n      \n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\n          <!-- your existing inner column wrapper -->\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\n                <!-- task items - check this first -->\n                <ng-container *ngSwitchCase=\"'taskItems'\">\n                  <div class=\"col-tasks\">\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\n                        <span class=\"font-semibold\">{{ taskItem.type }}</span>\n                        <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              \n                <!-- Finance amount with special styling -->\n                <ng-container *ngSwitchCase=\"'finance'\">\n                  <p class=\"text-black font-semibold mb-0\">\n                    {{ rowData[col.name].amount }}\n                  </p>\n                </ng-container>\n              \n                <!-- App ID with type and risk tags -->\n                <ng-container *ngSwitchCase=\"'appId'\">\n                  <div class=\"w-full text-left\">\n                    <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\n                      <!-- Type chip using style config (lending) -->\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\n                        <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\n                          {{ rowData[col.name].type }}\n                        </small>\n                      </div>\n                      <!-- Risk chip using style config (riskRating) -->\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\n                        <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\n                          {{ rowData[col.name].risk }}\n                        </small>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n                \n                <!-- Broker with name and company name -->\n                <ng-container *ngSwitchCase=\"'broker'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\n                      {{ rowData[col.name].brokerCompanyName }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!--Render two lines with dynamic classes for any two-line column -->\n                <ng-container *ngSwitchCase=\"'twoLine'\">\n                  <div class=\"w-full\" [ngClass]=\"[\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\n                      rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\n                    ]\">\n                    <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\n                      <i\n                        *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\n                        class=\"pi\"\n                        [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\n                      ></i>\n                      <span\n                        *ngIf=\"!rowData[col.name]?.iconClass\"\n                        [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\n                      >\n                        {{ rowData[col.name]?.addressLine1 }}\n                      </span>\n                    </div>\n                    <p class=\"row-multi-line-wrapper\"\n                      [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\n                      {{ rowData[col.name]?.postCode }}\n                  </p>\n                  </div>\n                </ng-container>\n                <!-- progress bar -->\n                <ng-container *ngSwitchCase=\"'progress'\">\n                  <div class=\"progress-wrapper\">\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\n                    </round-progress>\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\n                      {{ rowData[col.name] }}\n                    </div>\n                  </div>\n              \n                </ng-container>\n                <!-- Default cell rendering for other columns -->\n                <ng-container *ngSwitchDefault>\n                  <!-- Don't render default content if we have task items -->\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\n                  <div\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\n                    [ngClass]=\"[\n                      getRowClass(col, rowData),\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\n                    ]\"\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\n                  >\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                    </div>\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\n                      <div class=\"w-full text-left\">\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                      </div>\n                    </ng-container>\n                    <ng-template #bubbleOrFallback>\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length\">\n                        <div class=\"flex flex-column gap-1\">\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\n                            <p\n                              *ngIf=\"bubble.fullName\"\n                              class=\"mb-0\"\n                              [ngClass]=\"[\n                                col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700',\n                                'text-black font-semibold'\n                              ]\"\n                            >\n                              {{ bubble.fullName }}\n                            </p>\n                            <p\n                              *ngIf=\"bubble.inviteEmail\"\n                              class=\"mb-0 text-black font-semibold\"\n                            >\n                              {{ bubble.inviteEmail }}\n                            </p>\n                          </ng-container>\n                        </div>\n                      </ng-container>\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\n                        <div class=\"flex align-items-center gap-2\">\n                          <i\n                            *ngIf=\"rowData[col.name]?.icon\"\n                            class=\"pi\"\n                            [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\n                          ></i>\n                          <p class=\"mb-0 text-black font-semibold\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\n                            {{ rowData[col.name]?.text || rowData[col.name] }}\n                          </p>\n                        </div>\n                      </ng-container>\n                    </ng-template>\n                    <div\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\n                      class=\"text-black-500 text-sm mt-1\"\n                      style=\"font-weight: 600;\"\n                    >\n                      {{ rowData[table.descriptionColumnName] }}\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n              </ng-container>\n            </div>\n        </div>\n        </div>\n    </td>\n    <!-- Checkbox column -->\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\n       [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\n      </div>\n    </td>\n\n    <!-- Actions column -->\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\n        <p-button\n          icon=\"pi pi-trash\"\n          (click)=\"deleteRow($event, rowData)\"\n          class=\"delete-icon-wrapper mr-3\"\n          [disabled]=\"!enableSelection\"\n        ></p-button>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n  \n    <!-- Empty Message -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\n          class=\"text-center text-color font-semibold p-4\"\n        >\n           {{ noRecordsMessage }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n<!-- Paginator -->\n  <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\n  <div class=\"pagination-text text-color\">\n    Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\n  </div>\n\n  <p-paginator\n    #paginator\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    (onPageChange)=\"handleLoadRecords($event)\"\n  ></p-paginator>\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"] }]
+            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>\n  <p-table\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\n    #dt2\n    [lazy]=\"true\"\n    (onSort)=\"onSort($event)\"\n    [paginator]=\"false\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [columns]=\"table.headers\"\n    class=\"table-secondary-container\"\n    [value]=\"table.records\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\"\n    [dataKey]=\"table.dataKey\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\n  >\n    <!-- Header -->\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr *ngIf=\"table.headers.length > 0\">\n        <th\n          *ngFor=\"let col of table.headers; let i = index\"\n          class=\"table-header-wrapper bg-white\"\n          [pSortableColumn]=\"col.name\"\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\n          style=\"min-width: 100px\"\n        >      \n          <h4\n          [ngClass]=\"[\n            col.class || '', \n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\n          ]\"\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\n            {{ col.displayName || col.name }}\n            @if(table.isSortingAllow && col.isShowSortIcon){\n              <p-sortIcon [field]=\"col.name\" />\n            }\n          </h4>\n        </th>\n  \n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\n          <span *ngIf=\"headerSelectionCount > 0\">\n            ({{ headerSelectionCount }})\n          </span>\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isAllCurrentPageSelected\"\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\n        </h4>\n        </th>\n  \n        <th\n          *ngIf=\"showActions\"\n          class=\"table-action-title table-header-wrapper\"\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\n        >\n        </th>\n  \n      </tr>\n    </ng-template>\n  \n    <!-- Body -->\n<ng-template pTemplate=\"body\" let-rowData>\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n    <!-- one TD per column -->\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\n        (click)=\"handleRowClick(rowData)\"\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\n        [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n      \n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\n          <!-- your existing inner column wrapper -->\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\n                <!-- task items - check this first -->\n                <ng-container *ngSwitchCase=\"'taskItems'\">\n                  <div class=\"col-tasks\">\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\n                        <span class=\"font-semibold\">{{ taskItem.type }}</span>\n                        <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              \n                <!-- Finance amount with special styling -->\n                <ng-container *ngSwitchCase=\"'finance'\">\n                  <p class=\"text-black font-semibold mb-0\">\n                    {{ rowData[col.name].amount }}\n                  </p>\n                </ng-container>\n              \n                <!-- App ID with type and risk tags -->\n                <ng-container *ngSwitchCase=\"'appId'\">\n                  <div class=\"w-full text-left\">\n                    <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\n                      <!-- Type chip using style config (lending) -->\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\n                        <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\n                          {{ rowData[col.name].type }}\n                        </small>\n                      </div>\n                      <!-- Risk chip using style config (riskRating) -->\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\n                        <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\n                          {{ rowData[col.name].risk }}\n                        </small>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n                \n                <!-- Broker with name and company name -->\n                <ng-container *ngSwitchCase=\"'broker'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\n                      {{ rowData[col.name].brokerCompanyName }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!--Render two lines with dynamic classes for any two-line column -->\n                <ng-container *ngSwitchCase=\"'twoLine'\">\n                  <div class=\"w-full\" [ngClass]=\"[\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\n                      rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\n                    ]\">\n                    <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\n                      <i\n                        *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\n                        class=\"pi\"\n                        [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\n                      ></i>\n                      <span\n                        *ngIf=\"!rowData[col.name]?.iconClass\"\n                        [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\n                      >\n                        {{ rowData[col.name]?.addressLine1 }}\n                      </span>\n                    </div>\n                    <p class=\"row-multi-line-wrapper\"\n                      [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\n                      {{ rowData[col.name]?.postCode }}\n                  </p>\n                  </div>\n                </ng-container>\n                <!-- progress bar -->\n                <ng-container *ngSwitchCase=\"'progress'\">\n                  <div class=\"progress-wrapper\">\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\n                    </round-progress>\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\n                      {{ rowData[col.name] }}\n                    </div>\n                  </div>\n              \n                </ng-container>\n                <!-- Default cell rendering for other columns -->\n                <ng-container *ngSwitchDefault>\n                  <!-- Don't render default content if we have task items -->\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\n                  <div\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\n                    [ngClass]=\"[\n                      getRowClass(col, rowData),\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\n                    ]\"\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\n                  >\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                    </div>\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\n                      <div class=\"w-full text-left\">\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                      </div>\n                    </ng-container>\n                    <ng-template #bubbleOrFallback>\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\n                        <div class=\"flex flex-column gap-1\">\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\n                            <p\n                              class=\"mb-0\"\n                              [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700'\"\n                            >\n                              {{ bubble.fullName }}\n                          </p>\n                          </ng-container>\n                        </div>\n                      </ng-container>\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\n                        <div class=\"flex align-items-center gap-2\">\n                          <i\n                            *ngIf=\"rowData[col.name]?.icon\"\n                            class=\"pi\"\n                            [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\n                          ></i>\n                          <p class=\"mb-0\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\n                            {{ rowData[col.name]?.text || rowData[col.name] }}\n                          </p>\n                        </div>\n                      </ng-container>\n                    </ng-template>\n                    <div\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\n                      class=\"text-black-500 text-sm mt-1\"\n                      style=\"font-weight: 600;\"\n                    >\n                      {{ rowData[table.descriptionColumnName] }}\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n              </ng-container>\n            </div>\n        </div>\n        </div>\n    </td>\n    <!-- Checkbox column -->\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\n       [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\n      </div>\n    </td>\n\n    <!-- Actions column -->\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\n        <p-button\n          icon=\"pi pi-trash\"\n          (click)=\"deleteRow($event, rowData)\"\n          class=\"delete-icon-wrapper mr-3\"\n          [disabled]=\"!enableSelection\"\n        ></p-button>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n  \n    <!-- Empty Message -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\n          class=\"text-center text-color font-semibold p-4\"\n        >\n           {{ noRecordsMessage }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n<!-- Paginator -->\n  <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\n  <div class=\"pagination-text text-color\">\n    Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\n  </div>\n\n  <p-paginator\n    #paginator\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    (onPageChange)=\"handleLoadRecords($event)\"\n  ></p-paginator>\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:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.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"] }]
         }], ctorParameters: () => [{ type: i3$4.Router }, { type: BaseService }, { type: SessionService }, { type: BaseQuery }, { type: BaseStore }, { type: QueueBusinessService }, { type: QueueQuery$1 }], propDecorators: { table: [{
                 type: Input
             }], metaData: [{
@@ -7092,7 +7075,6 @@ class QueueService extends BaseService {
     }
     /**
      * Fetches paginated queue records using the provided apiConfig URL with search and pagination support.
-     * This is the unified method used for both initial data loading and search functionality.
      * Uses POST method with underwriterIds and unassigned in body, other params in query string.
      * @param {string} apiConfig - The full API endpoint to fetch records for the selected queue
      * @param {string} [searchKey] - Optional search term
@@ -7118,20 +7100,16 @@ class QueueService extends BaseService {
         if (query) {
             const queryParams = new URLSearchParams(query);
             queryParams.forEach((value, key) => {
-                // Extract underwriterIds and unassigned for body, keep others in params
                 if (key === 'underwriterId') {
-                    // Convert comma-separated string to array for body
                     const underwriterIds = value.split(',').filter(id => id.trim() !== '');
                     if (underwriterIds.length > 0) {
                         body.underwriterIds = underwriterIds;
                     }
                 }
                 else if (key === 'unassigned') {
-                    // Convert string to boolean for body
                     body.unassigned = value === 'true';
                 }
                 else {
-                    // Keep all other params in query string (including 'all' flag)
                     params[key] = value;
                 }
             });
@@ -7163,6 +7141,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
             args: [{ providedIn: "root" }]
         }], ctorParameters: () => [{ type: QueueStore$1 }, { type: i1$1.HttpClient }, { type: AppConfigService }, { type: ListService }] });
 
+/**
+ * Maps a lowercased valuation/instruction status to its icon and colour configuration.
+ * Keys must be lowercase; lookups normalise the incoming status with `toLowerCase()`.
+ */
+const VALUATION_STATUS_CONFIG_MAP = {
+    'received': { icon: 'pi pi-image', iconClass: 'text-green-600', textClass: 'text-green-700 font-medium' },
+    'not paid': { icon: 'pi pi-times-circle', iconClass: 'text-red-600', textClass: 'text-red-700 font-medium' },
+    'instructed': { icon: 'pi pi-file', iconClass: 'text-blue-600', textClass: 'text-blue-700 font-medium' },
+    'outstanding pvq': { icon: 'pi pi-star', iconClass: 'text-purple-600', textClass: 'text-purple-700 font-medium' },
+    'paid': { icon: 'pi pi-pound', iconClass: 'text-green-500', textClass: 'text-green-600 font-medium' },
+    'reviewing': { icon: 'pi pi-clock', iconClass: 'text-orange-600', textClass: 'text-orange-700 font-medium' },
+    'complete': { icon: 'pi pi-check-circle', iconClass: 'text-green-600', textClass: 'text-green-700 font-medium' },
+    'scheduled': { icon: 'pi pi-calendar', iconClass: 'text-blue-600', textClass: 'text-blue-700 font-medium' },
+    'requested': { icon: 'pi pi-send', iconClass: 'text-indigo-600', textClass: 'text-indigo-700 font-medium' },
+    'ready to instruct': { icon: 'pi pi-check', iconClass: 'text-teal-600', textClass: 'text-teal-700 font-medium' },
+    // Quest instruction statuses surfaced via the applications API.
+    'failed': { icon: 'pi pi-times-circle', iconClass: 'text-red-600', textClass: 'text-red-700 font-medium' },
+    'cancelled': { icon: 'pi pi-ban', iconClass: 'text-bluegray-600', textClass: 'text-bluegray-700 font-medium' },
+    'booked': { icon: 'pi pi-calendar', iconClass: 'text-yellow-600', textClass: 'text-yellow-700 font-medium' },
+    'held': { icon: 'pi pi-pause-circle', iconClass: 'text-orange-600', textClass: 'text-orange-700 font-medium' },
+    'tried': { icon: 'pi pi-replay', iconClass: 'text-blue-600', textClass: 'text-blue-700 font-medium' },
+    'allocated': { icon: 'pi pi-user', iconClass: 'text-cyan-600', textClass: 'text-cyan-700 font-medium' }
+};
+/** Fallback configuration used when a status is not present in {@link VALUATION_STATUS_CONFIG_MAP}. */
+const VALUATION_STATUS_DEFAULT_CONFIG = {
+    icon: 'pi pi-info-circle',
+    iconClass: 'text-gray-600',
+    textClass: 'text-gray-700 font-medium'
+};
+
 const CHIP_VARIANTS = {
     DANGER: 'danger',
     WARNING: 'warning',
@@ -7197,64 +7205,7 @@ class QueueRecordTableBuilderService extends TableBuilder {
     getValuationStatusConfig(status) {
         if (!status)
             return null;
-        const statusLower = status.toLowerCase();
-        const configMap = {
-            'received': {
-                icon: 'pi pi-image',
-                iconClass: 'text-green-600',
-                textClass: 'text-green-700 font-medium'
-            },
-            'not paid': {
-                icon: 'pi pi-times-circle',
-                iconClass: 'text-red-600',
-                textClass: 'text-red-700 font-medium'
-            },
-            'instructed': {
-                icon: 'pi pi-file',
-                iconClass: 'text-blue-600',
-                textClass: 'text-blue-700 font-medium'
-            },
-            'outstanding pvq': {
-                icon: 'pi pi-star',
-                iconClass: 'text-purple-600',
-                textClass: 'text-purple-700 font-medium'
-            },
-            'paid': {
-                icon: 'pi pi-pound',
-                iconClass: 'text-green-500',
-                textClass: 'text-green-600 font-medium'
-            },
-            'reviewing': {
-                icon: 'pi pi-clock',
-                iconClass: 'text-orange-600',
-                textClass: 'text-orange-700 font-medium'
-            },
-            'complete': {
-                icon: 'pi pi-check-circle',
-                iconClass: 'text-green-600',
-                textClass: 'text-green-700 font-medium'
-            },
-            'scheduled': {
-                icon: 'pi pi-calendar',
-                iconClass: 'text-blue-600',
-                textClass: 'text-blue-700 font-medium'
-            },
-            'requested': {
-                icon: 'pi pi-send',
-                iconClass: 'text-indigo-600',
-                textClass: 'text-indigo-700 font-medium'
-            },
-            'ready to instruct': {
-                icon: 'pi pi-check',
-                iconClass: 'text-teal-600',
-                textClass: 'text-teal-700 font-medium'
-            }
-        };
-        return configMap[statusLower] || {
-            icon: 'pi pi-info-circle',
-            iconClass: 'text-gray-600',
-            textClass: 'text-gray-700 font-medium'
-        };
+        return VALUATION_STATUS_CONFIG_MAP[status.toLowerCase()] || VALUATION_STATUS_DEFAULT_CONFIG;
     }
     /**
      * Truncates text to specified length with ellipsis
@@ -7267,19 +7218,6 @@ class QueueRecordTableBuilderService extends TableBuilder {
             return '';
         return text.length > maxLength ? `${text.substring(0, maxLength - 3)}...` : text;
     }
-    /**
-     * GBP display for queue currency columns: £ with thousands separator and 2 decimals; null/empty -> '-'.
-     */
-    formatQueueCurrencyValue(value) {
-        if (value == null || value === '' || String(value).toLowerCase() === SHARED.null) {
-            return SHARED.DASH;
-        }
-        const num = Number(value);
-        if (!Number.isFinite(num)) {
-            return SHARED.DASH;
-        }
-        return `£${num.toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-    }
     getColumnOrder(isReferredQueue) {
         if (!isReferredQueue) {
             return QUEUE_RECORD_TABLE_COLUMN_ORDER.filter(field => field !== SHARED.REFERRED_DATE);
@@ -7293,12 +7231,8 @@ class QueueRecordTableBuilderService extends TableBuilder {
         if (records.length === 0) {
             return table;
         }
-        const normalizedRecords = records.map((r) => ({
-            ...r,
-            [SHARED.BASE_PRICE]: r[SHARED.BASE_PRICE] ?? r['baseRate']
-        }));
         // Get the first record to determine available fields
-        const firstRecord = normalizedRecords[0];
+        const firstRecord = records[0];
         const excludedFields = [
             SHARED._ID,
             SHARED.COMPANY_NAME,
@@ -7314,7 +7248,7 @@ class QueueRecordTableBuilderService extends TableBuilder {
         let availableFields = columnOrder
             .filter(field => !excludedFields.includes(field) && firstRecord.hasOwnProperty(field));
         const columnWidths = QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST;
-        table.records = normalizedRecords.map((apiRecord) => {
+        table.records = records.map((apiRecord, index) => {
             // Format riskRating: convert "Medium" to "Med" for display
             const formattedRiskRating = apiRecord.riskRating === 'Medium' ? 'Med' : apiRecord.riskRating;
             const record = {
@@ -7338,36 +7272,30 @@ class QueueRecordTableBuilderService extends TableBuilder {
                 // Format specific fields
                 if (field === SHARED.APPLICANTS && Array.isArray(value)) {
                     const companyName = apiRecord.companyName || '';
-                    const fallbackInviteEmail = apiRecord.inviteEmail || '';
                     const bubbles = [];
                     // If we have both company and applicants, show only company name
                     if (companyName && value.length > 0) {
                         bubbles.push({
                             fullName: companyName,
-                            isCompany: true,
-                            inviteEmail: fallbackInviteEmail
+                            isCompany: true
                         });
                     }
                     else if (companyName) {
                         // Only company, no applicants
                         bubbles.push({
                             fullName: companyName,
-                            isCompany: true,
-                            inviteEmail: fallbackInviteEmail
+                            isCompany: true
                         });
                     }
                     else {
                         // Only applicants, show full names
                         value.forEach((applicant) => {
-                            const applicantName = applicant?.fullName || '';
-                            const applicantInviteEmail = applicant?.inviteEmail || fallbackInviteEmail;
-                            if (applicantName || applicantInviteEmail) {
+                            if (applicant.fullName) {
                                 // Format riskRating: convert "Medium" to "Med" for display
                                 const formattedApplicantRisk = applicant.riskRating === 'Medium' ? 'Med' : applicant.riskRating;
                                 bubbles.push({
-                                    fullName: applicantName,
+                                    fullName: applicant.fullName,
                                     isCompany: false,
-                                    inviteEmail: applicantInviteEmail,
                                     riskRating: formattedApplicantRisk,
                                     isCustomerVulnerable: applicant.isCustomerVulnerable
                                 });
@@ -7429,10 +7357,13 @@ class QueueRecordTableBuilderService extends TableBuilder {
                         cellValue = value;
                     }
                 }
-                else if (field === SHARED.TOTAL_FINANCE_AMOUNT ||
-                    field === SHARED.BASE_PRICE ||
-                    field === SHARED.MONTHLY_PAYMENT) {
-                    cellValue = this.formatQueueCurrencyValue(value);
+                else if (field === SHARED.TOTAL_FINANCE_AMOUNT) {
+                    if (value != null && value !== '') {
+                        cellValue = `£${Number(value).toLocaleString('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+                    }
+                    else {
+                        cellValue = SHARED.EMPTY;
+                    }
                 }
                 else if (field === SHARED.SECURITY_ADDRESS && value) {
                     const line1 = value.addressLine1 || '';
@@ -7659,15 +7590,22 @@ class QueueItemComponent {
         return queueId === this.selectedQueueId;
     }
     iconMap = [
-        ['all applications', 'pi-th-large'],
-        ['invite sent', 'ri-mail-open-line'],
-        ['underwriter pipeline', 'ri-flow-chart'],
-        ['approval pipeline', 'ri-flow-chart'],
-        ['completed', 'ri-check-double-line'],
+        ['unassigned', 'pi-inbox'],
+        ['assigned', 'pi-star'],
+        ['all application', 'pi-th-large'],
+        ['withdrawal', 'pi-times-circle'],
+        ['withdrawn', 'pi-times-circle'],
         ['decline', 'pi-ban'],
-        ['withdrawn', 'ri-file-reduce-line'],
-        ['archived', 'ri-archive-line'],
-        ['kyc failed', 'pi-times-circle']
+        ['post underwriting', 'pi-check-square'],
+        ['mandate requested', 'pi-file-edit'],
+        ['mandate', 'pi-file'],
+        ['exception', 'pi-exclamation-circle'],
+        ['referred', 'pi-directions'],
+        ['completion', 'pi-check-circle'],
+        ['new application', 'pi-plus-circle'],
+        ['offer', 'pi-gift'],
+        ['valuation', 'pi-chart-bar'],
+        ['issue', 'pi-send']
     ];
     getQueueIcon(name) {
         if (!name)
@@ -7680,11 +7618,11 @@ class QueueItemComponent {
         return 'pi-list';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueItemComponent, deps: [{ token: QueueStore$1 }], target: i0.ɵɵFactoryTarget.Component });
-    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\">\n    <h4 class=\"queue-title m-0 mb-3\">Queues</h4>\n    <div class=\"queue-items-list\">\n        @for(queue of filteredQueueData; let i = $index; track queue){\n            <div class=\"queue-nav-item\"\n                 [ngClass]=\"{'queue-nav-item--active': isQueueSelected(queue._id), 'queue-nav-item--inactive': !isQueueActive(queue)}\"\n                 (click)=\"onQueueClick(queue._id)\">\n                <div class=\"queue-nav-item__inner\">\n                    <i class=\"pi queue-nav-item__icon\"\n                       [ngClass]=\"getQueueIcon(queue.name)\"></i>\n                    <span class=\"queue-nav-item__label\" [pTooltip]=\"queue.name\" tooltipPosition=\"top\"\n                          [ngClass]=\"{'queue-nav-item__label--active': isQueueSelected(queue._id)}\">{{queue.name}}</span>\n                </div>\n                @if(queue.itemCount !== null){\n                <span class=\"queue-nav-item__badge\"\n                      [ngClass]=\"{'queue-nav-item__badge--active': isQueueSelected(queue._id)}\">{{queue.itemCount}}</span>\n                }\n            </div>\n        }\n    </div>\n</div>\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 });
+    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\">\n    <h4 class=\"queue-title m-0 mb-3\">Queues</h4>\n    <div class=\"queue-items-list\">\n        @for(queue of filteredQueueData; let i = $index; track queue){\n            <div class=\"queue-nav-item\"\n                 [ngClass]=\"{'queue-nav-item--active': isQueueSelected(queue._id), 'queue-nav-item--inactive': !isQueueActive(queue)}\"\n                 (click)=\"onQueueClick(queue._id)\">\n                <div class=\"queue-nav-item__inner\">\n                    <i class=\"pi queue-nav-item__icon\"\n                       [ngClass]=\"getQueueIcon(queue.name)\"></i>\n                    <span class=\"queue-nav-item__label\"\n                          [ngClass]=\"{'queue-nav-item__label--active': isQueueSelected(queue._id)}\">{{queue.name}}</span>\n                </div>\n                @if(queue.itemCount !== null){\n                <span class=\"queue-nav-item__badge\"\n                      [ngClass]=\"{'queue-nav-item__badge--active': isQueueSelected(queue._id)}\">{{queue.itemCount}}</span>\n                }\n            </div>\n        }\n    </div>\n</div>\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-queue-item', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"queue-nav-wrapper\">\n    <h4 class=\"queue-title m-0 mb-3\">Queues</h4>\n    <div class=\"queue-items-list\">\n        @for(queue of filteredQueueData; let i = $index; track queue){\n            <div class=\"queue-nav-item\"\n                 [ngClass]=\"{'queue-nav-item--active': isQueueSelected(queue._id), 'queue-nav-item--inactive': !isQueueActive(queue)}\"\n                 (click)=\"onQueueClick(queue._id)\">\n                <div class=\"queue-nav-item__inner\">\n                    <i class=\"pi queue-nav-item__icon\"\n                       [ngClass]=\"getQueueIcon(queue.name)\"></i>\n                    <span class=\"queue-nav-item__label\" [pTooltip]=\"queue.name\" tooltipPosition=\"top\"\n                          [ngClass]=\"{'queue-nav-item__label--active': isQueueSelected(queue._id)}\">{{queue.name}}</span>\n                </div>\n                @if(queue.itemCount !== null){\n                <span class=\"queue-nav-item__badge\"\n                      [ngClass]=\"{'queue-nav-item__badge--active': isQueueSelected(queue._id)}\">{{queue.itemCount}}</span>\n                }\n            </div>\n        }\n    </div>\n</div>\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"] }]
+            args: [{ selector: 'app-queue-item', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"queue-nav-wrapper\">\n    <h4 class=\"queue-title m-0 mb-3\">Queues</h4>\n    <div class=\"queue-items-list\">\n        @for(queue of filteredQueueData; let i = $index; track queue){\n            <div class=\"queue-nav-item\"\n                 [ngClass]=\"{'queue-nav-item--active': isQueueSelected(queue._id), 'queue-nav-item--inactive': !isQueueActive(queue)}\"\n                 (click)=\"onQueueClick(queue._id)\">\n                <div class=\"queue-nav-item__inner\">\n                    <i class=\"pi queue-nav-item__icon\"\n                       [ngClass]=\"getQueueIcon(queue.name)\"></i>\n                    <span class=\"queue-nav-item__label\"\n                          [ngClass]=\"{'queue-nav-item__label--active': isQueueSelected(queue._id)}\">{{queue.name}}</span>\n                </div>\n                @if(queue.itemCount !== null){\n                <span class=\"queue-nav-item__badge\"\n                      [ngClass]=\"{'queue-nav-item__badge--active': isQueueSelected(queue._id)}\">{{queue.itemCount}}</span>\n                }\n            </div>\n        }\n    </div>\n</div>\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"] }]
         }], ctorParameters: () => [{ type: QueueStore$1 }], propDecorators: { filteredQueueData: [{
                 type: Input
             }], selectedQueueId: [{
@@ -8164,6 +8102,9 @@ class QueueContainerComponent extends BaseContainerComponent {
     }
     onPaginationChanged(event) {
         const { page, limit } = this.queueBusinessService.calculatePagination(event);
+        // Force refresh on explicit paginator navigation so returning to page 1
+        // (often already cached from initial load) still triggers an API call.
+        // Show table skeleton while loading the next page (left nav stays visible).
         this.getQueueRecordsData(page, limit, false);
     }
     onFilterApplied(record) {
@@ -8452,6 +8393,7 @@ class QueueContainerComponent extends BaseContainerComponent {
     }
     onAssignmentComplete(event) {
         if (event.success) {
+            // Pass the current selectedQueueId to preserve selection after refresh, but ensure it's not null
             this.getAllQueueList(this.selectedQueueId ?? undefined);
         }
         this.assignmentComplete.emit(event);
@@ -8539,8 +8481,7 @@ class QueueModule {
             SharedModule,
             TagModule,
             TableSecondaryComponent,
-            SkeletonComponent,
-            TooltipModule], exports: [QueueContainerComponent] });
+            SkeletonComponent], exports: [QueueContainerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueModule, imports: [CommonModule,
             QueueRoutingModule,
             FormsModule,
@@ -8551,8 +8492,7 @@ class QueueModule {
             SharedModule,
             TagModule,
             TableSecondaryComponent,
-            SkeletonComponent,
-            TooltipModule] });
+            SkeletonComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueModule, decorators: [{
             type: NgModule,
@@ -8576,8 +8516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         SharedModule,
                         TagModule,
                         TableSecondaryComponent,
-                        SkeletonComponent,
-                        TooltipModule
+                        SkeletonComponent
                     ],
                     exports: [
                         QueueContainerComponent