@rangertechnologies/ngnxt 2.1.227 → 2.1.229

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -7898,13 +7898,18 @@ class ListViewFilterComponent {
             this.selectedView = this.listViews[0].filterName;
             this.selectedViewPath = this.listViews[0].labelPath;
         }
+        else {
+            this.selectedViewPath = this.listViews[0].labelPath;
+        }
     }
     ngOnChanges(changes) {
         if (!this.selectedView && this.listViews?.length > 0) {
             this.selectedView = this.listViews[0].filterName;
             this.selectedViewPath = this.listViews[0].labelPath;
         }
-        console.log(this.tableFilterArray);
+        else {
+            this.selectedViewPath = this.listViews[0].labelPath;
+        }
     }
     get conditions() {
         return this.editingView.get('conditions');
@@ -7982,8 +7987,8 @@ class ListViewFilterComponent {
                 if (col.name == field.fieldName) {
                     this.columns.push(this.fb.group({
                         name: [field.label, Validators.required],
-                        sortable: [col.sortable],
-                        filterable: [col.filterable]
+                        sortable: [col.sortable || false],
+                        filterable: [col.filterable || false]
                     }));
                 }
             });
@@ -8007,8 +8012,8 @@ class ListViewFilterComponent {
         this.displayedColumns.forEach(field => {
             this.columns.push(this.fb.group({
                 name: [field.label, Validators.required],
-                sortable: [field.hyperLink],
-                filterable: [field.filter]
+                sortable: [field.hyperLink || false],
+                filterable: [field.filter || false]
             }));
         });
     }
@@ -8242,7 +8247,7 @@ class NxtDatatable {
     tableSaveButton = false; // save button for editing LOP in payroll table,  changed name from 'saveLOP'
     stickyColumn = false; // if the last column should be sticky, it should be sent as boolean value
     tableWidth = '100%'; // width of table can be adjusted from parent, by default it is 100%
-    actionColumHeader = 'Action'; // to change the header for action column
+    actionColumHeader = 'APP.ACTION'; // to change the header for action column
     actionButton; //to show button colum as action
     title; // the title for the table;
     isButtons; // is button present in table;
@@ -9682,7 +9687,7 @@ class NxtDatatable {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, deps: [{ token: i0.ChangeDetectorRef }, { token: TranslationService }, { token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", tableFilterData: "tableFilterData", 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", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableParamsEmit: "NxtTableParamsEmit", NxtTableFilterEmit: "NxtTableFilterEmit", 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>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n                    [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\"\n                    [displayedColumns] = 'columns'\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'APP.NOS' | customTranslate : 'Nos'}} </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </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\n                                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\"\n                                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\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"Search\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            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\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                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\"\n                                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\"\n                                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\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [buttonValue]=\"button.labelPath || button.label || button.name | customTranslate : button.label || button.name \" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [btnIconLeftSrc]=\"button.btnIconLeftSrc\"\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\" [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"  #tableContainer\n                (scroll)=\"onScroll(tableContainer)\">\n                <ng-container>\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 currentDisplayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\"\n                                    [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n                                    (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n                                                {{ currentTranslatePath[currentDisplayedColumns.indexOf(column)] || currentHeaderLabels[currentDisplayedColumns.indexOf(column)] | customTranslate : currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n                                                    style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                    viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                        stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle\n                                                        *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n                                                        cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                        {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                        === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span\n                                                        *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n                                                        class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\"\n                                                    class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\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\"\n                                                                            viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path\n                                                                                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\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                        </svg>\n                                                                        <input class=\"width-100\" type=\"text\"\n                                                                            placeholder=\"Search\"\n                                                                            [(ngModel)]=\"searchText\"\n                                                                            class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                    class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                    viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path\n                                                                        d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div\n                                                                    *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                        style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\"\n                                                                            [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                            [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                        <div class=\"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\"\n                                    style=\"padding: 12px !important;\">\n                                    {{actionColumHeader}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (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\" (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 currentDisplayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column\">\n                                    <div>\n                                        <div *ngIf=\"hyperLinkColumns?.includes(column)\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                    class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                    style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                    {{ ('-' | getValue: element : column) | date }}\n                                                </div>\n                                            </ng-container>\n                                            <ng-template #checkTime>\n                                                <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                    <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                        class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                        style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                        {{ ('-' | getValue: element : column) | time }}\n                                                    </div>\n                                                </ng-container>\n                                            </ng-template>\n                                            <ng-template #default>\n                                                <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                    class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                    style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                    {{ '-' | getValue: element : column }}\n                                                </div>\n                                            </ng-template>\n                                            <!--SKS15FEB25 rightnav column -->\n                                            <ng-container *ngIf=\"objectColumns?.includes(column)\">\n                                                <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n                                                    width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        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) && !fileColumns?.includes(column)\"\n                                                style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                    <!-- {{ getValue(element,column) | date }} -->\n                                                    {{ ('-' | getValue: element : column) | date }}\n                                                </ng-container>\n                                                <ng-template #checkTime>\n                                                    <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                        <!-- {{ getValue(element,column) | time }} -->\n                                                        {{ ('-' | getValue: element : column) | time }}\n                                                    </ng-container>\n                                                </ng-template>\n                                                <ng-template #default>\n                                                    <!-- {{ getValue(element,column)}} -->\n                                                    {{ '-' | getValue: 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)\"\n                                                        width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            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\"\n                                                            fill=\"#434555\" fill-opacity=\"0.5\" />\n                                                    </svg>\n                                                </ng-container>\n                                            </div>\n                                            <!-- SKS18MAR25 file column -->\n                                            <div *ngIf=\"fileColumns?.includes(column)\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                class=\"popover-container\">\n                                                <!-- Trigger -->\n                                                <div class=\"hover-base\">\n                                                    <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n                                                            stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n\n                                                <!-- Popover Content -->\n                                                <div class=\"hover-content\">\n                                                    <div class=\"expenseCon\">\n                                                        <div *ngFor=\"let data of element[column]\">\n                                                            <div class=\"cursor-pointer expense-file\"\n                                                                (click)=\"expenseAttachment(data)\">\n                                                                {{ data?.name }}\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 added input box for inline edit input-->\n                                        <div *ngIf=\"editColumn && editColumn.length > 0\">\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n                                                class=\"on-edit d-flex\">\n                                                <input #editColElement class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \"\n                                                    [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n                                                    [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') \"\n                                                class=\"on-edit d-flex\">\n                                                <input\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n                                                    #editColElement class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \"\n                                                    [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                    [readOnly]=\"element.editRow ? false : true\">\n                                                <input\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n                                                    type=\"time\" class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n                                                    (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                    [disabled]=\"element.editRow ? false : true\" />\n                                                <div\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                    <select type=\"dropdown\" *ngIf=\"element.editRow\"\n                                                        class=\"nxt-lop-input table-width\"\n                                                        style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                        [class]=\"element.editRow ? 'input-box' : '' \"\n                                                        (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n                                                        <option [disabled]=\"element.editRow ? false : true\"\n                                                            *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n                                                            [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n                                                    </select>\n                                                    <input *ngIf=\"!element.editRow\" #editColElement\n                                                        class=\"nxt-lop-input table-width\"\n                                                        style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                        [class]=\"element.editRow ? 'input-box' : '' \"\n                                                        [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                        [ngModel]=\"getValue(element,column)\"\n                                                        (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                        [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=\"{{ 'APP.EDIT_RECORD' | customTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        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\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | customTranslate : button.tooltip \"\n                                                    (click)=\"actionButtonClicked(button,element)\"\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 *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            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\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | customTranslate : btn.tooltip\" [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn,element)\">\n                                                        <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n                                                            {{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- SKS20MAR25 Summary Rows -->\n                        <ng-container\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                           <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.fieldName)\">{{ row.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.fieldName)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\" class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                           </ng-container>\n                           <!-- SKS13JUN25 full table summary row -->\n                           <ng-container *ngIf=\"isFullTableSummaryRow\">\n                            <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                              <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                              <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                {{ row.label }}\n                              </div>\n                          \n                              <!-- SKS13JUN25 summary cell -->\n                              <div *ngFor=\"let col of displayedColumns; let last = last\"\n                                    class=\"horizontal-summary-table-cell\"\n                                    style=\"text-align: left;\">\n                                @if (row?.columns?.includes(col)) {\n                                    {{ summaryValues[col] | number }}\n                                }\n                                </div>\n                              <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                              </div>\n                            </div>\n                          </ng-container>                          \n                        </ng-container>   \n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n             <!--SKS15FEB25 No Data Row -->\n             <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"no-data\">\n                {{'APP.NO_RECORDS_OR_DATA_FOUND' | customTranslate : 'No records/data found.'}}\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 \"\n                        (click)=\"addTableRecord(inlineElement)\" matTooltip=\"{{ 'APP.ADD_RECORD'| customTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    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\" />\n                            </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) && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\" buttonValue=\"{{ 'APP.SAVE' | customTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (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\"\n    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\">{{ 'APP.DELETE_RECORD'| customTranslate : 'Delete Record'}}</b>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteModal = false\"></button>\n            </div>\n            <div class=\"modal-body\">\n                {{ 'APP.ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| customTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                    (click)=\"deleteModal = false\">{{ 'APP.NO'| customTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'APP.YES'| customTranslate : '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;border-bottom:solid 1px var(--border-color);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)}.table-container{width:100%;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!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px;border-bottom:solid 1px var(--border-color)}.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}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode"], 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: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableFilterArray", "selectedView", "displayedColumns", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: CustomTranslatePipe, name: "customTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", tableFilterData: "tableFilterData", 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", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableParamsEmit: "NxtTableParamsEmit", NxtTableFilterEmit: "NxtTableFilterEmit", 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>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n                    [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\"\n                    [displayedColumns] = 'columns'\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'APP.NOS' | customTranslate : 'Nos'}} </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </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\n                                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\"\n                                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\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"{{ 'APP.SEARCH' | customTranslate : 'Search'  }}\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            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\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                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\"\n                                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\"\n                                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\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [buttonValue]=\"button.labelPath || button.label || button.name | customTranslate : button.label || button.name \" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [btnIconLeftSrc]=\"button.btnIconLeftSrc\"\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\" [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"  #tableContainer\n                (scroll)=\"onScroll(tableContainer)\">\n                <ng-container>\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 currentDisplayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\"\n                                    [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n                                    (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n                                                {{ currentTranslatePath[currentDisplayedColumns.indexOf(column)] || currentHeaderLabels[currentDisplayedColumns.indexOf(column)] | customTranslate : currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n                                                    style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                    viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                        stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle\n                                                        *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n                                                        cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                        {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                        === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span\n                                                        *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n                                                        class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\"\n                                                    class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\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\"\n                                                                            viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path\n                                                                                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\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                        </svg>\n                                                                        <input class=\"width-100\" type=\"text\"\n                                                                            placeholder=\"{{ 'APP.SEARCH' | customTranslate : 'Search'  }}\"\n                                                                            [(ngModel)]=\"searchText\"\n                                                                            class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                    class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                    viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path\n                                                                        d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div\n                                                                    *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                        style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\"\n                                                                            [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                            [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                        <div class=\"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\"\n                                    style=\"padding: 12px !important;\">\n                                    {{ actionColumHeader | customTranslate : 'Action'}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (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\" (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 currentDisplayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column\">\n                                    <div>\n                                        <div *ngIf=\"hyperLinkColumns?.includes(column)\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                    class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                    style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                    {{ ('-' | getValue: element : column) | date }}\n                                                </div>\n                                            </ng-container>\n                                            <ng-template #checkTime>\n                                                <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                    <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                        class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                        style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                        {{ ('-' | getValue: element : column) | time }}\n                                                    </div>\n                                                </ng-container>\n                                            </ng-template>\n                                            <ng-template #default>\n                                                <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                    class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                    style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                    {{ '-' | getValue: element : column }}\n                                                </div>\n                                            </ng-template>\n                                            <!--SKS15FEB25 rightnav column -->\n                                            <ng-container *ngIf=\"objectColumns?.includes(column)\">\n                                                <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n                                                    width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        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) && !fileColumns?.includes(column)\"\n                                                style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                    <!-- {{ getValue(element,column) | date }} -->\n                                                    {{ ('-' | getValue: element : column) | date }}\n                                                </ng-container>\n                                                <ng-template #checkTime>\n                                                    <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                        <!-- {{ getValue(element,column) | time }} -->\n                                                        {{ ('-' | getValue: element : column) | time }}\n                                                    </ng-container>\n                                                </ng-template>\n                                                <ng-template #default>\n                                                    <!-- {{ getValue(element,column)}} -->\n                                                    {{ '-' | getValue: 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)\"\n                                                        width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            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\"\n                                                            fill=\"#434555\" fill-opacity=\"0.5\" />\n                                                    </svg>\n                                                </ng-container>\n                                            </div>\n                                            <!-- SKS18MAR25 file column -->\n                                            <div *ngIf=\"fileColumns?.includes(column)\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                class=\"popover-container\">\n                                                <!-- Trigger -->\n                                                <div class=\"hover-base\">\n                                                    <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n                                                            stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n\n                                                <!-- Popover Content -->\n                                                <div class=\"hover-content\">\n                                                    <div class=\"expenseCon\">\n                                                        <div *ngFor=\"let data of element[column]\">\n                                                            <div class=\"cursor-pointer expense-file\"\n                                                                (click)=\"expenseAttachment(data)\">\n                                                                {{ data?.name }}\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 added input box for inline edit input-->\n                                        <div *ngIf=\"editColumn && editColumn.length > 0\">\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n                                                class=\"on-edit d-flex\">\n                                                <input #editColElement class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \"\n                                                    [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n                                                    [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') \"\n                                                class=\"on-edit d-flex\">\n                                                <input\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n                                                    #editColElement class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \"\n                                                    [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                    [readOnly]=\"element.editRow ? false : true\">\n                                                <input\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n                                                    type=\"time\" class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n                                                    (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                    [disabled]=\"element.editRow ? false : true\" />\n                                                <div\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                    <select type=\"dropdown\" *ngIf=\"element.editRow\"\n                                                        class=\"nxt-lop-input table-width\"\n                                                        style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                        [class]=\"element.editRow ? 'input-box' : '' \"\n                                                        (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n                                                        <option [disabled]=\"element.editRow ? false : true\"\n                                                            *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n                                                            [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n                                                    </select>\n                                                    <input *ngIf=\"!element.editRow\" #editColElement\n                                                        class=\"nxt-lop-input table-width\"\n                                                        style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                        [class]=\"element.editRow ? 'input-box' : '' \"\n                                                        [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                        [ngModel]=\"getValue(element,column)\"\n                                                        (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                        [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=\"{{ 'APP.EDIT_RECORD' | customTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        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\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | customTranslate : button.tooltip \"\n                                                    (click)=\"actionButtonClicked(button,element)\"\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 *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            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\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | customTranslate : btn.tooltip\" [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn,element)\">\n                                                        <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n                                                            {{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- SKS20MAR25 Summary Rows -->\n                        <ng-container\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                           <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.fieldName)\">{{ row.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.fieldName)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\" class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                           </ng-container>\n                           <!-- SKS13JUN25 full table summary row -->\n                           <ng-container *ngIf=\"isFullTableSummaryRow\">\n                            <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                              <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                              <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                {{ row.label }}\n                              </div>\n                          \n                              <!-- SKS13JUN25 summary cell -->\n                              <div *ngFor=\"let col of displayedColumns; let last = last\"\n                                    class=\"horizontal-summary-table-cell\"\n                                    style=\"text-align: left;\">\n                                @if (row?.columns?.includes(col)) {\n                                    {{ summaryValues[col] | number }}\n                                }\n                                </div>\n                              <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                              </div>\n                            </div>\n                          </ng-container>                          \n                        </ng-container>   \n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n             <!--SKS15FEB25 No Data Row -->\n             <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"no-data\">\n                {{'APP.NO_RECORDS_OR_DATA_FOUND' | customTranslate : 'No records/data found.'}}\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 \"\n                        (click)=\"addTableRecord(inlineElement)\" matTooltip=\"{{ 'APP.ADD_RECORD'| customTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    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\" />\n                            </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) && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\" buttonValue=\"{{ 'APP.SAVE' | customTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (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\"\n    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\">{{ 'APP.DELETE_RECORD'| customTranslate : 'Delete Record'}}</b>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteModal = false\"></button>\n            </div>\n            <div class=\"modal-body\">\n                {{ 'APP.ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| customTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                    (click)=\"deleteModal = false\">{{ 'APP.NO'| customTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'APP.YES'| customTranslate : '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;border-bottom:solid 1px var(--border-color);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)}.table-container{width:100%;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!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;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}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode"], 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: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableFilterArray", "selectedView", "displayedColumns", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: CustomTranslatePipe, name: "customTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, decorators: [{
             type: Component,
@@ -9703,7 +9708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ListViewFilterComponent,
                         CustomTranslatePipe
                         // RowResizerDirective
-                    ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n                    [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\"\n                    [displayedColumns] = 'columns'\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'APP.NOS' | customTranslate : 'Nos'}} </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </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\n                                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\"\n                                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\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"Search\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            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\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                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\"\n                                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\"\n                                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\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [buttonValue]=\"button.labelPath || button.label || button.name | customTranslate : button.label || button.name \" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [btnIconLeftSrc]=\"button.btnIconLeftSrc\"\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\" [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"  #tableContainer\n                (scroll)=\"onScroll(tableContainer)\">\n                <ng-container>\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 currentDisplayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\"\n                                    [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n                                    (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n                                                {{ currentTranslatePath[currentDisplayedColumns.indexOf(column)] || currentHeaderLabels[currentDisplayedColumns.indexOf(column)] | customTranslate : currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n                                                    style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                    viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                        stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle\n                                                        *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n                                                        cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                        {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                        === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span\n                                                        *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n                                                        class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\"\n                                                    class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\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\"\n                                                                            viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path\n                                                                                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\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                        </svg>\n                                                                        <input class=\"width-100\" type=\"text\"\n                                                                            placeholder=\"Search\"\n                                                                            [(ngModel)]=\"searchText\"\n                                                                            class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                    class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                    viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path\n                                                                        d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div\n                                                                    *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                        style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\"\n                                                                            [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                            [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                        <div class=\"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\"\n                                    style=\"padding: 12px !important;\">\n                                    {{actionColumHeader}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (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\" (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 currentDisplayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column\">\n                                    <div>\n                                        <div *ngIf=\"hyperLinkColumns?.includes(column)\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                    class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                    style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                    {{ ('-' | getValue: element : column) | date }}\n                                                </div>\n                                            </ng-container>\n                                            <ng-template #checkTime>\n                                                <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                    <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                        class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                        style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                        {{ ('-' | getValue: element : column) | time }}\n                                                    </div>\n                                                </ng-container>\n                                            </ng-template>\n                                            <ng-template #default>\n                                                <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                    class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                    style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                    {{ '-' | getValue: element : column }}\n                                                </div>\n                                            </ng-template>\n                                            <!--SKS15FEB25 rightnav column -->\n                                            <ng-container *ngIf=\"objectColumns?.includes(column)\">\n                                                <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n                                                    width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        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) && !fileColumns?.includes(column)\"\n                                                style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                    <!-- {{ getValue(element,column) | date }} -->\n                                                    {{ ('-' | getValue: element : column) | date }}\n                                                </ng-container>\n                                                <ng-template #checkTime>\n                                                    <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                        <!-- {{ getValue(element,column) | time }} -->\n                                                        {{ ('-' | getValue: element : column) | time }}\n                                                    </ng-container>\n                                                </ng-template>\n                                                <ng-template #default>\n                                                    <!-- {{ getValue(element,column)}} -->\n                                                    {{ '-' | getValue: 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)\"\n                                                        width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            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\"\n                                                            fill=\"#434555\" fill-opacity=\"0.5\" />\n                                                    </svg>\n                                                </ng-container>\n                                            </div>\n                                            <!-- SKS18MAR25 file column -->\n                                            <div *ngIf=\"fileColumns?.includes(column)\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                class=\"popover-container\">\n                                                <!-- Trigger -->\n                                                <div class=\"hover-base\">\n                                                    <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n                                                            stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n\n                                                <!-- Popover Content -->\n                                                <div class=\"hover-content\">\n                                                    <div class=\"expenseCon\">\n                                                        <div *ngFor=\"let data of element[column]\">\n                                                            <div class=\"cursor-pointer expense-file\"\n                                                                (click)=\"expenseAttachment(data)\">\n                                                                {{ data?.name }}\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 added input box for inline edit input-->\n                                        <div *ngIf=\"editColumn && editColumn.length > 0\">\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n                                                class=\"on-edit d-flex\">\n                                                <input #editColElement class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \"\n                                                    [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n                                                    [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') \"\n                                                class=\"on-edit d-flex\">\n                                                <input\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n                                                    #editColElement class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \"\n                                                    [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                    [readOnly]=\"element.editRow ? false : true\">\n                                                <input\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n                                                    type=\"time\" class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n                                                    (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                    [disabled]=\"element.editRow ? false : true\" />\n                                                <div\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                    <select type=\"dropdown\" *ngIf=\"element.editRow\"\n                                                        class=\"nxt-lop-input table-width\"\n                                                        style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                        [class]=\"element.editRow ? 'input-box' : '' \"\n                                                        (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n                                                        <option [disabled]=\"element.editRow ? false : true\"\n                                                            *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n                                                            [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n                                                    </select>\n                                                    <input *ngIf=\"!element.editRow\" #editColElement\n                                                        class=\"nxt-lop-input table-width\"\n                                                        style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                        [class]=\"element.editRow ? 'input-box' : '' \"\n                                                        [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                        [ngModel]=\"getValue(element,column)\"\n                                                        (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                        [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=\"{{ 'APP.EDIT_RECORD' | customTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        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\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | customTranslate : button.tooltip \"\n                                                    (click)=\"actionButtonClicked(button,element)\"\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 *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            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\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | customTranslate : btn.tooltip\" [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn,element)\">\n                                                        <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n                                                            {{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- SKS20MAR25 Summary Rows -->\n                        <ng-container\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                           <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.fieldName)\">{{ row.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.fieldName)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\" class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                           </ng-container>\n                           <!-- SKS13JUN25 full table summary row -->\n                           <ng-container *ngIf=\"isFullTableSummaryRow\">\n                            <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                              <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                              <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                {{ row.label }}\n                              </div>\n                          \n                              <!-- SKS13JUN25 summary cell -->\n                              <div *ngFor=\"let col of displayedColumns; let last = last\"\n                                    class=\"horizontal-summary-table-cell\"\n                                    style=\"text-align: left;\">\n                                @if (row?.columns?.includes(col)) {\n                                    {{ summaryValues[col] | number }}\n                                }\n                                </div>\n                              <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                              </div>\n                            </div>\n                          </ng-container>                          \n                        </ng-container>   \n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n             <!--SKS15FEB25 No Data Row -->\n             <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"no-data\">\n                {{'APP.NO_RECORDS_OR_DATA_FOUND' | customTranslate : 'No records/data found.'}}\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 \"\n                        (click)=\"addTableRecord(inlineElement)\" matTooltip=\"{{ 'APP.ADD_RECORD'| customTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    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\" />\n                            </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) && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\" buttonValue=\"{{ 'APP.SAVE' | customTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (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\"\n    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\">{{ 'APP.DELETE_RECORD'| customTranslate : 'Delete Record'}}</b>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteModal = false\"></button>\n            </div>\n            <div class=\"modal-body\">\n                {{ 'APP.ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| customTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                    (click)=\"deleteModal = false\">{{ 'APP.NO'| customTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'APP.YES'| customTranslate : '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;border-bottom:solid 1px var(--border-color);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)}.table-container{width:100%;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!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px;border-bottom:solid 1px var(--border-color)}.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}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}\n"] }]
+                    ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n                    [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\"\n                    [displayedColumns] = 'columns'\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'APP.NOS' | customTranslate : 'Nos'}} </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </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\n                                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\"\n                                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\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"{{ 'APP.SEARCH' | customTranslate : 'Search'  }}\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            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\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                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\"\n                                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\"\n                                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\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [buttonValue]=\"button.labelPath || button.label || button.name | customTranslate : button.label || button.name \" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [btnIconLeftSrc]=\"button.btnIconLeftSrc\"\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\" [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"  #tableContainer\n                (scroll)=\"onScroll(tableContainer)\">\n                <ng-container>\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 currentDisplayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\"\n                                    [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n                                    (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n                                                {{ currentTranslatePath[currentDisplayedColumns.indexOf(column)] || currentHeaderLabels[currentDisplayedColumns.indexOf(column)] | customTranslate : currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n                                                    style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                    viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                        stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle\n                                                        *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n                                                        cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                        {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                        === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span\n                                                        *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n                                                        class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\"\n                                                    class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\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\"\n                                                                            viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path\n                                                                                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\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                        </svg>\n                                                                        <input class=\"width-100\" type=\"text\"\n                                                                            placeholder=\"{{ 'APP.SEARCH' | customTranslate : 'Search'  }}\"\n                                                                            [(ngModel)]=\"searchText\"\n                                                                            class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                    class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                    viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path\n                                                                        d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div\n                                                                    *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                        style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\"\n                                                                            [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                            [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                        <div class=\"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\"\n                                    style=\"padding: 12px !important;\">\n                                    {{ actionColumHeader | customTranslate : 'Action'}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (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\" (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 currentDisplayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column\">\n                                    <div>\n                                        <div *ngIf=\"hyperLinkColumns?.includes(column)\">\n                                            <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                    class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                    style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                    {{ ('-' | getValue: element : column) | date }}\n                                                </div>\n                                            </ng-container>\n                                            <ng-template #checkTime>\n                                                <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                    <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                        class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                        style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                        {{ ('-' | getValue: element : column) | time }}\n                                                    </div>\n                                                </ng-container>\n                                            </ng-template>\n                                            <ng-template #default>\n                                                <div (click)=\"onClickHyperlink(column,element, checkHyperlinkCheck(column))\"\n                                                    class=\"{{checkHyperlinkCheck(column) ? ' hyper-link clickable ' : ''}} ellipsis\"\n                                                    style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                    {{ '-' | getValue: element : column }}\n                                                </div>\n                                            </ng-template>\n                                            <!--SKS15FEB25 rightnav column -->\n                                            <ng-container *ngIf=\"objectColumns?.includes(column)\">\n                                                <svg class=\"ms-2\" (click)=\"onSideNavInfoClick(element, column)\"\n                                                    width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        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) && !fileColumns?.includes(column)\"\n                                                style=\"font-size: {{rowTextSize ? rowTextSize : '13px'}}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                                <ng-container *ngIf=\"isDateColumn(column); else checkTime\">\n                                                    <!-- {{ getValue(element,column) | date }} -->\n                                                    {{ ('-' | getValue: element : column) | date }}\n                                                </ng-container>\n                                                <ng-template #checkTime>\n                                                    <ng-container *ngIf=\"isTimeColumn(column); else default\">\n                                                        <!-- {{ getValue(element,column) | time }} -->\n                                                        {{ ('-' | getValue: element : column) | time }}\n                                                    </ng-container>\n                                                </ng-template>\n                                                <ng-template #default>\n                                                    <!-- {{ getValue(element,column)}} -->\n                                                    {{ '-' | getValue: 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)\"\n                                                        width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            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\"\n                                                            fill=\"#434555\" fill-opacity=\"0.5\" />\n                                                    </svg>\n                                                </ng-container>\n                                            </div>\n                                            <!-- SKS18MAR25 file column -->\n                                            <div *ngIf=\"fileColumns?.includes(column)\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                class=\"popover-container\">\n                                                <!-- Trigger -->\n                                                <div class=\"hover-base\">\n                                                    <svg width=\"14\" height=\"16\" viewBox=\"0 0 14 16\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M13 7.78525L7.04859 13.7602C6.81767 13.9945 6.54217 14.1805 6.23819 14.3076C5.9342 14.4346 5.60784 14.5 5.27817 14.5C4.94849 14.5 4.62213 14.4346 4.31814 14.3076C4.01416 14.1805 3.73866 13.9945 3.50774 13.7602L1.72732 11.9578C1.26124 11.4864 1 10.8516 1 10.1902C1 9.52876 1.26124 8.89388 1.72732 8.42257L8.06883 2.08913C8.2548 1.90245 8.47605 1.75429 8.71983 1.65317C8.96361 1.55206 9.22508 1.5 9.48917 1.5C9.75325 1.5 10.0147 1.55206 10.2585 1.65317C10.5023 1.75429 10.7235 1.90245 10.9095 2.08913L11.6197 2.79616C11.8072 2.98131 11.956 3.20159 12.0576 3.44429C12.1591 3.68699 12.2114 3.94731 12.2114 4.21023C12.2114 4.47316 12.1591 4.73348 12.0576 4.97618C11.956 5.21888 11.8072 5.43916 11.6197 5.62431L5.99834 11.2408C5.90535 11.3341 5.79472 11.4082 5.67284 11.4587C5.55095 11.5093 5.42021 11.5353 5.28817 11.5353C5.15612 11.5353 5.02539 11.5093 4.9035 11.4587C4.78161 11.4082 4.67098 11.3341 4.578 11.2408L4.22791 10.8823C4.13416 10.7897 4.05975 10.6795 4.00897 10.5582C3.95819 10.4368 3.93205 10.3067 3.93205 10.1752C3.93205 10.0438 3.95819 9.91361 4.00897 9.79226C4.05975 9.67091 4.13416 9.56077 4.22791 9.46819L7.99881 5.74381\"\n                                                            stroke=\"#434555\" stroke-width=\"1.3\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n\n                                                <!-- Popover Content -->\n                                                <div class=\"hover-content\">\n                                                    <div class=\"expenseCon\">\n                                                        <div *ngFor=\"let data of element[column]\">\n                                                            <div class=\"cursor-pointer expense-file\"\n                                                                (click)=\"expenseAttachment(data)\">\n                                                                {{ data?.name }}\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 added input box for inline edit input-->\n                                        <div *ngIf=\"editColumn && editColumn.length > 0\">\n                                            <div *ngIf=\" ('-' | editColumnCheck: column : editColumn) === ('string') \"\n                                                class=\"on-edit d-flex\">\n                                                <input #editColElement class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \"\n                                                    [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    (ngModelChange)=\"updateEdit(i,$event, element,column)\"\n                                                    [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') \"\n                                                class=\"on-edit d-flex\">\n                                                <input\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('text') \"\n                                                    #editColElement class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \"\n                                                    [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                    [readOnly]=\"element.editRow ? false : true\">\n                                                <input\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('time') \"\n                                                    type=\"time\" class=\"nxt-lop-input table-width\"\n                                                    style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                    [ngModel]=\"getValue(element,column)\"\n                                                    [class]=\"element.editRow ? 'input-box' : '' \" placeholder=\"HH:mm:ss\"\n                                                    (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                    [disabled]=\"element.editRow ? false : true\" />\n                                                <div\n                                                    *ngIf=\" ('-' | editColumnType: column : editColumn) === ('dropdown') \">\n                                                    <select type=\"dropdown\" *ngIf=\"element.editRow\"\n                                                        class=\"nxt-lop-input table-width\"\n                                                        style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                        [class]=\"element.editRow ? 'input-box' : '' \"\n                                                        (ngModelChange)=\"updateEdit(i,$event,element,column)\">\n                                                        <option [disabled]=\"element.editRow ? false : true\"\n                                                            *ngFor=\"let data of [] | editColumnDropdown: column : editColumn \"\n                                                            [ngModel]=\"data.value || data.name\">{{data.name}}</option>\n                                                    </select>\n                                                    <input *ngIf=\"!element.editRow\" #editColElement\n                                                        class=\"nxt-lop-input table-width\"\n                                                        style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\"\n                                                        [class]=\"element.editRow ? 'input-box' : '' \"\n                                                        [attr.placeholder]=\"element.editRow ? 'Enter' : ''\"\n                                                        [ngModel]=\"getValue(element,column)\"\n                                                        (ngModelChange)=\"updateEdit(i,$event,element,column)\"\n                                                        [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=\"{{ 'APP.EDIT_RECORD' | customTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\" [matTooltip]=\"'APP.DELETE_RECORD' | customTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        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\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        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\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | customTranslate : button.tooltip \"\n                                                    (click)=\"actionButtonClicked(button,element)\"\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 *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            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\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | customTranslate : btn.tooltip\" [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn,element)\">\n                                                        <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n                                                            {{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- SKS20MAR25 Summary Rows -->\n                        <ng-container\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                           <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.fieldName)\">{{ row.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.fieldName\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.fieldName)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\" class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                           </ng-container>\n                           <!-- SKS13JUN25 full table summary row -->\n                           <ng-container *ngIf=\"isFullTableSummaryRow\">\n                            <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                              <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                              <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                {{ row.label }}\n                              </div>\n                          \n                              <!-- SKS13JUN25 summary cell -->\n                              <div *ngFor=\"let col of displayedColumns; let last = last\"\n                                    class=\"horizontal-summary-table-cell\"\n                                    style=\"text-align: left;\">\n                                @if (row?.columns?.includes(col)) {\n                                    {{ summaryValues[col] | number }}\n                                }\n                                </div>\n                              <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                              </div>\n                            </div>\n                          </ng-container>                          \n                        </ng-container>   \n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n             <!--SKS15FEB25 No Data Row -->\n             <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"no-data\">\n                {{'APP.NO_RECORDS_OR_DATA_FOUND' | customTranslate : 'No records/data found.'}}\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 \"\n                        (click)=\"addTableRecord(inlineElement)\" matTooltip=\"{{ 'APP.ADD_RECORD'| customTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    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\" />\n                            </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) && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\" buttonValue=\"{{ 'APP.SAVE' | customTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\" [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (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\"\n    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\">{{ 'APP.DELETE_RECORD'| customTranslate : 'Delete Record'}}</b>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteModal = false\"></button>\n            </div>\n            <div class=\"modal-body\">\n                {{ 'APP.ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| customTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                    (click)=\"deleteModal = false\">{{ 'APP.NO'| customTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'APP.YES'| customTranslate : '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;border-bottom:solid 1px var(--border-color);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)}.table-container{width:100%;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!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;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}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:1px;right:1px;width:15px;height:15px;background:#f32121;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#1976d2!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
                 type: Input
             }], tableFilterData: [{
@@ -61153,7 +61158,7 @@ const VERSION = {
     "semver": null,
     "suffix": "73e492bd-dirty",
     "semverString": null,
-    "version": "2.1.227"
+    "version": "2.1.229"
 };
 /* tslint:enable */