cat-qw-lib 2.6.17 → 2.6.20

package/fesm2022/cat-qw-lib.mjs

@@ -502,14 +502,14 @@ const QUEUE_RECORD_TABLE_COLUMN_WIDTH_LIST = {
     sla: 'w-3',
     referredDate: 'w-2',
     appId: 'w-3',
-    tasks: 'w-2'
+    tasks: 'w-1'
 };
 const FIELD_DISPLAY_NAMES = {
     riskRating: 'Risk Rating',
     appId: 'App. ID',
-    applicants: 'Company & Applicant(s)',
+    applicants: 'Applicant(s)',
     brokerName: 'Broker',
-    finance: 'Finance Amount',
+    finance: 'Finance',
     securityAddress: 'Security',
     valuationStatus: 'Val status',
     sla: 'SLA',
@@ -522,7 +522,7 @@ const FIELD_DISPLAY_NAMES = {
 const QUEUE_RECORD_TABLE_COLUMN_ORDER = [
     'riskRating',
     'appId', // App. ID
-    'applicants', // Company & Applicant(s)
+    'applicants', // Applicant(s)
     'brokerName',
     'finance',
     'securityAddress',
@@ -2312,7 +2312,7 @@ var columnStyles = {
 		isShowSortIcon: true
 	},
 	valuationStatus: {
-		isShowSortIcon: true,
+		isShowSortIcon: false,
 		line1NgClass: "rowData['valuationStatus']?.iconClass || ''",
 		line2NgClass: "rowData['valuationStatus']?.textClass || ''"
 	},
@@ -3315,11 +3315,11 @@ class TableSecondaryComponent {
         return 'default';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableSecondaryComponent, deps: [{ token: i3$4.Router }, { token: BaseService }, { token: SessionService }, { token: BaseQuery }, { token: BaseStore }, { token: QueueBusinessService }, { token: QueueQuery$1 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: TableSecondaryComponent, isStandalone: true, selector: "lib-table-secondary", inputs: { table: "table", metaData: "metaData", title: "title", builder: "builder", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", isShowSkeleton: "isShowSkeleton", pathName: "pathName", selectionMode: "selectionMode", selection: "selection", usePagination: "usePagination", scrollHeight: "scrollHeight", rowSelection: "rowSelection", enableSelection: "enableSelection", noRecordsMessage: "noRecordsMessage", sortField: "sortField", sortOrder: "sortOrder", searchTerm: "searchTerm", filterQuery: "filterQuery" }, outputs: { selectionChange: "selectionChange", rowSelectionChange: "rowSelectionChange", sortChanged: "sortChanged", onDeleteRow: "onDeleteRow", onPage: "onPage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\n  <p-table\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\n    #dt2\n    [lazy]=\"true\"\n    (onSort)=\"onSort($event)\"\n    [paginator]=\"false\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [columns]=\"table.headers\"\n    class=\"table-secondary-container\"\n    [value]=\"table.records\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\"\n    [dataKey]=\"table.dataKey\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\n  >\n    <!-- Header -->\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr *ngIf=\"table.headers.length > 0\">\n        <th\n          *ngFor=\"let col of table.headers; let i = index\"\n          class=\"table-header-wrapper bg-white\"\n          [pSortableColumn]=\"col.name\"\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\n          style=\"min-width: 100px\"\n        >      \n          <h4\n          [ngClass]=\"[\n            col.class || '', \n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\n          ]\"\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\n            {{ col.displayName || col.name }}\n            @if(table.isSortingAllow && col.isShowSortIcon){\n              <p-sortIcon [field]=\"col.name\" />\n            }\n          </h4>\n        </th>\n  \n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\n          <span *ngIf=\"selection?.length && !isSelectAll\">\n            ({{ selection.length }})\n          </span>\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isAllCurrentPageSelected\"\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\n        </h4>\n        </th>\n  \n        <th\n          *ngIf=\"showActions\"\n          class=\"table-action-title table-header-wrapper\"\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\n        >\n        </th>\n  \n      </tr>\n    </ng-template>\n  \n    <!-- Body -->\n<ng-template pTemplate=\"body\" let-rowData>\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n    <!-- one TD per column -->\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\n        (click)=\"handleRowClick(rowData)\"\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\n        [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n      \n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\n          <!-- your existing inner column wrapper -->\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\n                <!-- task items - check this first -->\n                <ng-container *ngSwitchCase=\"'taskItems'\">\n                  <div class=\"col-tasks\">\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\n                        <span class=\"font-semibold\">{{ taskItem.type }}</span>\n                        <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              \n                <!-- Finance amount with special styling -->\n                <ng-container *ngSwitchCase=\"'finance'\">\n                  <p class=\"text-black font-semibold mb-0\">\n                    {{ rowData[col.name].amount }}\n                  </p>\n                </ng-container>\n              \n                <!-- App ID with type and risk tags -->\n                <ng-container *ngSwitchCase=\"'appId'\">\n                  <div class=\"w-full text-left\">\n                    <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\n                      <!-- Type chip using style config (lending) -->\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\n                        <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\n                          {{ rowData[col.name].type }}\n                        </small>\n                      </div>\n                      <!-- Risk chip using style config (riskRating) -->\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\n                        <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\n                          {{ rowData[col.name].risk }}\n                        </small>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n                \n                <!-- Broker with name and company name -->\n                <ng-container *ngSwitchCase=\"'broker'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\n                      {{ rowData[col.name].brokerCompanyName }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!--Render two lines with dynamic classes for any two-line column -->\n                <ng-container *ngSwitchCase=\"'twoLine'\">\n                  <div class=\"w-full\" [ngClass]=\"[\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\n                      rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\n                    ]\">\n                    <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\n                      <i\n                        *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\n                        class=\"pi\"\n                        [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\n                      ></i>\n                      <span\n                        *ngIf=\"!rowData[col.name]?.iconClass\"\n                        [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\n                      >\n                        {{ rowData[col.name]?.addressLine1 }}\n                      </span>\n                    </div>\n                    <p class=\"row-multi-line-wrapper\"\n                      [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\n                      {{ rowData[col.name]?.postCode }}\n                  </p>\n                  </div>\n                </ng-container>\n                <!-- progress bar -->\n                <ng-container *ngSwitchCase=\"'progress'\">\n                  <div class=\"progress-wrapper\">\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\n                    </round-progress>\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\n                      {{ rowData[col.name] }}\n                    </div>\n                  </div>\n              \n                </ng-container>\n                <!-- Default cell rendering for other columns -->\n                <ng-container *ngSwitchDefault>\n                  <!-- Don't render default content if we have task items -->\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\n                  <div\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\n                    [ngClass]=\"[\n                      getRowClass(col, rowData),\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\n                    ]\"\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\n                  >\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                    </div>\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\n                      <div class=\"w-full text-left\">\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                      </div>\n                    </ng-container>\n                    <ng-template #bubbleOrFallback>\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\n                        <div class=\"flex flex-column gap-1\">\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\n                            <div\n                              *ngIf=\"bubble.isCustomerVulnerable\"\n                              class=\"px-2 py-1 border-round-2xl inline-block bg-red-600 text-white\"\n                            >\n                              {{ bubble.fullName }}\n                            </div>\n                            <p\n                              *ngIf=\"!bubble.isCustomerVulnerable\"\n                              class=\"mb-0\"\n                              [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700'\"\n                            >\n                              {{ bubble.fullName }}\n                          </p>\n                          </ng-container>\n                        </div>\n                      </ng-container>\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\n                        <div class=\"flex align-items-center gap-2\">\n                          <i\n                            *ngIf=\"rowData[col.name]?.icon\"\n                            class=\"pi\"\n                            [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\n                          ></i>\n                          <p class=\"mb-0\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\n                            {{ rowData[col.name]?.text || rowData[col.name] }}\n                          </p>\n                        </div>\n                      </ng-container>\n                    </ng-template>\n                    <div\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\n                      class=\"text-black-500 text-sm mt-1\"\n                      style=\"font-weight: 600;\"\n                    >\n                      {{ rowData[table.descriptionColumnName] }}\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n              </ng-container>\n            </div>\n        </div>\n        </div>\n    </td>\n    <!-- Checkbox column -->\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\n       [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\n      </div>\n    </td>\n\n    <!-- Actions column -->\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\n        <p-button\n          icon=\"pi pi-trash\"\n          (click)=\"deleteRow($event, rowData)\"\n          class=\"delete-icon-wrapper mr-3\"\n          [disabled]=\"!enableSelection\"\n        ></p-button>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n  \n    <!-- Empty Message -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\n          class=\"text-center text-color font-semibold p-4\"\n        >\n           {{ noRecordsMessage }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n<!-- Paginator -->\n  <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\n  <div class=\"pagination-text text-color\">\n    Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\n  </div>\n\n  <p-paginator\n    #paginator\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    (onPageChange)=\"handleLoadRecords($event)\"\n  ></p-paginator>\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.queue-chip{display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;min-height:1.5rem;border-radius:9999px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;gap:.25rem;background-color:#e5e7eb;color:#111827;border:1px solid transparent;width:fit-content;max-width:100%}.queue-chip--danger{background-color:var(--color-red-600, #dc2626);color:#fff}.queue-chip--warning{background-color:var(--color-amber-500, #f59e0b);color:#fff}.queue-chip--neutral{background-color:var(--color-gray-300, #d1d5db);color:#111827}.queue-chip--success{background-color:var(--color-green-500, #22c55e);color:#fff}.queue-chip--info{background-color:var(--color-blue-500, #3b82f6);color:#fff}.queue-chip--light-green-success{background-color:var(--color-green-50, #f0fdf4);color:var(--color-green-700, #15803d);border:1px solid var(--color-green-200, #bbf7d0)}.queue-chip--light-amber-warning{background-color:var(--color-amber-50, #fffbeb);color:var(--color-amber-700, #b45309);border:1px solid var(--color-amber-200, #fde68a)}.queue-chip--light-red-danger{background-color:var(--color-red-50, #fef2f2);color:var(--color-red-700, #b91c1c);border:1px solid var(--color-red-200, #fecaca)}.queue-chip--light-neutral{background-color:var(--color-blue-50, #eff6ff);color:var(--color-blue-700, #1e40af);border:1px solid var(--color-blue-200, #bfdbfe)}.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:first-child .border-row-wrapper{border-width:3px 0 3px 3px}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-width:3px 0}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:last-child .border-row-wrapper{border-width:3px 3px 3px 0}::ng-deep .table-row-wrapper:hover .table-select-row-wrapper .border-row-wrapper{border-width:3px 3px 3px 0}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-default{background-color:transparent;color:#1f2937;border:1px solid #d1d5db}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: SkeletonComponent, selector: "lib-skeleton", inputs: ["count", "columns", "width", "height", "isAllowCard"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i9.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i9.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RoundProgressModule }, { kind: "component", type: i14.RoundProgressComponent, selector: "round-progress", inputs: ["current", "max", "radius", "animation", "animationDelay", "duration", "stroke", "color", "background", "responsive", "clockwise", "semicircle", "rounded"], outputs: ["onRender"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: TableSecondaryComponent, isStandalone: true, selector: "lib-table-secondary", inputs: { table: "table", metaData: "metaData", title: "title", builder: "builder", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", isShowSkeleton: "isShowSkeleton", pathName: "pathName", selectionMode: "selectionMode", selection: "selection", usePagination: "usePagination", scrollHeight: "scrollHeight", rowSelection: "rowSelection", enableSelection: "enableSelection", noRecordsMessage: "noRecordsMessage", sortField: "sortField", sortOrder: "sortOrder", searchTerm: "searchTerm", filterQuery: "filterQuery" }, outputs: { selectionChange: "selectionChange", rowSelectionChange: "rowSelectionChange", sortChanged: "sortChanged", onDeleteRow: "onDeleteRow", onPage: "onPage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\n  <p-table\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\n    #dt2\n    [lazy]=\"true\"\n    (onSort)=\"onSort($event)\"\n    [paginator]=\"false\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [columns]=\"table.headers\"\n    class=\"table-secondary-container\"\n    [value]=\"table.records\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\"\n    [dataKey]=\"table.dataKey\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\n  >\n    <!-- Header -->\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr *ngIf=\"table.headers.length > 0\">\n        <th\n          *ngFor=\"let col of table.headers; let i = index\"\n          class=\"table-header-wrapper bg-white\"\n          [pSortableColumn]=\"col.name\"\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\n          style=\"min-width: 100px\"\n        >      \n          <h4\n          [ngClass]=\"[\n            col.class || '', \n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\n          ]\"\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\n            {{ col.displayName || col.name }}\n            @if(table.isSortingAllow && col.isShowSortIcon){\n              <p-sortIcon [field]=\"col.name\" />\n            }\n          </h4>\n        </th>\n  \n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\n          <span *ngIf=\"selection?.length && !isSelectAll\">\n            ({{ selection.length }})\n          </span>\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isAllCurrentPageSelected\"\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\n        </h4>\n        </th>\n  \n        <th\n          *ngIf=\"showActions\"\n          class=\"table-action-title table-header-wrapper\"\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\n        >\n        </th>\n  \n      </tr>\n    </ng-template>\n  \n    <!-- Body -->\n<ng-template pTemplate=\"body\" let-rowData>\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n    <!-- one TD per column -->\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\n        (click)=\"handleRowClick(rowData)\"\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\n        [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n      \n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\n          <!-- your existing inner column wrapper -->\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\n                <!-- task items - check this first -->\n                <ng-container *ngSwitchCase=\"'taskItems'\">\n                  <div class=\"col-tasks\">\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\n                        <span class=\"font-semibold\">{{ taskItem.type }}</span>\n                        <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              \n                <!-- Finance amount with special styling -->\n                <ng-container *ngSwitchCase=\"'finance'\">\n                  <p class=\"text-black font-semibold mb-0\">\n                    {{ rowData[col.name].amount }}\n                  </p>\n                </ng-container>\n              \n                <!-- App ID with type and risk tags -->\n                <ng-container *ngSwitchCase=\"'appId'\">\n                  <div class=\"w-full text-left\">\n                    <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\n                      <!-- Type chip using style config (lending) -->\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\n                        <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\n                          {{ rowData[col.name].type }}\n                        </small>\n                      </div>\n                      <!-- Risk chip using style config (riskRating) -->\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\n                        <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\n                          {{ rowData[col.name].risk }}\n                        </small>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n                \n                <!-- Broker with name and company name -->\n                <ng-container *ngSwitchCase=\"'broker'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\n                      {{ rowData[col.name].brokerCompanyName }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!--Render two lines with dynamic classes for any two-line column -->\n                <ng-container *ngSwitchCase=\"'twoLine'\">\n                  <div class=\"w-full\" [ngClass]=\"[\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\n                      rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\n                    ]\">\n                    <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\n                      <i\n                        *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\n                        class=\"pi\"\n                        [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\n                      ></i>\n                      <span\n                        *ngIf=\"!rowData[col.name]?.iconClass\"\n                        [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\n                      >\n                        {{ rowData[col.name]?.addressLine1 }}\n                      </span>\n                    </div>\n                    <p class=\"row-multi-line-wrapper\"\n                      [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\n                      {{ rowData[col.name]?.postCode }}\n                  </p>\n                  </div>\n                </ng-container>\n                <!-- progress bar -->\n                <ng-container *ngSwitchCase=\"'progress'\">\n                  <div class=\"progress-wrapper\">\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\n                    </round-progress>\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\n                      {{ rowData[col.name] }}\n                    </div>\n                  </div>\n              \n                </ng-container>\n                <!-- Default cell rendering for other columns -->\n                <ng-container *ngSwitchDefault>\n                  <!-- Don't render default content if we have task items -->\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\n                  <div\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\n                    [ngClass]=\"[\n                      getRowClass(col, rowData),\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\n                    ]\"\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\n                  >\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                    </div>\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\n                      <div class=\"w-full text-left\">\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                      </div>\n                    </ng-container>\n                    <ng-template #bubbleOrFallback>\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\n                        <div class=\"flex flex-column gap-1\">\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\n                            <p\n                              class=\"mb-0\"\n                              [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700'\"\n                            >\n                              {{ bubble.fullName }}\n                          </p>\n                          </ng-container>\n                        </div>\n                      </ng-container>\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\n                        <div class=\"flex align-items-center gap-2\">\n                          <i\n                            *ngIf=\"rowData[col.name]?.icon\"\n                            class=\"pi\"\n                            [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\n                          ></i>\n                          <p class=\"mb-0\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\n                            {{ rowData[col.name]?.text || rowData[col.name] }}\n                          </p>\n                        </div>\n                      </ng-container>\n                    </ng-template>\n                    <div\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\n                      class=\"text-black-500 text-sm mt-1\"\n                      style=\"font-weight: 600;\"\n                    >\n                      {{ rowData[table.descriptionColumnName] }}\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n              </ng-container>\n            </div>\n        </div>\n        </div>\n    </td>\n    <!-- Checkbox column -->\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\n       [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\n      </div>\n    </td>\n\n    <!-- Actions column -->\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\n        <p-button\n          icon=\"pi pi-trash\"\n          (click)=\"deleteRow($event, rowData)\"\n          class=\"delete-icon-wrapper mr-3\"\n          [disabled]=\"!enableSelection\"\n        ></p-button>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n  \n    <!-- Empty Message -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\n          class=\"text-center text-color font-semibold p-4\"\n        >\n           {{ noRecordsMessage }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n<!-- Paginator -->\n  <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\n  <div class=\"pagination-text text-color\">\n    Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\n  </div>\n\n  <p-paginator\n    #paginator\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    (onPageChange)=\"handleLoadRecords($event)\"\n  ></p-paginator>\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.queue-chip{display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;min-height:1.5rem;border-radius:9999px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;gap:.25rem;background-color:#e5e7eb;color:#111827;border:1px solid transparent;width:fit-content;max-width:100%}.queue-chip--danger{background-color:var(--color-red-600, #dc2626);color:#fff}.queue-chip--warning{background-color:var(--color-amber-500, #f59e0b);color:#fff}.queue-chip--neutral{background-color:var(--color-gray-300, #d1d5db);color:#111827}.queue-chip--success{background-color:var(--color-green-500, #22c55e);color:#fff}.queue-chip--info{background-color:var(--color-blue-500, #3b82f6);color:#fff}.queue-chip--light-green-success{background-color:var(--color-green-50, #f0fdf4);color:var(--color-green-700, #15803d);border:1px solid var(--color-green-200, #bbf7d0)}.queue-chip--light-amber-warning{background-color:var(--color-amber-50, #fffbeb);color:var(--color-amber-700, #b45309);border:1px solid var(--color-amber-200, #fde68a)}.queue-chip--light-red-danger{background-color:var(--color-red-50, #fef2f2);color:var(--color-red-700, #b91c1c);border:1px solid var(--color-red-200, #fecaca)}.queue-chip--light-neutral{background-color:var(--color-blue-50, #eff6ff);color:var(--color-blue-700, #1e40af);border:1px solid var(--color-blue-200, #bfdbfe)}.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-wrapper{background-color:#0f8bfd05}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-default{background-color:transparent;color:#1f2937;border:1px solid #d1d5db}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: SkeletonComponent, selector: "lib-skeleton", inputs: ["count", "columns", "width", "height", "isAllowCard"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i9.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i9.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RoundProgressModule }, { kind: "component", type: i14.RoundProgressComponent, selector: "round-progress", inputs: ["current", "max", "radius", "animation", "animationDelay", "duration", "stroke", "color", "background", "responsive", "clockwise", "semicircle", "rounded"], outputs: ["onRender"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableSecondaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, SkeletonComponent, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule, RoundProgressModule, CheckboxModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "  <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\n  <p-table\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\n    #dt2\n    [lazy]=\"true\"\n    (onSort)=\"onSort($event)\"\n    [paginator]=\"false\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [columns]=\"table.headers\"\n    class=\"table-secondary-container\"\n    [value]=\"table.records\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\"\n    [dataKey]=\"table.dataKey\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\n  >\n    <!-- Header -->\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr *ngIf=\"table.headers.length > 0\">\n        <th\n          *ngFor=\"let col of table.headers; let i = index\"\n          class=\"table-header-wrapper bg-white\"\n          [pSortableColumn]=\"col.name\"\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\n          style=\"min-width: 100px\"\n        >      \n          <h4\n          [ngClass]=\"[\n            col.class || '', \n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\n          ]\"\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\n            {{ col.displayName || col.name }}\n            @if(table.isSortingAllow && col.isShowSortIcon){\n              <p-sortIcon [field]=\"col.name\" />\n            }\n          </h4>\n        </th>\n  \n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\n          <span *ngIf=\"selection?.length && !isSelectAll\">\n            ({{ selection.length }})\n          </span>\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isAllCurrentPageSelected\"\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\n        </h4>\n        </th>\n  \n        <th\n          *ngIf=\"showActions\"\n          class=\"table-action-title table-header-wrapper\"\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\n        >\n        </th>\n  \n      </tr>\n    </ng-template>\n  \n    <!-- Body -->\n<ng-template pTemplate=\"body\" let-rowData>\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n    <!-- one TD per column -->\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\n        (click)=\"handleRowClick(rowData)\"\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\n        [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n      \n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\n          <!-- your existing inner column wrapper -->\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\n                <!-- task items - check this first -->\n                <ng-container *ngSwitchCase=\"'taskItems'\">\n                  <div class=\"col-tasks\">\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\n                        <span class=\"font-semibold\">{{ taskItem.type }}</span>\n                        <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              \n                <!-- Finance amount with special styling -->\n                <ng-container *ngSwitchCase=\"'finance'\">\n                  <p class=\"text-black font-semibold mb-0\">\n                    {{ rowData[col.name].amount }}\n                  </p>\n                </ng-container>\n              \n                <!-- App ID with type and risk tags -->\n                <ng-container *ngSwitchCase=\"'appId'\">\n                  <div class=\"w-full text-left\">\n                    <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\n                      <!-- Type chip using style config (lending) -->\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\n                        <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\n                          {{ rowData[col.name].type }}\n                        </small>\n                      </div>\n                      <!-- Risk chip using style config (riskRating) -->\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\n                        <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\n                          {{ rowData[col.name].risk }}\n                        </small>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n                \n                <!-- Broker with name and company name -->\n                <ng-container *ngSwitchCase=\"'broker'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\n                      {{ rowData[col.name].brokerCompanyName }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!--Render two lines with dynamic classes for any two-line column -->\n                <ng-container *ngSwitchCase=\"'twoLine'\">\n                  <div class=\"w-full\" [ngClass]=\"[\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\n                      rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\n                    ]\">\n                    <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\n                      <i\n                        *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\n                        class=\"pi\"\n                        [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\n                      ></i>\n                      <span\n                        *ngIf=\"!rowData[col.name]?.iconClass\"\n                        [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\n                      >\n                        {{ rowData[col.name]?.addressLine1 }}\n                      </span>\n                    </div>\n                    <p class=\"row-multi-line-wrapper\"\n                      [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\n                      {{ rowData[col.name]?.postCode }}\n                  </p>\n                  </div>\n                </ng-container>\n                <!-- progress bar -->\n                <ng-container *ngSwitchCase=\"'progress'\">\n                  <div class=\"progress-wrapper\">\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\n                    </round-progress>\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\n                      {{ rowData[col.name] }}\n                    </div>\n                  </div>\n              \n                </ng-container>\n                <!-- Default cell rendering for other columns -->\n                <ng-container *ngSwitchDefault>\n                  <!-- Don't render default content if we have task items -->\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\n                  <div\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\n                    [ngClass]=\"[\n                      getRowClass(col, rowData),\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\n                    ]\"\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\n                  >\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                    </div>\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\n                      <div class=\"w-full text-left\">\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                      </div>\n                    </ng-container>\n                    <ng-template #bubbleOrFallback>\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\n                        <div class=\"flex flex-column gap-1\">\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\n                            <div\n                              *ngIf=\"bubble.isCustomerVulnerable\"\n                              class=\"px-2 py-1 border-round-2xl inline-block bg-red-600 text-white\"\n                            >\n                              {{ bubble.fullName }}\n                            </div>\n                            <p\n                              *ngIf=\"!bubble.isCustomerVulnerable\"\n                              class=\"mb-0\"\n                              [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700'\"\n                            >\n                              {{ bubble.fullName }}\n                          </p>\n                          </ng-container>\n                        </div>\n                      </ng-container>\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\n                        <div class=\"flex align-items-center gap-2\">\n                          <i\n                            *ngIf=\"rowData[col.name]?.icon\"\n                            class=\"pi\"\n                            [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\n                          ></i>\n                          <p class=\"mb-0\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\n                            {{ rowData[col.name]?.text || rowData[col.name] }}\n                          </p>\n                        </div>\n                      </ng-container>\n                    </ng-template>\n                    <div\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\n                      class=\"text-black-500 text-sm mt-1\"\n                      style=\"font-weight: 600;\"\n                    >\n                      {{ rowData[table.descriptionColumnName] }}\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n              </ng-container>\n            </div>\n        </div>\n        </div>\n    </td>\n    <!-- Checkbox column -->\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\n       [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\n      </div>\n    </td>\n\n    <!-- Actions column -->\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\n        <p-button\n          icon=\"pi pi-trash\"\n          (click)=\"deleteRow($event, rowData)\"\n          class=\"delete-icon-wrapper mr-3\"\n          [disabled]=\"!enableSelection\"\n        ></p-button>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n  \n    <!-- Empty Message -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\n          class=\"text-center text-color font-semibold p-4\"\n        >\n           {{ noRecordsMessage }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n<!-- Paginator -->\n  <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\n  <div class=\"pagination-text text-color\">\n    Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\n  </div>\n\n  <p-paginator\n    #paginator\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    (onPageChange)=\"handleLoadRecords($event)\"\n  ></p-paginator>\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.queue-chip{display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;min-height:1.5rem;border-radius:9999px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;gap:.25rem;background-color:#e5e7eb;color:#111827;border:1px solid transparent;width:fit-content;max-width:100%}.queue-chip--danger{background-color:var(--color-red-600, #dc2626);color:#fff}.queue-chip--warning{background-color:var(--color-amber-500, #f59e0b);color:#fff}.queue-chip--neutral{background-color:var(--color-gray-300, #d1d5db);color:#111827}.queue-chip--success{background-color:var(--color-green-500, #22c55e);color:#fff}.queue-chip--info{background-color:var(--color-blue-500, #3b82f6);color:#fff}.queue-chip--light-green-success{background-color:var(--color-green-50, #f0fdf4);color:var(--color-green-700, #15803d);border:1px solid var(--color-green-200, #bbf7d0)}.queue-chip--light-amber-warning{background-color:var(--color-amber-50, #fffbeb);color:var(--color-amber-700, #b45309);border:1px solid var(--color-amber-200, #fde68a)}.queue-chip--light-red-danger{background-color:var(--color-red-50, #fef2f2);color:var(--color-red-700, #b91c1c);border:1px solid var(--color-red-200, #fecaca)}.queue-chip--light-neutral{background-color:var(--color-blue-50, #eff6ff);color:var(--color-blue-700, #1e40af);border:1px solid var(--color-blue-200, #bfdbfe)}.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:first-child .border-row-wrapper{border-width:3px 0 3px 3px}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-width:3px 0}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:last-child .border-row-wrapper{border-width:3px 3px 3px 0}::ng-deep .table-row-wrapper:hover .table-select-row-wrapper .border-row-wrapper{border-width:3px 3px 3px 0}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-default{background-color:transparent;color:#1f2937;border:1px solid #d1d5db}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"] }]
+            args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, SkeletonComponent, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule, RoundProgressModule, CheckboxModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "  <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\n  <p-table\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\n    #dt2\n    [lazy]=\"true\"\n    (onSort)=\"onSort($event)\"\n    [paginator]=\"false\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [columns]=\"table.headers\"\n    class=\"table-secondary-container\"\n    [value]=\"table.records\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\"\n    [dataKey]=\"table.dataKey\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\n  >\n    <!-- Header -->\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr *ngIf=\"table.headers.length > 0\">\n        <th\n          *ngFor=\"let col of table.headers; let i = index\"\n          class=\"table-header-wrapper bg-white\"\n          [pSortableColumn]=\"col.name\"\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\n          style=\"min-width: 100px\"\n        >      \n          <h4\n          [ngClass]=\"[\n            col.class || '', \n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\n          ]\"\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\n            {{ col.displayName || col.name }}\n            @if(table.isSortingAllow && col.isShowSortIcon){\n              <p-sortIcon [field]=\"col.name\" />\n            }\n          </h4>\n        </th>\n  \n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\n          <span *ngIf=\"selection?.length && !isSelectAll\">\n            ({{ selection.length }})\n          </span>\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isAllCurrentPageSelected\"\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\n        </h4>\n        </th>\n  \n        <th\n          *ngIf=\"showActions\"\n          class=\"table-action-title table-header-wrapper\"\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\n        >\n        </th>\n  \n      </tr>\n    </ng-template>\n  \n    <!-- Body -->\n<ng-template pTemplate=\"body\" let-rowData>\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n    <!-- one TD per column -->\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\n        (click)=\"handleRowClick(rowData)\"\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\n        [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n      \n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\n          <!-- your existing inner column wrapper -->\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\n                <!-- task items - check this first -->\n                <ng-container *ngSwitchCase=\"'taskItems'\">\n                  <div class=\"col-tasks\">\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : (taskItem.status === 'default' ? 'task-default' : 'task-success')\">\n                        <span class=\"font-semibold\">{{ taskItem.type }}</span>\n                        <span *ngIf=\"taskItem.count !== null && taskItem.count !== undefined\" class=\"task-badge\">{{ taskItem.count }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              \n                <!-- Finance amount with special styling -->\n                <ng-container *ngSwitchCase=\"'finance'\">\n                  <p class=\"text-black font-semibold mb-0\">\n                    {{ rowData[col.name].amount }}\n                  </p>\n                </ng-container>\n              \n                <!-- App ID with type and risk tags -->\n                <ng-container *ngSwitchCase=\"'appId'\">\n                  <div class=\"w-full text-left\">\n                    <p class=\"font-semibold mb-0 text-black\">{{ rowData[col.name].appId }}</p>\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\n                      <!-- Type chip using style config (lending) -->\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\n                        <small class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\n                          {{ rowData[col.name].type }}\n                        </small>\n                      </div>\n                      <!-- Risk chip using style config (riskRating) -->\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\n                        <small class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\n                          {{ rowData[col.name].risk }}\n                        </small>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n                \n                <!-- Broker with name and company name -->\n                <ng-container *ngSwitchCase=\"'broker'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\n                      {{ rowData[col.name].brokerCompanyName }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!--Render two lines with dynamic classes for any two-line column -->\n                <ng-container *ngSwitchCase=\"'twoLine'\">\n                  <div class=\"w-full\" [ngClass]=\"[\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\n                      rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\n                    ]\">\n                    <div class=\"row-multi-line-wrapper flex align-items-center justify-content-center\">\n                      <i\n                        *ngIf=\"rowData[col.name]?.iconClass && rowData[col.name]?.addressLine1\"\n                        class=\"pi\"\n                        [ngClass]=\"[rowData[col.name].addressLine1, rowData[col.name].iconClass]\"\n                      ></i>\n                      <span\n                        *ngIf=\"!rowData[col.name]?.iconClass\"\n                        [ngClass]=\"getLine1DisplayClasses(col, rowData)\"\n                      >\n                        {{ rowData[col.name]?.addressLine1 }}\n                      </span>\n                    </div>\n                    <p class=\"row-multi-line-wrapper\"\n                      [ngClass]=\"rowData[col.name]?.textClass || (col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : '')\">\n                      {{ rowData[col.name]?.postCode }}\n                  </p>\n                  </div>\n                </ng-container>\n                <!-- progress bar -->\n                <ng-container *ngSwitchCase=\"'progress'\">\n                  <div class=\"progress-wrapper\">\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\n                    </round-progress>\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\n                      {{ rowData[col.name] }}\n                    </div>\n                  </div>\n              \n                </ng-container>\n                <!-- Default cell rendering for other columns -->\n                <ng-container *ngSwitchDefault>\n                  <!-- Don't render default content if we have task items -->\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\n                  <div\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\n                    [ngClass]=\"[\n                      getRowClass(col, rowData),\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\n                    ]\"\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\n                  >\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"rowData[col.name]?.containerClass || (col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : '')\">\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                    </div>\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\n                      <div class=\"w-full text-left\">\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                      </div>\n                    </ng-container>\n                    <ng-template #bubbleOrFallback>\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\n                        <div class=\"flex flex-column gap-1\">\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\n                            <p\n                              class=\"mb-0\"\n                              [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : 'text-gray-700'\"\n                            >\n                              {{ bubble.fullName }}\n                          </p>\n                          </ng-container>\n                        </div>\n                      </ng-container>\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\n                        <div class=\"flex align-items-center gap-2\">\n                          <i\n                            *ngIf=\"rowData[col.name]?.icon\"\n                            class=\"pi\"\n                            [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\n                          ></i>\n                          <p class=\"mb-0\" [ngClass]=\"rowData[col.name]?.textClass || (col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : '')\">\n                            {{ rowData[col.name]?.text || rowData[col.name] }}\n                          </p>\n                        </div>\n                      </ng-container>\n                    </ng-template>\n                    <div\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\n                      class=\"text-black-500 text-sm mt-1\"\n                      style=\"font-weight: 600;\"\n                    >\n                      {{ rowData[table.descriptionColumnName] }}\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n              </ng-container>\n            </div>\n        </div>\n        </div>\n    </td>\n    <!-- Checkbox column -->\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\n       [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\n      </div>\n    </td>\n\n    <!-- Actions column -->\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\n        <p-button\n          icon=\"pi pi-trash\"\n          (click)=\"deleteRow($event, rowData)\"\n          class=\"delete-icon-wrapper mr-3\"\n          [disabled]=\"!enableSelection\"\n        ></p-button>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n  \n    <!-- Empty Message -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\n          class=\"text-center text-color font-semibold p-4\"\n        >\n           {{ noRecordsMessage }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n<!-- Paginator -->\n  <div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\n  <div class=\"pagination-text text-color\">\n    Showing {{ (metaData?.totalItems ?? 0) > 0 ? (((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1) : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\n  </div>\n\n  <p-paginator\n    #paginator\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    (onPageChange)=\"handleLoadRecords($event)\"\n  ></p-paginator>\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.queue-chip{display:inline-flex;align-items:center;justify-content:center;padding:0 .75rem;min-height:1.5rem;border-radius:9999px;font-size:12px;font-weight:600;line-height:1.2;white-space:nowrap;gap:.25rem;background-color:#e5e7eb;color:#111827;border:1px solid transparent;width:fit-content;max-width:100%}.queue-chip--danger{background-color:var(--color-red-600, #dc2626);color:#fff}.queue-chip--warning{background-color:var(--color-amber-500, #f59e0b);color:#fff}.queue-chip--neutral{background-color:var(--color-gray-300, #d1d5db);color:#111827}.queue-chip--success{background-color:var(--color-green-500, #22c55e);color:#fff}.queue-chip--info{background-color:var(--color-blue-500, #3b82f6);color:#fff}.queue-chip--light-green-success{background-color:var(--color-green-50, #f0fdf4);color:var(--color-green-700, #15803d);border:1px solid var(--color-green-200, #bbf7d0)}.queue-chip--light-amber-warning{background-color:var(--color-amber-50, #fffbeb);color:var(--color-amber-700, #b45309);border:1px solid var(--color-amber-200, #fde68a)}.queue-chip--light-red-danger{background-color:var(--color-red-50, #fef2f2);color:var(--color-red-700, #b91c1c);border:1px solid var(--color-red-200, #fecaca)}.queue-chip--light-neutral{background-color:var(--color-blue-50, #eff6ff);color:var(--color-blue-700, #1e40af);border:1px solid var(--color-blue-200, #bfdbfe)}.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-wrapper{background-color:#0f8bfd05}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-default{background-color:transparent;color:#1f2937;border:1px solid #d1d5db}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"] }]
         }], ctorParameters: () => [{ type: i3$4.Router }, { type: BaseService }, { type: SessionService }, { type: BaseQuery }, { type: BaseStore }, { type: QueueBusinessService }, { type: QueueQuery$1 }], propDecorators: { table: [{
                 type: Input
             }], metaData: [{
@@ -5923,11 +5923,11 @@ class WidgetMainComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetMainComponent, deps: [{ token: StyleBuilderService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetMainComponent, isStandalone: false, selector: "lib-widget-main", inputs: { widget: "widget", index: "index", isFullHeight: "isFullHeight" }, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"widgetCombinedStyle\" class=\"widget-container-wrapper h-full\" [ngClass]=\"{'h-full': isFullHeight, 'mt-4': index !== 0}\">\n  <div class=\"widget-container-wrapper\">\n    <lib-widget-header [widget]=\"widget\"></lib-widget-header>\n    <div [ngClass]=\"[(widget.header || widget.subHeader) ? 'widget-content-wrapper' : '', widget.style.width === 'col-6' ? 'px-2' : '']\" class=\"py-3\">\n      <lib-widget-body [widget]=\"widget\"></lib-widget-body>\n      <lib-widget-footer [widget]=\"widget\"></lib-widget-footer>\n    </div>\n  </div>\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetHeaderComponent, selector: "lib-widget-header", inputs: ["widget"] }, { kind: "component", type: WidgetFooterComponent, selector: "lib-widget-footer", inputs: ["widget"] }, { kind: "component", type: WidgetBodyComponent, selector: "lib-widget-body", inputs: ["widget"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetMainComponent, isStandalone: false, selector: "lib-widget-main", inputs: { widget: "widget", index: "index", isFullHeight: "isFullHeight" }, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"widgetCombinedStyle\" class=\"widget-container-wrapper h-full\" [ngClass]=\"{'h-full': isFullHeight, 'mt-4': index !== 0}\">\n  <div class=\"widget-container-wrapper\">\n    <lib-widget-header [widget]=\"widget\"></lib-widget-header>\n    <div [ngClass]=\"[(widget.header || widget.subHeader) ? 'widget-content-wrapper' : '', widget.style.width === 'col-6' ? 'px-2' : '']\" class=\"py-3\">\n      <lib-widget-body [widget]=\"widget\"></lib-widget-body>\n      <lib-widget-footer [widget]=\"widget\"></lib-widget-footer>\n    </div>\n  </div>\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: WidgetHeaderComponent, selector: "lib-widget-header", inputs: ["widget"] }, { kind: "component", type: WidgetFooterComponent, selector: "lib-widget-footer", inputs: ["widget"] }, { kind: "component", type: WidgetBodyComponent, selector: "lib-widget-body", inputs: ["widget"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-main', standalone: false, template: "<div [ngStyle]=\"widgetCombinedStyle\" class=\"widget-container-wrapper h-full\" [ngClass]=\"{'h-full': isFullHeight, 'mt-4': index !== 0}\">\n  <div class=\"widget-container-wrapper\">\n    <lib-widget-header [widget]=\"widget\"></lib-widget-header>\n    <div [ngClass]=\"[(widget.header || widget.subHeader) ? 'widget-content-wrapper' : '', widget.style.width === 'col-6' ? 'px-2' : '']\" class=\"py-3\">\n      <lib-widget-body [widget]=\"widget\"></lib-widget-body>\n      <lib-widget-footer [widget]=\"widget\"></lib-widget-footer>\n    </div>\n  </div>\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
+            args: [{ selector: 'lib-widget-main', standalone: false, template: "<div [ngStyle]=\"widgetCombinedStyle\" class=\"widget-container-wrapper h-full\" [ngClass]=\"{'h-full': isFullHeight, 'mt-4': index !== 0}\">\n  <div class=\"widget-container-wrapper\">\n    <lib-widget-header [widget]=\"widget\"></lib-widget-header>\n    <div [ngClass]=\"[(widget.header || widget.subHeader) ? 'widget-content-wrapper' : '', widget.style.width === 'col-6' ? 'px-2' : '']\" class=\"py-3\">\n      <lib-widget-body [widget]=\"widget\"></lib-widget-body>\n      <lib-widget-footer [widget]=\"widget\"></lib-widget-footer>\n    </div>\n  </div>\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
         }], ctorParameters: () => [{ type: StyleBuilderService }], propDecorators: { widget: [{
                 type: Input
             }], index: [{
@@ -6094,11 +6094,11 @@ class WidgetMenuComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetMenuComponent, deps: [{ token: WidgetService }, { token: i3$4.ActivatedRoute }, { token: WidgetQuery }, { token: WidgetStore }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetMenuComponent, isStandalone: false, selector: "lib-widget-menu", inputs: { isSidebarVisible: "isSidebarVisible", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData" }, outputs: { onViewAllDetails: "onViewAllDetails", onWidgetEventClick: "onWidgetEventClick", onWidgetItemClick: "onWidgetItemClick" }, usesOnChanges: true, ngImport: i0, template: "<p-card class=\"widget-block-wrapper block\">\n  <div class=\"widget-section-wrapper custom-scroll pt-2\">\n    <!-- Loading state -->\n    <ng-container *ngIf=\"isLoading; else widgetContent\">\n      <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\n    </ng-container>\n\n    <!-- Content after API call -->\n    <ng-template #widgetContent>\n      <ng-container *ngIf=\"(widgets && widgets.length > 0)  || (valuationWidgetData || offerWidgetData); else noWidgets\">\n      <ng-container *ngFor=\"let widget of widgets; let i = index\">\n        <lib-widget-main [widget]=\"widget\" [index]=\"i\"></lib-widget-main>\n      </ng-container>\n    <ng-container *ngIf=\"offerWidgetData\">\n        <lib-custom-widget [widgetData]=\"offerWidgetData\"></lib-custom-widget>\n      </ng-container>\n    <ng-container *ngIf=\"valuationWidgetData\">\n        <lib-custom-widget [widgetData]=\"valuationWidgetData\"></lib-custom-widget>\n      </ng-container>\n      </ng-container>\n\n      <!-- No widget configured state -->\n      <ng-template #noWidgets>\n        <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\n      </ng-template>\n    </ng-template>\n    </div>\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n", ""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: WidgetMainComponent, selector: "lib-widget-main", inputs: ["widget", "index", "isFullHeight"] }, { kind: "component", type: CustomWidgetComponent, selector: "lib-custom-widget", inputs: ["widgetData"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: WidgetMenuComponent, isStandalone: false, selector: "lib-widget-menu", inputs: { isSidebarVisible: "isSidebarVisible", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData" }, outputs: { onViewAllDetails: "onViewAllDetails", onWidgetEventClick: "onWidgetEventClick", onWidgetItemClick: "onWidgetItemClick" }, usesOnChanges: true, ngImport: i0, template: "<p-card class=\"widget-block-wrapper block\">\n  <div class=\"widget-section-wrapper custom-scroll pt-2\">\n    <!-- Loading state -->\n    <ng-container *ngIf=\"isLoading; else widgetContent\">\n      <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\n    </ng-container>\n\n    <!-- Content after API call -->\n    <ng-template #widgetContent>\n      <ng-container *ngIf=\"(widgets && widgets.length > 0)  || (valuationWidgetData || offerWidgetData); else noWidgets\">\n      <ng-container *ngFor=\"let widget of widgets; let i = index\">\n        <lib-widget-main [widget]=\"widget\" [index]=\"i\"></lib-widget-main>\n      </ng-container>\n    <ng-container *ngIf=\"offerWidgetData\">\n        <lib-custom-widget [widgetData]=\"offerWidgetData\"></lib-custom-widget>\n      </ng-container>\n    <ng-container *ngIf=\"valuationWidgetData\">\n        <lib-custom-widget [widgetData]=\"valuationWidgetData\"></lib-custom-widget>\n      </ng-container>\n      </ng-container>\n\n      <!-- No widget configured state -->\n      <ng-template #noWidgets>\n        <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\n      </ng-template>\n    </ng-template>\n    </div>\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n", ""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: WidgetMainComponent, selector: "lib-widget-main", inputs: ["widget", "index", "isFullHeight"] }, { kind: "component", type: CustomWidgetComponent, selector: "lib-custom-widget", inputs: ["widgetData"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-menu', standalone: false, template: "<p-card class=\"widget-block-wrapper block\">\n  <div class=\"widget-section-wrapper custom-scroll pt-2\">\n    <!-- Loading state -->\n    <ng-container *ngIf=\"isLoading; else widgetContent\">\n      <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\n    </ng-container>\n\n    <!-- Content after API call -->\n    <ng-template #widgetContent>\n      <ng-container *ngIf=\"(widgets && widgets.length > 0)  || (valuationWidgetData || offerWidgetData); else noWidgets\">\n      <ng-container *ngFor=\"let widget of widgets; let i = index\">\n        <lib-widget-main [widget]=\"widget\" [index]=\"i\"></lib-widget-main>\n      </ng-container>\n    <ng-container *ngIf=\"offerWidgetData\">\n        <lib-custom-widget [widgetData]=\"offerWidgetData\"></lib-custom-widget>\n      </ng-container>\n    <ng-container *ngIf=\"valuationWidgetData\">\n        <lib-custom-widget [widgetData]=\"valuationWidgetData\"></lib-custom-widget>\n      </ng-container>\n      </ng-container>\n\n      <!-- No widget configured state -->\n      <ng-template #noWidgets>\n        <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\n      </ng-template>\n    </ng-template>\n    </div>\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
+            args: [{ selector: 'lib-widget-menu', standalone: false, template: "<p-card class=\"widget-block-wrapper block\">\n  <div class=\"widget-section-wrapper custom-scroll pt-2\">\n    <!-- Loading state -->\n    <ng-container *ngIf=\"isLoading; else widgetContent\">\n      <p class=\"text-color ml-3 font-semibold\">Widget configuration loading...</p>\n    </ng-container>\n\n    <!-- Content after API call -->\n    <ng-template #widgetContent>\n      <ng-container *ngIf=\"(widgets && widgets.length > 0)  || (valuationWidgetData || offerWidgetData); else noWidgets\">\n      <ng-container *ngFor=\"let widget of widgets; let i = index\">\n        <lib-widget-main [widget]=\"widget\" [index]=\"i\"></lib-widget-main>\n      </ng-container>\n    <ng-container *ngIf=\"offerWidgetData\">\n        <lib-custom-widget [widgetData]=\"offerWidgetData\"></lib-custom-widget>\n      </ng-container>\n    <ng-container *ngIf=\"valuationWidgetData\">\n        <lib-custom-widget [widgetData]=\"valuationWidgetData\"></lib-custom-widget>\n      </ng-container>\n      </ng-container>\n\n      <!-- No widget configured state -->\n      <ng-template #noWidgets>\n        <p class=\"text-color ml-3 font-semibold\">No Widgets Configured</p>\n      </ng-template>\n    </ng-template>\n    </div>\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
         }], ctorParameters: () => [{ type: WidgetService }, { type: i3$4.ActivatedRoute }, { type: WidgetQuery }, { type: WidgetStore }, { type: i0.ChangeDetectorRef }], propDecorators: { onViewAllDetails: [{
                 type: Output
             }], onWidgetEventClick: [{
@@ -6189,11 +6189,11 @@ class WidgetRowTileComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetRowTileComponent, deps: [{ token: WidgetService }, { token: WidgetStore }, { token: StyleBuilderService }, { token: i0.ChangeDetectorRef }, { token: WidgetQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetRowTileComponent, isStandalone: false, selector: "lib-widget-row-tile", inputs: { recordId: "recordId", widgetName: "widgetName", onWidgetUpdate: "onWidgetUpdate", isFullHeight: "isFullHeight" }, outputs: { onWidgetItemClick: "onWidgetItemClick" }, usesOnChanges: true, ngImport: i0, template: "<p-card [style]=\"widgetCombinedStyle\" class=\"widget-block-wrapper block\" [ngClass]=\"{'h-full': isFullHeight}\">\n  <div class=\"widget-section-wrapper\" [ngClass]=\"{'h-full': isFullHeight}\">\n    <!-- Loading state -->\n    @if (isLoading) {\n      @for (n of [1, 2, 3]; track $index) {\n      <div style=\"padding: 6px;\">\n        <p-skeleton width=\"100%\" height=\"45px\" styleClass=\"mb-3\"></p-skeleton>\n      </div>\n      }\n    } @else {\n\n      <!-- Widgets Exist -->\n      @if (widgets && widgets.length > 0) {\n        @for (widget of widgets; let i = $index; track i) {\n          <lib-widget-main \n            [widget]=\"widget\" \n            [index]=\"i\" \n            [isFullHeight]=\"isFullHeight\"\n          ></lib-widget-main>\n        }\n      } @else {\n      <!-- No Widgets -->\n        <p class=\"text-color ml-3 font-semibold\">\n          No Widgets Configured\n        </p>\n      }\n    }\n  </div>\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i2$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: WidgetMainComponent, selector: "lib-widget-main", inputs: ["widget", "index", "isFullHeight"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetRowTileComponent, isStandalone: false, selector: "lib-widget-row-tile", inputs: { recordId: "recordId", widgetName: "widgetName", onWidgetUpdate: "onWidgetUpdate", isFullHeight: "isFullHeight" }, outputs: { onWidgetItemClick: "onWidgetItemClick" }, usesOnChanges: true, ngImport: i0, template: "<p-card [style]=\"widgetCombinedStyle\" class=\"widget-block-wrapper block\" [ngClass]=\"{'h-full': isFullHeight}\">\n  <div class=\"widget-section-wrapper\" [ngClass]=\"{'h-full': isFullHeight}\">\n    <!-- Loading state -->\n    @if (isLoading) {\n      @for (n of [1, 2, 3]; track $index) {\n      <div style=\"padding: 6px;\">\n        <p-skeleton width=\"100%\" height=\"45px\" styleClass=\"mb-3\"></p-skeleton>\n      </div>\n      }\n    } @else {\n\n      <!-- Widgets Exist -->\n      @if (widgets && widgets.length > 0) {\n        @for (widget of widgets; let i = $index; track i) {\n          <lib-widget-main \n            [widget]=\"widget\" \n            [index]=\"i\" \n            [isFullHeight]=\"isFullHeight\"\n          ></lib-widget-main>\n        }\n      } @else {\n      <!-- No Widgets -->\n        <p class=\"text-color ml-3 font-semibold\">\n          No Widgets Configured\n        </p>\n      }\n    }\n  </div>\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n", ""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i6$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i2$3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: WidgetMainComponent, selector: "lib-widget-main", inputs: ["widget", "index", "isFullHeight"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetRowTileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-row-tile', standalone: false, template: "<p-card [style]=\"widgetCombinedStyle\" class=\"widget-block-wrapper block\" [ngClass]=\"{'h-full': isFullHeight}\">\n  <div class=\"widget-section-wrapper\" [ngClass]=\"{'h-full': isFullHeight}\">\n    <!-- Loading state -->\n    @if (isLoading) {\n      @for (n of [1, 2, 3]; track $index) {\n      <div style=\"padding: 6px;\">\n        <p-skeleton width=\"100%\" height=\"45px\" styleClass=\"mb-3\"></p-skeleton>\n      </div>\n      }\n    } @else {\n\n      <!-- Widgets Exist -->\n      @if (widgets && widgets.length > 0) {\n        @for (widget of widgets; let i = $index; track i) {\n          <lib-widget-main \n            [widget]=\"widget\" \n            [index]=\"i\" \n            [isFullHeight]=\"isFullHeight\"\n          ></lib-widget-main>\n        }\n      } @else {\n      <!-- No Widgets -->\n        <p class=\"text-color ml-3 font-semibold\">\n          No Widgets Configured\n        </p>\n      }\n    }\n  </div>\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
+            args: [{ selector: 'lib-widget-row-tile', standalone: false, template: "<p-card [style]=\"widgetCombinedStyle\" class=\"widget-block-wrapper block\" [ngClass]=\"{'h-full': isFullHeight}\">\n  <div class=\"widget-section-wrapper\" [ngClass]=\"{'h-full': isFullHeight}\">\n    <!-- Loading state -->\n    @if (isLoading) {\n      @for (n of [1, 2, 3]; track $index) {\n      <div style=\"padding: 6px;\">\n        <p-skeleton width=\"100%\" height=\"45px\" styleClass=\"mb-3\"></p-skeleton>\n      </div>\n      }\n    } @else {\n\n      <!-- Widgets Exist -->\n      @if (widgets && widgets.length > 0) {\n        @for (widget of widgets; let i = $index; track i) {\n          <lib-widget-main \n            [widget]=\"widget\" \n            [index]=\"i\" \n            [isFullHeight]=\"isFullHeight\"\n          ></lib-widget-main>\n        }\n      } @else {\n      <!-- No Widgets -->\n        <p class=\"text-color ml-3 font-semibold\">\n          No Widgets Configured\n        </p>\n      }\n    }\n  </div>\n</p-card>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
         }], ctorParameters: () => [{ type: WidgetService }, { type: WidgetStore }, { type: StyleBuilderService }, { type: i0.ChangeDetectorRef }, { type: WidgetQuery }], propDecorators: { recordId: [{
                 type: Input
             }], widgetName: [{
@@ -6257,11 +6257,11 @@ class WidgetContainerComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetContainerComponent, deps: [{ token: WidgetStore }, { token: WidgetQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetContainerComponent, isStandalone: false, selector: "lib-widget-container", inputs: { isMenu: "isMenu", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData", widgetName: "widgetName", recordId: "recordId", onWidgetUpdate: "onWidgetUpdate", isFullHeight: "isFullHeight" }, outputs: { onViewAllDetails: "onViewAllDetails", onWidgetEventClick: "onWidgetEventClick", onWidgetItemClick: "onWidgetItemClick", onUpdatedWidgetList: "onUpdatedWidgetList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container-wrapper\" [ngClass]=\"{'h-full': isFullHeight}\">\n  @if(isMenu) {\n    <div class=\"bg-white widget-menu-container\">\n    <lib-widget-menu \n    [offerWidgetData]=\"offerWidgetData\"\n    [valuationWidgetData]=\"valuationWidgetData\"\n    (onViewAllDetails)=\"handleViewAllDetails($event)\"\n    (onWidgetEventClick)=\"handleWidgetEventClick($event)\"\n    (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\n    ></lib-widget-menu>\n    </div>\n  } @else {\n    <div class=\"bg-white widget-menu-container\" [ngClass]=\"{'h-full': isFullHeight}\">\n      <lib-widget-row-tile\n      [recordId]=\"recordId\"\n      [widgetName]=\"widgetName\"\n      [onWidgetUpdate]=\"onWidgetUpdate\"\n      [isFullHeight]=\"isFullHeight\"\n      (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\n      ></lib-widget-row-tile>\n    </div>\n  }\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: WidgetMenuComponent, selector: "lib-widget-menu", inputs: ["isSidebarVisible", "offerWidgetData", "valuationWidgetData"], outputs: ["onViewAllDetails", "onWidgetEventClick", "onWidgetItemClick"] }, { kind: "component", type: WidgetRowTileComponent, selector: "lib-widget-row-tile", inputs: ["recordId", "widgetName", "onWidgetUpdate", "isFullHeight"], outputs: ["onWidgetItemClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetContainerComponent, isStandalone: false, selector: "lib-widget-container", inputs: { isMenu: "isMenu", offerWidgetData: "offerWidgetData", valuationWidgetData: "valuationWidgetData", widgetName: "widgetName", recordId: "recordId", onWidgetUpdate: "onWidgetUpdate", isFullHeight: "isFullHeight" }, outputs: { onViewAllDetails: "onViewAllDetails", onWidgetEventClick: "onWidgetEventClick", onWidgetItemClick: "onWidgetItemClick", onUpdatedWidgetList: "onUpdatedWidgetList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container-wrapper\" [ngClass]=\"{'h-full': isFullHeight}\">\n  @if(isMenu) {\n    <div class=\"bg-white widget-menu-container\">\n    <lib-widget-menu \n    [offerWidgetData]=\"offerWidgetData\"\n    [valuationWidgetData]=\"valuationWidgetData\"\n    (onViewAllDetails)=\"handleViewAllDetails($event)\"\n    (onWidgetEventClick)=\"handleWidgetEventClick($event)\"\n    (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\n    ></lib-widget-menu>\n    </div>\n  } @else {\n    <div class=\"bg-white widget-menu-container\" [ngClass]=\"{'h-full': isFullHeight}\">\n      <lib-widget-row-tile\n      [recordId]=\"recordId\"\n      [widgetName]=\"widgetName\"\n      [onWidgetUpdate]=\"onWidgetUpdate\"\n      [isFullHeight]=\"isFullHeight\"\n      (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\n      ></lib-widget-row-tile>\n    </div>\n  }\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: WidgetMenuComponent, selector: "lib-widget-menu", inputs: ["isSidebarVisible", "offerWidgetData", "valuationWidgetData"], outputs: ["onViewAllDetails", "onWidgetEventClick", "onWidgetItemClick"] }, { kind: "component", type: WidgetRowTileComponent, selector: "lib-widget-row-tile", inputs: ["recordId", "widgetName", "onWidgetUpdate", "isFullHeight"], outputs: ["onWidgetItemClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-container', standalone: false, template: "<div class=\"widget-container-wrapper\" [ngClass]=\"{'h-full': isFullHeight}\">\n  @if(isMenu) {\n    <div class=\"bg-white widget-menu-container\">\n    <lib-widget-menu \n    [offerWidgetData]=\"offerWidgetData\"\n    [valuationWidgetData]=\"valuationWidgetData\"\n    (onViewAllDetails)=\"handleViewAllDetails($event)\"\n    (onWidgetEventClick)=\"handleWidgetEventClick($event)\"\n    (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\n    ></lib-widget-menu>\n    </div>\n  } @else {\n    <div class=\"bg-white widget-menu-container\" [ngClass]=\"{'h-full': isFullHeight}\">\n      <lib-widget-row-tile\n      [recordId]=\"recordId\"\n      [widgetName]=\"widgetName\"\n      [onWidgetUpdate]=\"onWidgetUpdate\"\n      [isFullHeight]=\"isFullHeight\"\n      (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\n      ></lib-widget-row-tile>\n    </div>\n  }\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
+            args: [{ selector: 'lib-widget-container', standalone: false, template: "<div class=\"widget-container-wrapper\" [ngClass]=\"{'h-full': isFullHeight}\">\n  @if(isMenu) {\n    <div class=\"bg-white widget-menu-container\">\n    <lib-widget-menu \n    [offerWidgetData]=\"offerWidgetData\"\n    [valuationWidgetData]=\"valuationWidgetData\"\n    (onViewAllDetails)=\"handleViewAllDetails($event)\"\n    (onWidgetEventClick)=\"handleWidgetEventClick($event)\"\n    (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\n    ></lib-widget-menu>\n    </div>\n  } @else {\n    <div class=\"bg-white widget-menu-container\" [ngClass]=\"{'h-full': isFullHeight}\">\n      <lib-widget-row-tile\n      [recordId]=\"recordId\"\n      [widgetName]=\"widgetName\"\n      [onWidgetUpdate]=\"onWidgetUpdate\"\n      [isFullHeight]=\"isFullHeight\"\n      (onWidgetItemClick)=\"handleWidgetItemClick($event)\"\n      ></lib-widget-row-tile>\n    </div>\n  }\n</div>", styles: ["::ng-deep .badge-wrapper .p-button{padding:4px 8px}::ng-deep .refresh-btn-wrapper .p-button{padding:0}::ng-deep .valuation-timeline-wrapper .p-timeline-event-opposite{display:none}::ng-deep .rating-badge-wrapper .p-button{display:flex;align-items:center}::ng-deep .widget-block-wrapper{height:100%}::ng-deep .widget-block-wrapper .p-card{height:100%;background-color:var(--surface-0);border-radius:10px;box-shadow:none}::ng-deep .widget-block-wrapper .p-card-body{padding:0;height:100%}::ng-deep .widget-block-wrapper .p-card-content{padding:0;height:100%}.application-title-wrapper{font-size:18px;font-weight:400}.application-section-wrapper{background-color:#4c629208;border:1px solid rgba(76,98,146,.1);border-radius:10px}.widget-section-wrapper{height:100%}.widget-menu-container{border-radius:10px}:host ::-webkit-scrollbar{width:7px}:host ::-webkit-scrollbar-track{background:transparent}:host ::-webkit-scrollbar-thumb{background:#d1d5db94;border-radius:20px}\n"] }]
         }], ctorParameters: () => [{ type: WidgetStore }, { type: WidgetQuery }], propDecorators: { isMenu: [{
                 type: Input
             }], offerWidgetData: [{
@@ -6593,6 +6593,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
  */
 class QueueService extends BaseService {
     queueStore;
+    recordCache = new Map();
+    CACHE_TTL_MS = 2 * 60 * 1000; // 2 minutes
+    buildCacheKey(apiConfig, searchKey, page = 1, limit = 10, query, sortBy, sortOrder) {
+        return `${apiConfig}|${searchKey ?? ''}|${page}|${limit}|${query ?? ''}|${sortBy ?? ''}|${sortOrder ?? ''}`;
+    }
+    clearCache(apiConfig) {
+        if (apiConfig) {
+            this.recordCache.forEach((_, key) => {
+                if (key.startsWith(apiConfig + '|')) {
+                    this.recordCache.delete(key);
+                }
+            });
+        }
+        else {
+            this.recordCache.clear();
+        }
+    }
     /**
      * Creates an instance of QueueService.
      * @param {QueueStore} queueStore - The store that manages the QueueModel state
@@ -6676,8 +6693,14 @@ class QueueService extends BaseService {
         }
         const paramsString = new URLSearchParams(params).toString();
         url += (url.includes('?') ? '&' : '?') + paramsString;
+        const cacheKey = this.buildCacheKey(apiConfig, searchKey, page, limit, query, sortBy, sortOrder);
+        const cached = this.recordCache.get(cacheKey);
+        if (cached && (Date.now() - cached.timestamp) < this.CACHE_TTL_MS) {
+            return of(cached.data);
+        }
         // Use POST method with body containing underwriterIds and unassigned
         return this.http.post(url, body).pipe(tap$1((response) => {
+            this.recordCache.set(cacheKey, { data: response, timestamp: Date.now() });
             if (response && response.data) {
                 this.queueStore.set(response.data);
             }
@@ -7121,11 +7144,11 @@ class QueueSearchComponent {
         return !!this.searchText;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueSearchComponent, isStandalone: false, selector: "queue-search", inputs: { searchText: "searchText", placeholder: "placeholder", debounceTime: "debounceTime" }, outputs: { searchInputChanged: "searchInputChanged", searchRequested: "searchRequested", searchCleared: "searchCleared" }, ngImport: i0, template: "<div class=\"flex xl:mt-0 xl:justify-content-between align-items-center bg-white\" style=\"border: 1px solid #e0e4ea; border-radius: 8px; height: 44px;\">\n    <div class=\"p-field m-0 p-0 w-full bg-white border-round\" >\n        <div class=\"p-inputgroup border-round bg-white\" style=\"height: 100%;\">\n            <span class=\"p-inputgroup-addon bg-white\" style=\"height: 100%; display: flex; align-items: center;\">\n              <i class=\"pi pi-search\"></i>\n            </span>\n            <input \n              type=\"text\"  \n              [(ngModel)]=\"searchText\"  \n              class=\"border-none p-0 border-noround-right bg-white w-full outline-none\" \n              style=\"height: 100%;\" \n              pInputText \n              [placeholder]=\"placeholder\" \n              (input)=\"onSearchInputChange()\"\n              (keydown.enter)=\"onSearch()\"  \n            />\n            <button \n              *ngIf=\"hasSearchText\" \n              type=\"button\" \n              class=\"p-inputgroup-addon bg-white border-none cursor-pointer\" \n              (click)=\"onClearSearch()\"\n              pButton \n              icon=\"pi pi-times\"\n              [text]=\"true\"\n              style=\"height: 100%; display: flex; align-items: center; border-radius: 8px;\"\n            ></button>\n        </div>\n    </div>\n  </div>\n  ", styles: [".p-inputgroup{width:100%;display:flex;align-items:center;height:44px}.p-inputgroup-addon{display:flex;align-items:center;height:100%}input[type=text],input.p-inputtext{height:100%;display:flex;align-items:center;padding-top:0;padding-bottom:0;box-sizing:border-box}button.p-inputgroup-addon{display:flex;align-items:center;height:100%}.bg-primary{background-color:#d9d9d9}::ng-deep .left-arrow-dropdown .p-dropdown{direction:rtl;width:100%;height:44px;border-top-left-radius:0;border-bottom-left-radius:0}::ng-deep .left-arrow-dropdown .p-dropdown-label{display:flex;align-items:center}.h-44{height:44px}@media screen and (min-width: 1200px){.vh-100{height:calc(100vh - 170px)}}.bg-while{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueSearchComponent, isStandalone: false, selector: "queue-search", inputs: { searchText: "searchText", placeholder: "placeholder", debounceTime: "debounceTime" }, outputs: { searchInputChanged: "searchInputChanged", searchRequested: "searchRequested", searchCleared: "searchCleared" }, ngImport: i0, template: "<div class=\"flex xl:mt-0 xl:justify-content-between align-items-center bg-white\" style=\"border: 1px solid #E2E8F0; border-radius: 8px; height: 40px;\">\n    <div class=\"p-field m-0 p-0 w-full bg-white border-round\" >\n        <div class=\"p-inputgroup border-round bg-white\" style=\"height: 100%;\">\n            <span class=\"p-inputgroup-addon bg-white\" style=\"height: 100%; display: flex; align-items: center;\">\n              <i class=\"pi pi-search\"></i>\n            </span>\n            <input \n              type=\"text\"  \n              [(ngModel)]=\"searchText\"  \n              class=\"border-none p-0 border-noround-right bg-white w-full outline-none\" \n              style=\"height: 100%;\" \n              pInputText \n              [placeholder]=\"placeholder\" \n              (input)=\"onSearchInputChange()\"\n              (keydown.enter)=\"onSearch()\"  \n            />\n            <button \n              *ngIf=\"hasSearchText\" \n              type=\"button\" \n              class=\"p-inputgroup-addon bg-white border-none cursor-pointer\" \n              (click)=\"onClearSearch()\"\n              pButton \n              icon=\"pi pi-times\"\n              [text]=\"true\"\n              style=\"height: 100%; display: flex; align-items: center; border-radius: 8px;\"\n            ></button>\n        </div>\n    </div>\n  </div>\n  ", styles: [".p-inputgroup{width:100%;display:flex;align-items:center;height:40px}input::placeholder{font-family:Open Sans,sans-serif;font-weight:400;font-size:12px;color:#9ca3af}input{font-family:Open Sans,sans-serif;font-size:12px}.p-inputgroup-addon{display:flex;align-items:center;height:100%}input[type=text],input.p-inputtext{height:100%;display:flex;align-items:center;padding-top:0;padding-bottom:0;box-sizing:border-box}button.p-inputgroup-addon{display:flex;align-items:center;height:100%}.bg-primary{background-color:#d9d9d9}::ng-deep .left-arrow-dropdown .p-dropdown{direction:rtl;width:100%;height:44px;border-top-left-radius:0;border-bottom-left-radius:0}::ng-deep .left-arrow-dropdown .p-dropdown-label{display:flex;align-items:center}.h-44{height:44px}@media screen and (min-width: 1200px){.vh-100{height:calc(100vh - 170px)}}.bg-while{background-color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueSearchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'queue-search', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex xl:mt-0 xl:justify-content-between align-items-center bg-white\" style=\"border: 1px solid #e0e4ea; border-radius: 8px; height: 44px;\">\n    <div class=\"p-field m-0 p-0 w-full bg-white border-round\" >\n        <div class=\"p-inputgroup border-round bg-white\" style=\"height: 100%;\">\n            <span class=\"p-inputgroup-addon bg-white\" style=\"height: 100%; display: flex; align-items: center;\">\n              <i class=\"pi pi-search\"></i>\n            </span>\n            <input \n              type=\"text\"  \n              [(ngModel)]=\"searchText\"  \n              class=\"border-none p-0 border-noround-right bg-white w-full outline-none\" \n              style=\"height: 100%;\" \n              pInputText \n              [placeholder]=\"placeholder\" \n              (input)=\"onSearchInputChange()\"\n              (keydown.enter)=\"onSearch()\"  \n            />\n            <button \n              *ngIf=\"hasSearchText\" \n              type=\"button\" \n              class=\"p-inputgroup-addon bg-white border-none cursor-pointer\" \n              (click)=\"onClearSearch()\"\n              pButton \n              icon=\"pi pi-times\"\n              [text]=\"true\"\n              style=\"height: 100%; display: flex; align-items: center; border-radius: 8px;\"\n            ></button>\n        </div>\n    </div>\n  </div>\n  ", styles: [".p-inputgroup{width:100%;display:flex;align-items:center;height:44px}.p-inputgroup-addon{display:flex;align-items:center;height:100%}input[type=text],input.p-inputtext{height:100%;display:flex;align-items:center;padding-top:0;padding-bottom:0;box-sizing:border-box}button.p-inputgroup-addon{display:flex;align-items:center;height:100%}.bg-primary{background-color:#d9d9d9}::ng-deep .left-arrow-dropdown .p-dropdown{direction:rtl;width:100%;height:44px;border-top-left-radius:0;border-bottom-left-radius:0}::ng-deep .left-arrow-dropdown .p-dropdown-label{display:flex;align-items:center}.h-44{height:44px}@media screen and (min-width: 1200px){.vh-100{height:calc(100vh - 170px)}}.bg-while{background-color:#fff}\n"] }]
+            args: [{ selector: 'queue-search', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex xl:mt-0 xl:justify-content-between align-items-center bg-white\" style=\"border: 1px solid #E2E8F0; border-radius: 8px; height: 40px;\">\n    <div class=\"p-field m-0 p-0 w-full bg-white border-round\" >\n        <div class=\"p-inputgroup border-round bg-white\" style=\"height: 100%;\">\n            <span class=\"p-inputgroup-addon bg-white\" style=\"height: 100%; display: flex; align-items: center;\">\n              <i class=\"pi pi-search\"></i>\n            </span>\n            <input \n              type=\"text\"  \n              [(ngModel)]=\"searchText\"  \n              class=\"border-none p-0 border-noround-right bg-white w-full outline-none\" \n              style=\"height: 100%;\" \n              pInputText \n              [placeholder]=\"placeholder\" \n              (input)=\"onSearchInputChange()\"\n              (keydown.enter)=\"onSearch()\"  \n            />\n            <button \n              *ngIf=\"hasSearchText\" \n              type=\"button\" \n              class=\"p-inputgroup-addon bg-white border-none cursor-pointer\" \n              (click)=\"onClearSearch()\"\n              pButton \n              icon=\"pi pi-times\"\n              [text]=\"true\"\n              style=\"height: 100%; display: flex; align-items: center; border-radius: 8px;\"\n            ></button>\n        </div>\n    </div>\n  </div>\n  ", styles: [".p-inputgroup{width:100%;display:flex;align-items:center;height:40px}input::placeholder{font-family:Open Sans,sans-serif;font-weight:400;font-size:12px;color:#9ca3af}input{font-family:Open Sans,sans-serif;font-size:12px}.p-inputgroup-addon{display:flex;align-items:center;height:100%}input[type=text],input.p-inputtext{height:100%;display:flex;align-items:center;padding-top:0;padding-bottom:0;box-sizing:border-box}button.p-inputgroup-addon{display:flex;align-items:center;height:100%}.bg-primary{background-color:#d9d9d9}::ng-deep .left-arrow-dropdown .p-dropdown{direction:rtl;width:100%;height:44px;border-top-left-radius:0;border-bottom-left-radius:0}::ng-deep .left-arrow-dropdown .p-dropdown-label{display:flex;align-items:center}.h-44{height:44px}@media screen and (min-width: 1200px){.vh-100{height:calc(100vh - 170px)}}.bg-while{background-color:#fff}\n"] }]
         }], propDecorators: { searchText: [{
                 type: Input
             }], placeholder: [{
@@ -7169,12 +7192,40 @@ class QueueItemComponent {
     isQueueSelected(queueId) {
         return queueId === this.selectedQueueId;
     }
+    iconMap = [
+        ['unassigned', 'pi-inbox'],
+        ['assigned', 'pi-star'],
+        ['all application', 'pi-th-large'],
+        ['withdrawal', 'pi-times-circle'],
+        ['withdrawn', 'pi-times-circle'],
+        ['decline', 'pi-ban'],
+        ['post underwriting', 'pi-check-square'],
+        ['mandate requested', 'pi-file-edit'],
+        ['mandate', 'pi-file'],
+        ['exception', 'pi-exclamation-circle'],
+        ['referred', 'pi-directions'],
+        ['completion', 'pi-check-circle'],
+        ['new application', 'pi-plus-circle'],
+        ['offer', 'pi-gift'],
+        ['valuation', 'pi-chart-bar'],
+        ['issue', 'pi-send']
+    ];
+    getQueueIcon(name) {
+        if (!name)
+            return 'pi-list';
+        const lowerName = name.toLowerCase();
+        for (const [key, icon] of this.iconMap) {
+            if (lowerName.includes(key))
+                return icon;
+        }
+        return 'pi-list';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueItemComponent, deps: [{ token: QueueStore$1 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: QueueItemComponent, isStandalone: false, selector: "app-queue-item", inputs: { filteredQueueData: "filteredQueueData", selectedQueueId: "selectedQueueId", selectedStatus: "selectedStatus", userRole: "userRole", showQueueDataForm: "showQueueDataForm" }, outputs: { queueSelected: "queueSelected", statusChanged: "statusChanged", insertQueueRequested: "insertQueueRequested" }, ngImport: i0, template: "<div class=\"p-4 pt-3 mb-0\">\n    <div class=\"queues overflow-x-hidden queue-item-wrapper\">\n        <h4 class=\"queue-title-wrapper m-0 mb-3 pb-1\">Queues</h4>\n        @for(queue of filteredQueueData; let i = $index; track queue){\n\n            <div class=\"flex m-0 kanban-list\" [ngClass]=\"{'mt-2 pt-1': i !== 0}\" #listEl style=\"min-height:2rem\" (click)=\"onQueueClick(queue._id)\" >\n                <div class=\"flex align-items-center p-0 w-full\">\n                <div class=\"py-4 px-3 cursor-pointer w-full\" [ngClass]=\"{\n                    'active-queue-wrapper': isQueueSelected(queue._id),\n                    'inActiveQueue': !isQueueActive(queue),\n                    'queue-list-wrapper': isQueueActive(queue)\n                  }\"\n                  >\n                    <div class=\"flex justify-content-between flex align-items-center\">\n                        <span class=\"text-color queue-name font-semibold\"\n                        [ngClass]=\"{'active-title-wrapper': isQueueSelected(queue._id)}\"\n                        >{{queue.name}}</span>\n                        <div class=\"elipsesWithCount flex align-items-center\">\n                            <p-badge [value]=\"queue.itemCount\" severity=\"primary\" [ngClass]=\"{\n                                'inActiveBadgeColor': !isQueueActive(queue),\n                              }\" />\n                        </div>\n                    </div>\n                </div>\n                </div>\n            </div>\n        }\n    </div>\n\n    <!-- <div *ngIf=\"userRole\" class=\"w-full mt-4\">\n        <p-button class=\"add-queue-btn-wrapper\" (onClick)=\"onInsertQueue()\">\n            <div class=\"flex align-items-center justify-content-between\">\n                <i class=\"pi pi-plus mr-2\"></i>\n                <p class=\"mb-0\">Add Queue</p>\n            </div>\n        </p-button>\n    </div> -->\n  </div> ", styles: [".card{height:100%}.custom-scroll{height:calc(100% - 112px);overflow-y:hidden}.custom-scroll:hover{overflow-y:auto;scroll-behavior:smooth}.queue-list-wrapper{border-radius:10px;border:1px solid rgba(76,98,146,.18);background:var(--surface-0)}.active-queue-wrapper{border:1px solid #0f8bfd}.active-title-wrapper{color:#0f8bfd!important}.ellipsis-icon-wrapper{width:6px}.queue-title-wrapper{font-size:20px;font-weight:600}.queue-name{max-width:70%;font-size:12px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.inactive-queue-wrapper{margin-left:20px}.create-button{border-radius:8px!important;border:2px solid transparent;border-image:repeating-linear-gradient(45deg,#676b89,#676b89 10px,transparent 10px,transparent 20px) 1;background:linear-gradient(0deg,#7f899e30 0% 100%),#fff;color:#0a061a;gap:8px;font-family:inherit;font-size:14px;font-weight:400;-webkit-mask:linear-gradient(#fff 0 0)}.create-button:hover{background-color:var(--blue-100)}.filter-dropdown{padding:.4rem .6rem;border:1px solid rgba(15,139,253,.1);border-radius:4px;background-color:#f0f8ff;color:var(--text-color);cursor:pointer}.filterContainer{display:flex;justify-content:end;margin-bottom:15px}.inActiveQueue{background-color:#7f899e30;border:2px solid #676b89;border-radius:8px;color:#0a061a;font-family:inherit;font-size:14px;font-weight:400}::ng-deep .add-queue-btn-wrapper .p-button{border:none;padding:8px 12px;border-radius:8px;box-shadow:none}.inActiveBadgeColor ::ng-deep .p-badge{background:#0a061a!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$5.Badge, selector: "p-badge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: QueueItemComponent, isStandalone: false, selector: "app-queue-item", inputs: { filteredQueueData: "filteredQueueData", selectedQueueId: "selectedQueueId", selectedStatus: "selectedStatus", userRole: "userRole", showQueueDataForm: "showQueueDataForm" }, outputs: { queueSelected: "queueSelected", statusChanged: "statusChanged", insertQueueRequested: "insertQueueRequested" }, ngImport: i0, template: "<div class=\"queue-nav-wrapper\">\n    <h4 class=\"queue-title m-0 mb-3\">Queues</h4>\n    <div class=\"queue-items-list\">\n        @for(queue of filteredQueueData; let i = $index; track queue){\n            <div class=\"queue-nav-item\"\n                 [ngClass]=\"{'queue-nav-item--active': isQueueSelected(queue._id), 'queue-nav-item--inactive': !isQueueActive(queue)}\"\n                 (click)=\"onQueueClick(queue._id)\">\n                <div class=\"queue-nav-item__inner\">\n                    <i class=\"pi queue-nav-item__icon\"\n                       [ngClass]=\"getQueueIcon(queue.name)\"></i>\n                    <span class=\"queue-nav-item__label\"\n                          [ngClass]=\"{'queue-nav-item__label--active': isQueueSelected(queue._id)}\">{{queue.name}}</span>\n                </div>\n                <span class=\"queue-nav-item__badge\"\n                      [ngClass]=\"{'queue-nav-item__badge--active': isQueueSelected(queue._id)}\">{{queue.itemCount}}</span>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".queue-nav-wrapper{background:#fff;border-radius:15px;padding:20px;width:100%}.queue-title{font-family:Open Sans,sans-serif;font-weight:600;font-size:18px;line-height:1.2em;color:#1f2937}.queue-items-list{display:flex;flex-direction:column;gap:8px}.queue-nav-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:transparent;cursor:pointer;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent}.queue-nav-item:hover{background:#0066ff0f;border-color:#0066ff1f;box-shadow:0 2px 8px #0066ff14;transform:translate(2px)}.queue-nav-item:hover .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item:hover .queue-nav-item__label{color:#06f}.queue-nav-item:active{transform:translate(1px);box-shadow:0 1px 4px #0066ff1a}.queue-nav-item--active{background:#0066ff1a;border-color:#06f3;box-shadow:0 2px 8px #0066ff1a}.queue-nav-item--active:hover{background:#0066ff24;border-color:#0066ff40;box-shadow:0 3px 12px #0066ff1f}.queue-nav-item--active .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item--inactive{opacity:.5}.queue-nav-item--inactive:hover{opacity:.7}.queue-nav-item__inner{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;flex:1}.queue-nav-item__icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#9ea0b3;flex-shrink:0;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label{font-family:Open Sans,sans-serif;font-weight:600;font-size:12px;line-height:1.4em;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label--active{color:#06f}.queue-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 8px;border-radius:100px;background:#e5e7eb;font-family:Open Sans,sans-serif;font-weight:700;font-size:11px;line-height:1.4em;color:#7d879b;flex-shrink:0;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__badge--active{background:#0f8bfd;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-queue-item', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-4 pt-3 mb-0\">\n    <div class=\"queues overflow-x-hidden queue-item-wrapper\">\n        <h4 class=\"queue-title-wrapper m-0 mb-3 pb-1\">Queues</h4>\n        @for(queue of filteredQueueData; let i = $index; track queue){\n\n            <div class=\"flex m-0 kanban-list\" [ngClass]=\"{'mt-2 pt-1': i !== 0}\" #listEl style=\"min-height:2rem\" (click)=\"onQueueClick(queue._id)\" >\n                <div class=\"flex align-items-center p-0 w-full\">\n                <div class=\"py-4 px-3 cursor-pointer w-full\" [ngClass]=\"{\n                    'active-queue-wrapper': isQueueSelected(queue._id),\n                    'inActiveQueue': !isQueueActive(queue),\n                    'queue-list-wrapper': isQueueActive(queue)\n                  }\"\n                  >\n                    <div class=\"flex justify-content-between flex align-items-center\">\n                        <span class=\"text-color queue-name font-semibold\"\n                        [ngClass]=\"{'active-title-wrapper': isQueueSelected(queue._id)}\"\n                        >{{queue.name}}</span>\n                        <div class=\"elipsesWithCount flex align-items-center\">\n                            <p-badge [value]=\"queue.itemCount\" severity=\"primary\" [ngClass]=\"{\n                                'inActiveBadgeColor': !isQueueActive(queue),\n                              }\" />\n                        </div>\n                    </div>\n                </div>\n                </div>\n            </div>\n        }\n    </div>\n\n    <!-- <div *ngIf=\"userRole\" class=\"w-full mt-4\">\n        <p-button class=\"add-queue-btn-wrapper\" (onClick)=\"onInsertQueue()\">\n            <div class=\"flex align-items-center justify-content-between\">\n                <i class=\"pi pi-plus mr-2\"></i>\n                <p class=\"mb-0\">Add Queue</p>\n            </div>\n        </p-button>\n    </div> -->\n  </div> ", styles: [".card{height:100%}.custom-scroll{height:calc(100% - 112px);overflow-y:hidden}.custom-scroll:hover{overflow-y:auto;scroll-behavior:smooth}.queue-list-wrapper{border-radius:10px;border:1px solid rgba(76,98,146,.18);background:var(--surface-0)}.active-queue-wrapper{border:1px solid #0f8bfd}.active-title-wrapper{color:#0f8bfd!important}.ellipsis-icon-wrapper{width:6px}.queue-title-wrapper{font-size:20px;font-weight:600}.queue-name{max-width:70%;font-size:12px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.inactive-queue-wrapper{margin-left:20px}.create-button{border-radius:8px!important;border:2px solid transparent;border-image:repeating-linear-gradient(45deg,#676b89,#676b89 10px,transparent 10px,transparent 20px) 1;background:linear-gradient(0deg,#7f899e30 0% 100%),#fff;color:#0a061a;gap:8px;font-family:inherit;font-size:14px;font-weight:400;-webkit-mask:linear-gradient(#fff 0 0)}.create-button:hover{background-color:var(--blue-100)}.filter-dropdown{padding:.4rem .6rem;border:1px solid rgba(15,139,253,.1);border-radius:4px;background-color:#f0f8ff;color:var(--text-color);cursor:pointer}.filterContainer{display:flex;justify-content:end;margin-bottom:15px}.inActiveQueue{background-color:#7f899e30;border:2px solid #676b89;border-radius:8px;color:#0a061a;font-family:inherit;font-size:14px;font-weight:400}::ng-deep .add-queue-btn-wrapper .p-button{border:none;padding:8px 12px;border-radius:8px;box-shadow:none}.inActiveBadgeColor ::ng-deep .p-badge{background:#0a061a!important}\n"] }]
+            args: [{ selector: 'app-queue-item', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"queue-nav-wrapper\">\n    <h4 class=\"queue-title m-0 mb-3\">Queues</h4>\n    <div class=\"queue-items-list\">\n        @for(queue of filteredQueueData; let i = $index; track queue){\n            <div class=\"queue-nav-item\"\n                 [ngClass]=\"{'queue-nav-item--active': isQueueSelected(queue._id), 'queue-nav-item--inactive': !isQueueActive(queue)}\"\n                 (click)=\"onQueueClick(queue._id)\">\n                <div class=\"queue-nav-item__inner\">\n                    <i class=\"pi queue-nav-item__icon\"\n                       [ngClass]=\"getQueueIcon(queue.name)\"></i>\n                    <span class=\"queue-nav-item__label\"\n                          [ngClass]=\"{'queue-nav-item__label--active': isQueueSelected(queue._id)}\">{{queue.name}}</span>\n                </div>\n                <span class=\"queue-nav-item__badge\"\n                      [ngClass]=\"{'queue-nav-item__badge--active': isQueueSelected(queue._id)}\">{{queue.itemCount}}</span>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".queue-nav-wrapper{background:#fff;border-radius:15px;padding:20px;width:100%}.queue-title{font-family:Open Sans,sans-serif;font-weight:600;font-size:18px;line-height:1.2em;color:#1f2937}.queue-items-list{display:flex;flex-direction:column;gap:8px}.queue-nav-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;background:transparent;cursor:pointer;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent}.queue-nav-item:hover{background:#0066ff0f;border-color:#0066ff1f;box-shadow:0 2px 8px #0066ff14;transform:translate(2px)}.queue-nav-item:hover .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item:hover .queue-nav-item__label{color:#06f}.queue-nav-item:active{transform:translate(1px);box-shadow:0 1px 4px #0066ff1a}.queue-nav-item--active{background:#0066ff1a;border-color:#06f3;box-shadow:0 2px 8px #0066ff1a}.queue-nav-item--active:hover{background:#0066ff24;border-color:#0066ff40;box-shadow:0 3px 12px #0066ff1f}.queue-nav-item--active .queue-nav-item__icon{color:#0f8bfd}.queue-nav-item--inactive{opacity:.5}.queue-nav-item--inactive:hover{opacity:.7}.queue-nav-item__inner{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;flex:1}.queue-nav-item__icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#9ea0b3;flex-shrink:0;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label{font-family:Open Sans,sans-serif;font-weight:600;font-size:12px;line-height:1.4em;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__label--active{color:#06f}.queue-nav-item__badge{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:2px 8px;border-radius:100px;background:#e5e7eb;font-family:Open Sans,sans-serif;font-weight:700;font-size:11px;line-height:1.4em;color:#7d879b;flex-shrink:0;transition:background .2s cubic-bezier(.4,0,.2,1),border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1)}.queue-nav-item__badge--active{background:#0f8bfd;color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: QueueStore$1 }], propDecorators: { filteredQueueData: [{
                 type: Input
             }], selectedQueueId: [{
@@ -7283,11 +7334,11 @@ class QueueRecordTableComponent {
         return this.selectedRows?.length || 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueRecordTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueRecordTableComponent, isStandalone: false, selector: "app-queue-record-table", inputs: { table: "table", metaData: "metaData", loading: "loading", selectedRows: "selectedRows", resetSort: "resetSort", isShowSkeleton: "isShowSkeleton", selectedQueue: "selectedQueue" }, outputs: { selectionChange: "selectionChange", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", paginationChanged: "paginationChanged", filterApplied: "filterApplied", sortApplied: "sortApplied" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"bg-white queue-table-wrapper border-round-xl\">\n  <lib-table-secondary \n    [table]=\"table\" \n    [metaData]=\"metaData\"\n    [enableSelection]=\"true\"\n    [selectionMode]=\"'multiple'\"\n    [isShowSkeleton]=\"isShowSkeleton\"\n    [selection]=\"selectedRows\"\n    [showActions]=\"false\"\n    [noRecordsMessage]=\"selectedQueue?.name === 'Assigned To Me' ? 'No applications are currently assigned.' : 'No Records Found'\"\n    (onPage)=\"onPaginationChange($event)\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (rowSelectionChange)=\"onRowClick($event)\"\n    (sortChanged)=\"onSort($event)\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\">\n  </lib-table-secondary>\n</div>", styles: [".queue-record-table-wrapper{height:100%;display:flex;flex-direction:column}.queue-record-table-wrapper .table-container{flex:1;overflow:hidden}.queue-record-table-wrapper .pagination-container{margin-top:1rem;padding:.5rem}::ng-deep .queue-table-wrapper{height:100%;overflow:auto}::ng-deep .queue-table-wrapper .p-datatable .p-datatable-wrapper{overflow:visible!important}::ng-deep .queue-table-wrapper .p-datatable .p-datatable-thead>tr>th{position:sticky!important;top:0!important;z-index:10!important;background-color:#fff!important}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}@media screen and (max-width: 768px){.queue-record-table-wrapper .pagination-container{flex-direction:column;gap:.5rem}}\n"], dependencies: [{ kind: "component", type: TableSecondaryComponent, selector: "lib-table-secondary", inputs: ["table", "metaData", "title", "builder", "showStatus", "showActions", "showSearchBar", "showNewRecordButton", "showRefreshButton", "isShowSkeleton", "pathName", "selectionMode", "selection", "usePagination", "scrollHeight", "rowSelection", "enableSelection", "noRecordsMessage", "sortField", "sortOrder", "searchTerm", "filterQuery"], outputs: ["selectionChange", "rowSelectionChange", "sortChanged", "onDeleteRow", "onPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueRecordTableComponent, isStandalone: false, selector: "app-queue-record-table", inputs: { table: "table", metaData: "metaData", loading: "loading", selectedRows: "selectedRows", resetSort: "resetSort", isShowSkeleton: "isShowSkeleton", selectedQueue: "selectedQueue" }, outputs: { selectionChange: "selectionChange", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", paginationChanged: "paginationChanged", filterApplied: "filterApplied", sortApplied: "sortApplied" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"bg-white queue-table-wrapper border-round-xl\">\n  <lib-table-secondary \n    [table]=\"table\" \n    [metaData]=\"metaData\"\n    [enableSelection]=\"true\"\n    [selectionMode]=\"'multiple'\"\n    [isShowSkeleton]=\"isShowSkeleton\"\n    [selection]=\"selectedRows\"\n    [showActions]=\"false\"\n    [noRecordsMessage]=\"selectedQueue?.name === 'Assigned To Me' ? 'No applications are currently assigned.' : 'No Records Found'\"\n    (onPage)=\"onPaginationChange($event)\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (rowSelectionChange)=\"onRowClick($event)\"\n    (sortChanged)=\"onSort($event)\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\">\n  </lib-table-secondary>\n</div>", styles: [".queue-record-table-wrapper{height:100%;display:flex;flex-direction:column}.queue-record-table-wrapper .table-container{flex:1;overflow:hidden}.queue-record-table-wrapper .pagination-container{margin-top:1rem;padding:.5rem}::ng-deep .queue-table-wrapper{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}::ng-deep .queue-table-wrapper::-webkit-scrollbar{display:none}::ng-deep .queue-table-wrapper .p-datatable .p-datatable-wrapper{overflow:visible!important}::ng-deep .queue-table-wrapper .p-datatable .p-datatable-table{width:100%!important}::ng-deep .queue-table-wrapper .p-datatable .p-datatable-thead>tr>th{position:sticky!important;top:0!important;z-index:10!important;background-color:#fff!important}@media screen and (max-width: 768px){.queue-record-table-wrapper .pagination-container{flex-direction:column;gap:.5rem}}\n"], dependencies: [{ kind: "component", type: TableSecondaryComponent, selector: "lib-table-secondary", inputs: ["table", "metaData", "title", "builder", "showStatus", "showActions", "showSearchBar", "showNewRecordButton", "showRefreshButton", "isShowSkeleton", "pathName", "selectionMode", "selection", "usePagination", "scrollHeight", "rowSelection", "enableSelection", "noRecordsMessage", "sortField", "sortOrder", "searchTerm", "filterQuery"], outputs: ["selectionChange", "rowSelectionChange", "sortChanged", "onDeleteRow", "onPage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueRecordTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-queue-record-table', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-white queue-table-wrapper border-round-xl\">\n  <lib-table-secondary \n    [table]=\"table\" \n    [metaData]=\"metaData\"\n    [enableSelection]=\"true\"\n    [selectionMode]=\"'multiple'\"\n    [isShowSkeleton]=\"isShowSkeleton\"\n    [selection]=\"selectedRows\"\n    [showActions]=\"false\"\n    [noRecordsMessage]=\"selectedQueue?.name === 'Assigned To Me' ? 'No applications are currently assigned.' : 'No Records Found'\"\n    (onPage)=\"onPaginationChange($event)\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (rowSelectionChange)=\"onRowClick($event)\"\n    (sortChanged)=\"onSort($event)\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\">\n  </lib-table-secondary>\n</div>", styles: [".queue-record-table-wrapper{height:100%;display:flex;flex-direction:column}.queue-record-table-wrapper .table-container{flex:1;overflow:hidden}.queue-record-table-wrapper .pagination-container{margin-top:1rem;padding:.5rem}::ng-deep .queue-table-wrapper{height:100%;overflow:auto}::ng-deep .queue-table-wrapper .p-datatable .p-datatable-wrapper{overflow:visible!important}::ng-deep .queue-table-wrapper .p-datatable .p-datatable-thead>tr>th{position:sticky!important;top:0!important;z-index:10!important;background-color:#fff!important}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}@media screen and (max-width: 768px){.queue-record-table-wrapper .pagination-container{flex-direction:column;gap:.5rem}}\n"] }]
+            args: [{ selector: 'app-queue-record-table', standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bg-white queue-table-wrapper border-round-xl\">\n  <lib-table-secondary \n    [table]=\"table\" \n    [metaData]=\"metaData\"\n    [enableSelection]=\"true\"\n    [selectionMode]=\"'multiple'\"\n    [isShowSkeleton]=\"isShowSkeleton\"\n    [selection]=\"selectedRows\"\n    [showActions]=\"false\"\n    [noRecordsMessage]=\"selectedQueue?.name === 'Assigned To Me' ? 'No applications are currently assigned.' : 'No Records Found'\"\n    (onPage)=\"onPaginationChange($event)\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    (rowSelectionChange)=\"onRowClick($event)\"\n    (sortChanged)=\"onSort($event)\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\">\n  </lib-table-secondary>\n</div>", styles: [".queue-record-table-wrapper{height:100%;display:flex;flex-direction:column}.queue-record-table-wrapper .table-container{flex:1;overflow:hidden}.queue-record-table-wrapper .pagination-container{margin-top:1rem;padding:.5rem}::ng-deep .queue-table-wrapper{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}::ng-deep .queue-table-wrapper::-webkit-scrollbar{display:none}::ng-deep .queue-table-wrapper .p-datatable .p-datatable-wrapper{overflow:visible!important}::ng-deep .queue-table-wrapper .p-datatable .p-datatable-table{width:100%!important}::ng-deep .queue-table-wrapper .p-datatable .p-datatable-thead>tr>th{position:sticky!important;top:0!important;z-index:10!important;background-color:#fff!important}@media screen and (max-width: 768px){.queue-record-table-wrapper .pagination-container{flex-direction:column;gap:.5rem}}\n"] }]
         }], propDecorators: { table: [{
                 type: Input
             }], metaData: [{
@@ -7512,11 +7563,11 @@ class QueueFilterDropdownComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownComponent, deps: [{ token: QueueFilterDropdownService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueFilterDropdownComponent, isStandalone: false, selector: "lib-queue-filter-dropdown", inputs: { appliedFilters: "appliedFilters" }, outputs: { filterApplied: "filterApplied", filtersCleared: "filtersCleared" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"queue-filter-dropdown-wrapper\">\n  <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\n    <div class=\"flex align-items-center\">\n      <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\n      <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\n      <p class=\"mb-0\">Filter(s) Applied</p>\n      <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\n    </div>\n  </p-button>\n\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\n    <h3 class=\"filter-title\">Queue Filters</h3>\n    <div class=\"grid form-grid col-12\">\n      <div class=\"col-12 md:col-6\">\n\n\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\n              (onClick)=\"setRiskRating('Low')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Low</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\n              (onClick)=\"setRiskRating('Medium')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Medium</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\n              (onClick)=\"setRiskRating('High')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">High</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 p-0 md:col-6\">\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Application Type</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\n              (onClick)=\"setApplicationType('BTL')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">BTL</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\n              (onClick)=\"setApplicationType('HPP')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">HPP</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"grid form-grid col-12\">\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">Category</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\n                (onClick)=\"setCategory('UK')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">UK</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\n                (onClick)=\"setCategory('Ex-Pat')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Ex-Pat</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\n                (onClick)=\"setCategory('Intl')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Intl</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">EPC</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\n                (onClick)=\"setEpc('A or B (Green)')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">A or B (Green)</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"grid form-grid col-12\">\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\n                  (onClick)=\"setPurchaseType('Purchase')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Purchase</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.purchaseType.includes('Refinance')\"\n                  (onClick)=\"setPurchaseType('Refinance')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Refinance</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Task Status</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('Not Started')\"\n                  (onClick)=\"setTaskStatus('Not Started')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Not Started</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('In-progress')\"\n                  (onClick)=\"setTaskStatus('In-progress')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">In-progress</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\n                  (onClick)=\"setTaskStatus('Completed')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Completed</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"grid p-0 form-grid col-12\">\n          <div class=\"col-12 pl-3 md:col-6\">  \n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\n              <div class=\"filter-options two-inputs\">\n                <div class=\"grid p-0 form-grid col-12\">\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\n                      (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\n                  </div>\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\n                      (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Pending Days</p>\n              <div class=\"filter-options one-input\">\n                <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\n                  (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"grid p-0 form-grid col-12\">\n            <div class=\"col-12 pl-4 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\n                <div class=\"filter-options\">\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\n                    (onClick)=\"setVulnerableCustomer(true)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Yes</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\n                    (onClick)=\"setVulnerableCustomer(false)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">No</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\n                    (onClick)=\"setVulnerableCustomer(null)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Any</p>\n                    </div>\n                  </p-button>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 pl-3 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\n                <div class=\"filter-options one-input\">\n                  <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\n                    placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\n                    [filter]=\"true\" [loading]=\"loadingUnderwriters\"\n                    [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\n                    (onFilter)=\"onUnderwriterFilter($event)\">\n                  </p-multiSelect>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"filter-actions w-full flex justify-content-between\">\n            <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\n              <div class=\"flex align-items-center btn-text-wrapper\">\n                <p class=\"mb-0 mr-2\">Clear All</p>\n                <i class=\"pi pi-times\"></i>\n              </div>\n            </p-button>\n\n            <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Apply Filters</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:500%;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;border-radius:8px;box-shadow:none;height:44px}::ng-deep .filter-option-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;border-radius:8px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: QueueFilterDropdownComponent, isStandalone: false, selector: "lib-queue-filter-dropdown", inputs: { appliedFilters: "appliedFilters" }, outputs: { filterApplied: "filterApplied", filtersCleared: "filtersCleared" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"queue-filter-dropdown-wrapper\">\n  <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\n    <div class=\"flex align-items-center\">\n      <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\n      <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\n      <p class=\"mb-0\">Filter(s) Applied</p>\n      <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\n    </div>\n  </p-button>\n\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\n    <h3 class=\"filter-title\">Queue Filters</h3>\n    <div class=\"grid form-grid col-12\">\n      <div class=\"col-12 md:col-6\">\n\n\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\n              (onClick)=\"setRiskRating('Low')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Low</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\n              (onClick)=\"setRiskRating('Medium')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Medium</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\n              (onClick)=\"setRiskRating('High')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">High</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 p-0 md:col-6\">\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Application Type</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\n              (onClick)=\"setApplicationType('BTL')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">BTL</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\n              (onClick)=\"setApplicationType('HPP')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">HPP</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"grid form-grid col-12\">\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">Category</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\n                (onClick)=\"setCategory('UK')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">UK</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\n                (onClick)=\"setCategory('Ex-Pat')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Ex-Pat</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\n                (onClick)=\"setCategory('Intl')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Intl</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">EPC</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\n                (onClick)=\"setEpc('A or B (Green)')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">A or B (Green)</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"grid form-grid col-12\">\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\n                  (onClick)=\"setPurchaseType('Purchase')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Purchase</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.purchaseType.includes('Refinance')\"\n                  (onClick)=\"setPurchaseType('Refinance')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Refinance</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Task Status</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('Not Started')\"\n                  (onClick)=\"setTaskStatus('Not Started')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Not Started</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('In-progress')\"\n                  (onClick)=\"setTaskStatus('In-progress')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">In-progress</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\n                  (onClick)=\"setTaskStatus('Completed')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Completed</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"grid p-0 form-grid col-12\">\n          <div class=\"col-12 pl-3 md:col-6\">  \n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\n              <div class=\"filter-options two-inputs\">\n                <div class=\"grid p-0 form-grid col-12\">\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\n                      (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\n                  </div>\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\n                      (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Pending Days</p>\n              <div class=\"filter-options one-input\">\n                <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\n                  (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"grid p-0 form-grid col-12\">\n            <div class=\"col-12 pl-4 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\n                <div class=\"filter-options\">\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\n                    (onClick)=\"setVulnerableCustomer(true)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Yes</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\n                    (onClick)=\"setVulnerableCustomer(false)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">No</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\n                    (onClick)=\"setVulnerableCustomer(null)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Any</p>\n                    </div>\n                  </p-button>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 pl-3 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\n                <div class=\"filter-options one-input\">\n                  <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\n                    placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\n                    [filter]=\"true\" [loading]=\"loadingUnderwriters\"\n                    [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\n                    (onFilter)=\"onUnderwriterFilter($event)\">\n                  </p-multiSelect>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"filter-actions w-full flex justify-content-between\">\n            <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\n              <div class=\"flex align-items-center btn-text-wrapper\">\n                <p class=\"mb-0 mr-2\">Clear All</p>\n                <i class=\"pi pi-times\"></i>\n              </div>\n            </p-button>\n\n            <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Apply Filters</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:500%;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #E2E8F0;border-radius:8px;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;box-shadow:none;height:40px}::ng-deep .filter-option-btn-wrapper .p-button{border:none;border-radius:8px;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueFilterDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-queue-filter-dropdown', standalone: false, template: "<div class=\"queue-filter-dropdown-wrapper\">\n  <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\n    <div class=\"flex align-items-center\">\n      <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\n      <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\n      <p class=\"mb-0\">Filter(s) Applied</p>\n      <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\n    </div>\n  </p-button>\n\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\n    <h3 class=\"filter-title\">Queue Filters</h3>\n    <div class=\"grid form-grid col-12\">\n      <div class=\"col-12 md:col-6\">\n\n\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\n              (onClick)=\"setRiskRating('Low')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Low</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\n              (onClick)=\"setRiskRating('Medium')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Medium</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\n              (onClick)=\"setRiskRating('High')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">High</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 p-0 md:col-6\">\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Application Type</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\n              (onClick)=\"setApplicationType('BTL')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">BTL</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\n              (onClick)=\"setApplicationType('HPP')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">HPP</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"grid form-grid col-12\">\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">Category</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\n                (onClick)=\"setCategory('UK')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">UK</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\n                (onClick)=\"setCategory('Ex-Pat')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Ex-Pat</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\n                (onClick)=\"setCategory('Intl')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Intl</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">EPC</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\n                (onClick)=\"setEpc('A or B (Green)')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">A or B (Green)</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"grid form-grid col-12\">\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\n                  (onClick)=\"setPurchaseType('Purchase')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Purchase</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.purchaseType.includes('Refinance')\"\n                  (onClick)=\"setPurchaseType('Refinance')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Refinance</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Task Status</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('Not Started')\"\n                  (onClick)=\"setTaskStatus('Not Started')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Not Started</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('In-progress')\"\n                  (onClick)=\"setTaskStatus('In-progress')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">In-progress</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\n                  (onClick)=\"setTaskStatus('Completed')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Completed</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"grid p-0 form-grid col-12\">\n          <div class=\"col-12 pl-3 md:col-6\">  \n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\n              <div class=\"filter-options two-inputs\">\n                <div class=\"grid p-0 form-grid col-12\">\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\n                      (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\n                  </div>\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\n                      (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Pending Days</p>\n              <div class=\"filter-options one-input\">\n                <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\n                  (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"grid p-0 form-grid col-12\">\n            <div class=\"col-12 pl-4 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\n                <div class=\"filter-options\">\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\n                    (onClick)=\"setVulnerableCustomer(true)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Yes</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\n                    (onClick)=\"setVulnerableCustomer(false)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">No</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\n                    (onClick)=\"setVulnerableCustomer(null)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Any</p>\n                    </div>\n                  </p-button>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 pl-3 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\n                <div class=\"filter-options one-input\">\n                  <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\n                    placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\n                    [filter]=\"true\" [loading]=\"loadingUnderwriters\"\n                    [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\n                    (onFilter)=\"onUnderwriterFilter($event)\">\n                  </p-multiSelect>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"filter-actions w-full flex justify-content-between\">\n            <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\n              <div class=\"flex align-items-center btn-text-wrapper\">\n                <p class=\"mb-0 mr-2\">Clear All</p>\n                <i class=\"pi pi-times\"></i>\n              </div>\n            </p-button>\n\n            <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Apply Filters</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:500%;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;border-radius:8px;box-shadow:none;height:44px}::ng-deep .filter-option-btn-wrapper .p-button{border:1px solid #e0e4ea!important;border-radius:8px!important;border:none;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;border-radius:8px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"] }]
+            args: [{ selector: 'lib-queue-filter-dropdown', standalone: false, template: "<div class=\"queue-filter-dropdown-wrapper\">\n  <p-button class=\"filter-btn-wrapper\" (onClick)=\"onFilterBtnClick()\">\n    <div class=\"flex align-items-center\">\n      <i class=\"ri-filter-3-line mr-2 mt-1\"></i>\n      <p class=\"filter-count mb-0 mr-2\">{{ filterCount }}</p>\n      <p class=\"mb-0\">Filter(s) Applied</p>\n      <i class=\"pi pi-angle-down ml-2 mt-1\"></i>\n    </div>\n  </p-button>\n\n  <div class=\"filter-dropdown-panel\" *ngIf=\"showDropdown\" #dropdownPanel>\n    <h3 class=\"filter-title\">Queue Filters</h3>\n    <div class=\"grid form-grid col-12\">\n      <div class=\"col-12 md:col-6\">\n\n\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Risk Rating</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Low')\"\n              (onClick)=\"setRiskRating('Low')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Low</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('Medium')\"\n              (onClick)=\"setRiskRating('Medium')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Medium</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.riskRating.includes('High')\"\n              (onClick)=\"setRiskRating('High')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">High</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-12 p-0 md:col-6\">\n        <div class=\"filter-section\">\n          <p class=\"filter-label m-0 mb-2\">Application Type</p>\n          <div class=\"filter-options\">\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('BTL')\"\n              (onClick)=\"setApplicationType('BTL')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">BTL</p>\n              </div>\n            </p-button>\n\n            <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.applicationType.includes('HPP')\"\n              (onClick)=\"setApplicationType('HPP')\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">HPP</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"grid form-grid col-12\">\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">Category</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('UK')\"\n                (onClick)=\"setCategory('UK')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">UK</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Ex-Pat')\"\n                (onClick)=\"setCategory('Ex-Pat')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Ex-Pat</p>\n                </div>\n              </p-button>\n\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.category.includes('Intl')\"\n                (onClick)=\"setCategory('Intl')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">Intl</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-12 md:col-6\">\n          <div class=\"filter-section\">\n            <p class=\"filter-label m-0 mb-2\">EPC</p>\n            <div class=\"filter-options\">\n              <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.epc?.includes('A or B (Green)')\"\n                (onClick)=\"setEpc('A or B (Green)')\">\n                <div class=\"flex align-items-center\">\n                  <p class=\"mb-0\">A or B (Green)</p>\n                </div>\n              </p-button>\n            </div>\n          </div>\n        </div>\n        <div class=\"grid form-grid col-12\">\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Purchase Type</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.purchaseType.includes('Purchase')\"\n                  (onClick)=\"setPurchaseType('Purchase')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Purchase</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.purchaseType.includes('Refinance')\"\n                  (onClick)=\"setPurchaseType('Refinance')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Refinance</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Task Status</p>\n              <div class=\"filter-options\">\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('Not Started')\"\n                  (onClick)=\"setTaskStatus('Not Started')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Not Started</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\"\n                  [class.selected]=\"filters.taskStatus.includes('In-progress')\"\n                  (onClick)=\"setTaskStatus('In-progress')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">In-progress</p>\n                  </div>\n                </p-button>\n\n                <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.taskStatus.includes('Completed')\"\n                  (onClick)=\"setTaskStatus('Completed')\">\n                  <div class=\"flex align-items-center\">\n                    <p class=\"mb-0\">Completed</p>\n                  </div>\n                </p-button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"grid p-0 form-grid col-12\">\n          <div class=\"col-12 pl-3 md:col-6\">  \n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Finance Amount</p>\n              <div class=\"filter-options two-inputs\">\n                <div class=\"grid p-0 form-grid col-12\">\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Min\" [ngModel]=\"filters.financeMin\"\n                      (ngModelChange)=\"setFinanceMin($event)\" min=\"0\" />\n                  </div>\n                  <div class=\"col-12 md:col-6\">\n                    <input type=\"number\" class=\"w-full\" placeholder=\"Max\" [ngModel]=\"filters.financeMax\"\n                      (ngModelChange)=\"setFinanceMax($event)\" min=\"0\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-12 md:col-6\">\n            <div class=\"filter-section\">\n              <p class=\"filter-label m-0 mb-2\">Pending Days</p>\n              <div class=\"filter-options one-input\">\n                <input type=\"number\" placeholder=\"No. of days\" [ngModel]=\"filters.pendingDays\"\n                  (ngModelChange)=\"setPendingDays($event)\" min=\"0\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"grid p-0 form-grid col-12\">\n            <div class=\"col-12 pl-4 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Vulnerable Customer</p>\n                <div class=\"filter-options\">\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === true\"\n                    (onClick)=\"setVulnerableCustomer(true)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Yes</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === false\"\n                    (onClick)=\"setVulnerableCustomer(false)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">No</p>\n                    </div>\n                  </p-button>\n                  <p-button class=\"filter-option-btn-wrapper\" [class.selected]=\"filters.vulnerableCustomer === null\"\n                    (onClick)=\"setVulnerableCustomer(null)\">\n                    <div class=\"flex align-items-center\">\n                      <p class=\"mb-0\">Any</p>\n                    </div>\n                  </p-button>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 pl-3 md:col-6\">\n              <div class=\"filter-section\">\n                <p class=\"filter-label m-0 mb-2\">Assigned Underwriter</p>\n                <div class=\"filter-options one-input\">\n                  <p-multiSelect [options]=\"underwriterOptions\" optionLabel=\"name\" optionValue=\"id\"\n                    placeholder=\"Select underwriter(s)\" [appendTo]=\"'body'\" [panelStyle]=\"{ zIndex: 1100 }\"\n                    [filter]=\"true\" [loading]=\"loadingUnderwriters\"\n                    [ngModel]=\"filters.assignedUnderwriter\" (ngModelChange)=\"setAssignedUnderwriter($event)\"\n                    (onFilter)=\"onUnderwriterFilter($event)\">\n                  </p-multiSelect>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"filter-actions w-full flex justify-content-between\">\n            <p-button class=\"pl-3 clear-btn-wrapper\" (onClick)=\"clearAll()\">\n              <div class=\"flex align-items-center btn-text-wrapper\">\n                <p class=\"mb-0 mr-2\">Clear All</p>\n                <i class=\"pi pi-times\"></i>\n              </div>\n            </p-button>\n\n            <p-button class=\"apply-btn-wrapper\" (onClick)=\"applyFilters()\">\n              <div class=\"flex align-items-center\">\n                <p class=\"mb-0\">Apply Filters</p>\n              </div>\n            </p-button>\n          </div>\n        </div>\n      </div>", styles: [".queue-filter-dropdown-wrapper{position:relative;display:inline-block}.filter-dropdown-panel{position:absolute;top:100%;left:50%;transform:translate(-50%);min-width:500%;background:#fff;border:1.5px solid #d1d5db;border-radius:16px;box-shadow:0 8px 32px #101e362e;padding:1.5rem 1.25rem 1rem;z-index:1000}.filter-title{font-weight:600;font-size:16px;margin-bottom:1.25rem}.filter-section{margin-bottom:1.2rem}.filter-label{font-size:1rem;font-weight:500;margin-bottom:.5rem}.filter-options{display:flex;gap:.7rem;flex-wrap:wrap}.filter-options input[type=number],.filter-options input[type=text],.filter-options input[type=date]{width:110px;padding:.45rem .8rem;border:1.5px solid #e0e4ea;border-radius:8px;font-size:1rem;color:#3b4256;background:#fff;transition:border .2s}.filter-options input[type=number]:focus,.filter-options input[type=text]:focus,.filter-options input[type=date]:focus{border:1.5px solid #2563eb;outline:none}.filter-options input[type=number]::-webkit-outer-spin-button,.filter-options input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.filter-options input[type=number]{-moz-appearance:textfield}.filter-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1.7rem}::ng-deep .apply-btn-wrapper .p-button{border:none;padding:8px 16px;border-radius:8px;box-shadow:none}::ng-deep .clear-btn-wrapper .p-button{border:none;color:var(--primary-color);background-color:var(--surface-0);padding:0;border-radius:8px;box-shadow:none}::ng-deep .filter-btn-wrapper .p-button{border:1px solid #E2E8F0;border-radius:8px;color:var(--text-color);background-color:var(--surface-0);padding:8px 16px;box-shadow:none;height:40px}::ng-deep .filter-option-btn-wrapper .p-button{border:none;border-radius:8px;color:var(--text-color);background-color:#f7fafd;padding:4px 18px;box-shadow:none}::ng-deep .filter-option-btn-wrapper.selected .p-button{border-radius:8px!important;border:none;color:var(--primary-color);background-color:#e8f0fe;padding:4px 18px;box-shadow:none;border:1.5px solid var(--primary-color)!important}.filter-options input[type=date]{font-family:inherit;color:#3b4256}.filter-options.two-inputs input[type=number]{width:48.5%}.filter-options.one-input input[type=number]{width:100%}.filter-options.one-input ::ng-deep .p-multiselect{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: QueueFilterDropdownService }], propDecorators: { dropdownPanel: [{
                 type: ViewChild,
                 args: ['dropdownPanel', { static: false }]
@@ -7567,6 +7618,8 @@ class QueueContainerComponent extends BaseContainerComponent {
     resetSort = false;
     appliedFilters = {};
     placeholder = '';
+    /** Snapshot of search/page/limit when a request is started; used to ignore stale responses. */
+    latestRequestSnapshot = null;
     filterDropdown;
     // Input properties for content projection
     set selectedRowsInput(rows) {
@@ -7790,6 +7843,13 @@ class QueueContainerComponent extends BaseContainerComponent {
         }
         const targetPage = page || this.currentPage;
         const targetLimit = limit || this.currentLimit;
+        // Capture snapshot so we can ignore stale responses when user searches again before this request completes
+        const requestSnapshot = {
+            searchTerm: this.currentSearchTerm,
+            page: targetPage,
+            limit: targetLimit
+        };
+        this.latestRequestSnapshot = requestSnapshot;
         // Build filter query string
         let filterQueryString = this.queryString;
         if (this.appliedFilters && Object.keys(this.appliedFilters).length > 0) {
@@ -7804,6 +7864,10 @@ class QueueContainerComponent extends BaseContainerComponent {
         }
         this.queueService.getPaginatedQueueRecords(this.selectedQueue.apiConfig, this.currentSearchTerm, targetPage, targetLimit, filterQueryString, this.sortBy, this.getSortOrderString(this.sortOrder)).subscribe({
             next: (res) => {
+                // Ignore response if a newer request was already sent (e.g. user cleared and typed a new search)
+                if (this.latestRequestSnapshot !== requestSnapshot) {
+                    return;
+                }
                 const apiData = res?.data || res?.paginatedResults || res || [];
                 if (apiData && apiData.length > 0) {
                     this.isShowSkeleton = false;
@@ -7826,6 +7890,10 @@ class QueueContainerComponent extends BaseContainerComponent {
                 this.metaData = this.queueBusinessService.mapApiMetadata(res, targetPage, targetLimit);
             },
             error: (error) => {
+                // Ignore errors for outdated requests
+                if (this.latestRequestSnapshot !== requestSnapshot) {
+                    return;
+                }
                 this.loading = false;
                 this.isShowSkeleton = false;
                 console.error("Error fetching data:", error);
@@ -7881,6 +7949,7 @@ class QueueContainerComponent extends BaseContainerComponent {
     }
     onAssignmentComplete(event) {
         if (event.success) {
+            this.queueService.clearCache(this.selectedQueue?.apiConfig);
             // Pass the current selectedQueueId to preserve selection after refresh, but ensure it's not null
             this.getAllQueueList(this.selectedQueueId ?? undefined);
         }
@@ -7901,11 +7970,11 @@ class QueueContainerComponent extends BaseContainerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueContainerComponent, deps: [{ token: QueueStore$1 }, { token: QueueService }, { token: BaseStore }, { token: QueueBusinessService }, { token: QueueRecordTableBuilderService }, { token: QueueFilterDropdownService }, { token: BaseQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: QueueContainerComponent, isStandalone: false, selector: "lib-queue-container", inputs: { placeholder: "placeholder", selectedRowsInput: "selectedRowsInput" }, outputs: { assignmentComplete: "assignmentComplete", userAssigned: "userAssigned", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", selectionChange: "selectionChange", isAllRowSelected: "isAllRowSelected", excludedApplicationIds: "excludedApplicationIds" }, viewQueries: [{ propertyName: "filterDropdown", first: true, predicate: ["filterDropdown"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container grid m-0 h-full\">\n    <div class=\"col-12 xl:col-2 md:col-12 py-0 pl-0 h-full\">\n      <lib-skeleton *ngIf=\"loading\" [isAllowCard]=\"true\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\n      @if(!loading){\n      <div class=\"queue-list-container-wrapper p-0\">\n        <app-queue-list\n        [queueData]=\"filteredQueueData\"\n        [selectedQueueId]=\"selectedQueueId\"\n        [selectedStatus]=\"selectedStatus\"\n        [userRole]=\"userRole\"\n        [showQueueDataForm]=\"true\"\n        (queueSelected)=\"onQueueSelected($event)\"\n        (statusChanged)=\"onStatusChanged($event)\"\n        (insertQueueRequested)=\"onInsertQueueRequested()\"\n        ></app-queue-list>\n      </div>\n      }\n    </div>\n    <div class=\"col-12 xl:col-10 md:col-12 py-0 h-full\">\n      @if(selectedQueue){\n      <div class=\"queue-application-container-wrapper h-full\">\n      <div class=\"grid m-0 justify-content-between align-items-center mb-3\">\n          <div class=\"col-8 p-0 flex align-items-center\">\n            <div class=\"col-7 p-0 mr-3\">\n              <queue-search \n                [placeholder]=\"placeholder\"\n                [searchText]=\"searchText\"\n                (searchInputChanged)=\"onSearchInputChanged($event)\"\n                (searchRequested)=\"onSearchRequested($event)\"\n                (searchCleared)=\"onSearchCleared()\">\n              </queue-search>\n            </div>\n            <div>\n              <lib-queue-filter-dropdown \n                #filterDropdown\n                [appliedFilters]=\"appliedFilters\"\n                (filterApplied)=\"onFilterDropdownApplied($event)\"\n                (filtersCleared)=\"onFiltersCleared()\">\n              </lib-queue-filter-dropdown>\n            </div>\n            <div *ngIf=\"hasActiveFilters\">\n              <button \n                class=\"clear-filters-btn\"\n                type=\"button\"\n                (click)=\"onClearAllFilters()\">\n                Clear <i class=\"pi pi-times ml-2\"></i>\n              </button>\n            </div>\n          </div>\n          \n          <div class=\"flex align-items-center gap-3 col-3 py-0 pl-0 justify-content-end\">\n            <ng-content select=\"[user-dropdown]\"></ng-content>\n          </div>\n      </div>\n\n      <div class=\"animation-duration-500 associated-list queue-table-container-wrapper custom-scroll mb-0 p-0\">\n \n        <app-queue-record-table\n          [table]=\"table\"\n          [metaData]=\"metaData\"\n          [loading]=\"loading\"\n          [selectedRows]=\"selectedRows\"\n          [resetSort]=\"resetSort\"\n          [isShowSkeleton]=\"isShowSkeleton\"\n          [selectedQueue]=\"selectedQueue\"\n          (selectionChange)=\"onTableSelectionChange($event)\"\n          (selectedRowsData)=\"onTableSelectionChange($event)\"\n          (assignmentDataReady)=\"onAssignmentDataReady($event)\"\n          (rowClick)=\"onTableRowClick($event)\"\n          (paginationChanged)=\"onPaginationChanged($event)\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (sortApplied)=\"onSortApplied($event)\">\n        </app-queue-record-table>\n      </div>\n      </div>\n      }\n    </div>\n\n  </div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.queue-table-container-wrapper{height:calc(100% - 58px)}.queue-application-container-wrapper,.queue-list-container-wrapper{background-color:#fff;border-radius:10px}.queue-application-container-wrapper{padding:18px 11px 18px 18px}.clear-filters-btn{background:none;border:none;color:#2196f3;font-size:1.1rem;cursor:pointer;margin-left:.5rem;display:inline-flex;align-items:center;padding:0}.clear-filters-btn .clear-x{font-size:1.2rem;margin-left:.2rem;line-height:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkeletonComponent, selector: "lib-skeleton", inputs: ["count", "columns", "width", "height", "isAllowCard"] }, { kind: "component", type: QueueSearchComponent, selector: "queue-search", inputs: ["searchText", "placeholder", "debounceTime"], outputs: ["searchInputChanged", "searchRequested", "searchCleared"] }, { kind: "component", type: QueueListComponent, selector: "app-queue-list", inputs: ["queueData", "selectedQueueId", "selectedStatus", "userRole", "showQueueDataForm"], outputs: ["queueSelected", "statusChanged", "insertQueueRequested"] }, { kind: "component", type: QueueRecordTableComponent, selector: "app-queue-record-table", inputs: ["table", "metaData", "loading", "selectedRows", "resetSort", "isShowSkeleton", "selectedQueue"], outputs: ["selectionChange", "selectedRowsData", "assignmentDataReady", "rowClick", "paginationChanged", "filterApplied", "sortApplied"] }, { kind: "component", type: QueueFilterDropdownComponent, selector: "lib-queue-filter-dropdown", inputs: ["appliedFilters"], outputs: ["filterApplied", "filtersCleared"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: QueueContainerComponent, isStandalone: false, selector: "lib-queue-container", inputs: { placeholder: "placeholder", selectedRowsInput: "selectedRowsInput" }, outputs: { assignmentComplete: "assignmentComplete", userAssigned: "userAssigned", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", selectionChange: "selectionChange", isAllRowSelected: "isAllRowSelected", excludedApplicationIds: "excludedApplicationIds" }, viewQueries: [{ propertyName: "filterDropdown", first: true, predicate: ["filterDropdown"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container grid m-0 h-full\">\n    <div class=\"col-12 xl:col-2 md:col-12 py-0 pl-0 h-full\">\n      <lib-skeleton *ngIf=\"loading\" [isAllowCard]=\"true\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\n      @if(!loading){\n      <div class=\"queue-list-container-wrapper p-0\">\n        <app-queue-list\n        [queueData]=\"filteredQueueData\"\n        [selectedQueueId]=\"selectedQueueId\"\n        [selectedStatus]=\"selectedStatus\"\n        [userRole]=\"userRole\"\n        [showQueueDataForm]=\"true\"\n        (queueSelected)=\"onQueueSelected($event)\"\n        (statusChanged)=\"onStatusChanged($event)\"\n        (insertQueueRequested)=\"onInsertQueueRequested()\"\n        ></app-queue-list>\n      </div>\n      }\n    </div>\n    <div class=\"col-12 xl:col-10 md:col-12 py-0 pr-0 h-full\">\n      @if(selectedQueue){\n      <div class=\"queue-application-container-wrapper h-full\">\n      <div class=\"grid m-0 justify-content-between align-items-center mb-3\">\n          <div class=\"col-8 p-0 flex align-items-center\">\n            <div class=\"col-7 p-0 mr-3\">\n              <queue-search \n                [placeholder]=\"placeholder\"\n                [searchText]=\"searchText\"\n                (searchInputChanged)=\"onSearchInputChanged($event)\"\n                (searchRequested)=\"onSearchRequested($event)\"\n                (searchCleared)=\"onSearchCleared()\">\n              </queue-search>\n            </div>\n            <div>\n              <lib-queue-filter-dropdown \n                #filterDropdown\n                [appliedFilters]=\"appliedFilters\"\n                (filterApplied)=\"onFilterDropdownApplied($event)\"\n                (filtersCleared)=\"onFiltersCleared()\">\n              </lib-queue-filter-dropdown>\n            </div>\n            <div *ngIf=\"hasActiveFilters\">\n              <button \n                class=\"clear-filters-btn\"\n                type=\"button\"\n                (click)=\"onClearAllFilters()\">\n                Clear <i class=\"pi pi-times ml-2\"></i>\n              </button>\n            </div>\n          </div>\n          \n          <div class=\"flex align-items-center gap-3 col-3 py-0 pl-0 justify-content-end\">\n            <ng-content select=\"[user-dropdown]\"></ng-content>\n          </div>\n      </div>\n\n      <div class=\"animation-duration-500 associated-list queue-table-container-wrapper custom-scroll mb-0 p-0\">\n \n        <app-queue-record-table\n          [table]=\"table\"\n          [metaData]=\"metaData\"\n          [loading]=\"loading\"\n          [selectedRows]=\"selectedRows\"\n          [resetSort]=\"resetSort\"\n          [isShowSkeleton]=\"isShowSkeleton\"\n          [selectedQueue]=\"selectedQueue\"\n          (selectionChange)=\"onTableSelectionChange($event)\"\n          (selectedRowsData)=\"onTableSelectionChange($event)\"\n          (assignmentDataReady)=\"onAssignmentDataReady($event)\"\n          (rowClick)=\"onTableRowClick($event)\"\n          (paginationChanged)=\"onPaginationChanged($event)\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (sortApplied)=\"onSortApplied($event)\">\n        </app-queue-record-table>\n      </div>\n      </div>\n      }\n    </div>\n\n  </div>", styles: [":host{display:block;height:100%;padding-top:14px}.queue-table-container-wrapper{height:calc(100% - 58px)}.queue-list-container-wrapper{background-color:transparent}.queue-application-container-wrapper{background-color:#fff;border-radius:15px;padding:20px}.clear-filters-btn{background:none;border:1px solid #e5e7eb;color:#64748b;font-size:.85rem;font-weight:500;cursor:pointer;margin-left:.5rem;display:inline-flex;align-items:center;padding:6px 12px;border-radius:8px;transition:all .2s ease}.clear-filters-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#ef4444}.clear-filters-btn i{font-size:.75rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkeletonComponent, selector: "lib-skeleton", inputs: ["count", "columns", "width", "height", "isAllowCard"] }, { kind: "component", type: QueueSearchComponent, selector: "queue-search", inputs: ["searchText", "placeholder", "debounceTime"], outputs: ["searchInputChanged", "searchRequested", "searchCleared"] }, { kind: "component", type: QueueListComponent, selector: "app-queue-list", inputs: ["queueData", "selectedQueueId", "selectedStatus", "userRole", "showQueueDataForm"], outputs: ["queueSelected", "statusChanged", "insertQueueRequested"] }, { kind: "component", type: QueueRecordTableComponent, selector: "app-queue-record-table", inputs: ["table", "metaData", "loading", "selectedRows", "resetSort", "isShowSkeleton", "selectedQueue"], outputs: ["selectionChange", "selectedRowsData", "assignmentDataReady", "rowClick", "paginationChanged", "filterApplied", "sortApplied"] }, { kind: "component", type: QueueFilterDropdownComponent, selector: "lib-queue-filter-dropdown", inputs: ["appliedFilters"], outputs: ["filterApplied", "filtersCleared"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-queue-container', standalone: false, template: "<div class=\"container grid m-0 h-full\">\n    <div class=\"col-12 xl:col-2 md:col-12 py-0 pl-0 h-full\">\n      <lib-skeleton *ngIf=\"loading\" [isAllowCard]=\"true\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\n      @if(!loading){\n      <div class=\"queue-list-container-wrapper p-0\">\n        <app-queue-list\n        [queueData]=\"filteredQueueData\"\n        [selectedQueueId]=\"selectedQueueId\"\n        [selectedStatus]=\"selectedStatus\"\n        [userRole]=\"userRole\"\n        [showQueueDataForm]=\"true\"\n        (queueSelected)=\"onQueueSelected($event)\"\n        (statusChanged)=\"onStatusChanged($event)\"\n        (insertQueueRequested)=\"onInsertQueueRequested()\"\n        ></app-queue-list>\n      </div>\n      }\n    </div>\n    <div class=\"col-12 xl:col-10 md:col-12 py-0 h-full\">\n      @if(selectedQueue){\n      <div class=\"queue-application-container-wrapper h-full\">\n      <div class=\"grid m-0 justify-content-between align-items-center mb-3\">\n          <div class=\"col-8 p-0 flex align-items-center\">\n            <div class=\"col-7 p-0 mr-3\">\n              <queue-search \n                [placeholder]=\"placeholder\"\n                [searchText]=\"searchText\"\n                (searchInputChanged)=\"onSearchInputChanged($event)\"\n                (searchRequested)=\"onSearchRequested($event)\"\n                (searchCleared)=\"onSearchCleared()\">\n              </queue-search>\n            </div>\n            <div>\n              <lib-queue-filter-dropdown \n                #filterDropdown\n                [appliedFilters]=\"appliedFilters\"\n                (filterApplied)=\"onFilterDropdownApplied($event)\"\n                (filtersCleared)=\"onFiltersCleared()\">\n              </lib-queue-filter-dropdown>\n            </div>\n            <div *ngIf=\"hasActiveFilters\">\n              <button \n                class=\"clear-filters-btn\"\n                type=\"button\"\n                (click)=\"onClearAllFilters()\">\n                Clear <i class=\"pi pi-times ml-2\"></i>\n              </button>\n            </div>\n          </div>\n          \n          <div class=\"flex align-items-center gap-3 col-3 py-0 pl-0 justify-content-end\">\n            <ng-content select=\"[user-dropdown]\"></ng-content>\n          </div>\n      </div>\n\n      <div class=\"animation-duration-500 associated-list queue-table-container-wrapper custom-scroll mb-0 p-0\">\n \n        <app-queue-record-table\n          [table]=\"table\"\n          [metaData]=\"metaData\"\n          [loading]=\"loading\"\n          [selectedRows]=\"selectedRows\"\n          [resetSort]=\"resetSort\"\n          [isShowSkeleton]=\"isShowSkeleton\"\n          [selectedQueue]=\"selectedQueue\"\n          (selectionChange)=\"onTableSelectionChange($event)\"\n          (selectedRowsData)=\"onTableSelectionChange($event)\"\n          (assignmentDataReady)=\"onAssignmentDataReady($event)\"\n          (rowClick)=\"onTableRowClick($event)\"\n          (paginationChanged)=\"onPaginationChanged($event)\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (sortApplied)=\"onSortApplied($event)\">\n        </app-queue-record-table>\n      </div>\n      </div>\n      }\n    </div>\n\n  </div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.queue-table-container-wrapper{height:calc(100% - 58px)}.queue-application-container-wrapper,.queue-list-container-wrapper{background-color:#fff;border-radius:10px}.queue-application-container-wrapper{padding:18px 11px 18px 18px}.clear-filters-btn{background:none;border:none;color:#2196f3;font-size:1.1rem;cursor:pointer;margin-left:.5rem;display:inline-flex;align-items:center;padding:0}.clear-filters-btn .clear-x{font-size:1.2rem;margin-left:.2rem;line-height:1}\n"] }]
+            args: [{ selector: 'lib-queue-container', standalone: false, template: "<div class=\"container grid m-0 h-full\">\n    <div class=\"col-12 xl:col-2 md:col-12 py-0 pl-0 h-full\">\n      <lib-skeleton *ngIf=\"loading\" [isAllowCard]=\"true\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\n      @if(!loading){\n      <div class=\"queue-list-container-wrapper p-0\">\n        <app-queue-list\n        [queueData]=\"filteredQueueData\"\n        [selectedQueueId]=\"selectedQueueId\"\n        [selectedStatus]=\"selectedStatus\"\n        [userRole]=\"userRole\"\n        [showQueueDataForm]=\"true\"\n        (queueSelected)=\"onQueueSelected($event)\"\n        (statusChanged)=\"onStatusChanged($event)\"\n        (insertQueueRequested)=\"onInsertQueueRequested()\"\n        ></app-queue-list>\n      </div>\n      }\n    </div>\n    <div class=\"col-12 xl:col-10 md:col-12 py-0 pr-0 h-full\">\n      @if(selectedQueue){\n      <div class=\"queue-application-container-wrapper h-full\">\n      <div class=\"grid m-0 justify-content-between align-items-center mb-3\">\n          <div class=\"col-8 p-0 flex align-items-center\">\n            <div class=\"col-7 p-0 mr-3\">\n              <queue-search \n                [placeholder]=\"placeholder\"\n                [searchText]=\"searchText\"\n                (searchInputChanged)=\"onSearchInputChanged($event)\"\n                (searchRequested)=\"onSearchRequested($event)\"\n                (searchCleared)=\"onSearchCleared()\">\n              </queue-search>\n            </div>\n            <div>\n              <lib-queue-filter-dropdown \n                #filterDropdown\n                [appliedFilters]=\"appliedFilters\"\n                (filterApplied)=\"onFilterDropdownApplied($event)\"\n                (filtersCleared)=\"onFiltersCleared()\">\n              </lib-queue-filter-dropdown>\n            </div>\n            <div *ngIf=\"hasActiveFilters\">\n              <button \n                class=\"clear-filters-btn\"\n                type=\"button\"\n                (click)=\"onClearAllFilters()\">\n                Clear <i class=\"pi pi-times ml-2\"></i>\n              </button>\n            </div>\n          </div>\n          \n          <div class=\"flex align-items-center gap-3 col-3 py-0 pl-0 justify-content-end\">\n            <ng-content select=\"[user-dropdown]\"></ng-content>\n          </div>\n      </div>\n\n      <div class=\"animation-duration-500 associated-list queue-table-container-wrapper custom-scroll mb-0 p-0\">\n \n        <app-queue-record-table\n          [table]=\"table\"\n          [metaData]=\"metaData\"\n          [loading]=\"loading\"\n          [selectedRows]=\"selectedRows\"\n          [resetSort]=\"resetSort\"\n          [isShowSkeleton]=\"isShowSkeleton\"\n          [selectedQueue]=\"selectedQueue\"\n          (selectionChange)=\"onTableSelectionChange($event)\"\n          (selectedRowsData)=\"onTableSelectionChange($event)\"\n          (assignmentDataReady)=\"onAssignmentDataReady($event)\"\n          (rowClick)=\"onTableRowClick($event)\"\n          (paginationChanged)=\"onPaginationChanged($event)\"\n          (filterApplied)=\"onFilterApplied($event)\"\n          (sortApplied)=\"onSortApplied($event)\">\n        </app-queue-record-table>\n      </div>\n      </div>\n      }\n    </div>\n\n  </div>", styles: [":host{display:block;height:100%;padding-top:14px}.queue-table-container-wrapper{height:calc(100% - 58px)}.queue-list-container-wrapper{background-color:transparent}.queue-application-container-wrapper{background-color:#fff;border-radius:15px;padding:20px}.clear-filters-btn{background:none;border:1px solid #e5e7eb;color:#64748b;font-size:.85rem;font-weight:500;cursor:pointer;margin-left:.5rem;display:inline-flex;align-items:center;padding:6px 12px;border-radius:8px;transition:all .2s ease}.clear-filters-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:#ef4444}.clear-filters-btn i{font-size:.75rem}\n"] }]
         }], ctorParameters: () => [{ type: QueueStore$1 }, { type: QueueService }, { type: BaseStore }, { type: QueueBusinessService }, { type: QueueRecordTableBuilderService }, { type: QueueFilterDropdownService }, { type: BaseQuery }], propDecorators: { placeholder: [{
                 type: Input
             }], filterDropdown: [{