cat-qw-lib 1.0.56 → 1.0.57

package/fesm2022/cat-qw-lib.mjs

@@ -2224,19 +2224,20 @@ var columnStyles = {
 	},
 	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' : ''",
-		textNgClass: "rowData['lending'] === 'HPP' ? 'text-orange-700 text-sm' : rowData['lending'] === 'BTL' ? 'text-blue-700 text-sm' : ''"
+		textNgClass: "rowData['lending'] === 'HPP' ? 'text-orange-400 text-sm' : rowData['lending'] === 'BTL' ? 'text-blue-400 text-sm' : ''"
 	},
 	finance: {
 		containerNgClass: "",
 		textNgClass: "text-blue-500 font-weight-500"
 	},
 	pending: {
-		containerNgClass: "rowData['pending'] && rowData['pending'] !== '' ? 'px-2 py-0 bg-gray-50 border-round-2xl inline-block' : ''",
+		containerNgClass: "rowData['pending'] && rowData['pending'] !== '' ? 'px-2 py-0 bg-gray-100 border-round-2xl inline-block' : ''",
 		textNgClass: "rowData['pending'] && rowData['pending'] !== '' ? 'text-black-600 text-sm' : ''"
 	},
 	applicants: {
-		containerNgClass: "'w-9 h-9 border-round-full flex items-center justify-center'",
-		textNgClass: "text-white font-semibold text-md p-2"
+		containerNgClass: "rowData.isSeperateBubble ? 'border-round-full  bg-blue-400 text-white' : rowData.riskRating === 'Low' ? 'border-round-full bg-green-400 text-white' : rowData.riskRating === 'Medium' ? 'border-round-full bg-orange-400 text-white' : rowData.riskRating === 'High' ? 'border-round-full bg-red-400 text-white' : 'border-round-full   bg-gray-200 text-white'",
+		containerNgStyle: "{ width: '2.4rem', height: '2.3rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }",
+		textNgClass: "text-white text-md"
 	},
 	securityAddress: {
 		line1NgClass: "rowData['securityAddress'] && rowData['securityAddress'].addressLine1 ? 'text-gray-800 text-sm font-medium truncate w-full' : 'text-gray-400 text-sm truncate w-full'",
@@ -2417,28 +2418,6 @@ class TableSecondaryComponent {
         }
         return classes.join(' '); // Return space-separated class names
     }
-    /**
-     * Evaluates ngClass expression for dynamic styling
-     * @param {string} expression - The ngClass expression to evaluate
-     * @param {any} rowData - The row data to use in evaluation
-     * @returns {string} The evaluated CSS classes
-     */
-    evaluateNgClass(expression, rowData) {
-        try {
-            // If the expression is just a list of classes, return as is
-            if (!expression.includes('?') && !expression.includes(':')) {
-                return expression;
-            }
-            // Otherwise, evaluate as a JS expression
-            const context = { rowData };
-            // eslint-disable-next-line no-new-func
-            return new Function('rowData', `return ${expression};`)(rowData);
-        }
-        catch (error) {
-            console.error('Error evaluating ngClass expression:', error);
-            return '';
-        }
-    }
     /**
      * Handles pagination and data reload on paginator event.
      * @param {object} event - The PrimeNG paginator event.
@@ -2519,12 +2498,47 @@ class TableSecondaryComponent {
     isArray(val) {
         return Array.isArray(val);
     }
+    /**
+     * Evaluates ngClass expression for dynamic styling
+     * @param {string} expression - The ngClass expression to evaluate
+     * @param {any} rowData - The row data to use in evaluation
+     * @returns {string} The evaluated CSS classes
+     */
+    evaluateNgClass(expression, rowData) {
+        try {
+            // If the expression is just a list of classes, return as is
+            if (!expression.includes('?') && !expression.includes(':')) {
+                return expression;
+            }
+            const context = { rowData }; // Otherwise, evaluate as a JS expression
+            return new Function('rowData', `return ${expression};`)(rowData); // eslint-disable-next-line no-new-func
+        }
+        catch (error) {
+            console.error('Error evaluating ngClass expression:', error);
+            return '';
+        }
+    }
+    /**
+     * Evaluates ngStyle expression for dynamic inline styles
+     * @param {string} expression - The ngStyle expression to evaluate
+     * @param {any} rowData - The row data to use in evaluation
+     * @returns {any} The evaluated style object
+     */
+    evaluateNgStyle(expression, rowData) {
+        try {
+            return new Function('rowData', `return ${expression};`)(rowData);
+        }
+        catch (error) {
+            console.error('Error evaluating ngStyle expression:', error);
+            return null;
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableSecondaryComponent, deps: [{ token: i3$4.Router }, { token: BaseService }, { token: i3$4.ActivatedRoute }, { token: BaseQuery }, { token: BaseStore }], 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", 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            col.headerAlign === 'center' ? 'justify-content-center' : \r\n            (col.headerAlign === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n            {{ col.name }}\r\n            @if(table.isSortingAllow){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n        \r\n      <th *ngIf=\"selectionMode === 'multiple'\" 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\">\r\n            ({{ selection.length }})\r\n          </span>\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\">\r\n        <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\" style=\"padding:0; border:none; background:none;\">\r\n          <div\r\n            (click)=\"handleRowClick(rowData)\"\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            style=\"width: 100%; height: 80px;\"\r\n          >\r\n            <div class=\"flex align-items-center\">\r\n              <ng-container *ngFor=\"let col of table.headers; let j = index\">\r\n                <div [ngClass]=\"rowData._columnWidths ? rowData._columnWidths[col.name] : col.width\">\r\n                  <div class=\"row-wrapprt flex align-items-center justify-content-start\">\r\n                    <ng-container [ngSwitch]=\"col.isTwoLine\">\r\n                      <!--Render two lines with dynamic classes for any two-line column -->\r\n                      <ng-container *ngSwitchCase=\"true\">\r\n                        <div [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                          <div [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n                            {{ rowData[col.name]?.addressLine1 }}\r\n                          </div>\r\n                          <div [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                      <!-- Default cell rendering for other columns -->\r\n                      <ng-container *ngSwitchDefault>\r\n                        <div\r\n                          class=\"table-text-wrapper p-0 flex align-items-center\"\r\n                          [ngClass]=\"[\r\n                            getRowClass(col, rowData),\r\n                            col.align === 'center' ? 'justify-content-center' : \r\n                            (col.align === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n                          ]\"\r\n                          [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                          style=\"overflow: hidden; text-overflow: ellipsis; width:100%\"\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 [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                            <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials && rowData[col.name][0]?.applicantColorClass\">\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, rowData) : '',\r\n                                      bubble.applicantColorClass,\r\n                                      'border-2 border-white',\r\n                                      bubble.isSeperateBubble && rowData[col.name].length > 1 ? 'mr-3' : (!bubble.isSeperateBubble && i !== 0 ? '-ml-3' : '')\r\n                                    ]\"\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                            <p class=\"mb-0\" *ngIf=\"!(isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials && rowData[col.name][0]?.applicantColorClass)\"\r\n                              [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\"\r\n                            >\r\n                              {{ rowData[col.name]?.value ?? rowData[col.name] }}\r\n                            </p>\r\n                          </div>\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              </ng-container>\r\n              <!-- Checkbox at end -->\r\n              <div *ngIf=\"selectionMode === 'multiple'\" class=\"text-center action-data-wrapper flex items-center justify-center px-4\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n                <p-tableCheckbox [value]=\"rowData\"  [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n              </div>\r\n              <!-- Actions -->\r\n              <div *ngIf=\"showActions\" class=\"action-data-wrapper text-left flex items-center justify-center px-4\">\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              </div>\r\n            </div>\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{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.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;background:#f9f9fa}::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}: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{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}: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;background:transparent!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.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: i6$1.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: i6$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$1.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: "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"] }] });
+    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", 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            col.headerAlign === 'center' ? 'justify-content-center' : \r\n            (col.headerAlign === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n            {{ col.name }}\r\n            @if(table.isSortingAllow){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n        \r\n      <th *ngIf=\"selectionMode === 'multiple'\" 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\">\r\n            ({{ selection.length }})\r\n          </span>\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\">\r\n        <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\" style=\"padding:0; border:none; background:none;\">\r\n          <div\r\n            (click)=\"handleRowClick(rowData)\"\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            style=\"width: 100%; height: 80px;\"\r\n          >\r\n            <div class=\"flex align-items-center\">\r\n              <ng-container *ngFor=\"let col of table.headers; let j = index\">\r\n                <div [ngClass]=\"rowData._columnWidths ? rowData._columnWidths[col.name] : col.width\">\r\n                  <div class=\"row-wrapprt flex align-items-center justify-content-start\">\r\n                    <ng-container [ngSwitch]=\"col.isTwoLine\">\r\n                      <!--Render two lines with dynamic classes for any two-line column -->\r\n                      <ng-container *ngSwitchCase=\"true\">\r\n                        <div [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                          <div [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n                            {{ rowData[col.name]?.addressLine1 }}\r\n                          </div>\r\n                          <div [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                      <!-- Default cell rendering for other columns -->\r\n                      <ng-container *ngSwitchDefault>\r\n                        <div\r\n                          class=\"table-text-wrapper p-0 flex align-items-center\"\r\n                          [ngClass]=\"[\r\n                            getRowClass(col, rowData),\r\n                            col.align === 'center' ? 'justify-content-center' : \r\n                            (col.align === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n                          ]\"\r\n                          [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                          style=\"overflow: hidden; text-overflow: ellipsis; width:100%\"\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 ? '-ml-3' : '')\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=\"!(isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials) && (typeof rowData[col.name] === 'string' || typeof rowData[col.name] === 'number')\">\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              </ng-container>\r\n              <!-- Checkbox at end -->\r\n              <div *ngIf=\"selectionMode === 'multiple'\" class=\"text-center action-data-wrapper flex items-center justify-center px-4\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n                <p-tableCheckbox [value]=\"rowData\"  [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n              </div>\r\n              <!-- Actions -->\r\n              <div *ngIf=\"showActions\" class=\"action-data-wrapper text-left flex items-center justify-center px-4\">\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              </div>\r\n            </div>\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{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.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;background:#f9f9fa}::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}: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{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}: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;background:transparent!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: i6$1.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: i6$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$1.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: "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"] }] });
 }
 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], 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            col.headerAlign === 'center' ? 'justify-content-center' : \r\n            (col.headerAlign === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n            {{ col.name }}\r\n            @if(table.isSortingAllow){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n        \r\n      <th *ngIf=\"selectionMode === 'multiple'\" 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\">\r\n            ({{ selection.length }})\r\n          </span>\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\">\r\n        <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\" style=\"padding:0; border:none; background:none;\">\r\n          <div\r\n            (click)=\"handleRowClick(rowData)\"\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            style=\"width: 100%; height: 80px;\"\r\n          >\r\n            <div class=\"flex align-items-center\">\r\n              <ng-container *ngFor=\"let col of table.headers; let j = index\">\r\n                <div [ngClass]=\"rowData._columnWidths ? rowData._columnWidths[col.name] : col.width\">\r\n                  <div class=\"row-wrapprt flex align-items-center justify-content-start\">\r\n                    <ng-container [ngSwitch]=\"col.isTwoLine\">\r\n                      <!--Render two lines with dynamic classes for any two-line column -->\r\n                      <ng-container *ngSwitchCase=\"true\">\r\n                        <div [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                          <div [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n                            {{ rowData[col.name]?.addressLine1 }}\r\n                          </div>\r\n                          <div [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                      <!-- Default cell rendering for other columns -->\r\n                      <ng-container *ngSwitchDefault>\r\n                        <div\r\n                          class=\"table-text-wrapper p-0 flex align-items-center\"\r\n                          [ngClass]=\"[\r\n                            getRowClass(col, rowData),\r\n                            col.align === 'center' ? 'justify-content-center' : \r\n                            (col.align === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n                          ]\"\r\n                          [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                          style=\"overflow: hidden; text-overflow: ellipsis; width:100%\"\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 [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                            <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials && rowData[col.name][0]?.applicantColorClass\">\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, rowData) : '',\r\n                                      bubble.applicantColorClass,\r\n                                      'border-2 border-white',\r\n                                      bubble.isSeperateBubble && rowData[col.name].length > 1 ? 'mr-3' : (!bubble.isSeperateBubble && i !== 0 ? '-ml-3' : '')\r\n                                    ]\"\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                            <p class=\"mb-0\" *ngIf=\"!(isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials && rowData[col.name][0]?.applicantColorClass)\"\r\n                              [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\"\r\n                            >\r\n                              {{ rowData[col.name]?.value ?? rowData[col.name] }}\r\n                            </p>\r\n                          </div>\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              </ng-container>\r\n              <!-- Checkbox at end -->\r\n              <div *ngIf=\"selectionMode === 'multiple'\" class=\"text-center action-data-wrapper flex items-center justify-center px-4\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n                <p-tableCheckbox [value]=\"rowData\"  [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n              </div>\r\n              <!-- Actions -->\r\n              <div *ngIf=\"showActions\" class=\"action-data-wrapper text-left flex items-center justify-center px-4\">\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              </div>\r\n            </div>\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{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.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;background:#f9f9fa}::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}: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{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}: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;background:transparent!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], 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            col.headerAlign === 'center' ? 'justify-content-center' : \r\n            (col.headerAlign === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n            {{ col.name }}\r\n            @if(table.isSortingAllow){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n        \r\n      <th *ngIf=\"selectionMode === 'multiple'\" 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\">\r\n            ({{ selection.length }})\r\n          </span>\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\">\r\n        <td [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\" style=\"padding:0; border:none; background:none;\">\r\n          <div\r\n            (click)=\"handleRowClick(rowData)\"\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            style=\"width: 100%; height: 80px;\"\r\n          >\r\n            <div class=\"flex align-items-center\">\r\n              <ng-container *ngFor=\"let col of table.headers; let j = index\">\r\n                <div [ngClass]=\"rowData._columnWidths ? rowData._columnWidths[col.name] : col.width\">\r\n                  <div class=\"row-wrapprt flex align-items-center justify-content-start\">\r\n                    <ng-container [ngSwitch]=\"col.isTwoLine\">\r\n                      <!--Render two lines with dynamic classes for any two-line column -->\r\n                      <ng-container *ngSwitchCase=\"true\">\r\n                        <div [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                          <div [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n                            {{ rowData[col.name]?.addressLine1 }}\r\n                          </div>\r\n                          <div [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                      <!-- Default cell rendering for other columns -->\r\n                      <ng-container *ngSwitchDefault>\r\n                        <div\r\n                          class=\"table-text-wrapper p-0 flex align-items-center\"\r\n                          [ngClass]=\"[\r\n                            getRowClass(col, rowData),\r\n                            col.align === 'center' ? 'justify-content-center' : \r\n                            (col.align === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n                          ]\"\r\n                          [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                          style=\"overflow: hidden; text-overflow: ellipsis; width:100%\"\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 ? '-ml-3' : '')\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=\"!(isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.initials) && (typeof rowData[col.name] === 'string' || typeof rowData[col.name] === 'number')\">\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              </ng-container>\r\n              <!-- Checkbox at end -->\r\n              <div *ngIf=\"selectionMode === 'multiple'\" class=\"text-center action-data-wrapper flex items-center justify-center px-4\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n                <p-tableCheckbox [value]=\"rowData\"  [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n              </div>\r\n              <!-- Actions -->\r\n              <div *ngIf=\"showActions\" class=\"action-data-wrapper text-left flex items-center justify-center px-4\">\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              </div>\r\n            </div>\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{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.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;background:#f9f9fa}::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}: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{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}: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;background:transparent!important}.border-round-full{border-radius:50%!important}\n"] }]
         }], ctorParameters: () => [{ type: i3$4.Router }, { type: BaseService }, { type: i3$4.ActivatedRoute }, { type: BaseQuery }, { type: BaseStore }], propDecorators: { table: [{
                 type: Input
             }], metaData: [{
@@ -5834,13 +5848,6 @@ class QueueRecordTableBuilderService extends TableBuilder {
                 let cellValue = value;
                 // Format specific fields
                 if (field === SHARED.APPLICANTS && Array.isArray(value)) {
-                    const colorClasses = [
-                        'bg-blue-400', // For company
-                        'bg-green-400',
-                        'bg-red-400',
-                        'bg-yellow-400',
-                        'bg-teal-400'
-                    ];
                     // Company initials as first bubble (max 2 initials)
                     const companyInitials = (apiRecord.companyName || '')
                         .split(' ')
@@ -5852,21 +5859,19 @@ class QueueRecordTableBuilderService extends TableBuilder {
                     if (companyInitials) {
                         bubbles.push({
                             initials: companyInitials,
-                            applicantColorClass: colorClasses[0], // Always blue for company
                             isSeperateBubble: true
                         });
                     }
                     // Applicant bubbles
-                    value.forEach((applicant, idx) => {
+                    value.forEach((applicant) => {
                         const firstInitial = this.getInitial(applicant.firstName);
                         const lastInitial = this.getInitial(applicant.lastName);
                         const initials = `${firstInitial}${lastInitial}`;
                         if (initials) {
-                            const colorClass = colorClasses[(idx + 1) % colorClasses.length];
                             bubbles.push({
                                 initials,
-                                applicantColorClass: colorClass,
-                                isSeperateBubble: false
+                                isSeperateBubble: false,
+                                riskRating: applicant.riskRating
                             });
                         }
                     });
@@ -5883,6 +5888,22 @@ class QueueRecordTableBuilderService extends TableBuilder {
                 }
                 record[field] = cellValue;
             });
+            //---------------------will remove this code and index in params later----code start---------////////
+            // Inject dummy tasks data for first 5 records only
+            const dummyTasks = ['0/0', '5/0', '0/5', '1/6', '1/4', '1/13'];
+            if (index < 5) {
+                record.tasks = dummyTasks[index];
+            }
+            const dummytaskCompletionPercent = [100, 0, 100, 14.29, 20, 7.14];
+            if (index < 5) {
+                record.taskCompletionPercent = dummytaskCompletionPercent[index];
+            }
+            const dummyPeding = ['100 days', '10 days', '98 days', '53 days', '75 days', '14 days'];
+            if (index < 5) {
+                record.pending = dummyPeding[index];
+            }
+            //---------------------will remove this code and index in params later----code end---------////////
+            // console.log("-------record", record);
             // Attach row-level ngClass expression for dynamic row styling
             const rowStyles$1 = rowStyles;
             if (rowStyles$1 && rowStyles$1.ngClass) {
@@ -5898,12 +5919,18 @@ class QueueRecordTableBuilderService extends TableBuilder {
             if (field === SHARED.SECURITY_ADDRESS) {
                 header.isTwoLine = true;
             }
+            if (field === SHARED.APPLICANTS) {
+                header.skipParentNgClass = true;
+            }
             if (field) {
                 // Add containerNgClass and textNgClass expressions for dynamic styling
                 if (this.columnStyles[field]) {
                     if (this.columnStyles[field].containerNgClass) {
                         header.containerNgClassExpression = this.columnStyles[field].containerNgClass;
                     }
+                    if (this.columnStyles[field].containerNgStyle) {
+                        header.containerNgStyleExpression = this.columnStyles[field].containerNgStyle;
+                    }
                     if (this.columnStyles[field].textNgClass) {
                         header.textNgClassExpression = this.columnStyles[field].textNgClass;
                     }