cat-qw-lib 2.1.39 → 2.1.41

package/fesm2022/cat-qw-lib.mjs

@@ -72,6 +72,8 @@ import * as i5$4 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i2$3 from 'primeng/chart';
 import { ChartModule } from 'primeng/chart';
+import * as i4$4 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
 import { TagModule } from 'primeng/tag';
 
 class SHARED {
@@ -85,6 +87,7 @@ class SHARED {
     static USERROLE = "role";
     static SESSIONKEY = "userData";
     static SUCCESS = "success";
+    static WARNING = "warning";
     static ERROR = "error";
     static ERROR_MESSAGE = "Success Message";
     static SUCCESS_MESSAGE = "Success Message";
@@ -183,8 +186,18 @@ class SHARED {
     static ON_WIDGET_UPDATE = 'onWidgetUpdate';
     static selectedApplicationType = "applicationType";
     static APPLICANTS = 'applicants';
+    static BROKER_NAME = 'brokerName';
     static SECURITY_ADDRESS = 'securityAddress';
     static TASKS = 'tasks';
+    static TASK_BROKER_LABEL = 'B';
+    static TASK_UNDERWRITER_LABEL = 'UW';
+    static APP_ID = 'appId';
+    static COMPANY_NAME = 'companyName';
+    static APPLICATION_TYPE = 'applicationType';
+    static ASSIGNED_TO = 'assignedTo';
+    static TASK_COMPLETION_PERCENT = 'taskCompletionPercent';
+    static RISK_RATING = 'riskRating';
+    static LENDING = 'lending';
 }
 const widgetLayoutTypeList = [
     { name: 'Row', value: 'row' },
@@ -469,7 +482,14 @@ const offerWidgetList = [
 ];
 const actionTableColumnWidthList = { name: 'w-3', apiConfigId: 'w-3', queueId: 'w-3', prompt: 'w-4', isActive: 'w-2' };
 const queuePriorityOrder = ["All Applications", "Assigned To Me", "Unassigned"];
-const QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST = { brokerName: 'w-3', securityAddress: 'w-3', applicants: 'w-3' };
+const QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST = {
+    brokerName: 'w-3',
+    securityAddress: 'w-3',
+    applicants: 'w-3',
+    finance: 'w-3',
+    appId: 'w-3',
+    tasks: 'w-2'
+};
 const FIELD_DISPLAY_NAMES = {
     riskRating: 'Risk Rating',
     appId: 'App. ID',
@@ -2262,7 +2282,8 @@ var columnStyles = {
 	},
 	tasks: {
 		isShowSortIcon: true,
-		isShowProgressbar: true
+		containerNgClass: "rowData.isTaskItem ? 'flex align-items-center gap-2' : ''",
+		textNgClass: "rowData.isTaskItem ? 'task-item-wrapper' : ''"
 	},
 	lending: {
 		containerNgClass: "rowData['lending'] === 'HPP' ? 'px-2 py-0 m-0 bg-orange-100 border-round-2xl inline-block' : rowData['lending'] === 'BTL' ? 'px-2 py-0 m-0 bg-blue-100 border-round-2xl inline-block' : ''",
@@ -2290,7 +2311,7 @@ var columnStyles = {
 	}
 };
 var rowStyles = {
-	ngClass: "rowData['taskCompletionPercent'] === 100 ? 'border-row-wrapper border-green-400 bg-green-50 border-round-xl column-style-wrapper' : (rowData['taskCompletionPercent'] === 0 ? 'border-row-wrapper border-gray-200 bg-gray-50 border-round-xl column-style-wrapper opacity-50' : 'border-row-wrapper border-orange-300 bg-orange-50 border-round-xl column-style-wrapper')"
+	ngClass: "(rowData['taskCompletionPercent'] === 100 ? 'border-row-wrapper border-green-400 bg-green-50 border-round-xl column-style-wrapper' : (rowData['taskCompletionPercent'] === 0 ? 'border-row-wrapper border-gray-200 bg-gray-50 border-round-xl column-style-wrapper opacity-50' : 'border-row-wrapper border-orange-300 bg-orange-50 border-round-xl column-style-wrapper')) + (Array.isArray(rowData['applicants']) && rowData['applicants'].length >= 4 ? ' column-style-wrapper-tall' : '')"
 };
 var tableStyles = {
 	ngClass: "border-separate border-spacing-y-4 border-0"
@@ -2310,9 +2331,13 @@ class QueueFilterDropdownService {
         applicationType: [],
         purchaseType: [],
         taskStatus: [],
+        category: [],
+        epc: [],
+        vulnerableCustomer: null,
         financeMin: null,
         financeMax: null,
-        pendingDays: null
+        pendingDays: null,
+        assignedUnderwriter: []
     };
     setRiskRating(rating) {
         const arr = this.filter.riskRating;
@@ -2346,6 +2371,25 @@ class QueueFilterDropdownService {
         else
             arr.push(status);
     }
+    setCategory(category) {
+        const arr = this.filter.category;
+        const idx = arr.indexOf(category);
+        if (idx > -1)
+            arr.splice(idx, 1);
+        else
+            arr.push(category);
+    }
+    setEpc(epc) {
+        const arr = this.filter.epc;
+        const idx = arr.indexOf(epc);
+        if (idx > -1)
+            arr.splice(idx, 1);
+        else
+            arr.push(epc);
+    }
+    setVulnerableCustomer(value) {
+        this.filter.vulnerableCustomer = value;
+    }
     setFinanceMin(min) {
         this.filter.financeMin = min;
     }
@@ -2355,15 +2399,22 @@ class QueueFilterDropdownService {
     setPendingDays(days) {
         this.filter.pendingDays = days;
     }
+    setAssignedUnderwriter(ids) {
+        this.filter.assignedUnderwriter = Array.isArray(ids) ? ids : [];
+    }
     setAllFilters(filters) {
         this.filter = {
             riskRating: [...(filters.riskRating || [])],
             applicationType: [...(filters.applicationType || [])],
             purchaseType: [...(filters.purchaseType || [])],
             taskStatus: [...(filters.taskStatus || [])],
+            category: [...(filters.category || [])],
+            epc: [...(filters.epc || [])],
+            vulnerableCustomer: filters.vulnerableCustomer,
             financeMin: filters.financeMin,
             financeMax: filters.financeMax,
-            pendingDays: filters.pendingDays
+            pendingDays: filters.pendingDays,
+            assignedUnderwriter: [...(filters.assignedUnderwriter || [])]
         };
     }
     getFilters() {
@@ -2372,9 +2423,13 @@ class QueueFilterDropdownService {
             applicationType: [...this.filter.applicationType],
             purchaseType: [...this.filter.purchaseType],
             taskStatus: [...this.filter.taskStatus],
+            category: [...this.filter.category],
+            epc: [...this.filter.epc],
+            vulnerableCustomer: this.filter.vulnerableCustomer,
             financeMin: this.filter.financeMin,
             financeMax: this.filter.financeMax,
-            pendingDays: this.filter.pendingDays
+            pendingDays: this.filter.pendingDays,
+            assignedUnderwriter: [...this.filter.assignedUnderwriter]
         };
     }
     hasFilters() {
@@ -2382,9 +2437,13 @@ class QueueFilterDropdownService {
             this.filter.applicationType.length > 0 ||
             this.filter.purchaseType.length > 0 ||
             this.filter.taskStatus.length > 0 ||
+            this.filter.category.length > 0 ||
+            this.filter.epc.length > 0 ||
+            this.filter.vulnerableCustomer !== null ||
             this.filter.financeMin !== null ||
             this.filter.financeMax !== null ||
-            this.filter.pendingDays !== null);
+            this.filter.pendingDays !== null ||
+            this.filter.assignedUnderwriter.length > 0);
     }
     getFilterCount() {
         let count = 0;
@@ -2392,12 +2451,17 @@ class QueueFilterDropdownService {
         count += this.filter.applicationType.length;
         count += this.filter.purchaseType.length;
         count += this.filter.taskStatus.length;
+        count += this.filter.category.length;
+        count += this.filter.epc.length;
+        if (this.filter.vulnerableCustomer !== null)
+            count++;
         if (this.filter.financeMin !== null)
             count++;
         if (this.filter.financeMax !== null)
             count++;
         if (this.filter.pendingDays !== null)
             count++;
+        count += this.filter.assignedUnderwriter.length;
         return count;
     }
     clearAll() {
@@ -2406,9 +2470,13 @@ class QueueFilterDropdownService {
             applicationType: [],
             purchaseType: [],
             taskStatus: [],
+            category: [],
+            epc: [],
+            vulnerableCustomer: null,
             financeMin: null,
             financeMax: null,
-            pendingDays: null
+            pendingDays: null,
+            assignedUnderwriter: []
         };
     }
     /**
@@ -2430,6 +2498,15 @@ class QueueFilterDropdownService {
         if (filters.purchaseType && filters.purchaseType.length > 0) {
             filterParams['purchaseType'] = filters.purchaseType.join(',');
         }
+        if (filters.category && filters.category.length > 0) {
+            filterParams['category'] = filters.category.join(',');
+        }
+        if (filters.epc && filters.epc.length > 0) {
+            filterParams['epc'] = filters.epc.join(',');
+        }
+        if (filters.vulnerableCustomer !== null && filters.vulnerableCustomer !== undefined) {
+            filterParams['vulnerable'] = String(filters.vulnerableCustomer);
+        }
         // Add mapping for taskStatus UI values to API values
         const taskStatusMap = {
             'Not Started': 'notStarted', 'In-progress': 'inProgress', 'Completed': 'completed'
@@ -2446,6 +2523,9 @@ class QueueFilterDropdownService {
         if (filters.pendingDays !== null && filters.pendingDays !== undefined) {
             filterParams['pendingDays'] = filters.pendingDays.toString();
         }
+        if (filters.assignedUnderwriter && filters.assignedUnderwriter.length > 0) {
+            filterParams['underwriterId'] = filters.assignedUnderwriter.join(',');
+        }
         return new URLSearchParams(filterParams).toString();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -2649,6 +2729,7 @@ class TableSecondaryComponent {
     isUwLogin = false;
     allQueueList;
     selectedQueueName;
+    columnStyles = columnStyles;
     constructor(_router, service, sessionService, baseQuery, baseStore, queueBusinessService, queueQuery) {
         this._router = _router;
         this.service = service;
@@ -2911,11 +2992,22 @@ class TableSecondaryComponent {
     isArray(val) {
         return Array.isArray(val);
     }
+    /**
+     * Utility: Check if value is task items array (for template use)
+     * @param {any} val - The value to check if it is a task items array.
+     * @returns {boolean} True if the value is a task items array, otherwise false.
+     */
+    isTaskItemsArray(val) {
+        return Array.isArray(val) && val.length > 0 && val[0]?.type && val[0]?.count !== undefined;
+    }
     shouldShowValue(col, rowData) {
         const value = rowData[col.name];
         if (Array.isArray(value) && value.length && value[0]?.initials) {
             return false;
         }
+        if (this.isTaskItemsArray(value)) {
+            return false;
+        }
         return typeof value === 'string' || typeof value === 'number';
     }
     /**
@@ -2953,12 +3045,52 @@ class TableSecondaryComponent {
             return null;
         }
     }
+    getTypeContainerClass(typeValue) {
+        const expr = this.columnStyles?.['lending']?.containerNgClass;
+        return expr ? this.evaluateNgClass(expr, { lending: typeValue }) : '';
+    }
+    getTypeTextClass(typeValue) {
+        const expr = this.columnStyles?.['lending']?.textNgClass;
+        return expr ? this.evaluateNgClass(expr, { lending: typeValue }) : '';
+    }
+    getRiskContainerClass(riskValue) {
+        const expr = this.columnStyles?.['riskRating']?.containerNgClass;
+        return expr ? this.evaluateNgClass(expr, { riskRating: riskValue }) : '';
+    }
+    getRiskTextClass(riskValue) {
+        const expr = this.columnStyles?.['riskRating']?.textNgClass;
+        return expr ? this.evaluateNgClass(expr, { riskRating: riskValue }) : '';
+    }
+    getColumnAlignment(columnName) {
+        if (columnName === 'applicants' || columnName === 'brokerName' || columnName === 'appId' || columnName === 'finance' || columnName === 'securityAddress') {
+            return 'justify-content-start';
+        }
+        return 'justify-content-center';
+    }
+    getSwitchCase(rowData, col) {
+        if (this.isTaskItemsArray(rowData[col.name])) {
+            return 'taskItems';
+        }
+        if (col.name === 'finance' && rowData[col.name]?.isFinance) {
+            return 'finance';
+        }
+        if (col.name === 'appId' && typeof rowData[col.name] === 'object') {
+            return 'appId';
+        }
+        if (col.isTwoLine) {
+            return 'twoLine';
+        }
+        if (col.isShowProgressbar) {
+            return 'progress';
+        }
+        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", 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: "  <p-table\r\n  *ngIf=\"table && table.headers\"\r\n    #dt2\r\n    [lazy]=\"true\"\r\n    (onSort)=\"onSort($event)\"\r\n    [paginator]=\"false\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [columns]=\"table.headers\"\r\n    class=\"table-secondary-container\"\r\n    [value]=\"table.records\"\r\n    [sortField]=\"sortField\"\r\n    [sortOrder]=\"sortOrder\"\r\n    [dataKey]=\"table.dataKey\"\r\n    [selectionMode]=\"selectionMode\"\r\n    [(selection)]=\"selection\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n  >\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n      <tr *ngIf=\"table.headers.length > 0\">\r\n        <th\r\n          *ngFor=\"let col of table.headers; let i = index\"\r\n          class=\"table-header-wrapper bg-white\"\r\n          [pSortableColumn]=\"col.name\"\r\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n          style=\"min-width: 100px\"\r\n        >      \r\n          <h4\r\n          [ngClass]=\"[\r\n            col.class || '', \r\n            i === 0 ? 'justify-content-start' : 'justify-content-center text-center'\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\r\n            {{ col.displayName || col.name }}\r\n            @if(table.isSortingAllow && col.isShowSortIcon){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \r\n      class=\"table-header-wrapper text-center table-action-title\" style=\"width: 6rem;\">\r\n        <h4 class=\"flex align-items-center justify-content-center gap-2 table-header-title capitalize font-semibold m-0\">\r\n          Select <span *ngIf=\"selection?.length && !isSelectAll\">\r\n            ({{ selection.length }})\r\n          </span>\r\n          <p-checkbox\r\n            [binary]=\"true\"\r\n            [ngModel]=\"isAllCurrentPageSelected\"\r\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\r\n        </h4>\r\n        </th>\r\n  \r\n        <th\r\n          *ngIf=\"showActions\"\r\n          class=\"table-action-title table-header-wrapper\"\r\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n        >\r\n        </th>\r\n  \r\n      </tr>\r\n    </ng-template>\r\n  \r\n    <!-- Body -->\r\n<ng-template pTemplate=\"body\" let-rowData>\r\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\r\n    <!-- one TD per column -->\r\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\r\n        (click)=\"handleRowClick(rowData)\"\r\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\r\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\r\n        [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n      \r\n        <div class=\"flex align-items-center h-full\" [ngClass]=\"j === 0 ? 'justify-content-start' : 'justify-content-center'\">\r\n          <!-- your existing inner column wrapper -->\r\n            <div class=\"row-wrapprt flex align-items-center justify-content-center\">\r\n              <ng-container [ngSwitch]=\"true\">\r\n                <!--Render two lines with dynamic classes for any two-line column -->\r\n                <ng-container *ngSwitchCase=\"col.isTwoLine\">\r\n                  <div class=\"w-full text-center\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                    <div class=\"row-multi-line-wrapper\" [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.addressLine1 }}\r\n                    </div>\r\n                    <div class=\"row-multi-line-wrapper\" [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.postCode }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                <!-- progress bar -->\r\n                <ng-container *ngSwitchCase=\"col.isShowProgressbar\">\r\n                  <div class=\"progress-wrapper\">\r\n                          <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\" [color]=\"getProgressColor(rowData['taskCompletionPercent'])\" [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\r\n                            [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\r\n                            [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\" />\r\n                          <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">{{rowData[col.name]}}</div>\r\n                        </div>\r\n                \r\n                </ng-container>\r\n                      <!-- Default cell rendering for other columns -->\r\n                <ng-container *ngSwitchDefault>\r\n                  <div\r\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\r\n                    [ngClass]=\"[\r\n                      getRowClass(col, rowData),\r\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\r\n                    ]\"\r\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                  >\r\n                    <i\r\n                     *ngIf=\"rowData[col.name]?.icon\"\r\n                       class=\"pi pr-2\"\r\n                       [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n                       ></i>\r\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                    </div>\r\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\r\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #bubbleOrFallback>\r\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials\">\r\n                        <div class=\"flex items-center\">\r\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n                            <div\r\n                              [ngClass]=\"[\r\n                                col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, bubble) : '',\r\n                                'border-2 border-white',\r\n                                bubble.isSeperateBubble && rowData[col.name].length > 1 ? 'mr-3' : (!bubble.isSeperateBubble && i !== 0 ? 'bubble-seperator-wrapper' : '')\r\n                              ]\"\r\n                              [ngStyle]=\"col.containerNgStyleExpression ? evaluateNgStyle(col.containerNgStyleExpression, bubble) : null\"\r\n                            >\r\n                              <span [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">{{ bubble.initials }}</span>\r\n                            </div>\r\n                          </ng-container>\r\n                        </div>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\r\n                          {{ rowData[col.name] }}\r\n                        </p>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                    <div\r\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n                      class=\"text-black-500 text-sm mt-1\"\r\n                      style=\"font-weight: 600;\"\r\n                    >\r\n                      {{ rowData[table.descriptionColumnName] }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n        </div>\r\n        </div>\r\n    </td>\r\n    <!-- Checkbox column -->\r\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-center p-0 border-none bg-none table-body-row-wrapper\"\r\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-center\"\r\n       [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n      </div>\r\n    </td>\r\n\r\n    <!-- Actions column -->\r\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n        <p-button\r\n          icon=\"pi pi-trash\"\r\n          (click)=\"deleteRow($event, rowData)\"\r\n          class=\"delete-icon-wrapper mr-3\"\r\n          [disabled]=\"!enableSelection\"\r\n        ></p-button>\r\n      </div>\r\n    </td>\r\n  </tr>\r\n</ng-template>\r\n  \r\n    <!-- Empty Message -->\r\n    <ng-template pTemplate=\"emptymessage\">\r\n      <tr>\r\n        <td\r\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n          class=\"text-center text-color font-semibold p-4\"\r\n        >\r\n           {{ noRecordsMessage }}\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n  <div class=\"pagination-text text-color\">\r\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n  </div>\r\n\r\n  <p-paginator\r\n    #paginator\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    (onPageChange)=\"handleLoadRecords($event)\"\r\n  ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper,.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;box-sizing:border-box}.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)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.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-row-wrapper:first-child .border-row-wrapper{border-width:3px 0 3px 3px}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-width:3px 0}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:last-child .border-row-wrapper{border-width:3px 3px 3px 0}::ng-deep .table-row-wrapper:hover .table-select-row-wrapper .border-row-wrapper{border-width:3px 3px 3px 0}.progress-wrapper{position:relative;width:40px;height:40px}.progress-wrapper round-progress{width:40px!important;height:40px!important}.progress-title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.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 .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}\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: "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"] }] });
+    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", 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: "  <p-table\r\n  *ngIf=\"table && table.headers\"\r\n    #dt2\r\n    [lazy]=\"true\"\r\n    (onSort)=\"onSort($event)\"\r\n    [paginator]=\"false\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [columns]=\"table.headers\"\r\n    class=\"table-secondary-container\"\r\n    [value]=\"table.records\"\r\n    [sortField]=\"sortField\"\r\n    [sortOrder]=\"sortOrder\"\r\n    [dataKey]=\"table.dataKey\"\r\n    [selectionMode]=\"selectionMode\"\r\n    [(selection)]=\"selection\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n  >\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n      <tr *ngIf=\"table.headers.length > 0\">\r\n        <th\r\n          *ngFor=\"let col of table.headers; let i = index\"\r\n          class=\"table-header-wrapper bg-white\"\r\n          [pSortableColumn]=\"col.name\"\r\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\r\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n          style=\"min-width: 100px\"\r\n        >      \r\n          <h4\r\n          [ngClass]=\"[\r\n            col.class || '', \r\n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\r\n            {{ col.displayName || col.name }}\r\n            @if(table.isSortingAllow && col.isShowSortIcon){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \r\n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\r\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\r\n          <span *ngIf=\"selection?.length && !isSelectAll\">\r\n            ({{ selection.length }})\r\n          </span>\r\n          <p-checkbox\r\n            [binary]=\"true\"\r\n            [ngModel]=\"isAllCurrentPageSelected\"\r\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\r\n        </h4>\r\n        </th>\r\n  \r\n        <th\r\n          *ngIf=\"showActions\"\r\n          class=\"table-action-title table-header-wrapper\"\r\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n        >\r\n        </th>\r\n  \r\n      </tr>\r\n    </ng-template>\r\n  \r\n    <!-- Body -->\r\n<ng-template pTemplate=\"body\" let-rowData>\r\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\r\n    <!-- one TD per column -->\r\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\r\n        (click)=\"handleRowClick(rowData)\"\r\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\r\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\r\n        [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n      \r\n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n          <!-- your existing inner column wrapper -->\r\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\r\n                <!-- task items - check this first -->\r\n                <ng-container *ngSwitchCase=\"'taskItems'\">\r\n                  <div class=\"col-tasks\">\r\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\r\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : 'task-success'\">\r\n                        <span>{{ taskItem.type }}</span>\r\n                        <span class=\"task-badge\">{{ taskItem.count }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n              \r\n                <!-- Finance amount with special styling -->\r\n                <ng-container *ngSwitchCase=\"'finance'\">\r\n                  <div class=\"text-black font-semibold\">\r\n                    {{ rowData[col.name].amount }}\r\n                  </div>\r\n                </ng-container>\r\n              \r\n                <!-- App ID with type and risk tags -->\r\n                <ng-container *ngSwitchCase=\"'appId'\">\r\n                  <div class=\"w-full text-left\">\r\n                    <div class=\"font-semibold\">{{ rowData[col.name].appId }}</div>\r\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\r\n                      <!-- Type chip using style config (lending) -->\r\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\r\n                          {{ rowData[col.name].type }}\r\n                        </p>\r\n                      </div>\r\n                      <!-- Risk chip using style config (riskRating) -->\r\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\r\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\r\n                          {{ rowData[col.name].risk }}\r\n                        </p>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                <!--Render two lines with dynamic classes for any two-line column -->\r\n                <ng-container *ngSwitchCase=\"'twoLine'\">\r\n                  <div class=\"w-full\" [ngClass]=\"[\r\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\r\n                      col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\r\n                    ]\">\r\n                    <div class=\"row-multi-line-wrapper\"\r\n                      [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.addressLine1 }}\r\n                    </div>\r\n                    <div class=\"row-multi-line-wrapper font-bold\"\r\n                      [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.postCode }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                <!-- progress bar -->\r\n                <ng-container *ngSwitchCase=\"'progress'\">\r\n                  <div class=\"progress-wrapper\">\r\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\r\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\r\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\r\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\r\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\r\n                    </round-progress>\r\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\r\n                      {{ rowData[col.name] }}\r\n                    </div>\r\n                  </div>\r\n              \r\n                </ng-container>\r\n                <!-- Default cell rendering for other columns -->\r\n                <ng-container *ngSwitchDefault>\r\n                  <!-- Don't render default content if we have task items -->\r\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\r\n                  <div\r\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\r\n                    [ngClass]=\"[\r\n                      getRowClass(col, rowData),\r\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\r\n                    ]\"\r\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                  >\r\n                    <i\r\n                     *ngIf=\"rowData[col.name]?.icon\"\r\n                       class=\"pi pr-2\"\r\n                       [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n                       ></i>\r\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                    </div>\r\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\r\n                      <div class=\"w-full text-left\">\r\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                      </div>\r\n                    </ng-container>\r\n                    <ng-template #bubbleOrFallback>\r\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\r\n                        <div class=\"flex flex-column gap-1\">\r\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n                            <div\r\n                              *ngIf=\"bubble.isCustomerVulnerable\"\r\n                              class=\"px-2 py-1 border-round-2xl inline-block bg-red-600 text-white\"\r\n                            >\r\n                              {{ bubble.fullName }}\r\n                            </div>\r\n                            <div\r\n                              *ngIf=\"!bubble.isCustomerVulnerable\"\r\n                              class=\"text-gray-700\"\r\n                            >\r\n                              {{ bubble.fullName }}\r\n                            </div>\r\n                          </ng-container>\r\n                        </div>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\r\n                          {{ rowData[col.name] }}\r\n                        </p>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                    <div\r\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n                      class=\"text-black-500 text-sm mt-1\"\r\n                      style=\"font-weight: 600;\"\r\n                    >\r\n                      {{ rowData[table.descriptionColumnName] }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n              </ng-container>\r\n            </div>\r\n        </div>\r\n        </div>\r\n    </td>\r\n    <!-- Checkbox column -->\r\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\r\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\r\n       [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n      </div>\r\n    </td>\r\n\r\n    <!-- Actions column -->\r\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n        <p-button\r\n          icon=\"pi pi-trash\"\r\n          (click)=\"deleteRow($event, rowData)\"\r\n          class=\"delete-icon-wrapper mr-3\"\r\n          [disabled]=\"!enableSelection\"\r\n        ></p-button>\r\n      </div>\r\n    </td>\r\n  </tr>\r\n</ng-template>\r\n  \r\n    <!-- Empty Message -->\r\n    <ng-template pTemplate=\"emptymessage\">\r\n      <tr>\r\n        <td\r\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n          class=\"text-center text-color font-semibold p-4\"\r\n        >\r\n           {{ noRecordsMessage }}\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n  <div class=\"pagination-text text-color\">\r\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n  </div>\r\n\r\n  <p-paginator\r\n    #paginator\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    (onPageChange)=\"handleLoadRecords($event)\"\r\n  ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper,.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;box-sizing:border-box}.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)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.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-row-wrapper:first-child .border-row-wrapper{border-width:3px 0 3px 3px}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-width:3px 0}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:last-child .border-row-wrapper{border-width:3px 3px 3px 0}::ng-deep .table-row-wrapper:hover .table-select-row-wrapper .border-row-wrapper{border-width:3px 3px 3px 0}.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 .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.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-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: "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"] }] });
 }
 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, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule, RoundProgressModule, CheckboxModule], template: "  <p-table\r\n  *ngIf=\"table && table.headers\"\r\n    #dt2\r\n    [lazy]=\"true\"\r\n    (onSort)=\"onSort($event)\"\r\n    [paginator]=\"false\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [columns]=\"table.headers\"\r\n    class=\"table-secondary-container\"\r\n    [value]=\"table.records\"\r\n    [sortField]=\"sortField\"\r\n    [sortOrder]=\"sortOrder\"\r\n    [dataKey]=\"table.dataKey\"\r\n    [selectionMode]=\"selectionMode\"\r\n    [(selection)]=\"selection\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n  >\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n      <tr *ngIf=\"table.headers.length > 0\">\r\n        <th\r\n          *ngFor=\"let col of table.headers; let i = index\"\r\n          class=\"table-header-wrapper bg-white\"\r\n          [pSortableColumn]=\"col.name\"\r\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n          style=\"min-width: 100px\"\r\n        >      \r\n          <h4\r\n          [ngClass]=\"[\r\n            col.class || '', \r\n            i === 0 ? 'justify-content-start' : 'justify-content-center text-center'\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\r\n            {{ col.displayName || col.name }}\r\n            @if(table.isSortingAllow && col.isShowSortIcon){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \r\n      class=\"table-header-wrapper text-center table-action-title\" style=\"width: 6rem;\">\r\n        <h4 class=\"flex align-items-center justify-content-center gap-2 table-header-title capitalize font-semibold m-0\">\r\n          Select <span *ngIf=\"selection?.length && !isSelectAll\">\r\n            ({{ selection.length }})\r\n          </span>\r\n          <p-checkbox\r\n            [binary]=\"true\"\r\n            [ngModel]=\"isAllCurrentPageSelected\"\r\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\r\n        </h4>\r\n        </th>\r\n  \r\n        <th\r\n          *ngIf=\"showActions\"\r\n          class=\"table-action-title table-header-wrapper\"\r\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n        >\r\n        </th>\r\n  \r\n      </tr>\r\n    </ng-template>\r\n  \r\n    <!-- Body -->\r\n<ng-template pTemplate=\"body\" let-rowData>\r\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\r\n    <!-- one TD per column -->\r\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\r\n        (click)=\"handleRowClick(rowData)\"\r\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\r\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\r\n        [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n      \r\n        <div class=\"flex align-items-center h-full\" [ngClass]=\"j === 0 ? 'justify-content-start' : 'justify-content-center'\">\r\n          <!-- your existing inner column wrapper -->\r\n            <div class=\"row-wrapprt flex align-items-center justify-content-center\">\r\n              <ng-container [ngSwitch]=\"true\">\r\n                <!--Render two lines with dynamic classes for any two-line column -->\r\n                <ng-container *ngSwitchCase=\"col.isTwoLine\">\r\n                  <div class=\"w-full text-center\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                    <div class=\"row-multi-line-wrapper\" [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.addressLine1 }}\r\n                    </div>\r\n                    <div class=\"row-multi-line-wrapper\" [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.postCode }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                <!-- progress bar -->\r\n                <ng-container *ngSwitchCase=\"col.isShowProgressbar\">\r\n                  <div class=\"progress-wrapper\">\r\n                          <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\" [color]=\"getProgressColor(rowData['taskCompletionPercent'])\" [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\r\n                            [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\r\n                            [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\" />\r\n                          <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">{{rowData[col.name]}}</div>\r\n                        </div>\r\n                \r\n                </ng-container>\r\n                      <!-- Default cell rendering for other columns -->\r\n                <ng-container *ngSwitchDefault>\r\n                  <div\r\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\r\n                    [ngClass]=\"[\r\n                      getRowClass(col, rowData),\r\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\r\n                    ]\"\r\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                  >\r\n                    <i\r\n                     *ngIf=\"rowData[col.name]?.icon\"\r\n                       class=\"pi pr-2\"\r\n                       [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n                       ></i>\r\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                    </div>\r\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\r\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                    </ng-container>\r\n                    <ng-template #bubbleOrFallback>\r\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials\">\r\n                        <div class=\"flex items-center\">\r\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n                            <div\r\n                              [ngClass]=\"[\r\n                                col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, bubble) : '',\r\n                                'border-2 border-white',\r\n                                bubble.isSeperateBubble && rowData[col.name].length > 1 ? 'mr-3' : (!bubble.isSeperateBubble && i !== 0 ? 'bubble-seperator-wrapper' : '')\r\n                              ]\"\r\n                              [ngStyle]=\"col.containerNgStyleExpression ? evaluateNgStyle(col.containerNgStyleExpression, bubble) : null\"\r\n                            >\r\n                              <span [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">{{ bubble.initials }}</span>\r\n                            </div>\r\n                          </ng-container>\r\n                        </div>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\r\n                          {{ rowData[col.name] }}\r\n                        </p>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                    <div\r\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n                      class=\"text-black-500 text-sm mt-1\"\r\n                      style=\"font-weight: 600;\"\r\n                    >\r\n                      {{ rowData[table.descriptionColumnName] }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n        </div>\r\n        </div>\r\n    </td>\r\n    <!-- Checkbox column -->\r\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-center p-0 border-none bg-none table-body-row-wrapper\"\r\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-center\"\r\n       [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n      </div>\r\n    </td>\r\n\r\n    <!-- Actions column -->\r\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n        <p-button\r\n          icon=\"pi pi-trash\"\r\n          (click)=\"deleteRow($event, rowData)\"\r\n          class=\"delete-icon-wrapper mr-3\"\r\n          [disabled]=\"!enableSelection\"\r\n        ></p-button>\r\n      </div>\r\n    </td>\r\n  </tr>\r\n</ng-template>\r\n  \r\n    <!-- Empty Message -->\r\n    <ng-template pTemplate=\"emptymessage\">\r\n      <tr>\r\n        <td\r\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n          class=\"text-center text-color font-semibold p-4\"\r\n        >\r\n           {{ noRecordsMessage }}\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n  <div class=\"pagination-text text-color\">\r\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n  </div>\r\n\r\n  <p-paginator\r\n    #paginator\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    (onPageChange)=\"handleLoadRecords($event)\"\r\n  ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper,.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;box-sizing:border-box}.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)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.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-row-wrapper:first-child .border-row-wrapper{border-width:3px 0 3px 3px}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-width:3px 0}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:last-child .border-row-wrapper{border-width:3px 3px 3px 0}::ng-deep .table-row-wrapper:hover .table-select-row-wrapper .border-row-wrapper{border-width:3px 3px 3px 0}.progress-wrapper{position:relative;width:40px;height:40px}.progress-wrapper round-progress{width:40px!important;height:40px!important}.progress-title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.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 .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}\n"] }]
+            args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule, RoundProgressModule, CheckboxModule], template: "  <p-table\r\n  *ngIf=\"table && table.headers\"\r\n    #dt2\r\n    [lazy]=\"true\"\r\n    (onSort)=\"onSort($event)\"\r\n    [paginator]=\"false\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [columns]=\"table.headers\"\r\n    class=\"table-secondary-container\"\r\n    [value]=\"table.records\"\r\n    [sortField]=\"sortField\"\r\n    [sortOrder]=\"sortOrder\"\r\n    [dataKey]=\"table.dataKey\"\r\n    [selectionMode]=\"selectionMode\"\r\n    [(selection)]=\"selection\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n  >\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n      <tr *ngIf=\"table.headers.length > 0\">\r\n        <th\r\n          *ngFor=\"let col of table.headers; let i = index\"\r\n          class=\"table-header-wrapper bg-white\"\r\n          [pSortableColumn]=\"col.name\"\r\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\r\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n          style=\"min-width: 100px\"\r\n        >      \r\n          <h4\r\n          [ngClass]=\"[\r\n            col.class || '', \r\n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\r\n            {{ col.displayName || col.name }}\r\n            @if(table.isSortingAllow && col.isShowSortIcon){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \r\n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\r\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\r\n          <span *ngIf=\"selection?.length && !isSelectAll\">\r\n            ({{ selection.length }})\r\n          </span>\r\n          <p-checkbox\r\n            [binary]=\"true\"\r\n            [ngModel]=\"isAllCurrentPageSelected\"\r\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\r\n        </h4>\r\n        </th>\r\n  \r\n        <th\r\n          *ngIf=\"showActions\"\r\n          class=\"table-action-title table-header-wrapper\"\r\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n        >\r\n        </th>\r\n  \r\n      </tr>\r\n    </ng-template>\r\n  \r\n    <!-- Body -->\r\n<ng-template pTemplate=\"body\" let-rowData>\r\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\r\n    <!-- one TD per column -->\r\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\r\n        (click)=\"handleRowClick(rowData)\"\r\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\r\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\r\n        [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n      \r\n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n          <!-- your existing inner column wrapper -->\r\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\r\n                <!-- task items - check this first -->\r\n                <ng-container *ngSwitchCase=\"'taskItems'\">\r\n                  <div class=\"col-tasks\">\r\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\r\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : 'task-success'\">\r\n                        <span>{{ taskItem.type }}</span>\r\n                        <span class=\"task-badge\">{{ taskItem.count }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n              \r\n                <!-- Finance amount with special styling -->\r\n                <ng-container *ngSwitchCase=\"'finance'\">\r\n                  <div class=\"text-black font-semibold\">\r\n                    {{ rowData[col.name].amount }}\r\n                  </div>\r\n                </ng-container>\r\n              \r\n                <!-- App ID with type and risk tags -->\r\n                <ng-container *ngSwitchCase=\"'appId'\">\r\n                  <div class=\"w-full text-left\">\r\n                    <div class=\"font-semibold\">{{ rowData[col.name].appId }}</div>\r\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\r\n                      <!-- Type chip using style config (lending) -->\r\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\r\n                          {{ rowData[col.name].type }}\r\n                        </p>\r\n                      </div>\r\n                      <!-- Risk chip using style config (riskRating) -->\r\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\r\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\r\n                          {{ rowData[col.name].risk }}\r\n                        </p>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                <!--Render two lines with dynamic classes for any two-line column -->\r\n                <ng-container *ngSwitchCase=\"'twoLine'\">\r\n                  <div class=\"w-full\" [ngClass]=\"[\r\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\r\n                      col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\r\n                    ]\">\r\n                    <div class=\"row-multi-line-wrapper\"\r\n                      [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.addressLine1 }}\r\n                    </div>\r\n                    <div class=\"row-multi-line-wrapper font-bold\"\r\n                      [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.postCode }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                <!-- progress bar -->\r\n                <ng-container *ngSwitchCase=\"'progress'\">\r\n                  <div class=\"progress-wrapper\">\r\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\r\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\r\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\r\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\r\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\r\n                    </round-progress>\r\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\r\n                      {{ rowData[col.name] }}\r\n                    </div>\r\n                  </div>\r\n              \r\n                </ng-container>\r\n                <!-- Default cell rendering for other columns -->\r\n                <ng-container *ngSwitchDefault>\r\n                  <!-- Don't render default content if we have task items -->\r\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\r\n                  <div\r\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\r\n                    [ngClass]=\"[\r\n                      getRowClass(col, rowData),\r\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\r\n                    ]\"\r\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                  >\r\n                    <i\r\n                     *ngIf=\"rowData[col.name]?.icon\"\r\n                       class=\"pi pr-2\"\r\n                       [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n                       ></i>\r\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                    </div>\r\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\r\n                      <div class=\"w-full text-left\">\r\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                      </div>\r\n                    </ng-container>\r\n                    <ng-template #bubbleOrFallback>\r\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\r\n                        <div class=\"flex flex-column gap-1\">\r\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n                            <div\r\n                              *ngIf=\"bubble.isCustomerVulnerable\"\r\n                              class=\"px-2 py-1 border-round-2xl inline-block bg-red-600 text-white\"\r\n                            >\r\n                              {{ bubble.fullName }}\r\n                            </div>\r\n                            <div\r\n                              *ngIf=\"!bubble.isCustomerVulnerable\"\r\n                              class=\"text-gray-700\"\r\n                            >\r\n                              {{ bubble.fullName }}\r\n                            </div>\r\n                          </ng-container>\r\n                        </div>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\r\n                          {{ rowData[col.name] }}\r\n                        </p>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                    <div\r\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n                      class=\"text-black-500 text-sm mt-1\"\r\n                      style=\"font-weight: 600;\"\r\n                    >\r\n                      {{ rowData[table.descriptionColumnName] }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n              </ng-container>\r\n            </div>\r\n        </div>\r\n        </div>\r\n    </td>\r\n    <!-- Checkbox column -->\r\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\r\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\r\n       [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n      </div>\r\n    </td>\r\n\r\n    <!-- Actions column -->\r\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n        <p-button\r\n          icon=\"pi pi-trash\"\r\n          (click)=\"deleteRow($event, rowData)\"\r\n          class=\"delete-icon-wrapper mr-3\"\r\n          [disabled]=\"!enableSelection\"\r\n        ></p-button>\r\n      </div>\r\n    </td>\r\n  </tr>\r\n</ng-template>\r\n  \r\n    <!-- Empty Message -->\r\n    <ng-template pTemplate=\"emptymessage\">\r\n      <tr>\r\n        <td\r\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n          class=\"text-center text-color font-semibold p-4\"\r\n        >\r\n           {{ noRecordsMessage }}\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n  <div class=\"pagination-text text-color\">\r\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n  </div>\r\n\r\n  <p-paginator\r\n    #paginator\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    (onPageChange)=\"handleLoadRecords($event)\"\r\n  ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper,.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;box-sizing:border-box}.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)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.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-row-wrapper:first-child .border-row-wrapper{border-width:3px 0 3px 3px}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-width:3px 0}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:last-child .border-row-wrapper{border-width:3px 3px 3px 0}::ng-deep .table-row-wrapper:hover .table-select-row-wrapper .border-row-wrapper{border-width:3px 3px 3px 0}.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 .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.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-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: [{
@@ -6072,20 +6204,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  */
 class QueueRecordTableBuilderService extends TableBuilder {
     columnStyles = columnStyles;
-    getInitial(char) {
-        return char ? char.charAt(0).toUpperCase() : '';
-    }
     buildSecondaryTable(records, headerWidths, editPermission, deletePermission) {
         const table = new TableSecondaryModel();
         table.headers = [];
         table.records = [];
         if (records.length === 0) {
-            console.log('No records to build table from');
             return table;
         }
         // Get the first record to determine available fields
         const firstRecord = records[0];
-        const excludedFields = ['_id', 'companyName', 'applicationType', 'assignedTo', 'taskCompletionPercent']; // Fields to exclude from table columns
+        const excludedFields = [
+            SHARED._ID,
+            SHARED.COMPANY_NAME,
+            SHARED.APPLICATION_TYPE,
+            SHARED.ASSIGNED_TO,
+            SHARED.TASK_COMPLETION_PERCENT,
+            SHARED.RISK_RATING,
+            SHARED.LENDING
+        ]; // Fields to exclude from table columns
         // Get all fields from the first record, excluding specified fields
         const availableFields = Object.keys(firstRecord).filter(field => !excludedFields.includes(field));
         const columnWidths = QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST;
@@ -6108,39 +6244,92 @@ class QueueRecordTableBuilderService extends TableBuilder {
                 let cellValue = value;
                 // Format specific fields
                 if (field === SHARED.APPLICANTS && Array.isArray(value)) {
-                    // Company initials as first bubble (max 2 initials)
-                    const companyInitials = (apiRecord.companyName || '')
-                        .split(' ')
-                        .filter(Boolean)
-                        .slice(0, 2)
-                        .map((word) => this.getInitial(word))
-                        .join('');
+                    const companyName = apiRecord.companyName || '';
                     const bubbles = [];
-                    if (companyInitials) {
+                    // If we have both company and applicants, show only company name
+                    if (companyName && value.length > 0) {
+                        const truncatedName = companyName.length > 15 ? companyName.substring(0, 12) + '...' : companyName;
                         bubbles.push({
-                            initials: companyInitials,
-                            isSeperateBubble: true
+                            fullName: truncatedName,
+                            isCompany: true
+                        });
+                    }
+                    else if (companyName) {
+                        // Only company, no applicants
+                        const truncatedName = companyName.length > 15 ? companyName.substring(0, 12) + '...' : companyName;
+                        bubbles.push({
+                            fullName: truncatedName,
+                            isCompany: true
+                        });
+                    }
+                    else {
+                        // Only applicants, show full names
+                        value.forEach((applicant) => {
+                            const fullName = `${applicant.firstName || ''} ${applicant.lastName || ''}`.trim();
+                            if (fullName) {
+                                const truncatedName = fullName.length > 15 ? fullName.substring(0, 12) + '...' : fullName;
+                                bubbles.push({
+                                    fullName: truncatedName,
+                                    isCompany: false,
+                                    riskRating: applicant.riskRating,
+                                    isCustomerVulnerable: applicant.isCustomerVulnerable
+                                });
+                            }
                         });
                     }
-                    // Applicant bubbles
-                    value.forEach((applicant) => {
-                        const firstInitial = this.getInitial(applicant.firstName);
-                        const lastInitial = this.getInitial(applicant.lastName);
-                        const initials = `${firstInitial}${lastInitial}`;
-                        if (initials) {
-                            bubbles.push({
-                                initials,
-                                isSeperateBubble: false,
-                                riskRating: applicant.riskRating,
-                                isCustomerVulnerable: applicant.isCustomerVulnerable
-                            });
-                        }
-                    });
                     cellValue = bubbles;
                 }
+                else if (field === SHARED.TASKS) {
+                    // Format tasks as task items with badges
+                    const taskItems = [];
+                    // Parse the string format "brokerTasks/underwriterTasks" (e.g., "2/0", "0/3", "2/3")
+                    if (typeof value === SHARED.STRING && value.includes(SHARED.SLASH)) {
+                        const [brokerTasksStr, underwriterTasksStr] = value.split(SHARED.SLASH);
+                        const brokerTasks = parseInt(brokerTasksStr) || 0;
+                        const underwriterTasks = parseInt(underwriterTasksStr) || 0;
+                        // Always show both badges, even if count is 0
+                        taskItems.push({
+                            type: SHARED.TASK_BROKER_LABEL,
+                            count: brokerTasks,
+                            status: SHARED.WARNING
+                        });
+                        taskItems.push({
+                            type: SHARED.TASK_UNDERWRITER_LABEL,
+                            count: underwriterTasks,
+                            status: SHARED.SUCCESS
+                        });
+                    }
+                    cellValue = taskItems;
+                }
+                else if (field === SHARED.APP_ID) {
+                    // Format App ID with type and risk tags below
+                    cellValue = {
+                        appId: value,
+                        type: apiRecord.lending || apiRecord.applicationType || undefined,
+                        risk: apiRecord.riskRating || undefined
+                    };
+                }
+                else if (field === SHARED.BROKER_NAME) {
+                    // Truncate broker name if longer than 15 characters
+                    cellValue = value && value.length > 15 ? value.substring(0, 12) + '...' : value;
+                }
+                else if (field === 'finance') {
+                    // Remove decimal part from finance amount
+                    if (value && typeof value === 'string') {
+                        cellValue = {
+                            amount: value.replace(/\.\d{2}$/, ''),
+                            isFinance: true
+                        };
+                    }
+                    else {
+                        cellValue = value;
+                    }
+                }
                 else if (field === SHARED.SECURITY_ADDRESS && value) {
+                    const addressLine1 = value.addressLine1 || '';
+                    const truncatedAddress = addressLine1.length > 15 ? addressLine1.substring(0, 12) + '...' : addressLine1;
                     record[field] = {
-                        line1: value.addressLine1 || '',
+                        line1: truncatedAddress,
                         line2: value.postCode || ''
                     };
                 }
@@ -6165,8 +6354,6 @@ class QueueRecordTableBuilderService extends TableBuilder {
             if (field === SHARED.SECURITY_ADDRESS) {
                 header.isTwoLine = true;
             }
-            if (field === SHARED.TASKS)
-                header.isShowProgressbar = true;
             if (field === SHARED.APPLICANTS) {
                 header.skipParentNgClass = true;
             }
@@ -6194,7 +6381,6 @@ class QueueRecordTableBuilderService extends TableBuilder {
         });
         // Set TableSecondaryModel specific properties
         table.isSortingAllow = SHARED.TRUE;
-        table.showDecriptionFor = SHARED.APPLICANTS;
         return table;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueRecordTableBuilderService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
@@ -6449,11 +6635,16 @@ class QueueFilterDropdownComponent {
     skipNextDocumentClick = false;
     originalFilters = null;
     filtersApplied = false; // Track if filters have been applied
+    // Placeholder options; wire to API later
+    underwriterOptions = [];
+    // Cache filters for template bindings to avoid repeated object creation
+    filters;
     appliedFilters = {}; // Input to sync with container's applied filters
     filterApplied = new EventEmitter();
     filtersCleared = new EventEmitter();
     constructor(filterService) {
         this.filterService = filterService;
+        this.filters = this.filterService.getFilters();
     }
     ngOnChanges(changes) {
         if (changes['appliedFilters'] && !changes['appliedFilters'].firstChange) {
@@ -6470,27 +6661,55 @@ class QueueFilterDropdownComponent {
         }
         this.showDropdown = !this.showDropdown;
         this.skipNextDocumentClick = true;
+        this.filters = this.filterService.getFilters();
     }
     setRiskRating(rating) {
         this.filterService.setRiskRating(rating);
+        this.filters = this.filterService.getFilters();
     }
     setApplicationType(type) {
         this.filterService.setApplicationType(type);
+        this.filters = this.filterService.getFilters();
     }
     setPurchaseType(type) {
         this.filterService.setPurchaseType(type);
+        this.filters = this.filterService.getFilters();
     }
     setTaskStatus(status) {
         this.filterService.setTaskStatus(status);
+        this.filters = this.filterService.getFilters();
     }
     setFinanceMin(min) {
         this.filterService.setFinanceMin(min);
+        this.filters = this.filterService.getFilters();
     }
     setFinanceMax(max) {
         this.filterService.setFinanceMax(max);
+        this.filters = this.filterService.getFilters();
     }
     setPendingDays(days) {
         this.filterService.setPendingDays(days);
+        this.filters = this.filterService.getFilters();
+    }
+    // Category (UK, Ex-Pat, Intl)
+    setCategory(category) {
+        this.filterService.setCategory(category);
+        this.filters = this.filterService.getFilters();
+    }
+    // EPC (A or B (Green))
+    setEpc(epc) {
+        this.filterService.setEpc(epc);
+        this.filters = this.filterService.getFilters();
+    }
+    // Vulnerable Customer (boolean)
+    setVulnerableCustomer(value) {
+        this.filterService.setVulnerableCustomer(value);
+        this.filters = this.filterService.getFilters();
+    }
+    // Assigned Underwriter (multi-select ids)
+    setAssignedUnderwriter(ids) {
+        this.filterService.setAssignedUnderwriter(ids);
+        this.filters = this.filterService.getFilters();
     }
     applyFilters() {
         const filterData = this.filterService.getFilters();
@@ -6500,12 +6719,14 @@ class QueueFilterDropdownComponent {
         }
         this.showDropdown = false;
         this.originalFilters = null; // Clear stored state after applying
+        this.filters = this.filterService.getFilters();
     }
     clearAll() {
         this.filterService.clearAll();
         this.filtersCleared.emit();
         this.filtersApplied = false; // Reset the applied flag when clearing all
         this.originalFilters = null; // Clear originalFilters to prevent restoring old filters
+        this.filters = this.filterService.getFilters();
     }
     // Method to sync with container's applied filters
     syncWithAppliedFilters(appliedFilters) {
@@ -6515,16 +6736,22 @@ class QueueFilterDropdownComponent {
                 applicationType: appliedFilters.applicationType || null,
                 purchaseType: appliedFilters.purchaseType || null,
                 taskStatus: appliedFilters.taskStatus || null,
+                category: appliedFilters.category || [],
+                epc: appliedFilters.epc || [],
+                vulnerableCustomer: appliedFilters.vulnerableCustomer ?? null,
                 financeMin: appliedFilters.financeMin || null,
                 financeMax: appliedFilters.financeMax || null,
-                pendingDays: appliedFilters.pendingDays || null
+                pendingDays: appliedFilters.pendingDays || null,
+                assignedUnderwriter: appliedFilters.assignedUnderwriter || []
             };
             this.filterService.setAllFilters(filters);
             this.filtersApplied = true;
+            this.filters = this.filterService.getFilters();
         }
         else {
             this.filterService.clearAll();
             this.filtersApplied = false;
+            this.filters = this.filterService.getFilters();
         }
     }
     restoreOriginalFilters() {
@@ -6548,11 +6775,11 @@ class QueueFilterDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownComponent, deps: [{ token: QueueFilterDropdownService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueFilterDropdownComponent, isStandalone: false, selector: "lib-queue-filter-dropdown", inputs: { appliedFilters: "appliedFilters" }, outputs: { filterApplied: "filterApplied", filtersCleared: "filtersCleared" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"queue-filter-dropdown-wrapper\">\r\n  <p-button\r\n    class=\"filter-btn-wrapper\"\r\n    (onClick)=\"onFilterBtnClick()\">\r\n    <div class=\"flex align-items-center\">\r\n    <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\r\n    <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\r\n    <p class=\"mb-0\">Filter(s) Applied</p>\r\n    <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\r\n    </div>\r\n  </p-button>\r\n\r\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\r\n    <h3 class=\"filter-title\">Queue Filters</h3>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\r\n      <div class=\"filter-options\">\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().riskRating.includes('Low')\" (onClick)=\"setRiskRating('Low')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Low</p>\r\n            </div>\r\n          </p-button>\r\n\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().riskRating.includes('Medium')\" (onClick)=\"setRiskRating('Medium')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Medium</p>\r\n            </div>\r\n          </p-button>\r\n\r\n           <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().riskRating.includes('High')\" (onClick)=\"setRiskRating('High')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">High</p>\r\n            </div>\r\n          </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Application Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().applicationType.includes('BTL')\" (onClick)=\"setApplicationType('BTL')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">BTL</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().applicationType.includes('HPP')\" (onClick)=\"setApplicationType('HPP')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">HPP</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().purchaseType.includes('Purchase')\" (onClick)=\"setPurchaseType('Purchase')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Purchase</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().purchaseType.includes('Refinance')\" (onClick)=\"setPurchaseType('Refinance')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Refinance</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Task Status</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper task-status-btn-wrapper\" [class.selected]=\"filterService.getFilters().taskStatus.includes('Not Started')\" (onClick)=\"setTaskStatus('Not Started')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Not Started</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper task-status-btn-wrapper\" [class.selected]=\"filterService.getFilters().taskStatus.includes('In-progress')\" (onClick)=\"setTaskStatus('In-progress')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">In-progress</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper task-status-btn-wrapper\" [class.selected]=\"filterService.getFilters().taskStatus.includes('Completed')\" (onClick)=\"setTaskStatus('Completed')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Completed</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\r\n      <div class=\"filter-options two-inputs\">\r\n        <input type=\"number\" placeholder=\"Min\" [ngModel]=\"filterService.getFilters().financeMin\" (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\r\n        <input type=\"number\" placeholder=\"Max\" [ngModel]=\"filterService.getFilters().financeMax\" (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Pending Days</p>\r\n      <div class=\"filter-options one-input\">\r\n        <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filterService.getFilters().pendingDays\" (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-actions\">\r\n      <p-button class=\"clear-btn-wrapper\" (onClick)=\"clearAll()\">\r\n        <div class=\"flex align-items-center btn-text-wrapper\">\r\n          <p class=\"mb-0 mr-2\">Clear All</p>\r\n          <i class=\"pi pi-times\"></i>\r\n        </div>\r\n    </p-button>\r\n\r\n    <p-button\r\n    class=\"apply-btn-wrapper\"\r\n    (onClick)=\"applyFilters()\">\r\n    <div class=\"flex align-items-center\">\r\n      <p class=\"mb-0\">Apply Filters</p>\r\n    </div>\r\n    </p-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:390px;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;border-radius:8px;box-shadow:none;height:44px}::ng-deep .filter-option-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;border-radius:8px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}::ng-deep .task-status-btn-wrapper{padding:4px 16px!important}::ng-deep .task-status-btn-wrapper.selected{padding:4px 16px!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueFilterDropdownComponent, isStandalone: false, selector: "lib-queue-filter-dropdown", inputs: { appliedFilters: "appliedFilters" }, outputs: { filterApplied: "filterApplied", filtersCleared: "filtersCleared" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"queue-filter-dropdown-wrapper\">\r\n  <p-button\r\n    class=\"filter-btn-wrapper\"\r\n    (onClick)=\"onFilterBtnClick()\">\r\n    <div class=\"flex align-items-center\">\r\n    <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\r\n    <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\r\n    <p class=\"mb-0\">Filter(s) Applied</p>\r\n    <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\r\n    </div>\r\n  </p-button>\r\n\r\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\r\n    <h3 class=\"filter-title\">Queue Filters</h3>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\r\n      <div class=\"filter-options\">\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\" (onClick)=\"setRiskRating('Low')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Low</p>\r\n            </div>\r\n          </p-button>\r\n\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\" (onClick)=\"setRiskRating('Medium')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Medium</p>\r\n            </div>\r\n          </p-button>\r\n\r\n           <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\" (onClick)=\"setRiskRating('High')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">High</p>\r\n            </div>\r\n          </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Application Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\" (onClick)=\"setApplicationType('BTL')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">BTL</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\" (onClick)=\"setApplicationType('HPP')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">HPP</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Category</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\" (onClick)=\"setCategory('UK')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">UK</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\" (onClick)=\"setCategory('Ex-Pat')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Ex-Pat</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\" (onClick)=\"setCategory('Intl')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Intl</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">EPC</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\" (onClick)=\"setEpc('A or B (Green)')\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">A or B (Green)</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\" (onClick)=\"setPurchaseType('Purchase')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Purchase</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Refinance')\" (onClick)=\"setPurchaseType('Refinance')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Refinance</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Task Status</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Not Started')\" (onClick)=\"setTaskStatus('Not Started')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Not Started</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('In-progress')\" (onClick)=\"setTaskStatus('In-progress')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">In-progress</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\" (onClick)=\"setTaskStatus('Completed')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Completed</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\r\n      <div class=\"filter-options two-inputs\">\r\n        <input type=\"number\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\" (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\r\n        <input type=\"number\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\" (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Pending Days</p>\r\n      <div class=\"filter-options one-input\">\r\n        <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\" (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\" (onClick)=\"setVulnerableCustomer(true)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Yes</p>\r\n          </div>\r\n        </p-button>\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\" (onClick)=\"setVulnerableCustomer(false)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">No</p>\r\n          </div>\r\n        </p-button>\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\" (onClick)=\"setVulnerableCustomer(null)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Any</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\r\n      <div class=\"filter-options one-input\">\r\n        <!-- Expecting an array of IDs; integrate with your user list later -->\r\n        <p-multiSelect\r\n          [options]=\"underwriterOptions\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          placeholder=\"Select underwriter(s)\"\r\n          [appendTo]=\"'body'\"\r\n          [panelStyle]=\"{ zIndex: 1100 }\"\r\n          [ngModel]=\"filters.assignedUnderwriter\"\r\n          (ngModelChange)=\"setAssignedUnderwriter($event)\">\r\n        </p-multiSelect>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-actions\">\r\n      <p-button class=\"clear-btn-wrapper\" (onClick)=\"clearAll()\">\r\n        <div class=\"flex align-items-center btn-text-wrapper\">\r\n          <p class=\"mb-0 mr-2\">Clear All</p>\r\n          <i class=\"pi pi-times\"></i>\r\n        </div>\r\n    </p-button>\r\n\r\n    <p-button\r\n    class=\"apply-btn-wrapper\"\r\n    (onClick)=\"applyFilters()\">\r\n    <div class=\"flex align-items-center\">\r\n      <p class=\"mb-0\">Apply Filters</p>\r\n    </div>\r\n    </p-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:390px;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;border-radius:8px;box-shadow:none;height:44px}::ng-deep .filter-option-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;border-radius:8px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-queue-filter-dropdown', standalone: false, template: "<div class=\"queue-filter-dropdown-wrapper\">\r\n  <p-button\r\n    class=\"filter-btn-wrapper\"\r\n    (onClick)=\"onFilterBtnClick()\">\r\n    <div class=\"flex align-items-center\">\r\n    <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\r\n    <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\r\n    <p class=\"mb-0\">Filter(s) Applied</p>\r\n    <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\r\n    </div>\r\n  </p-button>\r\n\r\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\r\n    <h3 class=\"filter-title\">Queue Filters</h3>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\r\n      <div class=\"filter-options\">\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().riskRating.includes('Low')\" (onClick)=\"setRiskRating('Low')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Low</p>\r\n            </div>\r\n          </p-button>\r\n\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().riskRating.includes('Medium')\" (onClick)=\"setRiskRating('Medium')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Medium</p>\r\n            </div>\r\n          </p-button>\r\n\r\n           <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().riskRating.includes('High')\" (onClick)=\"setRiskRating('High')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">High</p>\r\n            </div>\r\n          </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Application Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().applicationType.includes('BTL')\" (onClick)=\"setApplicationType('BTL')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">BTL</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().applicationType.includes('HPP')\" (onClick)=\"setApplicationType('HPP')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">HPP</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().purchaseType.includes('Purchase')\" (onClick)=\"setPurchaseType('Purchase')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Purchase</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filterService.getFilters().purchaseType.includes('Refinance')\" (onClick)=\"setPurchaseType('Refinance')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Refinance</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Task Status</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper task-status-btn-wrapper\" [class.selected]=\"filterService.getFilters().taskStatus.includes('Not Started')\" (onClick)=\"setTaskStatus('Not Started')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Not Started</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper task-status-btn-wrapper\" [class.selected]=\"filterService.getFilters().taskStatus.includes('In-progress')\" (onClick)=\"setTaskStatus('In-progress')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">In-progress</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper task-status-btn-wrapper\" [class.selected]=\"filterService.getFilters().taskStatus.includes('Completed')\" (onClick)=\"setTaskStatus('Completed')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Completed</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\r\n      <div class=\"filter-options two-inputs\">\r\n        <input type=\"number\" placeholder=\"Min\" [ngModel]=\"filterService.getFilters().financeMin\" (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\r\n        <input type=\"number\" placeholder=\"Max\" [ngModel]=\"filterService.getFilters().financeMax\" (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Pending Days</p>\r\n      <div class=\"filter-options one-input\">\r\n        <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filterService.getFilters().pendingDays\" (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-actions\">\r\n      <p-button class=\"clear-btn-wrapper\" (onClick)=\"clearAll()\">\r\n        <div class=\"flex align-items-center btn-text-wrapper\">\r\n          <p class=\"mb-0 mr-2\">Clear All</p>\r\n          <i class=\"pi pi-times\"></i>\r\n        </div>\r\n    </p-button>\r\n\r\n    <p-button\r\n    class=\"apply-btn-wrapper\"\r\n    (onClick)=\"applyFilters()\">\r\n    <div class=\"flex align-items-center\">\r\n      <p class=\"mb-0\">Apply Filters</p>\r\n    </div>\r\n    </p-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:390px;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;border-radius:8px;box-shadow:none;height:44px}::ng-deep .filter-option-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;border-radius:8px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}::ng-deep .task-status-btn-wrapper{padding:4px 16px!important}::ng-deep .task-status-btn-wrapper.selected{padding:4px 16px!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}\n"] }]
+            args: [{ selector: 'lib-queue-filter-dropdown', standalone: false, template: "<div class=\"queue-filter-dropdown-wrapper\">\r\n  <p-button\r\n    class=\"filter-btn-wrapper\"\r\n    (onClick)=\"onFilterBtnClick()\">\r\n    <div class=\"flex align-items-center\">\r\n    <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\r\n    <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\r\n    <p class=\"mb-0\">Filter(s) Applied</p>\r\n    <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\r\n    </div>\r\n  </p-button>\r\n\r\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\r\n    <h3 class=\"filter-title\">Queue Filters</h3>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\r\n      <div class=\"filter-options\">\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\" (onClick)=\"setRiskRating('Low')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Low</p>\r\n            </div>\r\n          </p-button>\r\n\r\n          <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\" (onClick)=\"setRiskRating('Medium')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Medium</p>\r\n            </div>\r\n          </p-button>\r\n\r\n           <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\" (onClick)=\"setRiskRating('High')\">\r\n            <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">High</p>\r\n            </div>\r\n          </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Application Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\" (onClick)=\"setApplicationType('BTL')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">BTL</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\" (onClick)=\"setApplicationType('HPP')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">HPP</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Category</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\" (onClick)=\"setCategory('UK')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">UK</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\" (onClick)=\"setCategory('Ex-Pat')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Ex-Pat</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\" (onClick)=\"setCategory('Intl')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Intl</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">EPC</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\" (onClick)=\"setEpc('A or B (Green)')\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">A or B (Green)</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\" (onClick)=\"setPurchaseType('Purchase')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Purchase</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Refinance')\" (onClick)=\"setPurchaseType('Refinance')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Refinance</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Task Status</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Not Started')\" (onClick)=\"setTaskStatus('Not Started')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Not Started</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('In-progress')\" (onClick)=\"setTaskStatus('In-progress')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">In-progress</p>\r\n          </div>\r\n        </p-button>\r\n\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\" (onClick)=\"setTaskStatus('Completed')\">\r\n          <div class=\"flex align-items-center\">\r\n          <p class=\"mb-0\">Completed</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\r\n      <div class=\"filter-options two-inputs\">\r\n        <input type=\"number\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\" (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\r\n        <input type=\"number\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\" (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Pending Days</p>\r\n      <div class=\"filter-options one-input\">\r\n        <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\" (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\r\n      <div class=\"filter-options\">\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\" (onClick)=\"setVulnerableCustomer(true)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Yes</p>\r\n          </div>\r\n        </p-button>\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\" (onClick)=\"setVulnerableCustomer(false)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">No</p>\r\n          </div>\r\n        </p-button>\r\n        <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\" (onClick)=\"setVulnerableCustomer(null)\">\r\n          <div class=\"flex align-items-center\">\r\n            <p class=\"mb-0\">Any</p>\r\n          </div>\r\n        </p-button>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-section\">\r\n      <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\r\n      <div class=\"filter-options one-input\">\r\n        <!-- Expecting an array of IDs; integrate with your user list later -->\r\n        <p-multiSelect\r\n          [options]=\"underwriterOptions\"\r\n          optionLabel=\"name\"\r\n          optionValue=\"id\"\r\n          placeholder=\"Select underwriter(s)\"\r\n          [appendTo]=\"'body'\"\r\n          [panelStyle]=\"{ zIndex: 1100 }\"\r\n          [ngModel]=\"filters.assignedUnderwriter\"\r\n          (ngModelChange)=\"setAssignedUnderwriter($event)\">\r\n        </p-multiSelect>\r\n      </div>\r\n    </div>\r\n    <div class=\"filter-actions\">\r\n      <p-button class=\"clear-btn-wrapper\" (onClick)=\"clearAll()\">\r\n        <div class=\"flex align-items-center btn-text-wrapper\">\r\n          <p class=\"mb-0 mr-2\">Clear All</p>\r\n          <i class=\"pi pi-times\"></i>\r\n        </div>\r\n    </p-button>\r\n\r\n    <p-button\r\n    class=\"apply-btn-wrapper\"\r\n    (onClick)=\"applyFilters()\">\r\n    <div class=\"flex align-items-center\">\r\n      <p class=\"mb-0\">Apply Filters</p>\r\n    </div>\r\n    </p-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:390px;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;border-radius:8px;box-shadow:none;height:44px}::ng-deep .filter-option-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;border-radius:8px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: QueueFilterDropdownService }], propDecorators: { dropdownPanel: [{
                 type: ViewChild,
                 args: ['dropdownPanel', { static: false }]
@@ -6979,6 +7206,7 @@ class QueueModule {
             QueueRoutingModule,
             FormsModule,
             DropdownModule,
+            MultiSelectModule,
             RippleModule, ButtonModule, RouterModule, BadgeModule,
             PaginatorModule,
             SharedModule,
@@ -6988,6 +7216,7 @@ class QueueModule {
             QueueRoutingModule,
             FormsModule,
             DropdownModule,
+            MultiSelectModule,
             RippleModule, ButtonModule, RouterModule, BadgeModule,
             PaginatorModule,
             SharedModule,
@@ -7010,6 +7239,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                         QueueRoutingModule,
                         FormsModule,
                         DropdownModule,
+                        MultiSelectModule,
                         RippleModule, ButtonModule, RouterModule, BadgeModule,
                         PaginatorModule,
                         SharedModule,