cat-qw-lib 1.0.5 → 1.0.6

package/fesm2022/cat-qw-lib.mjs

@@ -33,7 +33,7 @@ import * as i7 from 'primeng/messages';
 import { MessagesModule } from 'primeng/messages';
 import * as i4$2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
-import { tap } from 'rxjs/operators';
+import { tap, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
 import * as i1$1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
 import * as i3$4 from '@angular/router';
@@ -178,6 +178,8 @@ class SHARED {
     static IS_MENU = 'isMenu';
     static ON_WIDGET_UPDATE = 'onWidgetUpdate';
     static selectedApplicationType = "applicationType";
+    static APPLICANTS = 'applicants';
+    static SECURITY_ADDRESS = 'securityAddress';
 }
 const widgetLayoutTypeList = [
     { name: 'Row', value: 'row' },
@@ -2240,6 +2242,7 @@ class TableSecondaryComponent {
     selectionMode;
     selection;
     usePagination = true; // ✅ Pagination control
+    scrollHeight;
     selectionChange = new EventEmitter();
     rowSelection;
     rowSelectionChange = new EventEmitter();
@@ -2442,11 +2445,11 @@ class TableSecondaryComponent {
         this.sortChanged.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableSecondaryComponent, deps: [{ token: i3$4.Router }, { token: BaseService }, { token: i3$4.ActivatedRoute }, { token: BaseQuery }, { token: BaseStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: TableSecondaryComponent, isStandalone: true, selector: "lib-table-secondary", inputs: { table: "table", metaData: "metaData", title: "title", builder: "builder", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", pathName: "pathName", selectionMode: "selectionMode", selection: "selection", usePagination: "usePagination", rowSelection: "rowSelection", enableSelection: "enableSelection", noRecordsMessage: "noRecordsMessage", searchTerm: "searchTerm", filterQuery: "filterQuery" }, outputs: { selectionChange: "selectionChange", rowSelectionChange: "rowSelectionChange", sortChanged: "sortChanged", onDeleteRow: "onDeleteRow", onPage: "onPage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-table\r\n*ngIf=\"table && table.headers\"\r\n  #dt2\r\n  [lazy]=\"true\"\r\n  (onSort)=\"onSort($event)\"\r\n  [paginator]=\"false\"\r\n  [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n  [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n  [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n  [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n  [columns]=\"table.headers\"\r\n  class=\"table-secondary-container\"\r\n  [value]=\"table.records\"\r\n  [sortField]=\"sortField\"\r\n  [sortOrder]=\"sortOrder\"\r\n  [dataKey]=\"table.dataKey\"\r\n  [selectionMode]=\"selectionMode\"\r\n  [(selection)]=\"selection\"\r\n  (selectionChange)=\"onSelectionChange($event)\"\r\n>\r\n  <!-- Header -->\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr *ngIf=\"table.headers.length > 0\">\r\n      <th\r\n        *ngFor=\"let col of table.headers; let i = index\"\r\n        class=\"table-header-wrapper\"\r\n        [pSortableColumn]=\"col.name\"\r\n        [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n        style=\"min-width: 100px\"\r\n      >      \r\n        <h4\r\n        [ngClass]=\"[col.class || '', i === 0 ? 'justify-content-start' : 'justify-content-center']\"\r\n         class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n          {{ col.name }}\r\n          @if(table.isSortingAllow){\r\n            <p-sortIcon [field]=\"col.name\" />\r\n          }\r\n        </h4>\r\n      </th>\r\n\r\n      \r\n    <th *ngIf=\"selectionMode === 'multiple'\" class=\"table-header-wrapper text-center table-action-title\" style=\"width: 6rem;\">\r\n      <h4 class=\"flex align-items-center justify-content-center gap-2 table-header-title capitalize font-semibold m-0\">\r\n        Select <span *ngIf=\"selection?.length\">\r\n          ({{ selection.length }})\r\n        </span>\r\n      </h4>\r\n      </th>\r\n\r\n      <th\r\n        *ngIf=\"showActions\"\r\n        class=\"table-action-title table-header-wrapper\"\r\n        [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n      >\r\n      </th>\r\n\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <!-- Body -->\r\n  <ng-template pTemplate=\"body\" let-rowData>\r\n    <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\" \r\n     (click)=\"handleRowClick(rowData)\" [ngClass]=\"{ 'row-selected': isRowSelected(rowData) }\" [ngClass]=\"{\r\n      'row-selected': isRowSelected(rowData),'green-highlight': selection?.includes(rowData)}\">\r\n      <td\r\n        class=\"table-body-wrapper\"\r\n        [ngClass]=\"(j === table.headers.length - 1 && selectionMode !== 'multiple' && !showActions) ? 'header-text-wrapper' : ''\"\r\n        *ngFor=\"let col of table.headers; let j = index\"\r\n      >\r\n        <div class=\"row-wrapprt flex align-items-center justify-content-center\">\r\n          <ng-container [ngSwitch]=\"col.customClass\">\r\n\r\n            <!-- Required badge -->\r\n            <ng-container *ngSwitchCase=\"'required-badge'\">\r\n              <span\r\n                [ngClass]=\"{\r\n                  'px-3 py-1 rounded-2xl text-sm': true,\r\n                  'bg-red-100 text-red-800': rowData[col.name] === 'Required',\r\n                  'bg-gray-100 text-gray-500': rowData[col.name] !== 'Required'\r\n                }\"\r\n              >\r\n                {{ rowData[col.name] }}\r\n              </span>\r\n            </ng-container>\r\n\r\n            <!-- Default cell rendering -->\r\n            <ng-container *ngSwitchDefault>\r\n              <div\r\n                class=\"table-text-wrapper p-0 flex align-items-center\"\r\n                [ngClass]=\"[getRowClass(col, rowData), j === 0 ? 'justify-content-start' : 'justify-content-center']\"\r\n                [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                style=\"\r\n                  white-space: nowrap;\r\n                  overflow: hidden;\r\n                  text-overflow: ellipsis;\r\n                  width:100%\r\n                \"\r\n              >\r\n              <i\r\n              *ngIf=\"rowData[col.name]?.icon\"\r\n              class=\"pi pr-2\"\r\n              [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n              ></i>\r\n              <p class=\"mb-0\"> {{ rowData[col.name]?.value ?? rowData[col.name] }} </p>\r\n              </div>\r\n              <div\r\n                *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n                class=\"text-black-500 text-sm mt-1\"\r\n                style=\"font-weight: 600;\"\r\n              >\r\n                {{ rowData[table.descriptionColumnName] }}\r\n              </div>\r\n            </ng-container>\r\n\r\n          </ng-container>\r\n        </div>\r\n      </td>\r\n      \r\n      <!-- Checkbox at end -->\r\n      <td *ngIf=\"selectionMode === 'multiple'\" class=\"text-center table-body-wrapper action-data-wrapper\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n        <p-tableCheckbox [value]=\"rowData\"  [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n      </td>\r\n     \r\n      <!-- Actions -->\r\n      <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n        <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n          <p-button\r\n            icon=\"pi pi-trash\"\r\n            (click)=\"deleteRow($event, rowData)\"      \r\n            class=\"delete-icon-wrapper mr-3\"\r\n            [disabled]=\"!enableSelection\"\r\n          ></p-button>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <!-- Empty Message -->\r\n  <ng-template pTemplate=\"emptymessage\">\r\n    <tr>\r\n      <td\r\n        [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n        class=\"text-center text-color font-semibold p-4\"\r\n      >\r\n         {{ noRecordsMessage }}\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n</p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n  <div class=\"pagination-text text-color\">\r\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n  </div>\r\n\r\n  <p-paginator\r\n    #paginator\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    (onPageChange)=\"handleLoadRecords($event)\"\r\n  ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{padding:20px 8px 12px;background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none;background:#f9f9fa}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px}.table-body-wrapper{padding:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: TableSecondaryComponent, isStandalone: true, selector: "lib-table-secondary", inputs: { table: "table", metaData: "metaData", title: "title", builder: "builder", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", pathName: "pathName", selectionMode: "selectionMode", selection: "selection", usePagination: "usePagination", scrollHeight: "scrollHeight", rowSelection: "rowSelection", enableSelection: "enableSelection", noRecordsMessage: "noRecordsMessage", searchTerm: "searchTerm", filterQuery: "filterQuery" }, outputs: { selectionChange: "selectionChange", rowSelectionChange: "rowSelectionChange", sortChanged: "sortChanged", onDeleteRow: "onDeleteRow", onPage: "onPage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container\">\r\n  <p-table\r\n  *ngIf=\"table && table.headers\"\r\n    #dt2\r\n    [lazy]=\"true\"\r\n    (onSort)=\"onSort($event)\"\r\n    [paginator]=\"false\"\r\n    [scrollable]=\"!!scrollHeight\"\r\n    [scrollHeight]=\"scrollHeight\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [columns]=\"table.headers\"\r\n    class=\"table-secondary-container\"\r\n    [value]=\"table.records\"\r\n    [sortField]=\"sortField\"\r\n    [sortOrder]=\"sortOrder\"\r\n    [dataKey]=\"table.dataKey\"\r\n    [selectionMode]=\"selectionMode\"\r\n    [(selection)]=\"selection\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n  >\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n      <tr *ngIf=\"table.headers.length > 0\">\r\n        <th\r\n          *ngFor=\"let col of table.headers; let i = index\"\r\n          class=\"table-header-wrapper\"\r\n          [pSortableColumn]=\"col.name\"\r\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n          style=\"min-width: 100px\"\r\n        >      \r\n          <h4\r\n          [ngClass]=\"[\r\n            col.class || '', \r\n            col.headerAlign === 'center' ? 'justify-content-center' : \r\n            (col.headerAlign === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n            {{ col.name }}\r\n            @if(table.isSortingAllow){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n        \r\n      <th *ngIf=\"selectionMode === 'multiple'\" class=\"table-header-wrapper text-center table-action-title\" style=\"width: 6rem;\">\r\n        <h4 class=\"flex align-items-center justify-content-center gap-2 table-header-title capitalize font-semibold m-0\">\r\n          Select <span *ngIf=\"selection?.length\">\r\n            ({{ selection.length }})\r\n          </span>\r\n        </h4>\r\n        </th>\r\n  \r\n        <th\r\n          *ngIf=\"showActions\"\r\n          class=\"table-action-title table-header-wrapper\"\r\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n        >\r\n        </th>\r\n  \r\n      </tr>\r\n    </ng-template>\r\n  \r\n    <!-- Body -->\r\n    <ng-template pTemplate=\"body\" let-rowData>\r\n      <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\" \r\n       (click)=\"handleRowClick(rowData)\" [ngClass]=\"{ 'row-selected': isRowSelected(rowData) }\" [ngClass]=\"{\r\n        'row-selected': isRowSelected(rowData),'green-highlight': selection?.includes(rowData)}\">\r\n        <td\r\n          class=\"table-body-wrapper\"\r\n          [ngClass]=\"(j === table.headers.length - 1 && selectionMode !== 'multiple' && !showActions) ? 'header-text-wrapper' : ''\"\r\n          *ngFor=\"let col of table.headers; let j = index\"\r\n        >\r\n          <div class=\"row-wrapprt flex align-items-center justify-content-center\">\r\n            <ng-container [ngSwitch]=\"col.customClass\">\r\n  \r\n              <!-- Required badge -->\r\n              <ng-container *ngSwitchCase=\"'required-badge'\">\r\n                <span\r\n                  [ngClass]=\"{\r\n                    'px-3 py-1 rounded-2xl text-sm': true,\r\n                    'bg-red-100 text-red-800': rowData[col.name] === 'Required',\r\n                    'bg-gray-100 text-gray-500': rowData[col.name] !== 'Required'\r\n                  }\"\r\n                >\r\n                  {{ rowData[col.name] }}\r\n                </span>\r\n              </ng-container>\r\n  \r\n              <!-- Default cell rendering -->\r\n              <ng-container *ngSwitchDefault>\r\n                <div\r\n                  class=\"table-text-wrapper p-0 flex align-items-center\"\r\n                  [ngClass]=\"[\r\n                    getRowClass(col, rowData),\r\n                    col.align === 'center' ? 'justify-content-center' : \r\n                    (col.align === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n                  ]\"\r\n                  [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                  [style.white-space]=\"col.isHtml ? 'normal' : 'nowrap'\"\r\n                  style=\"\r\n                    overflow: hidden;\r\n                    text-overflow: ellipsis;\r\n                    width:100%\r\n                  \"\r\n                >\r\n                <i\r\n                *ngIf=\"rowData[col.name]?.icon\"\r\n                class=\"pi pr-2\"\r\n                [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n                ></i>\r\n                <p class=\"mb-0\" *ngIf=\"!col.isHtml\"> {{ rowData[col.name]?.value ?? rowData[col.name] }} </p>\r\n                <div *ngIf=\"col.isHtml\" [innerHTML]=\"rowData[col.name]?.value ?? rowData[col.name]\"></div>\r\n                </div>\r\n                <div\r\n                  *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n                  class=\"text-black-500 text-sm mt-1\"\r\n                  style=\"font-weight: 600;\"\r\n                >\r\n                  {{ rowData[table.descriptionColumnName] }}\r\n                </div>\r\n              </ng-container>\r\n  \r\n            </ng-container>\r\n          </div>\r\n        </td>\r\n        \r\n        <!-- Checkbox at end -->\r\n        <td *ngIf=\"selectionMode === 'multiple'\" class=\"text-center table-body-wrapper action-data-wrapper\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n          <p-tableCheckbox [value]=\"rowData\"  [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n        </td>\r\n       \r\n        <!-- Actions -->\r\n        <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n          <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n            <p-button\r\n              icon=\"pi pi-trash\"\r\n              (click)=\"deleteRow($event, rowData)\"      \r\n              class=\"delete-icon-wrapper mr-3\"\r\n              [disabled]=\"!enableSelection\"\r\n            ></p-button>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  \r\n    <!-- Empty Message -->\r\n    <ng-template pTemplate=\"emptymessage\">\r\n      <tr>\r\n        <td\r\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n          class=\"text-center text-color font-semibold p-4\"\r\n        >\r\n           {{ noRecordsMessage }}\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n</div>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n  <div class=\"pagination-text text-color\">\r\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n  </div>\r\n\r\n  <p-paginator\r\n    #paginator\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    (onPageChange)=\"handleLoadRecords($event)\"\r\n  ></p-paginator>\r\n</div> ", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.table-container{flex:1;min-height:0}.table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}.paginator-container{flex-shrink:0;background:#fff;padding:1rem;border-top:1px solid rgba(68,72,109,.1)}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none;background:#f9f9fa}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px}.table-body-wrapper{padding:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i6$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i6$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i6$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i6$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableSecondaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule], template: "<p-table\r\n*ngIf=\"table && table.headers\"\r\n  #dt2\r\n  [lazy]=\"true\"\r\n  (onSort)=\"onSort($event)\"\r\n  [paginator]=\"false\"\r\n  [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n  [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n  [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n  [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n  [columns]=\"table.headers\"\r\n  class=\"table-secondary-container\"\r\n  [value]=\"table.records\"\r\n  [sortField]=\"sortField\"\r\n  [sortOrder]=\"sortOrder\"\r\n  [dataKey]=\"table.dataKey\"\r\n  [selectionMode]=\"selectionMode\"\r\n  [(selection)]=\"selection\"\r\n  (selectionChange)=\"onSelectionChange($event)\"\r\n>\r\n  <!-- Header -->\r\n  <ng-template pTemplate=\"header\" let-columns>\r\n    <tr *ngIf=\"table.headers.length > 0\">\r\n      <th\r\n        *ngFor=\"let col of table.headers; let i = index\"\r\n        class=\"table-header-wrapper\"\r\n        [pSortableColumn]=\"col.name\"\r\n        [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n        style=\"min-width: 100px\"\r\n      >      \r\n        <h4\r\n        [ngClass]=\"[col.class || '', i === 0 ? 'justify-content-start' : 'justify-content-center']\"\r\n         class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n          {{ col.name }}\r\n          @if(table.isSortingAllow){\r\n            <p-sortIcon [field]=\"col.name\" />\r\n          }\r\n        </h4>\r\n      </th>\r\n\r\n      \r\n    <th *ngIf=\"selectionMode === 'multiple'\" class=\"table-header-wrapper text-center table-action-title\" style=\"width: 6rem;\">\r\n      <h4 class=\"flex align-items-center justify-content-center gap-2 table-header-title capitalize font-semibold m-0\">\r\n        Select <span *ngIf=\"selection?.length\">\r\n          ({{ selection.length }})\r\n        </span>\r\n      </h4>\r\n      </th>\r\n\r\n      <th\r\n        *ngIf=\"showActions\"\r\n        class=\"table-action-title table-header-wrapper\"\r\n        [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n      >\r\n      </th>\r\n\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <!-- Body -->\r\n  <ng-template pTemplate=\"body\" let-rowData>\r\n    <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\" \r\n     (click)=\"handleRowClick(rowData)\" [ngClass]=\"{ 'row-selected': isRowSelected(rowData) }\" [ngClass]=\"{\r\n      'row-selected': isRowSelected(rowData),'green-highlight': selection?.includes(rowData)}\">\r\n      <td\r\n        class=\"table-body-wrapper\"\r\n        [ngClass]=\"(j === table.headers.length - 1 && selectionMode !== 'multiple' && !showActions) ? 'header-text-wrapper' : ''\"\r\n        *ngFor=\"let col of table.headers; let j = index\"\r\n      >\r\n        <div class=\"row-wrapprt flex align-items-center justify-content-center\">\r\n          <ng-container [ngSwitch]=\"col.customClass\">\r\n\r\n            <!-- Required badge -->\r\n            <ng-container *ngSwitchCase=\"'required-badge'\">\r\n              <span\r\n                [ngClass]=\"{\r\n                  'px-3 py-1 rounded-2xl text-sm': true,\r\n                  'bg-red-100 text-red-800': rowData[col.name] === 'Required',\r\n                  'bg-gray-100 text-gray-500': rowData[col.name] !== 'Required'\r\n                }\"\r\n              >\r\n                {{ rowData[col.name] }}\r\n              </span>\r\n            </ng-container>\r\n\r\n            <!-- Default cell rendering -->\r\n            <ng-container *ngSwitchDefault>\r\n              <div\r\n                class=\"table-text-wrapper p-0 flex align-items-center\"\r\n                [ngClass]=\"[getRowClass(col, rowData), j === 0 ? 'justify-content-start' : 'justify-content-center']\"\r\n                [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                style=\"\r\n                  white-space: nowrap;\r\n                  overflow: hidden;\r\n                  text-overflow: ellipsis;\r\n                  width:100%\r\n                \"\r\n              >\r\n              <i\r\n              *ngIf=\"rowData[col.name]?.icon\"\r\n              class=\"pi pr-2\"\r\n              [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n              ></i>\r\n              <p class=\"mb-0\"> {{ rowData[col.name]?.value ?? rowData[col.name] }} </p>\r\n              </div>\r\n              <div\r\n                *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n                class=\"text-black-500 text-sm mt-1\"\r\n                style=\"font-weight: 600;\"\r\n              >\r\n                {{ rowData[table.descriptionColumnName] }}\r\n              </div>\r\n            </ng-container>\r\n\r\n          </ng-container>\r\n        </div>\r\n      </td>\r\n      \r\n      <!-- Checkbox at end -->\r\n      <td *ngIf=\"selectionMode === 'multiple'\" class=\"text-center table-body-wrapper action-data-wrapper\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n        <p-tableCheckbox [value]=\"rowData\"  [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n      </td>\r\n     \r\n      <!-- Actions -->\r\n      <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n        <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n          <p-button\r\n            icon=\"pi pi-trash\"\r\n            (click)=\"deleteRow($event, rowData)\"      \r\n            class=\"delete-icon-wrapper mr-3\"\r\n            [disabled]=\"!enableSelection\"\r\n          ></p-button>\r\n        </div>\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n\r\n  <!-- Empty Message -->\r\n  <ng-template pTemplate=\"emptymessage\">\r\n    <tr>\r\n      <td\r\n        [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n        class=\"text-center text-color font-semibold p-4\"\r\n      >\r\n         {{ noRecordsMessage }}\r\n      </td>\r\n    </tr>\r\n  </ng-template>\r\n</p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n  <div class=\"pagination-text text-color\">\r\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n  </div>\r\n\r\n  <p-paginator\r\n    #paginator\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    (onPageChange)=\"handleLoadRecords($event)\"\r\n  ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{padding:20px 8px 12px;background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none;background:#f9f9fa}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px}.table-body-wrapper{padding:8px}}\n"] }]
+            args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule], template: "<div class=\"table-container\">\r\n  <p-table\r\n  *ngIf=\"table && table.headers\"\r\n    #dt2\r\n    [lazy]=\"true\"\r\n    (onSort)=\"onSort($event)\"\r\n    [paginator]=\"false\"\r\n    [scrollable]=\"!!scrollHeight\"\r\n    [scrollHeight]=\"scrollHeight\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [columns]=\"table.headers\"\r\n    class=\"table-secondary-container\"\r\n    [value]=\"table.records\"\r\n    [sortField]=\"sortField\"\r\n    [sortOrder]=\"sortOrder\"\r\n    [dataKey]=\"table.dataKey\"\r\n    [selectionMode]=\"selectionMode\"\r\n    [(selection)]=\"selection\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n  >\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n      <tr *ngIf=\"table.headers.length > 0\">\r\n        <th\r\n          *ngFor=\"let col of table.headers; let i = index\"\r\n          class=\"table-header-wrapper\"\r\n          [pSortableColumn]=\"col.name\"\r\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n          style=\"min-width: 100px\"\r\n        >      \r\n          <h4\r\n          [ngClass]=\"[\r\n            col.class || '', \r\n            col.headerAlign === 'center' ? 'justify-content-center' : \r\n            (col.headerAlign === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title capitalize font-semibold m-0\">\r\n            {{ col.name }}\r\n            @if(table.isSortingAllow){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n        \r\n      <th *ngIf=\"selectionMode === 'multiple'\" class=\"table-header-wrapper text-center table-action-title\" style=\"width: 6rem;\">\r\n        <h4 class=\"flex align-items-center justify-content-center gap-2 table-header-title capitalize font-semibold m-0\">\r\n          Select <span *ngIf=\"selection?.length\">\r\n            ({{ selection.length }})\r\n          </span>\r\n        </h4>\r\n        </th>\r\n  \r\n        <th\r\n          *ngIf=\"showActions\"\r\n          class=\"table-action-title table-header-wrapper\"\r\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n        >\r\n        </th>\r\n  \r\n      </tr>\r\n    </ng-template>\r\n  \r\n    <!-- Body -->\r\n    <ng-template pTemplate=\"body\" let-rowData>\r\n      <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\" \r\n       (click)=\"handleRowClick(rowData)\" [ngClass]=\"{ 'row-selected': isRowSelected(rowData) }\" [ngClass]=\"{\r\n        'row-selected': isRowSelected(rowData),'green-highlight': selection?.includes(rowData)}\">\r\n        <td\r\n          class=\"table-body-wrapper\"\r\n          [ngClass]=\"(j === table.headers.length - 1 && selectionMode !== 'multiple' && !showActions) ? 'header-text-wrapper' : ''\"\r\n          *ngFor=\"let col of table.headers; let j = index\"\r\n        >\r\n          <div class=\"row-wrapprt flex align-items-center justify-content-center\">\r\n            <ng-container [ngSwitch]=\"col.customClass\">\r\n  \r\n              <!-- Required badge -->\r\n              <ng-container *ngSwitchCase=\"'required-badge'\">\r\n                <span\r\n                  [ngClass]=\"{\r\n                    'px-3 py-1 rounded-2xl text-sm': true,\r\n                    'bg-red-100 text-red-800': rowData[col.name] === 'Required',\r\n                    'bg-gray-100 text-gray-500': rowData[col.name] !== 'Required'\r\n                  }\"\r\n                >\r\n                  {{ rowData[col.name] }}\r\n                </span>\r\n              </ng-container>\r\n  \r\n              <!-- Default cell rendering -->\r\n              <ng-container *ngSwitchDefault>\r\n                <div\r\n                  class=\"table-text-wrapper p-0 flex align-items-center\"\r\n                  [ngClass]=\"[\r\n                    getRowClass(col, rowData),\r\n                    col.align === 'center' ? 'justify-content-center' : \r\n                    (col.align === 'right' ? 'justify-content-end' : 'justify-content-start')\r\n                  ]\"\r\n                  [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                  [style.white-space]=\"col.isHtml ? 'normal' : 'nowrap'\"\r\n                  style=\"\r\n                    overflow: hidden;\r\n                    text-overflow: ellipsis;\r\n                    width:100%\r\n                  \"\r\n                >\r\n                <i\r\n                *ngIf=\"rowData[col.name]?.icon\"\r\n                class=\"pi pr-2\"\r\n                [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n                ></i>\r\n                <p class=\"mb-0\" *ngIf=\"!col.isHtml\"> {{ rowData[col.name]?.value ?? rowData[col.name] }} </p>\r\n                <div *ngIf=\"col.isHtml\" [innerHTML]=\"rowData[col.name]?.value ?? rowData[col.name]\"></div>\r\n                </div>\r\n                <div\r\n                  *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n                  class=\"text-black-500 text-sm mt-1\"\r\n                  style=\"font-weight: 600;\"\r\n                >\r\n                  {{ rowData[table.descriptionColumnName] }}\r\n                </div>\r\n              </ng-container>\r\n  \r\n            </ng-container>\r\n          </div>\r\n        </td>\r\n        \r\n        <!-- Checkbox at end -->\r\n        <td *ngIf=\"selectionMode === 'multiple'\" class=\"text-center table-body-wrapper action-data-wrapper\" style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n          <p-tableCheckbox [value]=\"rowData\"  [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n        </td>\r\n       \r\n        <!-- Actions -->\r\n        <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n          <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n            <p-button\r\n              icon=\"pi pi-trash\"\r\n              (click)=\"deleteRow($event, rowData)\"      \r\n              class=\"delete-icon-wrapper mr-3\"\r\n              [disabled]=\"!enableSelection\"\r\n            ></p-button>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  \r\n    <!-- Empty Message -->\r\n    <ng-template pTemplate=\"emptymessage\">\r\n      <tr>\r\n        <td\r\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n          class=\"text-center text-color font-semibold p-4\"\r\n        >\r\n           {{ noRecordsMessage }}\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n</div>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n  <div class=\"pagination-text text-color\">\r\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n  </div>\r\n\r\n  <p-paginator\r\n    #paginator\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    (onPageChange)=\"handleLoadRecords($event)\"\r\n  ></p-paginator>\r\n</div> ", styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0}.table-container{flex:1;min-height:0}.table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper{padding:12px 14px}.table-body-wrapper{padding:14px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:400%;padding:.5rem;box-sizing:border-box}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}.paginator-container{flex-shrink:0;background:#fff;padding:1rem;border-top:1px solid rgba(68,72,109,.1)}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none;background:#f9f9fa}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{background-color:var(--color-surface-light)!important;border:1px solid var(--text-black)!important}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px}.table-body-wrapper{padding:8px}}\n"] }]
         }], ctorParameters: () => [{ type: i3$4.Router }, { type: BaseService }, { type: i3$4.ActivatedRoute }, { type: BaseQuery }, { type: BaseStore }], propDecorators: { table: [{
                 type: Input
             }], metaData: [{
@@ -2473,6 +2476,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 type: Input
             }], usePagination: [{
                 type: Input
+            }], scrollHeight: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], rowSelection: [{
@@ -5593,7 +5598,7 @@ class QueueRecordTableBuilderService extends TableBuilder {
         }
         // Get the first record to determine available fields
         const firstRecord = records[0];
-        const excludedFields = ['_id', 'companyName', 'applicationType', 'assignedTo']; // Fields to exclude from table columns
+        const excludedFields = ['_id', 'companyName', 'applicationType', 'assignedTo', 'taskCompletionPercent']; // Fields to exclude from table columns
         // Get all fields from the first record, excluding specified fields
         const availableFields = Object.keys(firstRecord).filter(field => !excludedFields.includes(field));
         table.records = records.map((apiRecord) => {
@@ -5608,12 +5613,25 @@ class QueueRecordTableBuilderService extends TableBuilder {
             availableFields.forEach(field => {
                 let value = apiRecord[field];
                 // Format specific fields
-                if (field === 'applicants' && Array.isArray(value)) {
-                    value = value.map((applicant) => {
-                        const firstInitial = applicant.fullName?.split(' ')[0]?.[0] || '';
-                        const lastInitial = applicant.fullName?.split(' ').slice(-1)[0]?.[0] || '';
+                if (field === SHARED.APPLICANTS && Array.isArray(value)) {
+                    const companyInitials = (apiRecord.companyName || '').split(' ').slice(0, 2).map((word) => (word ? word[0] : '')).join('');
+                    const applicantInitials = value
+                        .map((applicant) => {
+                        const firstInitial = applicant.firstName ? applicant.firstName[0] : '';
+                        const lastInitial = applicant.lastName ? applicant.lastName[0] : '';
                         return `${firstInitial}${lastInitial}`;
-                    }).join(', ') || '';
+                    }).filter(Boolean).join(', ');
+                    value = [companyInitials, applicantInitials].filter(Boolean).join(', ');
+                }
+                else if (field === SHARED.SECURITY_ADDRESS && value) {
+                    const addressLine1 = value.addressLine1 || '';
+                    const postCode = value.postCode || '';
+                    if (addressLine1 || postCode) {
+                        value = `${addressLine1}<br/>${postCode}`;
+                    }
+                    else {
+                        value = SHARED.EMPTY;
+                    }
                 }
                 else if (!value || value === 'null') {
                     value = SHARED.EMPTY;
@@ -5623,13 +5641,19 @@ class QueueRecordTableBuilderService extends TableBuilder {
             return record;
         });
         // Generate headers dynamically
-        table.headers = availableFields.map(field => ({
-            name: field,
-            width: 'w-4' // Default width for all columns
-        }));
+        table.headers = availableFields.map(field => {
+            const header = {
+                name: field,
+                width: 'w-4' // Default width for all columns
+            };
+            if (field === SHARED.SECURITY_ADDRESS) {
+                header.isHtml = true;
+            }
+            return header;
+        });
         // Set TableSecondaryModel specific properties
         table.isSortingAllow = SHARED.TRUE;
-        table.showDecriptionFor = 'applicants';
+        table.showDecriptionFor = SHARED.APPLICANTS;
         return table;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueRecordTableBuilderService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
@@ -5652,11 +5676,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
 class QueueSearchComponent {
     searchText = '';
     placeholder = 'Search with Application no. or Name';
+    debounceTime = 400;
     searchInputChanged = new EventEmitter();
     searchRequested = new EventEmitter();
     searchCleared = new EventEmitter();
+    searchUpdate = new Subject();
+    subscription;
+    ngOnInit() {
+        this.subscription = this.searchUpdate.pipe(debounceTime$1(this.debounceTime), distinctUntilChanged$1()).subscribe(value => {
+            this.searchRequested.emit(value);
+        });
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
     onSearchInputChange() {
         this.searchInputChanged.emit(this.searchText);
+        this.searchUpdate.next(this.searchText);
     }
     onSearch() {
         this.searchRequested.emit(this.searchText);
@@ -5668,7 +5704,7 @@ 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" }, outputs: { searchInputChanged: "searchInputChanged", searchRequested: "searchRequested", searchCleared: "searchCleared" }, ngImport: i0, template: "<div class=\"flex mt-5 xl:mt-0 xl:justify-content-between\">\r\n    <div class=\"p-field m-0 p-0 w-full bg-white border-round py-1\">\r\n        <div class=\"p-inputgroup border-round-left bg-white\">\r\n            <span class=\"p-inputgroup-addon bg-white\">\r\n              <i class=\"pi pi-search\"></i>\r\n            </span>\r\n            <input \r\n              type=\"text\"  \r\n              [(ngModel)]=\"searchText\"  \r\n              class=\"border-none h-44 border-noround-right bg-white w-full outline-none\" \r\n              pInputText \r\n              [placeholder]=\"placeholder\" \r\n              (input)=\"onSearchInputChange()\"\r\n              (keydown.enter)=\"onSearch()\"  \r\n            />\r\n            <button \r\n              *ngIf=\"hasSearchText\" \r\n              type=\"button\" \r\n              class=\"p-inputgroup-addon bg-white border-none cursor-pointer\" \r\n              (click)=\"onClearSearch()\"\r\n              pButton \r\n              icon=\"pi pi-times\"\r\n              [text]=\"true\"\r\n            ></button>\r\n        </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".p-inputgroup{width: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 mt-5 xl:mt-0 xl:justify-content-between\">\r\n    <div class=\"p-field m-0 p-0 w-full bg-white border-round py-1\">\r\n        <div class=\"p-inputgroup border-round-left bg-white\">\r\n            <span class=\"p-inputgroup-addon bg-white\">\r\n              <i class=\"pi pi-search\"></i>\r\n            </span>\r\n            <input \r\n              type=\"text\"  \r\n              [(ngModel)]=\"searchText\"  \r\n              class=\"border-none h-44 border-noround-right bg-white w-full outline-none\" \r\n              pInputText \r\n              [placeholder]=\"placeholder\" \r\n              (input)=\"onSearchInputChange()\"\r\n              (keydown.enter)=\"onSearch()\"  \r\n            />\r\n            <button \r\n              *ngIf=\"hasSearchText\" \r\n              type=\"button\" \r\n              class=\"p-inputgroup-addon bg-white border-none cursor-pointer\" \r\n              (click)=\"onClearSearch()\"\r\n              pButton \r\n              icon=\"pi pi-times\"\r\n              [text]=\"true\"\r\n            ></button>\r\n        </div>\r\n    </div>\r\n  </div>\r\n  ", styles: [".p-inputgroup{width: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,
@@ -5677,6 +5713,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], debounceTime: [{
+                type: Input
             }], searchInputChanged: [{
                 type: Output
             }], searchRequested: [{
@@ -5810,11 +5848,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" }, outputs: { selectionChange: "selectionChange", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", paginationChanged: "paginationChanged", filterApplied: "filterApplied", sortApplied: "sortApplied" }, ngImport: i0, template: "<lib-table-secondary \r\n  *ngIf=\"table && table.headers && table.headers.length > 0\"\r\n  [table]=\"table\" \r\n  [metaData]=\"metaData\"\r\n  [enableSelection]=\"true\"\r\n  [selectionMode]=\"'multiple'\"\r\n  [selection]=\"selectedRows\"\r\n  [showActions]=\"false\"\r\n  [noRecordsMessage]=\"'No Records Found'\"\r\n  (onPage)=\"onPaginationChange($event)\"\r\n  (selectionChange)=\"onSelectionChange($event)\"\r\n  (rowSelectionChange)=\"onRowClick($event)\"\r\n  (sortChanged)=\"onSort($event)\"\r\n>\r\n</lib-table-secondary>\r\n", 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}.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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableSecondaryComponent, selector: "lib-table-secondary", inputs: ["table", "metaData", "title", "builder", "showStatus", "showActions", "showSearchBar", "showNewRecordButton", "showRefreshButton", "pathName", "selectionMode", "selection", "usePagination", "rowSelection", "enableSelection", "noRecordsMessage", "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" }, outputs: { selectionChange: "selectionChange", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", paginationChanged: "paginationChanged", filterApplied: "filterApplied", sortApplied: "sortApplied" }, ngImport: i0, template: "<div class=\"queue-record-table-wrapper\">\r\n  <lib-table-secondary \r\n    *ngIf=\"table && table.headers && table.headers.length > 0\"\r\n    [table]=\"table\" \r\n    [metaData]=\"metaData\"\r\n    [enableSelection]=\"true\"\r\n    [selectionMode]=\"'multiple'\"\r\n    [selection]=\"selectedRows\"\r\n    [showActions]=\"false\"\r\n    [noRecordsMessage]=\"'No Records Found'\"\r\n    scrollHeight=\"flex\"\r\n    (onPage)=\"onPaginationChange($event)\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    (rowSelectionChange)=\"onRowClick($event)\"\r\n    (sortChanged)=\"onSort($event)\"\r\n  >\r\n  </lib-table-secondary>\r\n</div>\r\n", styles: [".queue-record-table-wrapper{display:flex;flex-direction:column;height:calc(100vh - 90px)}.queue-record-table-wrapper lib-table-secondary{flex:1;min-height:0}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}@media screen and (max-width: 768px){.queue-record-table-wrapper{height:auto}.queue-record-table-wrapper .table-container .paginator-container{flex-direction:column;gap:.5rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TableSecondaryComponent, selector: "lib-table-secondary", inputs: ["table", "metaData", "title", "builder", "showStatus", "showActions", "showSearchBar", "showNewRecordButton", "showRefreshButton", "pathName", "selectionMode", "selection", "usePagination", "scrollHeight", "rowSelection", "enableSelection", "noRecordsMessage", "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: "<lib-table-secondary \r\n  *ngIf=\"table && table.headers && table.headers.length > 0\"\r\n  [table]=\"table\" \r\n  [metaData]=\"metaData\"\r\n  [enableSelection]=\"true\"\r\n  [selectionMode]=\"'multiple'\"\r\n  [selection]=\"selectedRows\"\r\n  [showActions]=\"false\"\r\n  [noRecordsMessage]=\"'No Records Found'\"\r\n  (onPage)=\"onPaginationChange($event)\"\r\n  (selectionChange)=\"onSelectionChange($event)\"\r\n  (rowSelectionChange)=\"onRowClick($event)\"\r\n  (sortChanged)=\"onSort($event)\"\r\n>\r\n</lib-table-secondary>\r\n", 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}.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=\"queue-record-table-wrapper\">\r\n  <lib-table-secondary \r\n    *ngIf=\"table && table.headers && table.headers.length > 0\"\r\n    [table]=\"table\" \r\n    [metaData]=\"metaData\"\r\n    [enableSelection]=\"true\"\r\n    [selectionMode]=\"'multiple'\"\r\n    [selection]=\"selectedRows\"\r\n    [showActions]=\"false\"\r\n    [noRecordsMessage]=\"'No Records Found'\"\r\n    scrollHeight=\"flex\"\r\n    (onPage)=\"onPaginationChange($event)\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    (rowSelectionChange)=\"onRowClick($event)\"\r\n    (sortChanged)=\"onSort($event)\"\r\n  >\r\n  </lib-table-secondary>\r\n</div>\r\n", styles: [".queue-record-table-wrapper{display:flex;flex-direction:column;height:calc(100vh - 90px)}.queue-record-table-wrapper lib-table-secondary{flex:1;min-height:0}.custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}@media screen and (max-width: 768px){.queue-record-table-wrapper{height:auto}.queue-record-table-wrapper .table-container .paginator-container{flex-direction:column;gap:.5rem}}\n"] }]
         }], propDecorators: { table: [{
                 type: Input
             }], metaData: [{
@@ -6084,7 +6122,7 @@ class QueueContainerComponent extends BaseContainerComponent {
         return this.selectedRows && this.selectedRows.length > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueContainerComponent, deps: [{ token: QueueStore }, { token: QueueService }, { token: BaseStore }, { token: QueueBusinessService }, { token: QueueRecordTableBuilderService }], 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: { selectedRowsInput: "selectedRowsInput" }, outputs: { assignmentComplete: "assignmentComplete", userAssigned: "userAssigned", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", selectionChange: "selectionChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container grid m-0 h-full\">\r\n    <div class=\"col-12 xl:col-2 md:col-12 py-0 h-full\">\r\n      <app-queue-list\r\n        [queueData]=\"filteredQueueData\"\r\n        [selectedQueueId]=\"selectedQueueId\"\r\n        [selectedStatus]=\"selectedStatus\"\r\n        [userRole]=\"userRole\"\r\n        [showQueueDataForm]=\"true\"\r\n        (queueSelected)=\"onQueueSelected($event)\"\r\n        (statusChanged)=\"onStatusChanged($event)\"\r\n        (insertQueueRequested)=\"onInsertQueueRequested()\"\r\n      ></app-queue-list>\r\n    </div>\r\n    <div class=\"col-12 xl:col-10 md:col-12 py-0 h-full\">\r\n    \r\n      @if(selectedQueue){\r\n      <div class=\"flex justify-content-between align-items-center mb-3\">\r\n          <div class=\"col-6 p-0\">\r\n            <div class=\"searchbar-wrapper\">\r\n              <queue-search \r\n                [searchText]=\"searchText\"\r\n                (searchInputChanged)=\"onSearchInputChanged($event)\"\r\n                (searchRequested)=\"onSearchRequested($event)\"\r\n                (searchCleared)=\"onSearchCleared()\">\r\n              </queue-search>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex justify-content-end\">\r\n            <ng-content select=\"[user-dropdown]\"></ng-content>\r\n          </div>\r\n      </div>\r\n\r\n      <div class=\"animation-duration-500 associated-list h-full card mb-0 p-0\">\r\n        <app-queue-record-table\r\n          [table]=\"table\"\r\n          [metaData]=\"metaData\"\r\n          [loading]=\"loading\"\r\n          [selectedRows]=\"selectedRows\"\r\n          (selectionChange)=\"onTableSelectionChange($event)\"\r\n          (selectedRowsData)=\"onTableSelectionChange($event)\"\r\n          (assignmentDataReady)=\"onAssignmentDataReady($event)\"\r\n          (rowClick)=\"onTableRowClick($event)\"\r\n          (paginationChanged)=\"onPaginationChanged($event)\"\r\n          (filterApplied)=\"onFilterApplied($event)\"\r\n          (sortApplied)=\"onSortApplied($event)\">\r\n        </app-queue-record-table>\r\n    </div>\r\n\r\n      }\r\n    </div>\r\n\r\n  </div>", styles: [".custom-scroll{overflow-y:hidden}.custom-scroll:hover{overflow-y:auto}\n"], dependencies: [{ kind: "component", type: QueueSearchComponent, selector: "queue-search", inputs: ["searchText", "placeholder"], 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"], outputs: ["selectionChange", "selectedRowsData", "assignmentDataReady", "rowClick", "paginationChanged", "filterApplied", "sortApplied"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: QueueContainerComponent, isStandalone: false, selector: "lib-queue-container", inputs: { selectedRowsInput: "selectedRowsInput" }, outputs: { assignmentComplete: "assignmentComplete", userAssigned: "userAssigned", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", selectionChange: "selectionChange" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container grid m-0 h-full\">\r\n    <div class=\"col-12 xl:col-2 md:col-12 py-0 h-full\">\r\n      <app-queue-list\r\n        [queueData]=\"filteredQueueData\"\r\n        [selectedQueueId]=\"selectedQueueId\"\r\n        [selectedStatus]=\"selectedStatus\"\r\n        [userRole]=\"userRole\"\r\n        [showQueueDataForm]=\"true\"\r\n        (queueSelected)=\"onQueueSelected($event)\"\r\n        (statusChanged)=\"onStatusChanged($event)\"\r\n        (insertQueueRequested)=\"onInsertQueueRequested()\"\r\n      ></app-queue-list>\r\n    </div>\r\n    <div class=\"col-12 xl:col-10 md:col-12 py-0 h-full\">\r\n    \r\n      @if(selectedQueue){\r\n      <div class=\"flex justify-content-between align-items-center mb-3\">\r\n          <div class=\"col-6 p-0\">\r\n            <div class=\"searchbar-wrapper\">\r\n              <queue-search \r\n                [searchText]=\"searchText\"\r\n                (searchInputChanged)=\"onSearchInputChanged($event)\"\r\n                (searchRequested)=\"onSearchRequested($event)\"\r\n                (searchCleared)=\"onSearchCleared()\">\r\n              </queue-search>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex justify-content-end\">\r\n            <ng-content select=\"[user-dropdown]\"></ng-content>\r\n          </div>\r\n      </div>\r\n\r\n      <div class=\"animation-duration-500 associated-list h-full card mb-0 p-0\">\r\n        <app-queue-record-table\r\n          [table]=\"table\"\r\n          [metaData]=\"metaData\"\r\n          [loading]=\"loading\"\r\n          [selectedRows]=\"selectedRows\"\r\n          (selectionChange)=\"onTableSelectionChange($event)\"\r\n          (selectedRowsData)=\"onTableSelectionChange($event)\"\r\n          (assignmentDataReady)=\"onAssignmentDataReady($event)\"\r\n          (rowClick)=\"onTableRowClick($event)\"\r\n          (paginationChanged)=\"onPaginationChanged($event)\"\r\n          (filterApplied)=\"onFilterApplied($event)\"\r\n          (sortApplied)=\"onSortApplied($event)\">\r\n        </app-queue-record-table>\r\n    </div>\r\n\r\n      }\r\n    </div>\r\n\r\n  </div>", styles: [".custom-scroll{overflow-y:hidden}.custom-scroll:hover{overflow-y:auto}\n"], dependencies: [{ 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"], outputs: ["selectionChange", "selectedRowsData", "assignmentDataReady", "rowClick", "paginationChanged", "filterApplied", "sortApplied"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueContainerComponent, decorators: [{
             type: Component,