@rangertechnologies/ngnxt 2.1.97 → 2.1.98

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -12024,11 +12024,18 @@ class NxtDatatable {
     //       "pageSize": 10,
     //       "pageIndex": 10
     //   },
-    //   "tableSearch": "ddd",  // 1
+    //   "tableSearch": {      // 1
+    //       "fields" : [
+    //           "lightType",
+    //           "system",
+    //           "status"
+    //       ] ,
+    //       "value": 'r-001' 
+    //   },  
     //   "searchFilterData": {  // 2
     //       "lightType": [
     //           "AA",
-    //           "BB"
+    //           "BB" 
     //       ]
     //   },
     //   "sort": {              // 3
@@ -12076,8 +12083,6 @@ class NxtDatatable {
     configPagination = false; // flag for config pagination
     deleteData; // to get the delete row
     deleteModal = false; // for conformation popup
-    actionColumnSize; // track a action column button size
-    dropdownButtonSize = 0; // for action column dropdown button size
     dropdownActionButton; // for action column dropdown button
     currentOpenIndex = null; // track the current open action dropdown icon index
     clickListener; // action column dropdown button click listener for close a dropdown button
@@ -12169,15 +12174,7 @@ class NxtDatatable {
         this.totalRecords = this.pagination?.totalRecords ? this.pagination['totalRecords'] : undefined;
         this.pageSizeOptions = this.pagination?.pageSizeOptions ? this.pagination['pageSizeOptions'] : ['5', '10', '25', '50', '100', '200'];
         this.pagination === undefined ? this.configPagination = false : this.configPagination = true;
-        if (this.isEditRow && this.isDeleteRow) {
-            this.actionColumnSize = 2;
-        }
-        else if (this.isEditRow || this.isDeleteRow) {
-            this.actionColumnSize = 1;
-        }
-        else {
-            this.actionColumnSize = 0;
-        }
+        this.dropdownActionButton = this.actionButtonArray?.buttonArray.slice(this.actionButtonArray?.size);
         this.originalData = [...this.data];
         this.sFilterData = [...this.data];
         this.dataSource.data = this.originalData;
@@ -12327,11 +12324,9 @@ class NxtDatatable {
                 this.currentSortColumn = column;
                 this.currentSortDirection = 'asc';
             }
-            this.pageIndex = 1;
-            this.pageSize = 10;
-            localStorage.setItem('NxtDataTable', JSON.stringify({ addRecord: false, pageSize: 10, pageIndex: this.pageIndex, currentSortColumn: this.currentSortColumn, currentSortDirection: this.currentSortDirection }));
+            localStorage.setItem('NxtDataTable', JSON.stringify({ addRecord: false, pageSize: this.pageSize, pageIndex: this.pageIndex, currentSortColumn: this.currentSortColumn, currentSortDirection: this.currentSortDirection }));
             // Only sort if the direction is 'asc' or 'desc'
-            this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: 1 }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
+            this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: this.pageIndex }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
         }
     }
     onScroll(tableContainer) {
@@ -12356,20 +12351,19 @@ class NxtDatatable {
     }
     // SKS15FEB25  emitting pagr size and index to parent on paginating
     pageParams(event) {
+        this.pageIndex = event.pageIndex;
+        this.pageSize = event.pageSize;
         if (!this.configPagination || this.dataSource.data.length === this.totalRecords) {
-            this.pageIndex = event.pageIndex;
-            this.pageSize = event.pageSize;
             const start = (Number(event.pageIndex) - 1) * Number(event.pageSize);
             const end = start + Number(event.pageSize);
             this.dataSource.data = this.sFilterData?.slice(start, end);
         }
         else {
-            this.NxtTableEmit.emit({ pagination: { pageSize: event.pageSize, pageIndex: event.pageIndex }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
+            this.NxtTableEmit.emit({ pagination: { pageSize: event.pageSize, pageIndex: event.pageIndex }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
         }
     }
     // SKS15FEB25 apply search bar filter using mat
     applyFilter(event) {
-        console.log("i am in apply filter");
         let filterValue = event.target.value;
         filterValue = filterValue.trim().toLowerCase();
         if (!filterValue) {
@@ -12556,7 +12550,7 @@ class NxtDatatable {
         else {
             const pageIndex = Math.ceil(this.totalRecords / 10);
             localStorage.setItem('NxtDataTable', JSON.stringify({ addRecord: true, pageSize: 10, pageIndex: pageIndex, currentSortColumn: this.currentSortColumn, currentSortDirection: this.currentSortDirection }));
-            this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: pageIndex }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
+            this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: pageIndex }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
         }
     }
     // SKS15FEB25 Action button conditionally displayed function
@@ -12588,7 +12582,7 @@ class NxtDatatable {
         if (this.searchConfigs || this.dataSource.data.length === this.totalRecords) {
             this.pageIndex = 1;
             this.pageSize = 10;
-            this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: Number(this.pageIndex) }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
+            this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: Number(this.pageIndex) }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
         }
     }
     // SKS15FEB25 If the value in the search box is empty, call the onSearch function automatically
@@ -12638,23 +12632,12 @@ class NxtDatatable {
         if (this.dataSource.data.length !== this.totalRecords && this.configPagination) {
             this.pageIndex = 1;
             this.pageSize = 10;
-            this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: Number(this.pageIndex) }, tableSearch: this.searchBoxValue, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
+            this.NxtTableEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: Number(this.pageIndex) }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
         }
         else {
             this.filterRetain(this.filterDataArray);
         }
     }
-    // SKS15FEB25  action column button count track
-    incrementActionColumnSize() {
-        this.actionColumnSize++;
-        this.dropdownButtonSize++;
-        return ''; // Returning empty string to avoid rendering issues
-    }
-    // SKS15FEB25  action column dropdown buttons slice
-    updatedDropdownArraySize() {
-        this.dropdownActionButton = this.actionButtonArray?.buttonArray.slice(this.dropdownButtonSize);
-        return "";
-    }
     // SKS15FEB25  action column dropdown buttons close
     addClickOutsideListener() {
         if (!this.clickListener) {
@@ -12683,7 +12666,7 @@ class NxtDatatable {
         this.actionButtonEmit.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div class=\"m-4\">\n        <div class=\"d-flex justify-content-center table-title align-text-center pt-3\">\n            {{title}}\n        </div>\n        <div class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"noOfRec\" style=\"display: flex; align-items: center;\">\n                <p *ngIf=\"totalRecords || totalCount\" style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                    Nos </p>\n                <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n            </div>\n\n            <div class=\"flex\" style=\"align-items: center;\">\n                <div *ngIf=\"searchBar\" class=\"search\">\n                    <div class=\"flex search-bar\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>                            \n                        <input class=\"medium-font\" type=\"text\" placeholder=\"Search\"\n                            (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n                            [value]=\"searchConfigs ? searchBoxValue || '' : ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\"  class=\"configSearch\" (click)=\"onSearch(input.value)\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\" (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n                            [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\" #tableContainer (scroll)=\"onScroll(tableContainer)\">\n                <ng-container> <!--*ngIf=\"!isLoading; else loadingTemplate\"-->\n                    <div class=\"custom-table\">\n                        <!--SKS15FEB25 Table Header -->\n                        <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n                            <div class=\"table-row\">\n                                <!--SKS15FEB25 Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                        [checked]=\"selection?.hasValue()\"\n                                        [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                        class=\"custom-checkbox\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <div *ngFor=\"let column of displayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\" [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); sortData(column)\"\n                                    (mouseenter)=\"hoveredColumn = column\"\n                                    (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <div class=\"ellipsis\" title=\"{{ headerLabels[displayedColumns.indexOf(column)] }}\">{{headerLabels[displayedColumns.indexOf(column)]}}</div>\n                                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n                                                <svg *ngIf=\"filterColumns.includes(column)\" (click)=\"filter(column)\" style=\"padding-right: 2px;\" width=\"12\" height=\"11\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\" stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle *ngIf=\"filterDataArray[column]?.length > 0\" cx=\"10\" cy=\"1\" r=\"2\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                      {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span *ngIf=\"hoveredColumn === column && currentSortColumn !== column\" class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\" class=\"search-component position-absolute\">\n                                                    <div class=\"card\">\n                                                        <div class=\"content\">\n                                                            <div class=\"flex\">\n                                                                <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                    <div class=\"fsearch-bar\">\n                                                                        <svg class=\"searchSvg\" width=\"18\" height=\"20\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                        </svg>     \n                                                                        <input class=\"medium-font width-100\" type=\"text\" placeholder=\"Search\" [(ngModel)]=\"searchText\" class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\" style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\" [checked]=\"isSelected(data)\" [value]=\"data\" [id]=\"data\"\n                                                                            (change)=\"checkedData(data)\">\n                                                                        <div class=\"medium-font ms-2 label-data\">{{data}}</div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"resize-handle\" ></div> <!--SKS15FEB25 appRowResizer -->\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\" style=\"padding: 12px !important;\">\n                                    {{actionColumHeader}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\" (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\"\n                                        (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <div *ngFor=\"let column of displayedColumns ellipsis\" class=\"table-cell body-color\">\n                                    <div *ngIf=\" column !== 'active'\">\n                                        <div class=\"font-size-13 {{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                            *ngIf=\"hyperLinkColumns?.includes(column)\"\n                                            (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                {{ element[column] | date }}\n                                              </ng-container>\n                                              <ng-template #checkTime>\n                                                <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                  {{ element[column] | time }}\n                                                </ng-container>\n                                              </ng-template>\n                                              <ng-template #default>\n                                                {{ element[column] }}\n                                              </ng-template>    \n                                              <!--SKS15FEB25 rightnav column -->\n                                                <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n                                                    <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                    </svg>                                                        \n                                                </ng-container>\n                                        </div>\n\n                                        <div *ngIf=\"!editColumn?.includes(column)\">\n                                            <div *ngIf=\"!checkHyperlinkCheck(column)\" class=\"font-size-13\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                    {{ element[column] | date }}\n                                                  </ng-container>\n                                                  <ng-template #checkTime>\n                                                    <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                      {{ element[column] | time }}\n                                                    </ng-container>\n                                                  </ng-template>\n                                                  <ng-template #default>\n                                                    {{ element[column] }}\n                                                  </ng-template>   \n                                                  <!--SKS15FEB25 rightnav column -->\n                                                    <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n                                                        <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                        </svg>                                                            \n                                                    </ng-container>   \n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 added input box for inline edit input-->\n                                        <div *ngIf=\"editColumn.length > 0\">\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \" class=\"on-edit d-flex\">\n                                            <input #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n                                            </div>\n                                            <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \" class=\"on-edit d-flex\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\" [disabled]=\"element.editRow ? false : true\" />\n                                            <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                <select type=\"dropdown\" *ngIf=\"element.editRow\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                [(ngModel)]=\"element[column]\">\n                                                <option [disabled]=\"element.editRow ? false : true\"  *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \" [value]=\"data.value || data.name\">{{data.name}}</option>\n                                                </select>\n                                                <input *ngIf=\"!element.editRow\" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"true\">\n                                            </div>\n                                            \n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                         <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\" fill=\"#6C757D\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n\n                                        <!--SKS15FEB25 Delete Button -->\n                                         <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n                                        <!--SKS15FEB25 Render inline buttons up to actionColumnSize -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"actionColumnSize < actionButtonArray?.size\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                {{ incrementActionColumnSize() }}\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=button.tooltip \n                                                    (click)=\"actionButtonClicked(button)\"\n                                                    (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n                                                    (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                    <img #imgElement [src]=\"button.iconSrc\"\n                                                        (mouseenter)=\"imgElement.src = button.hoverIconSrc\"\n                                                        (mouseleave)=\"imgElement.src = button.iconSrc\">            \n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        {{ updatedDropdownArraySize() }}\n                                        <div *ngIf=\"dropdownActionButton.length > 0\" class=\"dropdown\">\n                                            <div class=\"clickable-img\"  (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    </svg>\n                                                </div>\n                                            </div>\n                                            \n                                            <div class=\"dropdown-menu\"  *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\"> \n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\"\n                                                        style=\"display: flex;\"\n                                                        type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n                                                        [matTooltip]=btn.tooltip\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn)\">\n                                                        <img [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>                                          \n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 No Data Row -->\n                        <div *ngIf=\"dataSource.data.length === 0\" class=\"\">\n                                No records/data found.\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-template #loadingTemplate>\n                    <!--SKS15FEB25 Skeleton Loader -->\n                    <div class=\"skeleton-loader\">\n                        <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"skeleton-row\">\n                            <div *ngFor=\"let _ of displayedColumns\" class=\"skeleton-cell\"></div>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n            <!--SKS15FEB25 Pagination -->\n             <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \" (click)=\"addTableRecord(inlineElement)\"  matTooltip=\"Add Record\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"editColumn.length > 0  || tableSaveButton\" buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button> \n                </div>\n                <nxt-pagination [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n                    [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (event)=\"pageParams($event)\">\n                </nxt-pagination>\n             </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\" aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteModal = false\"></button>\n        </div>\n        <div class=\"modal-body\">\n          Are you sure want to delete the record ?\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"  (click)=\"deleteModal = false\">No</button>\n          <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteRecordData()\">Yes</button>\n        </div>\n      </div>\n    </div>\n  </div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.skeleton-loader{padding:1rem}.skeleton-row{display:flex;margin-bottom:1rem}.skeleton-cell{height:20px;background:#fff;margin:0 .5rem;flex:1;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{background:var(--header-bg)}50%{background:color-mix(in srgb,var(--header-bg) 80%,#0000)}to{background:var(--header-bg)}}.table-container{width:100%;height:450px;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:15px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "fcBtnBgColor", "fcBtnBorder", "fcBtnTextColor", "fcBtnHeight", "fcBtnWidth", "fcBtnIconLeftSrc", "fcBtnIconRightSrc", "fcBtnHoverBgColor", "fcBtnHoverTextColor", "fcBtnId", "dataDismiss", "fcButtonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: SearchFilterPipe, name: "searchFilter" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "pipe", type: EditColumnCheckPipe, name: "editColumnCheck" }, { kind: "pipe", type: EditColumnDropdownPipe, name: "editColumnDropdown" }, { kind: "pipe", type: EditColumnTypePipe, name: "editColumnType" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div class=\"m-4\">\n        <div class=\"d-flex justify-content-center table-title align-text-center pt-3\">\n            {{title}}\n        </div>\n        <div class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"noOfRec\" style=\"display: flex; align-items: center;\">\n                <p *ngIf=\"totalRecords || totalCount\" style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                    Nos </p>\n                <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n            </div>\n\n            <div class=\"flex\" style=\"align-items: center;\">\n                <div *ngIf=\"searchBar\" class=\"search\">\n                    <div class=\"flex search-bar\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>                            \n                        <input class=\"medium-font\" type=\"text\" placeholder=\"Search\"\n                            (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n                            [value]=\"searchConfigs ? searchBoxValue || '' : ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\"  class=\"configSearch\" (click)=\"onSearch(input.value)\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\" (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n                            [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\" #tableContainer (scroll)=\"onScroll(tableContainer)\">\n                <ng-container> <!--*ngIf=\"!isLoading; else loadingTemplate\"-->\n                    <div class=\"custom-table\">\n                        <!--SKS15FEB25 Table Header -->\n                        <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n                            <div class=\"table-row\">\n                                <!--SKS15FEB25 Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                        [checked]=\"selection?.hasValue()\"\n                                        [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                        class=\"custom-checkbox\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <div *ngFor=\"let column of displayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\" [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); sortData(column)\"\n                                    (mouseenter)=\"hoveredColumn = column\"\n                                    (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <div class=\"ellipsis\" title=\"{{ headerLabels[displayedColumns.indexOf(column)] }}\">{{headerLabels[displayedColumns.indexOf(column)]}}</div>\n                                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n                                                <svg *ngIf=\"filterColumns.includes(column)\" (click)=\"filter(column)\" style=\"padding-right: 2px;\" width=\"12\" height=\"11\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\" stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle *ngIf=\"filterDataArray[column]?.length > 0\" cx=\"10\" cy=\"1\" r=\"2\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                      {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span *ngIf=\"hoveredColumn === column && currentSortColumn !== column\" class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\" class=\"search-component position-absolute\">\n                                                    <div class=\"card\">\n                                                        <div class=\"content\">\n                                                            <div class=\"flex\">\n                                                                <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                    <div class=\"fsearch-bar\">\n                                                                        <svg class=\"searchSvg\" width=\"18\" height=\"20\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                        </svg>     \n                                                                        <input class=\"medium-font width-100\" type=\"text\" placeholder=\"Search\" [(ngModel)]=\"searchText\" class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\" style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\" [checked]=\"isSelected(data)\" [value]=\"data\" [id]=\"data\"\n                                                                            (change)=\"checkedData(data)\">\n                                                                        <div class=\"medium-font ms-2 label-data\">{{data}}</div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"resize-handle\" ></div> <!--SKS15FEB25 appRowResizer -->\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\" style=\"padding: 12px !important;\">\n                                    {{actionColumHeader}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\" (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\"\n                                        (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <div *ngFor=\"let column of displayedColumns ellipsis\" class=\"table-cell body-color\">\n                                    <div *ngIf=\" column !== 'active'\">\n                                        <div class=\"font-size-13 {{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                            *ngIf=\"hyperLinkColumns?.includes(column)\"\n                                            (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                {{ element[column] | date }}\n                                              </ng-container>\n                                              <ng-template #checkTime>\n                                                <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                  {{ element[column] | time }}\n                                                </ng-container>\n                                              </ng-template>\n                                              <ng-template #default>\n                                                {{ element[column] }}\n                                              </ng-template>    \n                                              <!--SKS15FEB25 rightnav column -->\n                                                <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n                                                    <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                    </svg>                                                        \n                                                </ng-container>\n                                        </div>\n\n                                        <div *ngIf=\"!editColumn?.includes(column)\">\n                                            <div *ngIf=\"!checkHyperlinkCheck(column)\" class=\"font-size-13\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                    {{ element[column] | date }}\n                                                  </ng-container>\n                                                  <ng-template #checkTime>\n                                                    <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                      {{ element[column] | time }}\n                                                    </ng-container>\n                                                  </ng-template>\n                                                  <ng-template #default>\n                                                    {{ element[column] }}\n                                                  </ng-template>   \n                                                  <!--SKS15FEB25 rightnav column -->\n                                                    <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n                                                        <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                        </svg>                                                            \n                                                    </ng-container>   \n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 added input box for inline edit input-->\n                                        <div *ngIf=\"editColumn.length > 0\">\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \" class=\"on-edit d-flex\">\n                                            <input #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n                                            </div>\n                                            <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \" class=\"on-edit d-flex\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\" [disabled]=\"element.editRow ? false : true\" />\n                                            <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                <select type=\"dropdown\" *ngIf=\"element.editRow\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                [(ngModel)]=\"element[column]\">\n                                                <option [disabled]=\"element.editRow ? false : true\"  *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \" [value]=\"data.value || data.name\">{{data.name}}</option>\n                                                </select>\n                                                <input *ngIf=\"!element.editRow\" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"true\">\n                                            </div>\n                                            \n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                         <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\" fill=\"#6C757D\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n\n                                        <!--SKS15FEB25 Delete Button -->\n                                         <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n                                        <!--SKS15FEB25 Render inline buttons up to Size -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"i < actionButtonArray?.size\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=button.tooltip \n                                                    (click)=\"actionButtonClicked(button)\"\n                                                    (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n                                                    (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                    <img #imgElement [src]=\"button.iconSrc\"\n                                                        (mouseenter)=\"imgElement.src = button.hoverIconSrc\"\n                                                        (mouseleave)=\"imgElement.src = button.iconSrc\">            \n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton.length > 0\" class=\"dropdown\">\n                                            <div class=\"clickable-img\"  (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    </svg>\n                                                </div>\n                                            </div>\n                                            \n                                            <div class=\"dropdown-menu\" [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton.length > 0 ? 1 : 0)) * 100 + '%'\" *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\"> \n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\"\n                                                        style=\"display: flex;\"\n                                                        type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n                                                        [matTooltip]=btn.tooltip\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn)\">\n                                                        <img [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>                                          \n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 No Data Row -->\n                        <div *ngIf=\"dataSource.data.length === 0\" class=\"\">\n                                No records/data found.\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-template #loadingTemplate>\n                    <!--SKS15FEB25 Skeleton Loader -->\n                    <div class=\"skeleton-loader\">\n                        <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"skeleton-row\">\n                            <div *ngFor=\"let _ of displayedColumns\" class=\"skeleton-cell\"></div>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n            <!--SKS15FEB25 Pagination -->\n             <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \" (click)=\"addTableRecord(inlineElement)\"  matTooltip=\"Add Record\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"editColumn.length > 0  || tableSaveButton\" buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button> \n                </div>\n                <nxt-pagination [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n                    [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (event)=\"pageParams($event)\">\n                </nxt-pagination>\n             </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\" aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteModal = false\"></button>\n        </div>\n        <div class=\"modal-body\">\n          Are you sure want to delete the record ?\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"  (click)=\"deleteModal = false\">No</button>\n          <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteRecordData()\">Yes</button>\n        </div>\n      </div>\n    </div>\n  </div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.skeleton-loader{padding:1rem}.skeleton-row{display:flex;margin-bottom:1rem}.skeleton-cell{height:20px;background:#fff;margin:0 .5rem;flex:1;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{background:var(--header-bg)}50%{background:color-mix(in srgb,var(--header-bg) 80%,#0000)}to{background:var(--header-bg)}}.table-container{width:100%;height:450px;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:15px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "fcBtnBgColor", "fcBtnBorder", "fcBtnTextColor", "fcBtnHeight", "fcBtnWidth", "fcBtnIconLeftSrc", "fcBtnIconRightSrc", "fcBtnHoverBgColor", "fcBtnHoverTextColor", "fcBtnId", "dataDismiss", "fcButtonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: SearchFilterPipe, name: "searchFilter" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "pipe", type: EditColumnCheckPipe, name: "editColumnCheck" }, { kind: "pipe", type: EditColumnDropdownPipe, name: "editColumnDropdown" }, { kind: "pipe", type: EditColumnTypePipe, name: "editColumnType" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, decorators: [{
             type: Component,
@@ -12701,7 +12684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         EditColumnTypePipe,
                         MatTooltipModule
                         // RowResizerDirective
-                    ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div class=\"m-4\">\n        <div class=\"d-flex justify-content-center table-title align-text-center pt-3\">\n            {{title}}\n        </div>\n        <div class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"noOfRec\" style=\"display: flex; align-items: center;\">\n                <p *ngIf=\"totalRecords || totalCount\" style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                    Nos </p>\n                <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n            </div>\n\n            <div class=\"flex\" style=\"align-items: center;\">\n                <div *ngIf=\"searchBar\" class=\"search\">\n                    <div class=\"flex search-bar\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>                            \n                        <input class=\"medium-font\" type=\"text\" placeholder=\"Search\"\n                            (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n                            [value]=\"searchConfigs ? searchBoxValue || '' : ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\"  class=\"configSearch\" (click)=\"onSearch(input.value)\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\" (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n                            [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\" #tableContainer (scroll)=\"onScroll(tableContainer)\">\n                <ng-container> <!--*ngIf=\"!isLoading; else loadingTemplate\"-->\n                    <div class=\"custom-table\">\n                        <!--SKS15FEB25 Table Header -->\n                        <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n                            <div class=\"table-row\">\n                                <!--SKS15FEB25 Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                        [checked]=\"selection?.hasValue()\"\n                                        [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                        class=\"custom-checkbox\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <div *ngFor=\"let column of displayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\" [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); sortData(column)\"\n                                    (mouseenter)=\"hoveredColumn = column\"\n                                    (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <div class=\"ellipsis\" title=\"{{ headerLabels[displayedColumns.indexOf(column)] }}\">{{headerLabels[displayedColumns.indexOf(column)]}}</div>\n                                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n                                                <svg *ngIf=\"filterColumns.includes(column)\" (click)=\"filter(column)\" style=\"padding-right: 2px;\" width=\"12\" height=\"11\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\" stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle *ngIf=\"filterDataArray[column]?.length > 0\" cx=\"10\" cy=\"1\" r=\"2\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                      {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span *ngIf=\"hoveredColumn === column && currentSortColumn !== column\" class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\" class=\"search-component position-absolute\">\n                                                    <div class=\"card\">\n                                                        <div class=\"content\">\n                                                            <div class=\"flex\">\n                                                                <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                    <div class=\"fsearch-bar\">\n                                                                        <svg class=\"searchSvg\" width=\"18\" height=\"20\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                        </svg>     \n                                                                        <input class=\"medium-font width-100\" type=\"text\" placeholder=\"Search\" [(ngModel)]=\"searchText\" class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\" style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\" [checked]=\"isSelected(data)\" [value]=\"data\" [id]=\"data\"\n                                                                            (change)=\"checkedData(data)\">\n                                                                        <div class=\"medium-font ms-2 label-data\">{{data}}</div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"resize-handle\" ></div> <!--SKS15FEB25 appRowResizer -->\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\" style=\"padding: 12px !important;\">\n                                    {{actionColumHeader}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\" (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\"\n                                        (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <div *ngFor=\"let column of displayedColumns ellipsis\" class=\"table-cell body-color\">\n                                    <div *ngIf=\" column !== 'active'\">\n                                        <div class=\"font-size-13 {{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                            *ngIf=\"hyperLinkColumns?.includes(column)\"\n                                            (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                {{ element[column] | date }}\n                                              </ng-container>\n                                              <ng-template #checkTime>\n                                                <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                  {{ element[column] | time }}\n                                                </ng-container>\n                                              </ng-template>\n                                              <ng-template #default>\n                                                {{ element[column] }}\n                                              </ng-template>    \n                                              <!--SKS15FEB25 rightnav column -->\n                                                <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n                                                    <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                    </svg>                                                        \n                                                </ng-container>\n                                        </div>\n\n                                        <div *ngIf=\"!editColumn?.includes(column)\">\n                                            <div *ngIf=\"!checkHyperlinkCheck(column)\" class=\"font-size-13\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                    {{ element[column] | date }}\n                                                  </ng-container>\n                                                  <ng-template #checkTime>\n                                                    <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                      {{ element[column] | time }}\n                                                    </ng-container>\n                                                  </ng-template>\n                                                  <ng-template #default>\n                                                    {{ element[column] }}\n                                                  </ng-template>   \n                                                  <!--SKS15FEB25 rightnav column -->\n                                                    <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n                                                        <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                        </svg>                                                            \n                                                    </ng-container>   \n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 added input box for inline edit input-->\n                                        <div *ngIf=\"editColumn.length > 0\">\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \" class=\"on-edit d-flex\">\n                                            <input #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n                                            </div>\n                                            <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \" class=\"on-edit d-flex\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\" [disabled]=\"element.editRow ? false : true\" />\n                                            <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                <select type=\"dropdown\" *ngIf=\"element.editRow\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                [(ngModel)]=\"element[column]\">\n                                                <option [disabled]=\"element.editRow ? false : true\"  *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \" [value]=\"data.value || data.name\">{{data.name}}</option>\n                                                </select>\n                                                <input *ngIf=\"!element.editRow\" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"true\">\n                                            </div>\n                                            \n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                         <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\" fill=\"#6C757D\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n\n                                        <!--SKS15FEB25 Delete Button -->\n                                         <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n                                        <!--SKS15FEB25 Render inline buttons up to actionColumnSize -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"actionColumnSize < actionButtonArray?.size\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                {{ incrementActionColumnSize() }}\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=button.tooltip \n                                                    (click)=\"actionButtonClicked(button)\"\n                                                    (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n                                                    (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                    <img #imgElement [src]=\"button.iconSrc\"\n                                                        (mouseenter)=\"imgElement.src = button.hoverIconSrc\"\n                                                        (mouseleave)=\"imgElement.src = button.iconSrc\">            \n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        {{ updatedDropdownArraySize() }}\n                                        <div *ngIf=\"dropdownActionButton.length > 0\" class=\"dropdown\">\n                                            <div class=\"clickable-img\"  (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    </svg>\n                                                </div>\n                                            </div>\n                                            \n                                            <div class=\"dropdown-menu\"  *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\"> \n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\"\n                                                        style=\"display: flex;\"\n                                                        type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n                                                        [matTooltip]=btn.tooltip\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn)\">\n                                                        <img [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>                                          \n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 No Data Row -->\n                        <div *ngIf=\"dataSource.data.length === 0\" class=\"\">\n                                No records/data found.\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-template #loadingTemplate>\n                    <!--SKS15FEB25 Skeleton Loader -->\n                    <div class=\"skeleton-loader\">\n                        <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"skeleton-row\">\n                            <div *ngFor=\"let _ of displayedColumns\" class=\"skeleton-cell\"></div>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n            <!--SKS15FEB25 Pagination -->\n             <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \" (click)=\"addTableRecord(inlineElement)\"  matTooltip=\"Add Record\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"editColumn.length > 0  || tableSaveButton\" buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button> \n                </div>\n                <nxt-pagination [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n                    [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (event)=\"pageParams($event)\">\n                </nxt-pagination>\n             </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\" aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteModal = false\"></button>\n        </div>\n        <div class=\"modal-body\">\n          Are you sure want to delete the record ?\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"  (click)=\"deleteModal = false\">No</button>\n          <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteRecordData()\">Yes</button>\n        </div>\n      </div>\n    </div>\n  </div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.skeleton-loader{padding:1rem}.skeleton-row{display:flex;margin-bottom:1rem}.skeleton-cell{height:20px;background:#fff;margin:0 .5rem;flex:1;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{background:var(--header-bg)}50%{background:color-mix(in srgb,var(--header-bg) 80%,#0000)}to{background:var(--header-bg)}}.table-container{width:100%;height:450px;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:15px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}\n"] }]
+                    ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div class=\"m-4\">\n        <div class=\"d-flex justify-content-center table-title align-text-center pt-3\">\n            {{title}}\n        </div>\n        <div class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"noOfRec\" style=\"display: flex; align-items: center;\">\n                <p *ngIf=\"totalRecords || totalCount\" style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                    Nos </p>\n                <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n            </div>\n\n            <div class=\"flex\" style=\"align-items: center;\">\n                <div *ngIf=\"searchBar\" class=\"search\">\n                    <div class=\"flex search-bar\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>                            \n                        <input class=\"medium-font\" type=\"text\" placeholder=\"Search\"\n                            (keyup)=\"searchConfigs ? emptySearch($event) : applyFilter($event)\"\n                            [value]=\"searchConfigs ? searchBoxValue || '' : ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\"  class=\"configSearch\" (click)=\"onSearch(input.value)\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\" (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [buttonValue]=\"button.name\" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n                            [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\" #tableContainer (scroll)=\"onScroll(tableContainer)\">\n                <ng-container> <!--*ngIf=\"!isLoading; else loadingTemplate\"-->\n                    <div class=\"custom-table\">\n                        <!--SKS15FEB25 Table Header -->\n                        <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n                            <div class=\"table-row\">\n                                <!--SKS15FEB25 Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                        [checked]=\"selection?.hasValue()\"\n                                        [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                        class=\"custom-checkbox\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <div *ngFor=\"let column of displayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\" [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); sortData(column)\"\n                                    (mouseenter)=\"hoveredColumn = column\"\n                                    (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <div class=\"ellipsis\" title=\"{{ headerLabels[displayedColumns.indexOf(column)] }}\">{{headerLabels[displayedColumns.indexOf(column)]}}</div>\n                                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\n                                                <svg *ngIf=\"filterColumns.includes(column)\" (click)=\"filter(column)\" style=\"padding-right: 2px;\" width=\"12\" height=\"11\" viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\" stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle *ngIf=\"filterDataArray[column]?.length > 0\" cx=\"10\" cy=\"1\" r=\"2\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                      {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span *ngIf=\"hoveredColumn === column && currentSortColumn !== column\" class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\" class=\"search-component position-absolute\">\n                                                    <div class=\"card\">\n                                                        <div class=\"content\">\n                                                            <div class=\"flex\">\n                                                                <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                    <div class=\"fsearch-bar\">\n                                                                        <svg class=\"searchSvg\" width=\"18\" height=\"20\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                        </svg>     \n                                                                        <input class=\"medium-font width-100\" type=\"text\" placeholder=\"Search\" [(ngModel)]=\"searchText\" class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\" class=\"close-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                    <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\" style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\" [checked]=\"isSelected(data)\" [value]=\"data\" [id]=\"data\"\n                                                                            (change)=\"checkedData(data)\">\n                                                                        <div class=\"medium-font ms-2 label-data\">{{data}}</div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"resize-handle\" ></div> <!--SKS15FEB25 appRowResizer -->\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\" style=\"padding: 12px !important;\">\n                                    {{actionColumHeader}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\" (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\"\n                                        (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <div *ngFor=\"let column of displayedColumns ellipsis\" class=\"table-cell body-color\">\n                                    <div *ngIf=\" column !== 'active'\">\n                                        <div class=\"font-size-13 {{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                            *ngIf=\"hyperLinkColumns?.includes(column)\"\n                                            (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                {{ element[column] | date }}\n                                              </ng-container>\n                                              <ng-template #checkTime>\n                                                <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                  {{ element[column] | time }}\n                                                </ng-container>\n                                              </ng-template>\n                                              <ng-template #default>\n                                                {{ element[column] }}\n                                              </ng-template>    \n                                              <!--SKS15FEB25 rightnav column -->\n                                                <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n                                                    <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                    </svg>                                                        \n                                                </ng-container>\n                                        </div>\n\n                                        <div *ngIf=\"!editColumn?.includes(column)\">\n                                            <div *ngIf=\"!checkHyperlinkCheck(column)\" class=\"font-size-13\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                    {{ element[column] | date }}\n                                                  </ng-container>\n                                                  <ng-template #checkTime>\n                                                    <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                      {{ element[column] | time }}\n                                                    </ng-container>\n                                                  </ng-template>\n                                                  <ng-template #default>\n                                                    {{ element[column] }}\n                                                  </ng-template>   \n                                                  <!--SKS15FEB25 rightnav column -->\n                                                    <ng-container *ngIf=\"objectColumns?.includes(column)\"> \n                                                        <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path d=\"M6.00033 11.8334C2.77866 11.8334 0.166992 9.22171 0.166992 6.00008C0.166992 2.77842 2.77866 0.166748 6.00033 0.166748C9.22196 0.166748 11.8337 2.77842 11.8337 6.00008C11.8337 9.22171 9.22196 11.8334 6.00033 11.8334ZM5.41699 5.41675V8.91675H6.58366V5.41675H5.41699ZM5.41699 3.08341V4.25008H6.58366V3.08341H5.41699Z\" fill=\"#434555\" fill-opacity=\"0.5\"/>\n                                                        </svg>                                                            \n                                                    </ng-container>   \n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 added input box for inline edit input-->\n                                        <div *ngIf=\"editColumn.length > 0\">\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \" class=\"on-edit d-flex\">\n                                            <input #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n                                            </div>\n                                            <!--SKS15FEB25 In table, like text input, added drop down and time inputs as well -->\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('object') \" class=\"on-edit d-flex\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"element.editRow ? false : true\">\n                                            <input *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \" type=\"time\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                placeholder=\"HH:mm:ss\" [(ngModel)]=\"element[column]\" [disabled]=\"element.editRow ? false : true\" />\n                                            <div *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                <select type=\"dropdown\" *ngIf=\"element.editRow\"  class=\"lop-input table-width\"  [class]=\"element.editRow ? 'input-box' : '' \"\n                                                [(ngModel)]=\"element[column]\">\n                                                <option [disabled]=\"element.editRow ? false : true\"  *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \" [value]=\"data.value || data.name\">{{data.name}}</option>\n                                                </select>\n                                                <input *ngIf=\"!element.editRow\" #editColElement  class=\"lop-input table-width\" [class]=\"element.editRow ? 'input-box' : '' \"  [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                [value]=\"element[column]\" [(ngModel)]=\"element[column]\" [readOnly]=\"true\">\n                                            </div>\n                                            \n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                         <div *ngIf=\"isEditRow\" class=\"eicon-container\" matTooltip=\"Edit Record\" style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\" fill=\"#6C757D\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n\n                                        <!--SKS15FEB25 Delete Button -->\n                                         <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" matTooltip=\"Delete Record\" style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\" style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                </svg>\n                                            </div>\n                                         </div>\n                                        \n                                        <!--SKS15FEB25 Render inline buttons up to Size -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"i < actionButtonArray?.size\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=button.tooltip \n                                                    (click)=\"actionButtonClicked(button)\"\n                                                    (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n                                                    (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                    <img #imgElement [src]=\"button.iconSrc\"\n                                                        (mouseenter)=\"imgElement.src = button.hoverIconSrc\"\n                                                        (mouseleave)=\"imgElement.src = button.iconSrc\">            \n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton.length > 0\" class=\"dropdown\">\n                                            <div class=\"clickable-img\"  (click)=\"toggleDropdown(i)\" style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\" width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                                    </svg>\n                                                </div>\n                                            </div>\n                                            \n                                            <div class=\"dropdown-menu\" [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton.length > 0 ? 1 : 0)) * 100 + '%'\" *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\"> \n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\"\n                                                        style=\"display: flex;\"\n                                                        type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n\n                                                        [matTooltip]=btn.tooltip\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn)\">\n                                                        <img [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">{{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>                                          \n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 No Data Row -->\n                        <div *ngIf=\"dataSource.data.length === 0\" class=\"\">\n                                No records/data found.\n                        </div>\n                    </div>\n                </ng-container>\n\n                <ng-template #loadingTemplate>\n                    <!--SKS15FEB25 Skeleton Loader -->\n                    <div class=\"skeleton-loader\">\n                        <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"skeleton-row\">\n                            <div *ngFor=\"let _ of displayedColumns\" class=\"skeleton-cell\"></div>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n            <!--SKS15FEB25 Pagination -->\n             <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \" (click)=\"addTableRecord(inlineElement)\"  matTooltip=\"Add Record\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\" viewBox=\"0 -960 960 960\" width=\"24\"><path d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\"/></svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"editColumn.length > 0  || tableSaveButton\" buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\" (buttonClickEmit)=\"saveButton()\" buttonValue=\"Save\"></nxt-button> \n                </div>\n                <nxt-pagination [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"totalCount\" [pageSize]=\"pageSize\"\n                    [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\" (event)=\"pageParams($event)\">\n                </nxt-pagination>\n             </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\" aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n      <div class=\"modal-content\">\n        <div class=\"modal-header\">\n          <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">Delete Record</b>\n          <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteModal = false\"></button>\n        </div>\n        <div class=\"modal-body\">\n          Are you sure want to delete the record ?\n        </div>\n        <div class=\"modal-footer\">\n          <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"  (click)=\"deleteModal = false\">No</button>\n          <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\" (click)=\"deleteRecordData()\">Yes</button>\n        </div>\n      </div>\n    </div>\n  </div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color)}.sticky-column{position:sticky;left:0;z-index:11;background:var(--header-bg)}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.skeleton-loader{padding:1rem}.skeleton-row{display:flex;margin-bottom:1rem}.skeleton-cell{height:20px;background:#fff;margin:0 .5rem;flex:1;border-radius:4px;animation:pulse 1.5s infinite}@keyframes pulse{0%{background:var(--header-bg)}50%{background:color-mix(in srgb,var(--header-bg) 80%,#0000)}to{background:var(--header-bg)}}.table-container{width:100%;height:450px;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;gap:7px}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:relative;left:14px;width:1.5px;background-color:#dddd}.resize-handle:hover{background-color:#2196f3}.columnDiv{display:flex;justify-content:space-between}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:15px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { data: [{
                 type: Input
             }], columns: [{