cat-qw-lib 2.2.16 → 2.3.1

package/fesm2022/cat-qw-lib.mjs

@@ -3137,11 +3137,11 @@ class TableSecondaryComponent {
         return 'default';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableSecondaryComponent, deps: [{ token: i3$4.Router }, { token: BaseService }, { token: SessionService }, { token: BaseQuery }, { token: BaseStore }, { token: QueueBusinessService }, { token: QueueQuery$1 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: TableSecondaryComponent, isStandalone: true, selector: "lib-table-secondary", inputs: { table: "table", metaData: "metaData", title: "title", builder: "builder", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", isShowSkeleton: "isShowSkeleton", pathName: "pathName", selectionMode: "selectionMode", selection: "selection", usePagination: "usePagination", scrollHeight: "scrollHeight", rowSelection: "rowSelection", enableSelection: "enableSelection", noRecordsMessage: "noRecordsMessage", sortField: "sortField", sortOrder: "sortOrder", searchTerm: "searchTerm", filterQuery: "filterQuery" }, outputs: { selectionChange: "selectionChange", rowSelectionChange: "rowSelectionChange", sortChanged: "sortChanged", onDeleteRow: "onDeleteRow", onPage: "onPage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\n  <p-table\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\n    #dt2\n    [lazy]=\"true\"\n    (onSort)=\"onSort($event)\"\n    [paginator]=\"false\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [columns]=\"table.headers\"\n    class=\"table-secondary-container\"\n    [value]=\"table.records\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\"\n    [dataKey]=\"table.dataKey\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\n  >\n    <!-- Header -->\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr *ngIf=\"table.headers.length > 0\">\n        <th\n          *ngFor=\"let col of table.headers; let i = index\"\n          class=\"table-header-wrapper bg-white\"\n          [pSortableColumn]=\"col.name\"\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\n          style=\"min-width: 100px\"\n        >      \n          <h4\n          [ngClass]=\"[\n            col.class || '', \n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\n          ]\"\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\n            {{ col.displayName || col.name }}\n            @if(table.isSortingAllow && col.isShowSortIcon){\n              <p-sortIcon [field]=\"col.name\" />\n            }\n          </h4>\n        </th>\n  \n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\n          <span *ngIf=\"selection?.length && !isSelectAll\">\n            ({{ selection.length }})\n          </span>\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isAllCurrentPageSelected\"\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\n        </h4>\n        </th>\n  \n        <th\n          *ngIf=\"showActions\"\n          class=\"table-action-title table-header-wrapper\"\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\n        >\n        </th>\n  \n      </tr>\n    </ng-template>\n  \n    <!-- Body -->\n<ng-template pTemplate=\"body\" let-rowData>\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n    <!-- one TD per column -->\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\n        (click)=\"handleRowClick(rowData)\"\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\n        [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n      \n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\n          <!-- your existing inner column wrapper -->\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\n                <!-- task items - check this first -->\n                <ng-container *ngSwitchCase=\"'taskItems'\">\n                  <div class=\"col-tasks\">\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : 'task-success'\">\n                        <span>{{ taskItem.type }}</span>\n                        <span class=\"task-badge\">{{ taskItem.count }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              \n                <!-- Finance amount with special styling -->\n                <ng-container *ngSwitchCase=\"'finance'\">\n                  <div class=\"text-black font-semibold\">\n                    {{ rowData[col.name].amount }}\n                  </div>\n                </ng-container>\n              \n                <!-- App ID with type and risk tags -->\n                <ng-container *ngSwitchCase=\"'appId'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-semibold\">{{ rowData[col.name].appId }}</div>\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\n                      <!-- Type chip using style config (lending) -->\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\n                        <p class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\n                          {{ rowData[col.name].type }}\n                        </p>\n                      </div>\n                      <!-- Risk chip using style config (riskRating) -->\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\n                        <p class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\n                          {{ rowData[col.name].risk }}\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n                \n                <!-- Broker with name and company name -->\n                <ng-container *ngSwitchCase=\"'broker'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\n                      {{ rowData[col.name].brokerCompanyName }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!--Render two lines with dynamic classes for any two-line column -->\n                <ng-container *ngSwitchCase=\"'twoLine'\">\n                  <div class=\"w-full\" [ngClass]=\"[\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\n                      col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\n                    ]\">\n                    <div class=\"row-multi-line-wrapper\"\n                      [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\n                      {{ rowData[col.name]?.addressLine1 }}\n                    </div>\n                    <div class=\"row-multi-line-wrapper font-bold\"\n                      [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\n                      {{ rowData[col.name]?.postCode }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!-- progress bar -->\n                <ng-container *ngSwitchCase=\"'progress'\">\n                  <div class=\"progress-wrapper\">\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\n                    </round-progress>\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\n                      {{ rowData[col.name] }}\n                    </div>\n                  </div>\n              \n                </ng-container>\n                <!-- Default cell rendering for other columns -->\n                <ng-container *ngSwitchDefault>\n                  <!-- Don't render default content if we have task items -->\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\n                  <div\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\n                    [ngClass]=\"[\n                      getRowClass(col, rowData),\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\n                    ]\"\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\n                  >\n                    <i\n                     *ngIf=\"rowData[col.name]?.icon\"\n                       class=\"pi pr-2\"\n                       [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\n                       ></i>\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                    </div>\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\n                      <div class=\"w-full text-left\">\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                      </div>\n                    </ng-container>\n                    <ng-template #bubbleOrFallback>\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\n                        <div class=\"flex flex-column gap-1\">\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\n                            <div\n                              *ngIf=\"bubble.isCustomerVulnerable\"\n                              class=\"px-2 py-1 border-round-2xl inline-block bg-red-600 text-white\"\n                            >\n                              {{ bubble.fullName }}\n                            </div>\n                            <div\n                              *ngIf=\"!bubble.isCustomerVulnerable\"\n                              class=\"text-gray-700\"\n                            >\n                              {{ bubble.fullName }}\n                            </div>\n                          </ng-container>\n                        </div>\n                      </ng-container>\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\n                        <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\n                          {{ rowData[col.name] }}\n                        </p>\n                      </ng-container>\n                    </ng-template>\n                    <div\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\n                      class=\"text-black-500 text-sm mt-1\"\n                      style=\"font-weight: 600;\"\n                    >\n                      {{ rowData[table.descriptionColumnName] }}\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n              </ng-container>\n            </div>\n        </div>\n        </div>\n    </td>\n    <!-- Checkbox column -->\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\n       [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\n      </div>\n    </td>\n\n    <!-- Actions column -->\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\n        <p-button\n          icon=\"pi pi-trash\"\n          (click)=\"deleteRow($event, rowData)\"\n          class=\"delete-icon-wrapper mr-3\"\n          [disabled]=\"!enableSelection\"\n        ></p-button>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n  \n    <!-- Empty Message -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\n          class=\"text-center text-color font-semibold p-4\"\n        >\n           {{ noRecordsMessage }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n<!-- Paginator -->\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\n  <div class=\"pagination-text text-color\">\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\n  </div>\n\n  <p-paginator\n    #paginator\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    (onPageChange)=\"handleLoadRecords($event)\"\n  ></p-paginator>\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper,.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;box-sizing:border-box}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:first-child .border-row-wrapper{border-width:3px 0 3px 3px}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-width:3px 0}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:last-child .border-row-wrapper{border-width:3px 3px 3px 0}::ng-deep .table-row-wrapper:hover .table-select-row-wrapper .border-row-wrapper{border-width:3px 3px 3px 0}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: SkeletonComponent, selector: "lib-skeleton", inputs: ["count", "columns", "width", "height", "isAllowCard"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i9.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i9.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RoundProgressModule }, { kind: "component", type: i14.RoundProgressComponent, selector: "round-progress", inputs: ["current", "max", "radius", "animation", "animationDelay", "duration", "stroke", "color", "background", "responsive", "clockwise", "semicircle", "rounded"], outputs: ["onRender"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: TableSecondaryComponent, isStandalone: true, selector: "lib-table-secondary", inputs: { table: "table", metaData: "metaData", title: "title", builder: "builder", showStatus: "showStatus", showActions: "showActions", showSearchBar: "showSearchBar", showNewRecordButton: "showNewRecordButton", showRefreshButton: "showRefreshButton", isShowSkeleton: "isShowSkeleton", pathName: "pathName", selectionMode: "selectionMode", selection: "selection", usePagination: "usePagination", scrollHeight: "scrollHeight", rowSelection: "rowSelection", enableSelection: "enableSelection", noRecordsMessage: "noRecordsMessage", sortField: "sortField", sortOrder: "sortOrder", searchTerm: "searchTerm", filterQuery: "filterQuery" }, outputs: { selectionChange: "selectionChange", rowSelectionChange: "rowSelectionChange", sortChanged: "sortChanged", onDeleteRow: "onDeleteRow", onPage: "onPage" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: ["paginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "  <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\r\n  <p-table\r\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\r\n    #dt2\r\n    [lazy]=\"true\"\r\n    (onSort)=\"onSort($event)\"\r\n    [paginator]=\"false\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [columns]=\"table.headers\"\r\n    class=\"table-secondary-container\"\r\n    [value]=\"table.records\"\r\n    [sortField]=\"sortField\"\r\n    [sortOrder]=\"sortOrder\"\r\n    [dataKey]=\"table.dataKey\"\r\n    [selectionMode]=\"selectionMode\"\r\n    [(selection)]=\"selection\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n  >\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n      <tr *ngIf=\"table.headers.length > 0\">\r\n        <th\r\n          *ngFor=\"let col of table.headers; let i = index\"\r\n          class=\"table-header-wrapper bg-white\"\r\n          [pSortableColumn]=\"col.name\"\r\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\r\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n          style=\"min-width: 100px\"\r\n        >      \r\n          <h4\r\n          [ngClass]=\"[\r\n            col.class || '', \r\n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\r\n            {{ col.displayName || col.name }}\r\n            @if(table.isSortingAllow && col.isShowSortIcon){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \r\n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\r\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\r\n          <span *ngIf=\"selection?.length && !isSelectAll\">\r\n            ({{ selection.length }})\r\n          </span>\r\n          <p-checkbox\r\n            [binary]=\"true\"\r\n            [ngModel]=\"isAllCurrentPageSelected\"\r\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\r\n        </h4>\r\n        </th>\r\n  \r\n        <th\r\n          *ngIf=\"showActions\"\r\n          class=\"table-action-title table-header-wrapper\"\r\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n        >\r\n        </th>\r\n  \r\n      </tr>\r\n    </ng-template>\r\n  \r\n    <!-- Body -->\r\n<ng-template pTemplate=\"body\" let-rowData>\r\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\r\n    <!-- one TD per column -->\r\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\r\n        (click)=\"handleRowClick(rowData)\"\r\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\r\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\r\n        [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n      \r\n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n          <!-- your existing inner column wrapper -->\r\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\r\n                <!-- task items - check this first -->\r\n                <ng-container *ngSwitchCase=\"'taskItems'\">\r\n                  <div class=\"col-tasks\">\r\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\r\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : 'task-success'\">\r\n                        <span>{{ taskItem.type }}</span>\r\n                        <span class=\"task-badge\">{{ taskItem.count }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n              \r\n                <!-- Finance amount with special styling -->\r\n                <ng-container *ngSwitchCase=\"'finance'\">\r\n                  <div class=\"text-black font-semibold\">\r\n                    {{ rowData[col.name].amount }}\r\n                  </div>\r\n                </ng-container>\r\n              \r\n                <!-- App ID with type and risk tags -->\r\n                <ng-container *ngSwitchCase=\"'appId'\">\r\n                  <div class=\"w-full text-left\">\r\n                    <div class=\"font-semibold\">{{ rowData[col.name].appId }}</div>\r\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\r\n                      <!-- Type chip using style config (lending) -->\r\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\r\n                          {{ rowData[col.name].type }}\r\n                        </p>\r\n                      </div>\r\n                      <!-- Risk chip using style config (riskRating) -->\r\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\r\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\r\n                          {{ rowData[col.name].risk }}\r\n                        </p>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                \r\n                <!-- Broker with name and company name -->\r\n                <ng-container *ngSwitchCase=\"'broker'\">\r\n                  <div class=\"w-full text-left\">\r\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\r\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\r\n                      {{ rowData[col.name].brokerCompanyName }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                <!--Render two lines with dynamic classes for any two-line column -->\r\n                <ng-container *ngSwitchCase=\"'twoLine'\">\r\n                  <div class=\"w-full\" [ngClass]=\"[\r\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\r\n                      col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\r\n                    ]\">\r\n                    <div class=\"row-multi-line-wrapper\"\r\n                      [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.addressLine1 }}\r\n                    </div>\r\n                    <div class=\"row-multi-line-wrapper font-bold\"\r\n                      [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.postCode }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                <!-- progress bar -->\r\n                <ng-container *ngSwitchCase=\"'progress'\">\r\n                  <div class=\"progress-wrapper\">\r\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\r\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\r\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\r\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\r\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\r\n                    </round-progress>\r\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\r\n                      {{ rowData[col.name] }}\r\n                    </div>\r\n                  </div>\r\n              \r\n                </ng-container>\r\n                <!-- Default cell rendering for other columns -->\r\n                <ng-container *ngSwitchDefault>\r\n                  <!-- Don't render default content if we have task items -->\r\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\r\n                  <div\r\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\r\n                    [ngClass]=\"[\r\n                      getRowClass(col, rowData),\r\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\r\n                    ]\"\r\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                  >\r\n                    <i\r\n                     *ngIf=\"rowData[col.name]?.icon\"\r\n                       class=\"pi pr-2\"\r\n                       [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n                       ></i>\r\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                    </div>\r\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\r\n                      <div class=\"w-full text-left\">\r\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                      </div>\r\n                    </ng-container>\r\n                    <ng-template #bubbleOrFallback>\r\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\r\n                        <div class=\"flex flex-column gap-1\">\r\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n                            <div\r\n                              *ngIf=\"bubble.isCustomerVulnerable\"\r\n                              class=\"px-2 py-1 border-round-2xl inline-block bg-red-600 text-white\"\r\n                            >\r\n                              {{ bubble.fullName }}\r\n                            </div>\r\n                            <div\r\n                              *ngIf=\"!bubble.isCustomerVulnerable\"\r\n                              class=\"text-gray-700\"\r\n                            >\r\n                              {{ bubble.fullName }}\r\n                            </div>\r\n                          </ng-container>\r\n                        </div>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\r\n                          {{ rowData[col.name] }}\r\n                        </p>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                    <div\r\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n                      class=\"text-black-500 text-sm mt-1\"\r\n                      style=\"font-weight: 600;\"\r\n                    >\r\n                      {{ rowData[table.descriptionColumnName] }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n              </ng-container>\r\n            </div>\r\n        </div>\r\n        </div>\r\n    </td>\r\n    <!-- Checkbox column -->\r\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\r\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\r\n       [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n      </div>\r\n    </td>\r\n\r\n    <!-- Actions column -->\r\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n        <p-button\r\n          icon=\"pi pi-trash\"\r\n          (click)=\"deleteRow($event, rowData)\"\r\n          class=\"delete-icon-wrapper mr-3\"\r\n          [disabled]=\"!enableSelection\"\r\n        ></p-button>\r\n      </div>\r\n    </td>\r\n  </tr>\r\n</ng-template>\r\n  \r\n    <!-- Empty Message -->\r\n    <ng-template pTemplate=\"emptymessage\">\r\n      <tr>\r\n        <td\r\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n          class=\"text-center text-color font-semibold p-4\"\r\n        >\r\n           {{ noRecordsMessage }}\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n  <div class=\"pagination-text text-color\">\r\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n  </div>\r\n\r\n  <p-paginator\r\n    #paginator\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    (onPageChange)=\"handleLoadRecords($event)\"\r\n  ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper,.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;box-sizing:border-box}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:first-child .border-row-wrapper{border-width:3px 0 3px 3px}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-width:3px 0}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:last-child .border-row-wrapper{border-width:3px 3px 3px 0}::ng-deep .table-row-wrapper:hover .table-select-row-wrapper .border-row-wrapper{border-width:3px 3px 3px 0}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: SkeletonComponent, selector: "lib-skeleton", inputs: ["count", "columns", "width", "height", "isAllowCard"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i9.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i9.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i9.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i9.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToggleButtonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i12.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RoundProgressModule }, { kind: "component", type: i14.RoundProgressComponent, selector: "round-progress", inputs: ["current", "max", "radius", "animation", "animationDelay", "duration", "stroke", "color", "background", "responsive", "clockwise", "semicircle", "rounded"], outputs: ["onRender"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i3$2.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "label", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "styleClass", "labelStyleClass", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TableSecondaryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, SkeletonComponent, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule, RoundProgressModule, CheckboxModule], template: "  <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\n  <p-table\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\n    #dt2\n    [lazy]=\"true\"\n    (onSort)=\"onSort($event)\"\n    [paginator]=\"false\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [columns]=\"table.headers\"\n    class=\"table-secondary-container\"\n    [value]=\"table.records\"\n    [sortField]=\"sortField\"\n    [sortOrder]=\"sortOrder\"\n    [dataKey]=\"table.dataKey\"\n    [selectionMode]=\"selectionMode\"\n    [(selection)]=\"selection\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\n  >\n    <!-- Header -->\n    <ng-template pTemplate=\"header\" let-columns>\n      <tr *ngIf=\"table.headers.length > 0\">\n        <th\n          *ngFor=\"let col of table.headers; let i = index\"\n          class=\"table-header-wrapper bg-white\"\n          [pSortableColumn]=\"col.name\"\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\n          style=\"min-width: 100px\"\n        >      \n          <h4\n          [ngClass]=\"[\n            col.class || '', \n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\n          ]\"\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\n            {{ col.displayName || col.name }}\n            @if(table.isSortingAllow && col.isShowSortIcon){\n              <p-sortIcon [field]=\"col.name\" />\n            }\n          </h4>\n        </th>\n  \n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\n          <span *ngIf=\"selection?.length && !isSelectAll\">\n            ({{ selection.length }})\n          </span>\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isAllCurrentPageSelected\"\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\n        </h4>\n        </th>\n  \n        <th\n          *ngIf=\"showActions\"\n          class=\"table-action-title table-header-wrapper\"\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\n        >\n        </th>\n  \n      </tr>\n    </ng-template>\n  \n    <!-- Body -->\n<ng-template pTemplate=\"body\" let-rowData>\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\n    <!-- one TD per column -->\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\n        (click)=\"handleRowClick(rowData)\"\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\n        [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n      \n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\n          <!-- your existing inner column wrapper -->\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\n                <!-- task items - check this first -->\n                <ng-container *ngSwitchCase=\"'taskItems'\">\n                  <div class=\"col-tasks\">\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : 'task-success'\">\n                        <span>{{ taskItem.type }}</span>\n                        <span class=\"task-badge\">{{ taskItem.count }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n                </ng-container>\n              \n                <!-- Finance amount with special styling -->\n                <ng-container *ngSwitchCase=\"'finance'\">\n                  <div class=\"text-black font-semibold\">\n                    {{ rowData[col.name].amount }}\n                  </div>\n                </ng-container>\n              \n                <!-- App ID with type and risk tags -->\n                <ng-container *ngSwitchCase=\"'appId'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-semibold\">{{ rowData[col.name].appId }}</div>\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\n                      <!-- Type chip using style config (lending) -->\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\n                        <p class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\n                          {{ rowData[col.name].type }}\n                        </p>\n                      </div>\n                      <!-- Risk chip using style config (riskRating) -->\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\n                        <p class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\n                          {{ rowData[col.name].risk }}\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n                \n                <!-- Broker with name and company name -->\n                <ng-container *ngSwitchCase=\"'broker'\">\n                  <div class=\"w-full text-left\">\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\n                      {{ rowData[col.name].brokerCompanyName }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!--Render two lines with dynamic classes for any two-line column -->\n                <ng-container *ngSwitchCase=\"'twoLine'\">\n                  <div class=\"w-full\" [ngClass]=\"[\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\n                      col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\n                    ]\">\n                    <div class=\"row-multi-line-wrapper\"\n                      [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\n                      {{ rowData[col.name]?.addressLine1 }}\n                    </div>\n                    <div class=\"row-multi-line-wrapper font-bold\"\n                      [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\n                      {{ rowData[col.name]?.postCode }}\n                    </div>\n                  </div>\n                </ng-container>\n                <!-- progress bar -->\n                <ng-container *ngSwitchCase=\"'progress'\">\n                  <div class=\"progress-wrapper\">\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\n                    </round-progress>\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\n                      {{ rowData[col.name] }}\n                    </div>\n                  </div>\n              \n                </ng-container>\n                <!-- Default cell rendering for other columns -->\n                <ng-container *ngSwitchDefault>\n                  <!-- Don't render default content if we have task items -->\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\n                  <div\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\n                    [ngClass]=\"[\n                      getRowClass(col, rowData),\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\n                    ]\"\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\n                  >\n                    <i\n                     *ngIf=\"rowData[col.name]?.icon\"\n                       class=\"pi pr-2\"\n                       [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\n                       ></i>\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                    </div>\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\n                      <div class=\"w-full text-left\">\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\n                      </div>\n                    </ng-container>\n                    <ng-template #bubbleOrFallback>\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\n                        <div class=\"flex flex-column gap-1\">\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\n                            <div\n                              *ngIf=\"bubble.isCustomerVulnerable\"\n                              class=\"px-2 py-1 border-round-2xl inline-block bg-red-600 text-white\"\n                            >\n                              {{ bubble.fullName }}\n                            </div>\n                            <div\n                              *ngIf=\"!bubble.isCustomerVulnerable\"\n                              class=\"text-gray-700\"\n                            >\n                              {{ bubble.fullName }}\n                            </div>\n                          </ng-container>\n                        </div>\n                      </ng-container>\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\n                        <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\n                          {{ rowData[col.name] }}\n                        </p>\n                      </ng-container>\n                    </ng-template>\n                    <div\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\n                      class=\"text-black-500 text-sm mt-1\"\n                      style=\"font-weight: 600;\"\n                    >\n                      {{ rowData[table.descriptionColumnName] }}\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n              </ng-container>\n            </div>\n        </div>\n        </div>\n    </td>\n    <!-- Checkbox column -->\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\n       [ngClass]=\"[\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\n          isRowSelected(rowData) ? 'row-selected' : '',\n          selection?.includes(rowData) ? 'green-highlight' : ''\n        ]\">\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\n      </div>\n    </td>\n\n    <!-- Actions column -->\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\n        <p-button\n          icon=\"pi pi-trash\"\n          (click)=\"deleteRow($event, rowData)\"\n          class=\"delete-icon-wrapper mr-3\"\n          [disabled]=\"!enableSelection\"\n        ></p-button>\n      </div>\n    </td>\n  </tr>\n</ng-template>\n  \n    <!-- Empty Message -->\n    <ng-template pTemplate=\"emptymessage\">\n      <tr>\n        <td\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\n          class=\"text-center text-color font-semibold p-4\"\n        >\n           {{ noRecordsMessage }}\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n\n<!-- Paginator -->\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\n  <div class=\"pagination-text text-color\">\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\n  </div>\n\n  <p-paginator\n    #paginator\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\n    (onPageChange)=\"handleLoadRecords($event)\"\n  ></p-paginator>\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper,.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;box-sizing:border-box}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:first-child .border-row-wrapper{border-width:3px 0 3px 3px}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-width:3px 0}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:last-child .border-row-wrapper{border-width:3px 3px 3px 0}::ng-deep .table-row-wrapper:hover .table-select-row-wrapper .border-row-wrapper{border-width:3px 3px 3px 0}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"] }]
+            args: [{ selector: 'lib-table-secondary', standalone: true, imports: [CommonModule, SkeletonComponent, TableModule, ButtonModule, ToggleButtonModule, FormsModule, InputSwitchModule, InputTextModule, TooltipModule, PaginatorModule, RoundProgressModule, CheckboxModule], template: "  <lib-skeleton *ngIf=\"isShowSkeleton\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\r\n  <p-table\r\n  *ngIf=\"table && table.headers && !isShowSkeleton\"\r\n    #dt2\r\n    [lazy]=\"true\"\r\n    (onSort)=\"onSort($event)\"\r\n    [paginator]=\"false\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [columns]=\"table.headers\"\r\n    class=\"table-secondary-container\"\r\n    [value]=\"table.records\"\r\n    [sortField]=\"sortField\"\r\n    [sortOrder]=\"sortOrder\"\r\n    [dataKey]=\"table.dataKey\"\r\n    [selectionMode]=\"selectionMode\"\r\n    [(selection)]=\"selection\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    [ngClass]=\"tableNgClassExpression ? evaluateNgClass(tableNgClassExpression, {}) : ''\"\r\n  >\r\n    <!-- Header -->\r\n    <ng-template pTemplate=\"header\" let-columns>\r\n      <tr *ngIf=\"table.headers.length > 0\">\r\n        <th\r\n          *ngFor=\"let col of table.headers; let i = index\"\r\n          class=\"table-header-wrapper bg-white\"\r\n          [pSortableColumn]=\"col.name\"\r\n          [pSortableColumnDisabled]=\"!(table.isSortingAllow && col.isShowSortIcon)\"\r\n          [ngClass]=\"[col.width ? col.width : 'w-full', (!showActions && selectionMode !== 'multiple' && (i === table.headers.length - 1)) ? 'table-action-title' : '']\"\r\n          style=\"min-width: 100px\"\r\n        >      \r\n          <h4\r\n          [ngClass]=\"[\r\n            col.class || '', \r\n            getColumnAlignment(col.name) === 'justify-content-start' ? 'justify-content-start text-left' : 'justify-content-center text-center'\r\n          ]\"\r\n           class=\"flex align-items-center table-header-title font-semibold m-0\">\r\n            {{ col.displayName || col.name }}\r\n            @if(table.isSortingAllow && col.isShowSortIcon){\r\n              <p-sortIcon [field]=\"col.name\" />\r\n            }\r\n          </h4>\r\n        </th>\r\n  \r\n      <th *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" \r\n      class=\"table-header-wrapper text-right table-action-title\" style=\"width: 6rem;\">\r\n        <h4 class=\"flex align-items-center justify-content-end gap-2 table-header-title capitalize font-semibold m-0\">\r\n          <span *ngIf=\"selection?.length && !isSelectAll\">\r\n            ({{ selection.length }})\r\n          </span>\r\n          <p-checkbox\r\n            [binary]=\"true\"\r\n            [ngModel]=\"isAllCurrentPageSelected\"\r\n            (ngModelChange)=\"handleSelectAllRowData($event)\"></p-checkbox>\r\n        </h4>\r\n        </th>\r\n  \r\n        <th\r\n          *ngIf=\"showActions\"\r\n          class=\"table-action-title table-header-wrapper\"\r\n          [ngClass]=\"table.headers[0]?.width ? 'w-2' : 'w-2'\"\r\n        >\r\n        </th>\r\n  \r\n      </tr>\r\n    </ng-template>\r\n  \r\n    <!-- Body -->\r\n<ng-template pTemplate=\"body\" let-rowData>\r\n  <tr *ngIf=\"table.headers.length > 0\" class=\"table-row-wrapper relative table-group-wrapper\">\r\n    <!-- one TD per column -->\r\n    <td *ngFor=\"let col of table.headers; let j = index\" class=\"p-0 border-none bg-none table-body-row-wrapper\"\r\n        (click)=\"handleRowClick(rowData)\"\r\n        [ngClass]=\"[rowData._columnWidths ? rowData._columnWidths?.[col.name] : col.width]\">\r\n        <div class=\"table-body-wrapper table-row-card-wrapper\"\r\n        [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n      \r\n        <div class=\"flex align-items-center h-full\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n          <!-- your existing inner column wrapper -->\r\n            <div class=\"row-wrapprt flex align-items-center\" [ngClass]=\"getColumnAlignment(col.name)\">\r\n              <ng-container [ngSwitch]=\"getSwitchCase(rowData, col)\">\r\n                <!-- task items - check this first -->\r\n                <ng-container *ngSwitchCase=\"'taskItems'\">\r\n                  <div class=\"col-tasks\">\r\n                    <ng-container *ngFor=\"let taskItem of rowData[col.name]\">\r\n                      <div class=\"task-item\" [ngClass]=\"taskItem.status === 'warning' ? 'task-warning' : 'task-success'\">\r\n                        <span>{{ taskItem.type }}</span>\r\n                        <span class=\"task-badge\">{{ taskItem.count }}</span>\r\n                      </div>\r\n                    </ng-container>\r\n                  </div>\r\n                </ng-container>\r\n              \r\n                <!-- Finance amount with special styling -->\r\n                <ng-container *ngSwitchCase=\"'finance'\">\r\n                  <div class=\"text-black font-semibold\">\r\n                    {{ rowData[col.name].amount }}\r\n                  </div>\r\n                </ng-container>\r\n              \r\n                <!-- App ID with type and risk tags -->\r\n                <ng-container *ngSwitchCase=\"'appId'\">\r\n                  <div class=\"w-full text-left\">\r\n                    <div class=\"font-semibold\">{{ rowData[col.name].appId }}</div>\r\n                    <div class=\"flex gap-2 justify-content-start app-id-tags\">\r\n                      <!-- Type chip using style config (lending) -->\r\n                      <div *ngIf=\"rowData[col.name].type\" [ngClass]=\"getTypeContainerClass(rowData[col.name].type)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"getTypeTextClass(rowData[col.name].type)\">\r\n                          {{ rowData[col.name].type }}\r\n                        </p>\r\n                      </div>\r\n                      <!-- Risk chip using style config (riskRating) -->\r\n                      <div *ngIf=\"rowData[col.name].risk && rowData[col.name].risk.toLowerCase() !== 'unknown'\"\r\n                        [ngClass]=\"getRiskContainerClass(rowData[col.name].risk)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"getRiskTextClass(rowData[col.name].risk)\">\r\n                          {{ rowData[col.name].risk }}\r\n                        </p>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                \r\n                <!-- Broker with name and company name -->\r\n                <ng-container *ngSwitchCase=\"'broker'\">\r\n                  <div class=\"w-full text-left\">\r\n                    <div class=\"font-medium\">{{ rowData[col.name].brokerName }}</div>\r\n                    <div *ngIf=\"rowData[col.name].brokerCompanyName\" class=\"text-gray-700\">\r\n                      {{ rowData[col.name].brokerCompanyName }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                <!--Render two lines with dynamic classes for any two-line column -->\r\n                <ng-container *ngSwitchCase=\"'twoLine'\">\r\n                  <div class=\"w-full\" [ngClass]=\"[\r\n                      getColumnAlignment(col.name) === 'justify-content-start' ? 'text-left' : 'text-center',\r\n                      col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\r\n                    ]\">\r\n                    <div class=\"row-multi-line-wrapper\"\r\n                      [ngClass]=\"col.line1NgClassExpression ? evaluateNgClass(col.line1NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.addressLine1 }}\r\n                    </div>\r\n                    <div class=\"row-multi-line-wrapper font-bold\"\r\n                      [ngClass]=\"col.line2NgClassExpression ? evaluateNgClass(col.line2NgClassExpression, rowData) : ''\">\r\n                      {{ rowData[col.name]?.postCode }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n                <!-- progress bar -->\r\n                <ng-container *ngSwitchCase=\"'progress'\">\r\n                  <div class=\"progress-wrapper\">\r\n                    <round-progress [current]=\"rowData['taskCompletionPercent']\" [max]=\"100\"\r\n                      [color]=\"getProgressColor(rowData['taskCompletionPercent'])\"\r\n                      [background]=\"getProgressBackground(rowData['taskCompletionPercent'])\" [radius]=\"125\" [stroke]=\"20\"\r\n                      [semicircle]=\"false\" [rounded]=\"true\" [clockwise]=\"true\" [responsive]=\"false\" [duration]=\"800\"\r\n                      [animation]=\"'easeInOutQuart'\" [animationDelay]=\"0\">\r\n                    </round-progress>\r\n                    <div class=\"progress-title\" [ngStyle]=\"{color: getProgressColor(rowData['taskCompletionPercent'])}\">\r\n                      {{ rowData[col.name] }}\r\n                    </div>\r\n                  </div>\r\n              \r\n                </ng-container>\r\n                <!-- Default cell rendering for other columns -->\r\n                <ng-container *ngSwitchDefault>\r\n                  <!-- Don't render default content if we have task items -->\r\n                  <ng-container *ngIf=\"!isTaskItemsArray(rowData[col.name])\">\r\n                  <div\r\n                    class=\"table-text-wrapper text-center p-0 flex align-items-center\"\r\n                    [ngClass]=\"[\r\n                      getRowClass(col, rowData),\r\n                      j === 0 ? 'justify-content-start' : 'justify-content-center'\r\n                    ]\"\r\n                    [ngStyle]=\"{ 'font-weight': col.name === table.showDecriptionFor ? 'bold' : 'normal' }\"\r\n                  >\r\n                    <i\r\n                     *ngIf=\"rowData[col.name]?.icon\"\r\n                       class=\"pi pr-2\"\r\n                       [ngClass]=\"[rowData[col.name].icon, rowData[col.name].iconClass]\"\r\n                       ></i>\r\n                    <div *ngIf=\"!col.skipParentNgClass\" [ngClass]=\"col.containerNgClassExpression ? evaluateNgClass(col.containerNgClassExpression, rowData) : ''\">\r\n                      <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                    </div>\r\n                    <ng-container *ngIf=\"col.skipParentNgClass\">\r\n                      <div class=\"w-full text-left\">\r\n                        <ng-container *ngTemplateOutlet=\"bubbleOrFallback\"></ng-container>\r\n                      </div>\r\n                    </ng-container>\r\n                    <ng-template #bubbleOrFallback>\r\n                      <ng-container *ngIf=\"isArray(rowData[col.name]) && rowData[col.name].length && rowData[col.name][0]?.fullName\">\r\n                        <div class=\"flex flex-column gap-1\">\r\n                          <ng-container *ngFor=\"let bubble of rowData[col.name]; let i = index\">\r\n                            <div\r\n                              *ngIf=\"bubble.isCustomerVulnerable\"\r\n                              class=\"px-2 py-1 border-round-2xl inline-block bg-red-600 text-white\"\r\n                            >\r\n                              {{ bubble.fullName }}\r\n                            </div>\r\n                            <div\r\n                              *ngIf=\"!bubble.isCustomerVulnerable\"\r\n                              class=\"text-gray-700\"\r\n                            >\r\n                              {{ bubble.fullName }}\r\n                            </div>\r\n                          </ng-container>\r\n                        </div>\r\n                      </ng-container>\r\n                      <ng-container *ngIf=\"shouldShowValue(col, rowData)\">\r\n                        <p class=\"mb-0\" [ngClass]=\"col.textNgClassExpression ? evaluateNgClass(col.textNgClassExpression, rowData) : ''\">\r\n                          {{ rowData[col.name] }}\r\n                        </p>\r\n                      </ng-container>\r\n                    </ng-template>\r\n                    <div\r\n                      *ngIf=\"col.name === table.showDecriptionFor && rowData[table.descriptionColumnName]\"\r\n                      class=\"text-black-500 text-sm mt-1\"\r\n                      style=\"font-weight: 600;\"\r\n                    >\r\n                      {{ rowData[table.descriptionColumnName] }}\r\n                    </div>\r\n                  </div>\r\n                </ng-container>\r\n              </ng-container>\r\n              </ng-container>\r\n            </div>\r\n        </div>\r\n        </div>\r\n    </td>\r\n    <!-- Checkbox column -->\r\n    <td *ngIf=\"selectionMode === 'multiple' && (!isUwLogin || (isUwLogin && (selectedQueueName === 'Unassigned')))\" class=\"text-right p-0 border-none bg-none table-body-row-wrapper\"\r\n    style=\"width: 4rem\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"table-body-wrapper table-select-row-wrapper flex align-items-center justify-content-end\"\r\n       [ngClass]=\"[\r\n          rowData.rowNgClassExpression ? evaluateNgClass(rowData.rowNgClassExpression, rowData) : '',\r\n          isRowSelected(rowData) ? 'row-selected' : '',\r\n          selection?.includes(rowData) ? 'green-highlight' : ''\r\n        ]\">\r\n        <p-tableCheckbox [value]=\"rowData\" [disabled]=\"!enableSelection\"></p-tableCheckbox>\r\n      </div>\r\n    </td>\r\n\r\n    <!-- Actions column -->\r\n    <td *ngIf=\"showActions\" class=\"action-data-wrapper text-left table-body-wrapper\">\r\n      <div *ngIf=\"(rowData.isRowDelete !== null || rowData.canDelete !== undefined) ? (showActions && rowData.isRowDelete) : showActions\" class=\"flex align-items-center justify-content-center\">\r\n        <p-button\r\n          icon=\"pi pi-trash\"\r\n          (click)=\"deleteRow($event, rowData)\"\r\n          class=\"delete-icon-wrapper mr-3\"\r\n          [disabled]=\"!enableSelection\"\r\n        ></p-button>\r\n      </div>\r\n    </td>\r\n  </tr>\r\n</ng-template>\r\n  \r\n    <!-- Empty Message -->\r\n    <ng-template pTemplate=\"emptymessage\">\r\n      <tr>\r\n        <td\r\n          [attr.colspan]=\"table.headers.length + (showActions ? 1 : 0) + (selectionMode === 'multiple' ? 1 : 0)\"\r\n          class=\"text-center text-color font-semibold p-4\"\r\n        >\r\n           {{ noRecordsMessage }}\r\n        </td>\r\n      </tr>\r\n    </ng-template>\r\n  </p-table>\r\n\r\n<!-- Paginator -->\r\n<div class=\"paginator-container flex align-items-center justify-content-center table-pagination-wrapper\" *ngIf=\"usePagination\">\r\n  <div class=\"pagination-text text-color\">\r\n    Showing {{ metaData.totalItems > 0 ? ((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10) + 1 : 0 }} to {{ recordNumber }} of {{ metaData?.totalItems ?? 0 }} entries\r\n  </div>\r\n\r\n  <p-paginator\r\n    #paginator\r\n    [first]=\"((metaData?.currentPage ?? 1) - 1) * (metaData?.itemsPerPage ?? 10)\"\r\n    [rows]=\"metaData?.itemsPerPage ?? 10\"\r\n    [totalRecords]=\"metaData?.totalItems ?? 0\"\r\n    [rowsPerPageOptions]=\"[10, 20, 30, 40, 50]\"\r\n    (onPageChange)=\"handleLoadRecords($event)\"\r\n  ></p-paginator>\r\n</div> ", styles: [".table-header-container{padding:20px 20px 20px 8px}.table-header-title{font-size:12px;font-weight:600;color:var(--text-color-tertiary)!important}.table-header-wrapper,.table-body-wrapper{padding:12px 14px}.column-style-wrapper{height:80px;margin-bottom:16px}.column-style-wrapper-tall{height:110px}.table-text-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;box-sizing:border-box}.bubble-seperator-wrapper{margin-left:-12px}.applicant-vulnerable-customer-wrapper{background-color:var(--color-red-600)}.applicant-red-badge-wrapper{background-color:var(--color-red-400)}.applicant-amber-badge-wrapper{background-color:var(--color-amber-500)}.applicant-success-badge-wrapper{background-color:var(--color-green-500)}.red-text-wrapper{color:var(--color-red-500)}.amber-text-wrapper{color:var(--color-amber-500)}.success-text-wrapper{color:var(--color-green-500)}.security-text-wrapper{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all}.record_username{color:#0f8bfd}.table-title-wrapper{font-size:20px;font-weight:700}.table-action-title,.header-text-wrapper,.action-data-wrapper{border-right:1px solid rgba(68,72,109,.1)!important}.enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}.verified-status{background-color:var(--green-500)}.disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}.search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}.DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}.Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}.Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Applicant,.ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}.OnBoarding,.PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}.Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}.Pending{background-color:var(--orange-300);padding:.3rem!important;border-radius:5px;color:#fff}.table-row-wrapper{position:relative;transition:all .3s ease-in-out}.icon-position-wrapper{position:absolute;top:50%;left:16%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;transition:opacity .3s ease-in-out,visibility .3s ease-in-out}.table-row-wrapper:hover .icon-position-wrapper{opacity:1;visibility:visible}.table-group-wrapper:hover .icon-position-wrapper{visibility:visible;opacity:1}.table-pagination-wrapper{border-radius:0 0 10px 10px}::ng-deep .edit-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .edit-icon-wrapper .p-button .pi-pencil{color:var(--primary-color)}::ng-deep .delete-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:12px 20px}::ng-deep .delete-icon-wrapper .p-button .pi-trash{color:var(--red-500)}::ng-deep .record_username{color:var(--primary-color)}::ng-deep .table-title-wrapper{font-size:20px;font-weight:700}::ng-deep .table-action-title,::ng-deep .header-text-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .table-action-title{border-radius:0 10px 0 0}::ng-deep .action-data-wrapper{border-right:1px solid var(--primary-border-color)!important}::ng-deep .enable-badge-wrapper{border-radius:4px;background:var(--green-500);color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .verified-status{background-color:var(--green-500)}::ng-deep .disable-badge-wrapper{border-radius:4px;background:#44486d;color:var(--surface-0);text-align:center;padding:5px!important}::ng-deep .search-input-wrapper{height:50px;border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}::ng-deep .Verified{background-color:var(--green-400);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .DirectDebitDetails{background-color:#b2eaf2;padding:.3rem!important;border-radius:5px;color:#00bcd4}::ng-deep .Application{background-color:#4caf501a;padding:.3rem!important;border-radius:5px;color:#4caf50}::ng-deep .Property{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Applicant{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .ApplicationNote{background-color:#f6a5c0;padding:.3rem!important;border-radius:5px;color:#e91e63}::ng-deep .OnBoarding{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .PropertyDetails{background-color:#d8dcf0;padding:.3rem!important;border-radius:5px;color:#3f51b5}::ng-deep .Alert{background-color:var(--red-500);padding:.3rem!important;border-radius:5px;color:#fff}::ng-deep .setting-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.1);background:#eef0f5;padding:24px;height:50px}::ng-deep .setting-icon-wrapper .p-button .pi-cog{color:var(--primary-color)}::ng-deep .view-icon-wrapper .p-button{border-radius:10px;border:1px solid rgba(76,98,146,.3);background:var(--surface-0);padding:20px;height:40px;box-shadow:none}::ng-deep .view-icon-wrapper .p-button .pi-eye{color:#44486d}::ng-deep .table-secondary-container .p-datatable-table{background-color:#fff;table-layout:fixed}::ng-deep .table-secondary-container .p-datatable-table .p-datatable-thead{background-color:var(--color-surface)}::ng-deep .table-secondary-container .p-datatable-header{padding:20px 20px 0;border-radius:10px 10px 0 0!important;border:none!important}::ng-deep .table-secondary-container .p-datatable-thead th{border:1px solid rgba(68,72,109,.1);border-left:none;border-right:none}::ng-deep .table-secondary-container .p-datatable-thead th:first-child{border-radius:10px 0 0;border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td{border-bottom:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr td:first-child{border-left:1px solid rgba(68,72,109,.1)}::ng-deep .table-secondary-container tr:last-child td:first-child{border-radius:0 0 0 10px}::ng-deep .table-secondary-container tr:last-child td:last-child{border-radius:0 0 10px}::ng-deep .table-body-row-wrapper:first-child .border-row-wrapper{border-style:solid;border-width:1px 0 1px 1px;border-radius:.75rem 0 0 .75rem!important}::ng-deep .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-style:solid;border-width:1px 0;border-radius:0!important}::ng-deep .table-body-row-wrapper:last-child .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-select-row-wrapper .border-row-wrapper{border-style:solid;border-width:1px 1px 1px 0;border-radius:0 .75rem .75rem 0!important}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:first-child .border-row-wrapper{border-width:3px 0 3px 3px}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:not(:first-child):not(:last-child) .border-row-wrapper{border-width:3px 0}::ng-deep .table-row-wrapper:hover .table-body-row-wrapper:last-child .border-row-wrapper{border-width:3px 3px 3px 0}::ng-deep .table-row-wrapper:hover .table-select-row-wrapper .border-row-wrapper{border-width:3px 3px 3px 0}.pending-badge-wrapper{background-color:#e5e7eb}:host ::ng-deep .p-checkbox-box.p-highlight{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}.green-highlight{background-color:var(--color-green-10)!important}:host ::ng-deep .p-checkbox-box.p-highlight .p-checkbox-icon{color:var(--color-surface-light)}:host ::ng-deep .p-checkbox-box:hover{border:1px solid #8a8ea6}:host ::ng-deep .p-checkbox-box.p-highlight:hover{background-color:var(--color-green-500)!important;border-color:var(--color-green-500)!important}@media screen and (min-width: 1200px) and (max-width: 1500px){.table-header-wrapper{padding:12px 8px;background-color:#fff}.table-body-wrapper{padding:8px}}.table-secondary-container .p-datatable-table{border-collapse:separate!important;border-spacing:50px!important;border-radius:10px}.table-secondary-container tr th{border:none!important}.border-round-full{border-radius:50%!important}.col-tasks{display:flex;width:75px;padding-left:10px;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px}.task-item{display:flex;align-items:center;justify-content:space-between;border-radius:9999px;padding:0 3px 0 12px;font-size:12px;font-weight:600;width:100%;max-width:60px}.task-warning{background-color:#fdecce;color:#f59e0b}.task-success{background-color:#c5f7d7;color:#16a34a}.task-badge{background-color:#fff;border-radius:9999px;padding:3px 8px;color:#1f2937}.task-warning .task-badge{border:1px solid #f59e0b}.task-success .task-badge{border:1px solid #16a34a}.app-id-tags{margin-top:7px}\n"] }]
         }], ctorParameters: () => [{ type: i3$4.Router }, { type: BaseService }, { type: SessionService }, { type: BaseQuery }, { type: BaseStore }, { type: QueueBusinessService }, { type: QueueQuery$1 }], propDecorators: { table: [{
                 type: Input
             }], metaData: [{
@@ -5466,6 +5466,23 @@ class WidgetItemComponent {
         const textContent = tempDiv.textContent || tempDiv.innerText || '';
         return textContent.replace(/[,.]/g, '').trim().length > 0;
     }
+    /**
+     * Checks if the value has meaningful content (for both HTML and non-HTML values)
+     * @param value - The value to check
+     * @param isHtml - Whether the value is HTML content
+     * @returns true if there's meaningful content, false otherwise
+     */
+    hasValueContent(value, isHtml) {
+        if (!value || value === 'null' || value === 'undefined') {
+            return false;
+        }
+        if (isHtml) {
+            return this.hasHtmlContent(value);
+        }
+        else {
+            return value.trim().length > 0;
+        }
+    }
     formatDate(value) {
         if (this.isDate(value)) {
             return moment(value, ["DD/MM/YYYY", "YYYY/MM/DD", moment.ISO_8601]).format("DD/MM/YYYY");
@@ -5473,11 +5490,11 @@ class WidgetItemComponent {
         return value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetItemComponent, deps: [{ token: StyleBuilderService }, { token: WidgetStore }, { token: WidgetQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetItemComponent, isStandalone: false, selector: "lib-widget-item", inputs: { widgetItem: "widgetItem", widget: "widget", application: "application" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container px-3 overflow-hidden\">\r\n  <div class=\"widget-content widget-wrapper\" [class.border-top]=\"hasSeparator\" [ngClass]=\"{\r\n      'layout-row': widget.layoutType === 'row',\r\n      'layout-tile m-0': widget.layoutType === 'tile'\r\n    }\">\r\n    <div class=\"flex align-items-center justify-content-between\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'w-7' : 'w-full'\">\r\n      <div class=\"flex align-items-center\">\r\n        <i *ngIf=\"keyIconClass\" class=\"mr-2\" [ngClass]=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n        <p *ngIf=\"!isMenu\" [ngClass]=\"keyClass\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n        <p *ngIf=\"isMenu\" [ngClass]=\"keyClass\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n          class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n      </div>\r\n      <div class=\"flex justify-content-end\" *ngIf=\"isConfirmed\">\r\n        <img src=\"assets/icons/confirm-icon.svg\" alt=\"confirm icon\" width=\"18\" height=\"18\" />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-full\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'flex align-items-center justify-content-end w-5': 'w-full'\">\r\n      <i *ngIf=\"valueIconClass\" [ngClass]=\"valueIconClass\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <i *ngIf=\"valueIconClassExpression\" [ngClass]=\"valueIconClassExpression\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n        <a class=\"cursor-pointer key-field-wrapper\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"\r\n          (click)=\"handleDynamicEvent(widget.recordId)\">\r\n          {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n        </a>\r\n      </ng-container>\r\n\r\n      <ng-template #notEvent>\r\n        <ng-container *ngIf=\"widgetItem.isLink; else plainText\">\r\n          <a class=\"cursor-pointer key-field-wrapper\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"\r\n            (click)=\"handleWidgetItemClick(widgetItem)\">\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </a>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #plainText>\r\n        @if(widgetItem.isHtml && hasHtmlContent(widgetItem.value)) {\r\n        <div class=\"key-field-wrapper\" [innerHTML]=\"widgetItem.value !== 'null' ? widgetItem.value : ''\"\r\n        [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"></div>\r\n        }\r\n        @else if(!widgetItem.isHtml) {\r\n        <p class=\"mb-0\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\">\r\n\r\n          <ng-container *ngIf=\"isDate(widgetItem.value); else normalText\">\r\n            {{ formatDate(widgetItem.value) }}\r\n          </ng-container>\r\n          <ng-template #normalText>\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </ng-template>\r\n        </p>\r\n        }\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;white-space:normal;box-sizing:border-box;color:#4b5563}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}.border-top{border-top:1px solid rgba(76,98,146,.1)}.key-title-wrapper{width:100%}.widget-wrapper{padding:6px 0}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: WidgetItemComponent, isStandalone: false, selector: "lib-widget-item", inputs: { widgetItem: "widgetItem", widget: "widget", application: "application" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"widget-container px-3 overflow-hidden\">\r\n  <div class=\"widget-content widget-wrapper\" [class.border-top]=\"hasSeparator\" [ngClass]=\"{\r\n      'layout-row': widget.layoutType === 'row',\r\n      'layout-tile m-0': widget.layoutType === 'tile'\r\n    }\">\r\n    <div class=\"flex align-items-center justify-content-between\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'w-7' : 'w-full'\">\r\n      <div class=\"flex align-items-center\" *ngIf=\"hasValueContent(widgetItem.value, widgetItem.isHtml)\">\r\n        <i *ngIf=\"keyIconClass\" class=\"mr-2\" [ngClass]=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n        <p *ngIf=\"!isMenu\" [ngClass]=\"keyClass\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n        <p *ngIf=\"isMenu\" [ngClass]=\"keyClass\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n          class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n      </div>\r\n      <div class=\"flex justify-content-end\" *ngIf=\"isConfirmed\">\r\n        <img src=\"assets/icons/confirm-icon.svg\" alt=\"confirm icon\" width=\"18\" height=\"18\" />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-full\" \r\n      *ngIf=\"hasValueContent(widgetItem.value, widgetItem.isHtml)\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'flex align-items-center justify-content-end w-5': 'w-full'\">\r\n      <i *ngIf=\"valueIconClass\" [ngClass]=\"valueIconClass\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <i *ngIf=\"valueIconClassExpression\" [ngClass]=\"valueIconClassExpression\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n        <a class=\"cursor-pointer key-field-wrapper\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"\r\n          (click)=\"handleDynamicEvent(widget.recordId)\">\r\n          {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n        </a>\r\n      </ng-container>\r\n\r\n      <ng-template #notEvent>\r\n        <ng-container *ngIf=\"widgetItem.isLink; else plainText\">\r\n          <a class=\"cursor-pointer key-field-wrapper\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"\r\n            (click)=\"handleWidgetItemClick(widgetItem)\">\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </a>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #plainText>\r\n        @if(widgetItem.isHtml && hasHtmlContent(widgetItem.value)) {\r\n        <div class=\"key-field-wrapper\" [innerHTML]=\"widgetItem.value !== 'null' ? widgetItem.value : ''\"\r\n        [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"></div>\r\n        }\r\n        @else if(!widgetItem.isHtml) {\r\n        <p class=\"mb-0\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\">\r\n\r\n          <ng-container *ngIf=\"isDate(widgetItem.value); else normalText\">\r\n            {{ formatDate(widgetItem.value) }}\r\n          </ng-container>\r\n          <ng-template #normalText>\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </ng-template>\r\n        </p>\r\n        }\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;white-space:normal;box-sizing:border-box;color:#4b5563}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}.border-top{border-top:1px solid rgba(76,98,146,.1)}.key-title-wrapper{width:100%}.widget-wrapper{padding:6px 0}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: WidgetItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-widget-item', standalone: false, template: "<div class=\"widget-container px-3 overflow-hidden\">\r\n  <div class=\"widget-content widget-wrapper\" [class.border-top]=\"hasSeparator\" [ngClass]=\"{\r\n      'layout-row': widget.layoutType === 'row',\r\n      'layout-tile m-0': widget.layoutType === 'tile'\r\n    }\">\r\n    <div class=\"flex align-items-center justify-content-between\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'w-7' : 'w-full'\">\r\n      <div class=\"flex align-items-center\">\r\n        <i *ngIf=\"keyIconClass\" class=\"mr-2\" [ngClass]=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n        <p *ngIf=\"!isMenu\" [ngClass]=\"keyClass\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n        <p *ngIf=\"isMenu\" [ngClass]=\"keyClass\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n          class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n      </div>\r\n      <div class=\"flex justify-content-end\" *ngIf=\"isConfirmed\">\r\n        <img src=\"assets/icons/confirm-icon.svg\" alt=\"confirm icon\" width=\"18\" height=\"18\" />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-full\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'flex align-items-center justify-content-end w-5': 'w-full'\">\r\n      <i *ngIf=\"valueIconClass\" [ngClass]=\"valueIconClass\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <i *ngIf=\"valueIconClassExpression\" [ngClass]=\"valueIconClassExpression\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n        <a class=\"cursor-pointer key-field-wrapper\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"\r\n          (click)=\"handleDynamicEvent(widget.recordId)\">\r\n          {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n        </a>\r\n      </ng-container>\r\n\r\n      <ng-template #notEvent>\r\n        <ng-container *ngIf=\"widgetItem.isLink; else plainText\">\r\n          <a class=\"cursor-pointer key-field-wrapper\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"\r\n            (click)=\"handleWidgetItemClick(widgetItem)\">\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </a>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #plainText>\r\n        @if(widgetItem.isHtml && hasHtmlContent(widgetItem.value)) {\r\n        <div class=\"key-field-wrapper\" [innerHTML]=\"widgetItem.value !== 'null' ? widgetItem.value : ''\"\r\n        [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"></div>\r\n        }\r\n        @else if(!widgetItem.isHtml) {\r\n        <p class=\"mb-0\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\">\r\n\r\n          <ng-container *ngIf=\"isDate(widgetItem.value); else normalText\">\r\n            {{ formatDate(widgetItem.value) }}\r\n          </ng-container>\r\n          <ng-template #normalText>\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </ng-template>\r\n        </p>\r\n        }\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;white-space:normal;box-sizing:border-box;color:#4b5563}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}.border-top{border-top:1px solid rgba(76,98,146,.1)}.key-title-wrapper{width:100%}.widget-wrapper{padding:6px 0}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}\n"] }]
+            args: [{ selector: 'lib-widget-item', standalone: false, template: "<div class=\"widget-container px-3 overflow-hidden\">\r\n  <div class=\"widget-content widget-wrapper\" [class.border-top]=\"hasSeparator\" [ngClass]=\"{\r\n      'layout-row': widget.layoutType === 'row',\r\n      'layout-tile m-0': widget.layoutType === 'tile'\r\n    }\">\r\n    <div class=\"flex align-items-center justify-content-between\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'w-7' : 'w-full'\">\r\n      <div class=\"flex align-items-center\" *ngIf=\"hasValueContent(widgetItem.value, widgetItem.isHtml)\">\r\n        <i *ngIf=\"keyIconClass\" class=\"mr-2\" [ngClass]=\"keyIconClass\" [ngStyle]=\"keyIconStyle\"></i>\r\n        <p *ngIf=\"!isMenu\" [ngClass]=\"keyClass\" [ngStyle]=\"fieldKeyStyle\" class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n        <p *ngIf=\"isMenu\" [ngClass]=\"keyClass\" [ngStyle]=\"fieldKeyStyle\" (click)=\"handleDynamicEvent(widget.recordId)\"\r\n          class=\"mb-0 mr-3 key-field-wrapper\">{{ widgetKey }}</p>\r\n      </div>\r\n      <div class=\"flex justify-content-end\" *ngIf=\"isConfirmed\">\r\n        <img src=\"assets/icons/confirm-icon.svg\" alt=\"confirm icon\" width=\"18\" height=\"18\" />\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mb-0 text-color font-semibold text-value-wrapper w-full\" \r\n      *ngIf=\"hasValueContent(widgetItem.value, widgetItem.isHtml)\"\r\n      [ngClass]=\"widget.layoutType === 'row' ? 'flex align-items-center justify-content-end w-5': 'w-full'\">\r\n      <i *ngIf=\"valueIconClass\" [ngClass]=\"valueIconClass\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <i *ngIf=\"valueIconClassExpression\" [ngClass]=\"valueIconClassExpression\" [ngStyle]=\"mergedValueIconStyle\"></i>\r\n      <ng-container *ngIf=\"widgetItem.isEvent; else notEvent\">\r\n        <a class=\"cursor-pointer key-field-wrapper\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"\r\n          (click)=\"handleDynamicEvent(widget.recordId)\">\r\n          {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n        </a>\r\n      </ng-container>\r\n\r\n      <ng-template #notEvent>\r\n        <ng-container *ngIf=\"widgetItem.isLink; else plainText\">\r\n          <a class=\"cursor-pointer key-field-wrapper\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"\r\n            (click)=\"handleWidgetItemClick(widgetItem)\">\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </a>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #plainText>\r\n        @if(widgetItem.isHtml && hasHtmlContent(widgetItem.value)) {\r\n        <div class=\"key-field-wrapper\" [innerHTML]=\"widgetItem.value !== 'null' ? widgetItem.value : ''\"\r\n        [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\"></div>\r\n        }\r\n        @else if(!widgetItem.isHtml) {\r\n        <p class=\"mb-0\" [ngClass]=\"valueClass\" [ngStyle]=\"mergedValueStyle\">\r\n\r\n          <ng-container *ngIf=\"isDate(widgetItem.value); else normalText\">\r\n            {{ formatDate(widgetItem.value) }}\r\n          </ng-container>\r\n          <ng-template #normalText>\r\n            {{ widgetItem.value !== 'null' ? widgetItem.value : '' }}\r\n          </ng-template>\r\n        </p>\r\n        }\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".text-value-wrapper{-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;max-width:100%}.key-field-wrapper{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;white-space:normal;box-sizing:border-box;color:#4b5563}.w-50{width:50%!important}.map-icon-wrapper{font-size:16px;padding:13px;border-radius:30px;border:1px solid rgba(76,98,146,.1);background:#4c62920a}.address-title-wrapper{width:80%;word-break:break-word;margin-top:-12px}.border-top{border-top:1px solid rgba(76,98,146,.1)}.key-title-wrapper{width:100%}.widget-wrapper{padding:6px 0}.widget-content.layout-row{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.widget-content.layout-tile{display:grid;grid-template-columns:1fr;grid-auto-rows:auto;row-gap:.5rem;align-items:start;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: StyleBuilderService }, { type: WidgetStore }, { type: WidgetQuery }], propDecorators: { widgetItem: [{
                 type: Input
             }], widget: [{
@@ -7134,7 +7151,6 @@ class QueueContainerComponent extends BaseContainerComponent {
         }
     }
     getQueueRecordsData(page, limit) {
-        this.loading = true;
         this.isShowSkeleton = true;
         if (!this.selectedQueue?.apiConfig) {
             console.log("Queue data or apiConfig not available");
@@ -7160,16 +7176,13 @@ class QueueContainerComponent extends BaseContainerComponent {
                 if (apiData && apiData.length > 0) {
                     this.isShowSkeleton = false;
                     this.table = this.tableBuilder.buildSecondaryTable(apiData);
-                    this.loading = false;
                 }
                 else if (this.table) {
                     this.table = { ...this.table, records: [] };
-                    this.loading = false;
                     this.isShowSkeleton = false;
                 }
                 else {
                     this.table = this.tableBuilder.buildSecondaryTable([]);
-                    this.loading = false;
                     this.isShowSkeleton = false;
                 }
                 this.currentPage = targetPage;
@@ -7243,11 +7256,11 @@ class QueueContainerComponent extends BaseContainerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueContainerComponent, deps: [{ token: QueueStore$1 }, { token: QueueService }, { token: BaseStore }, { token: QueueBusinessService }, { token: QueueRecordTableBuilderService }, { token: QueueFilterDropdownService }, { token: BaseQuery }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: QueueContainerComponent, isStandalone: false, selector: "lib-queue-container", inputs: { placeholder: "placeholder", selectedRowsInput: "selectedRowsInput" }, outputs: { assignmentComplete: "assignmentComplete", userAssigned: "userAssigned", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", selectionChange: "selectionChange", isAllRowSelected: "isAllRowSelected", excludedApplicationIds: "excludedApplicationIds" }, viewQueries: [{ propertyName: "filterDropdown", first: true, predicate: ["filterDropdown"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container grid m-0 h-full\">\r\n    <div class=\"col-12 xl:col-2 md:col-12 py-0 pl-0 h-full\">\r\n      <lib-skeleton *ngIf=\"loading\" [isAllowCard]=\"true\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\r\n      @if(!loading){\r\n      <div class=\"queue-list-container-wrapper p-0\">\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      }\r\n    </div>\r\n    <div class=\"col-12 xl:col-10 md:col-12 py-0 pr-0 h-full\">\r\n      @if(selectedQueue){\r\n      <div class=\"queue-application-container-wrapper h-full\">\r\n      <div class=\"grid m-0 justify-content-between align-items-center mb-3\">\r\n          <div class=\"col-8 p-0 flex align-items-center\">\r\n            <h4 class=\"queue-title-wrapper m-0 mr-3 pr-1\">Queues</h4>\r\n            <div class=\"col-7 p-0 mr-3\">\r\n              <queue-search \r\n                [placeholder]=\"placeholder\"\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              <lib-queue-filter-dropdown \r\n                #filterDropdown\r\n                [appliedFilters]=\"appliedFilters\"\r\n                (filterApplied)=\"onFilterDropdownApplied($event)\"\r\n                (filtersCleared)=\"onFiltersCleared()\">\r\n              </lib-queue-filter-dropdown>\r\n            </div>\r\n            <div *ngIf=\"hasActiveFilters\">\r\n              <button \r\n                class=\"clear-filters-btn\"\r\n                type=\"button\"\r\n                (click)=\"onClearAllFilters()\">\r\n                Clear <i class=\"pi pi-times ml-2\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          \r\n          <div class=\"flex align-items-center gap-3 col-3 py-0 pl-0 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 queue-table-container-wrapper custom-scroll mb-0 p-0\">\r\n \r\n        <app-queue-record-table\r\n          [table]=\"table\"\r\n          [metaData]=\"metaData\"\r\n          [loading]=\"loading\"\r\n          [selectedRows]=\"selectedRows\"\r\n          [resetSort]=\"resetSort\"\r\n          [isShowSkeleton]=\"isShowSkeleton\"\r\n          [selectedQueue]=\"selectedQueue\"\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      </div>\r\n      }\r\n    </div>\r\n\r\n  </div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.queue-table-container-wrapper{height:calc(100% - 58px)}.queue-title-wrapper{font-size:24px;font-weight:600}.queue-application-container-wrapper,.queue-list-container-wrapper{background-color:#fff;border-radius:10px}.queue-application-container-wrapper{padding:18px 11px 18px 18px}.clear-filters-btn{background:none;border:none;color:#2196f3;font-size:1.1rem;cursor:pointer;margin-left:.5rem;display:inline-flex;align-items:center;padding:0}.clear-filters-btn .clear-x{font-size:1.2rem;margin-left:.2rem;line-height:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkeletonComponent, selector: "lib-skeleton", inputs: ["count", "columns", "width", "height", "isAllowCard"] }, { kind: "component", type: QueueSearchComponent, selector: "queue-search", inputs: ["searchText", "placeholder", "debounceTime"], outputs: ["searchInputChanged", "searchRequested", "searchCleared"] }, { kind: "component", type: QueueListComponent, selector: "app-queue-list", inputs: ["queueData", "selectedQueueId", "selectedStatus", "userRole", "showQueueDataForm"], outputs: ["queueSelected", "statusChanged", "insertQueueRequested"] }, { kind: "component", type: QueueRecordTableComponent, selector: "app-queue-record-table", inputs: ["table", "metaData", "loading", "selectedRows", "resetSort", "isShowSkeleton", "selectedQueue"], outputs: ["selectionChange", "selectedRowsData", "assignmentDataReady", "rowClick", "paginationChanged", "filterApplied", "sortApplied"] }, { kind: "component", type: QueueFilterDropdownComponent, selector: "lib-queue-filter-dropdown", inputs: ["appliedFilters"], outputs: ["filterApplied", "filtersCleared"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: QueueContainerComponent, isStandalone: false, selector: "lib-queue-container", inputs: { placeholder: "placeholder", selectedRowsInput: "selectedRowsInput" }, outputs: { assignmentComplete: "assignmentComplete", userAssigned: "userAssigned", selectedRowsData: "selectedRowsData", assignmentDataReady: "assignmentDataReady", rowClick: "rowClick", selectionChange: "selectionChange", isAllRowSelected: "isAllRowSelected", excludedApplicationIds: "excludedApplicationIds" }, viewQueries: [{ propertyName: "filterDropdown", first: true, predicate: ["filterDropdown"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container grid m-0 h-full\">\r\n    <div class=\"col-12 xl:col-2 md:col-12 py-0 pl-0 h-full\">\r\n      <lib-skeleton *ngIf=\"loading\" [isAllowCard]=\"true\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\r\n      @if(!loading){\r\n      <div class=\"queue-list-container-wrapper p-0\">\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      }\r\n    </div>\r\n    <div class=\"col-12 xl:col-10 md:col-12 py-0 h-full\">\r\n      @if(selectedQueue){\r\n      <div class=\"queue-application-container-wrapper h-full\">\r\n      <div class=\"grid m-0 justify-content-between align-items-center mb-3\">\r\n          <div class=\"col-8 p-0 flex align-items-center\">\r\n            <h4 class=\"queue-title-wrapper m-0 mr-3 pr-1\">Queues</h4>\r\n            <div class=\"col-7 p-0 mr-3\">\r\n              <queue-search \r\n                [placeholder]=\"placeholder\"\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              <lib-queue-filter-dropdown \r\n                #filterDropdown\r\n                [appliedFilters]=\"appliedFilters\"\r\n                (filterApplied)=\"onFilterDropdownApplied($event)\"\r\n                (filtersCleared)=\"onFiltersCleared()\">\r\n              </lib-queue-filter-dropdown>\r\n            </div>\r\n            <div *ngIf=\"hasActiveFilters\">\r\n              <button \r\n                class=\"clear-filters-btn\"\r\n                type=\"button\"\r\n                (click)=\"onClearAllFilters()\">\r\n                Clear <i class=\"pi pi-times ml-2\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          \r\n          <div class=\"flex align-items-center gap-3 col-3 py-0 pl-0 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 queue-table-container-wrapper custom-scroll mb-0 p-0\">\r\n \r\n        <app-queue-record-table\r\n          [table]=\"table\"\r\n          [metaData]=\"metaData\"\r\n          [loading]=\"loading\"\r\n          [selectedRows]=\"selectedRows\"\r\n          [resetSort]=\"resetSort\"\r\n          [isShowSkeleton]=\"isShowSkeleton\"\r\n          [selectedQueue]=\"selectedQueue\"\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      </div>\r\n      }\r\n    </div>\r\n\r\n  </div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.queue-table-container-wrapper{height:calc(100% - 58px)}.queue-title-wrapper{font-size:24px;font-weight:600}.queue-application-container-wrapper,.queue-list-container-wrapper{background-color:#fff;border-radius:10px}.queue-application-container-wrapper{padding:18px 11px 18px 18px}.clear-filters-btn{background:none;border:none;color:#2196f3;font-size:1.1rem;cursor:pointer;margin-left:.5rem;display:inline-flex;align-items:center;padding:0}.clear-filters-btn .clear-x{font-size:1.2rem;margin-left:.2rem;line-height:1}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkeletonComponent, selector: "lib-skeleton", inputs: ["count", "columns", "width", "height", "isAllowCard"] }, { kind: "component", type: QueueSearchComponent, selector: "queue-search", inputs: ["searchText", "placeholder", "debounceTime"], outputs: ["searchInputChanged", "searchRequested", "searchCleared"] }, { kind: "component", type: QueueListComponent, selector: "app-queue-list", inputs: ["queueData", "selectedQueueId", "selectedStatus", "userRole", "showQueueDataForm"], outputs: ["queueSelected", "statusChanged", "insertQueueRequested"] }, { kind: "component", type: QueueRecordTableComponent, selector: "app-queue-record-table", inputs: ["table", "metaData", "loading", "selectedRows", "resetSort", "isShowSkeleton", "selectedQueue"], outputs: ["selectionChange", "selectedRowsData", "assignmentDataReady", "rowClick", "paginationChanged", "filterApplied", "sortApplied"] }, { kind: "component", type: QueueFilterDropdownComponent, selector: "lib-queue-filter-dropdown", inputs: ["appliedFilters"], outputs: ["filterApplied", "filtersCleared"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: QueueContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-queue-container', standalone: false, template: "<div class=\"container grid m-0 h-full\">\r\n    <div class=\"col-12 xl:col-2 md:col-12 py-0 pl-0 h-full\">\r\n      <lib-skeleton *ngIf=\"loading\" [isAllowCard]=\"true\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\r\n      @if(!loading){\r\n      <div class=\"queue-list-container-wrapper p-0\">\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      }\r\n    </div>\r\n    <div class=\"col-12 xl:col-10 md:col-12 py-0 pr-0 h-full\">\r\n      @if(selectedQueue){\r\n      <div class=\"queue-application-container-wrapper h-full\">\r\n      <div class=\"grid m-0 justify-content-between align-items-center mb-3\">\r\n          <div class=\"col-8 p-0 flex align-items-center\">\r\n            <h4 class=\"queue-title-wrapper m-0 mr-3 pr-1\">Queues</h4>\r\n            <div class=\"col-7 p-0 mr-3\">\r\n              <queue-search \r\n                [placeholder]=\"placeholder\"\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              <lib-queue-filter-dropdown \r\n                #filterDropdown\r\n                [appliedFilters]=\"appliedFilters\"\r\n                (filterApplied)=\"onFilterDropdownApplied($event)\"\r\n                (filtersCleared)=\"onFiltersCleared()\">\r\n              </lib-queue-filter-dropdown>\r\n            </div>\r\n            <div *ngIf=\"hasActiveFilters\">\r\n              <button \r\n                class=\"clear-filters-btn\"\r\n                type=\"button\"\r\n                (click)=\"onClearAllFilters()\">\r\n                Clear <i class=\"pi pi-times ml-2\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          \r\n          <div class=\"flex align-items-center gap-3 col-3 py-0 pl-0 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 queue-table-container-wrapper custom-scroll mb-0 p-0\">\r\n \r\n        <app-queue-record-table\r\n          [table]=\"table\"\r\n          [metaData]=\"metaData\"\r\n          [loading]=\"loading\"\r\n          [selectedRows]=\"selectedRows\"\r\n          [resetSort]=\"resetSort\"\r\n          [isShowSkeleton]=\"isShowSkeleton\"\r\n          [selectedQueue]=\"selectedQueue\"\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      </div>\r\n      }\r\n    </div>\r\n\r\n  </div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.queue-table-container-wrapper{height:calc(100% - 58px)}.queue-title-wrapper{font-size:24px;font-weight:600}.queue-application-container-wrapper,.queue-list-container-wrapper{background-color:#fff;border-radius:10px}.queue-application-container-wrapper{padding:18px 11px 18px 18px}.clear-filters-btn{background:none;border:none;color:#2196f3;font-size:1.1rem;cursor:pointer;margin-left:.5rem;display:inline-flex;align-items:center;padding:0}.clear-filters-btn .clear-x{font-size:1.2rem;margin-left:.2rem;line-height:1}\n"] }]
+            args: [{ selector: 'lib-queue-container', standalone: false, template: "<div class=\"container grid m-0 h-full\">\r\n    <div class=\"col-12 xl:col-2 md:col-12 py-0 pl-0 h-full\">\r\n      <lib-skeleton *ngIf=\"loading\" [isAllowCard]=\"true\" [count]=\"5\" [width]=\"'100%'\" [height]=\"'4.5rem'\"></lib-skeleton>\r\n      @if(!loading){\r\n      <div class=\"queue-list-container-wrapper p-0\">\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      }\r\n    </div>\r\n    <div class=\"col-12 xl:col-10 md:col-12 py-0 h-full\">\r\n      @if(selectedQueue){\r\n      <div class=\"queue-application-container-wrapper h-full\">\r\n      <div class=\"grid m-0 justify-content-between align-items-center mb-3\">\r\n          <div class=\"col-8 p-0 flex align-items-center\">\r\n            <h4 class=\"queue-title-wrapper m-0 mr-3 pr-1\">Queues</h4>\r\n            <div class=\"col-7 p-0 mr-3\">\r\n              <queue-search \r\n                [placeholder]=\"placeholder\"\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              <lib-queue-filter-dropdown \r\n                #filterDropdown\r\n                [appliedFilters]=\"appliedFilters\"\r\n                (filterApplied)=\"onFilterDropdownApplied($event)\"\r\n                (filtersCleared)=\"onFiltersCleared()\">\r\n              </lib-queue-filter-dropdown>\r\n            </div>\r\n            <div *ngIf=\"hasActiveFilters\">\r\n              <button \r\n                class=\"clear-filters-btn\"\r\n                type=\"button\"\r\n                (click)=\"onClearAllFilters()\">\r\n                Clear <i class=\"pi pi-times ml-2\"></i>\r\n              </button>\r\n            </div>\r\n          </div>\r\n          \r\n          <div class=\"flex align-items-center gap-3 col-3 py-0 pl-0 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 queue-table-container-wrapper custom-scroll mb-0 p-0\">\r\n \r\n        <app-queue-record-table\r\n          [table]=\"table\"\r\n          [metaData]=\"metaData\"\r\n          [loading]=\"loading\"\r\n          [selectedRows]=\"selectedRows\"\r\n          [resetSort]=\"resetSort\"\r\n          [isShowSkeleton]=\"isShowSkeleton\"\r\n          [selectedQueue]=\"selectedQueue\"\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      </div>\r\n      }\r\n    </div>\r\n\r\n  </div>", styles: [".custom-scroll{overflow-y:hidden;scrollbar-gutter:stable}.custom-scroll:hover{overflow-y:auto}.queue-table-container-wrapper{height:calc(100% - 58px)}.queue-title-wrapper{font-size:24px;font-weight:600}.queue-application-container-wrapper,.queue-list-container-wrapper{background-color:#fff;border-radius:10px}.queue-application-container-wrapper{padding:18px 11px 18px 18px}.clear-filters-btn{background:none;border:none;color:#2196f3;font-size:1.1rem;cursor:pointer;margin-left:.5rem;display:inline-flex;align-items:center;padding:0}.clear-filters-btn .clear-x{font-size:1.2rem;margin-left:.2rem;line-height:1}\n"] }]
         }], ctorParameters: () => [{ type: QueueStore$1 }, { type: QueueService }, { type: BaseStore }, { type: QueueBusinessService }, { type: QueueRecordTableBuilderService }, { type: QueueFilterDropdownService }, { type: BaseQuery }], propDecorators: { placeholder: [{
                 type: Input
             }], filterDropdown: [{