@rangertechnologies/ngnxt 2.1.137 → 2.1.139

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -4894,6 +4894,7 @@ class ListViewFilterComponent {
     listViews = [];
     tableFilterArray = [];
     selectedView = '';
+    displayedColumns = [];
     availableOperators = ['=', '!=', '>', '<', '>=', '<=', 'contains', 'not contains', 'starts with', 'ends with'];
     listViewEmit = new EventEmitter();
     isDropdownOpen = false;
@@ -4911,7 +4912,6 @@ class ListViewFilterComponent {
     constructor(fb) {
         this.fb = fb;
         this.editingView = this.fb.group({
-            id: [''],
             filterName: ['', Validators.required],
             order: [0, [Validators.required, Validators.min(0)]],
             isDefault: [false],
@@ -4920,10 +4920,27 @@ class ListViewFilterComponent {
         });
     }
     ngOnInit() {
-        if (!this.selectedView && this.listViews.length > 0) {
+        if (!this.selectedView && this.listViews?.length > 0) {
             this.selectedView = this.listViews[0].filterName;
         }
-        if (!this.tableFilterArray || this.tableFilterArray.length === 0 && this.listViews.length > 0) {
+        if ((!this.tableFilterArray || this.tableFilterArray.length === 0) && this.listViews?.length > 0) {
+            this.listViewEmit.emit({ "action": 'filterGet' });
+        }
+        // SKS3MAY25 Compute columnValuesMap and columnNames from tableFilterArray
+        this.columnValuesMap = Array.isArray(this.tableFilterArray)
+            ? this.tableFilterArray.reduce((acc, curr) => {
+                const key = Object.keys(curr)[0];
+                acc[key] = curr[key];
+                return acc;
+            }, {})
+            : {};
+        this.columnNames = Object.keys(this.columnValuesMap);
+    }
+    ngOnChanges(changes) {
+        if (!this.selectedView && this.listViews?.length > 0) {
+            this.selectedView = this.listViews[0].filterName;
+        }
+        if ((!this.tableFilterArray || this.tableFilterArray.length === 0) && this.listViews?.length > 0) {
             this.listViewEmit.emit({ "action": 'filterGet' });
         }
         // SKS3MAY25 Compute columnValuesMap and columnNames from tableFilterArray
@@ -4974,7 +4991,7 @@ class ListViewFilterComponent {
         this.isColumnNameDropdownOpen.splice(index, 1);
     }
     toggleDropdown() {
-        if (!this.tableFilterArray || this.tableFilterArray.length === 0 && this.listViews.length > 0) {
+        if ((!this.tableFilterArray || this.tableFilterArray.length === 0) && this.listViews?.length > 0) {
             this.listViewEmit.emit({ "action": 'filterGet' });
         }
         this.isDropdownOpen = !this.isDropdownOpen;
@@ -4997,7 +5014,6 @@ class ListViewFilterComponent {
         while (this.columns.length)
             this.columns.removeAt(0);
         this.editingView.patchValue({
-            id: view.id,
             filterName: view.filterName,
             order: view.order,
             isDefault: view.isDefault
@@ -5030,38 +5046,30 @@ class ListViewFilterComponent {
             this.conditions.removeAt(0);
         while (this.columns.length)
             this.columns.removeAt(0);
-        const newId = this.generateId();
         this.editingView.patchValue({
-            id: newId,
-            order: this.listViews.length,
+            order: this.listViews?.length,
             isDefault: false
         });
         this.addFilter();
         this.addColumn();
         this.isDropdownOpen = false;
     }
-    // SKS3MAY25 Generates a unique ID for a new list view
-    generateId() {
-        return Date.now().toString();
-    }
     // SKS3MAY25 Saves the currently edited or added list view
     save() {
         if (this.editingView.valid) {
             const formValue = this.editingView.value;
             const listView = {
-                id: formValue.id || this.generateId(),
                 filterName: formValue.filterName,
                 order: formValue.order,
                 isDefault: formValue.isDefault,
                 conditions: formValue.conditions,
                 columns: formValue.columns
             };
-            if (listView.isDefault) {
-                this.listViews.forEach(view => {
-                    if (view.id !== listView.id)
-                        view.isDefault = false;
-                });
-            }
+            // if (listView.isDefault) {
+            //   this.listViews.forEach(view => {
+            //     if (view.id !== listView.id) view.isDefault = false;
+            //   });
+            // }
             // const existingIndex = this.listViews.findIndex(view => view.id === listView.id);
             // if (existingIndex >= 0) {
             //   this.listViews[existingIndex] = { ...listView };
@@ -5070,7 +5078,7 @@ class ListViewFilterComponent {
             // }
             this.listViews.sort((a, b) => a.order - b.order);
             this.selectedView = listView.filterName;
-            this.listViewEmit.emit({ 'action': 'saved', "data": listView });
+            this.listViewEmit.emit({ 'action': 'save', "data": listView });
             this.closeModal();
         }
     }
@@ -5101,11 +5109,11 @@ class ListViewFilterComponent {
     // SKS3MAY25 Deletes the selected list view after confirmation
     deleteConfirmed() {
         if (this.viewToDelete) {
-            const index = this.listViews.findIndex(view => view.id === this.viewToDelete?.id);
+            const index = this.listViews.findIndex(view => view.filterName === this.viewToDelete?.filterName);
             if (index >= 0) {
                 // this.listViews.splice(index, 1);
                 if (this.selectedView === this.viewToDelete.filterName) {
-                    this.selectedView = this.listViews.length > 0 ? this.listViews[0].filterName : '';
+                    this.selectedView = this.listViews?.length > 0 ? this.listViews[0].filterName : '';
                     this.listViewEmit.emit({ 'action': 'select', 'data': this.selectedView });
                 }
                 this.listViewEmit.emit({ 'action': 'delete', "data": this.viewToDelete });
@@ -5191,17 +5199,19 @@ class ListViewFilterComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListViewFilterComponent, deps: [{ token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListViewFilterComponent, isStandalone: true, selector: "app-list-view-filter", inputs: { listViews: "listViews", tableFilterArray: "tableFilterArray", selectedView: "selectedView", availableOperators: "availableOperators" }, outputs: { listViewEmit: "listViewEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"list-view-filter\">\n    <div class=\"custom-dropdown\">\n        <div class=\"filter-label\">Data Related to</div>\n        <div class=\"select-wrapper\">\n            <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n                <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <div class=\"custom-dropdown\">\n                <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n                    {{ selectedView || 'Select a view' }}\n                    <svg class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <!-- SKS3MAY25 list view Drop down-->\n        <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n            <ul class=\"dropdown-options\">\n                <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (mouseenter)=\"showActions(view)\" (mouseleave)=\"hideActions()\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n                    <span class=\"view-name\">{{ view.filterName }}</span>\n                    <div class=\"actions\" *ngIf=\"view.showActions\">\n                        <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M9.32923 3.98726L12.0126 6.67059M9.32923 3.98726L2.50008 10.8164V13.4997H5.18342L12.0126 6.67059M9.32923 3.98726L12.0126 1.30392L14.6959 3.98726L12.0126 6.67059\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                        <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n            <div class=\"add-filter\" (click)=\"startAdd()\">\n                <div class=\"add-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n                <span>New List View</span>\n            </div>\n        </div>\n    </div>\n     <!-- SKS3MAY25 Add New List View-->\n    <div *ngIf=\"isModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>{{ isAdding ? 'Add New List View' : 'Edit List View' }}</h2>\n            <form [formGroup]=\"editingView\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <label>Name:</label>\n                        <input formControlName=\"filterName\" placeholder=\"Enter list view name\" required>\n                        <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n                            Name is required.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Order:</label>\n                        <input type=\"number\" formControlName=\"order\" placeholder=\"Enter display order\" required>\n                        <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n                            Order is required and must be a number.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Default View:</label>\n                        <div class=\"toggle-wrapper small\">\n                            <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n                            <label for=\"isDefault\" class=\"toggle-button\"></label>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Filters</h3>\n                    <span class=\"section-description\">Define conditions for filtered list view</span>\n                </div>\n                <div formArrayName=\"conditions\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"column-cell\">Column</div>\n                        <div class=\"operator-cell\">Operator</div>\n                        <div class=\"value-cell\">Value</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n                        <div class=\"column-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"field\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" placeholder=\"Enter or select column\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n                                    <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field)\">\n                                        {{ field }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n                                Column is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"operator-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"operator\" (focus)=\"onFocus('operator', i)\" (blur)=\"onBlur('operator', i)\" placeholder=\"Enter or select operator\">\n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                    <div *ngFor=\"let operator of getFilteredOperators(conditions.at(i).get('operator').value)\" class=\"dropdown-item\" (click)=\"selectOption('operator', i, operator)\">\n                                        {{ operator }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n                                Operator is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"value-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" placeholder=\"Enter or select value\">\n                                <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value).length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n                                        {{ val }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n                                Value is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" matTooltip=\"Add Filter\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Filter</span>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Columns</h3>\n                    <span class=\"section-description\">Configure columns to display in this view</span>\n                </div>\n                <div formArrayName=\"columns\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"name-cell\">Column Name</div>\n                        <div class=\"bool-cell\">Sortable</div>\n                        <div class=\"bool-cell\">Filterable</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n                        <div class=\"name-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"name\" (focus)=\"onFocus('columnName', i)\" (blur)=\"onBlur('columnName', i)\" placeholder=\"Enter or select column name\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of getFilteredColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName)\">\n                                        {{ colName }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n                                Column name is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n                                <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n                                <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" matTooltip=\"Add Column\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Column</span>\n                    </div>\n                </div>\n\n                <div class=\"form-actions\">\n                    <button type=\"button\" (click)=\"save()\" [disabled]=\"!editingView.valid\">Save</button>\n                    <button type=\"button\" (click)=\"closeModal()\">Cancel</button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <!-- SKS3MAY25 Delete List View-->\n    <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>Delete List View</h2>\n            <p>Are you sure you want to delete \"{{ viewToDelete?.filterName }}\"?</p>\n            <div class=\"form-delete\">\n                <button type=\"button\" (click)=\"deleteConfirmed()\">Delete</button>\n                <button type=\"button\" (click)=\"closeDeleteModal()\">Cancel</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".list-view-filter{padding-left:10px;padding-right:10px}.filter-label{font-size:11px;color:#747577;margin-right:8px}.select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:16px;font-weight:700}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px;margin-left:8px}.dropdown-options-container{position:absolute;top:100%;left:0;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1}.dropdown-options li.selected{background-color:#f1f1f1;font-weight:600}.list-view-item{display:flex;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#f8f9fa}.view-name{flex:1}.actions{display:flex;gap:10px}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{margin:24px 0 12px;border-bottom:1px solid #e0e0e0;padding-bottom:8px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px;margin-bottom:20px}.table-header{display:grid;background-color:#f8f9fa;font-weight:600;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.custom-select{position:relative;width:100%}.custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex;width:38px}.delete-icon{padding:2px 4px;border-radius:5px;background-color:#feeeed;align-content:center;width:32px;display:flex;justify-content:center;align-items:center}.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}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{flex:1;min-width:0}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ListViewFilterComponent, isStandalone: true, selector: "app-list-view-filter", inputs: { listViews: "listViews", tableFilterArray: "tableFilterArray", selectedView: "selectedView", displayedColumns: "displayedColumns", availableOperators: "availableOperators" }, outputs: { listViewEmit: "listViewEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"list-view-filter\">\n    <div class=\"custom-dropdown\">\n        <div class=\"filter-label\">Data Related to</div>\n        <div class=\"select-wrapper\">\n            <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n                <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <div class=\"custom-dropdown\">\n                <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n                    {{ selectedView || 'Select a view' }}\n                    <svg class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <!-- SKS3MAY25 list view Drop down-->\n        <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n            <ul class=\"dropdown-options\">\n                <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (mouseenter)=\"showActions(view)\" (mouseleave)=\"hideActions()\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n                    <span class=\"view-name\">{{ view.filterName }}</span>\n                    <div class=\"actions\" *ngIf=\"view.showActions\">\n                        <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M9.32923 3.98726L12.0126 6.67059M9.32923 3.98726L2.50008 10.8164V13.4997H5.18342L12.0126 6.67059M9.32923 3.98726L12.0126 1.30392L14.6959 3.98726L12.0126 6.67059\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                        <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n            <div class=\"add-filter\" (click)=\"startAdd()\">\n                <div class=\"add-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n                <span>New List View</span>\n            </div>\n        </div>\n    </div>\n     <!-- SKS3MAY25 Add New List View-->\n    <div *ngIf=\"isModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>{{ isAdding ? 'Add New List View' : 'Edit List View' }}</h2>\n            <form [formGroup]=\"editingView\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <label>Name:</label>\n                        <input formControlName=\"filterName\" placeholder=\"Enter list view name\" required>\n                        <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n                            Name is required.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Order:</label>\n                        <input type=\"number\" formControlName=\"order\" placeholder=\"Enter display order\" required>\n                        <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n                            Order is required and must be a number.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Default View:</label>\n                        <div class=\"toggle-wrapper small\">\n                            <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n                            <label for=\"isDefault\" class=\"toggle-button\"></label>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Filters</h3>\n                    <span class=\"section-description\">Define conditions for filtered list view</span>\n                </div>\n                <div formArrayName=\"conditions\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"column-cell\">Column</div>\n                        <div class=\"operator-cell\">Operator</div>\n                        <div class=\"value-cell\">Value</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n                        <div class=\"column-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"field\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" placeholder=\"Enter or select column\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n                                    <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field)\">\n                                        {{ field }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n                                Column is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"operator-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"operator\" (focus)=\"onFocus('operator', i)\" (blur)=\"onBlur('operator', i)\" placeholder=\"Enter or select operator\">\n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                    <div *ngFor=\"let operator of getFilteredOperators(conditions.at(i).get('operator').value)\" class=\"dropdown-item\" (click)=\"selectOption('operator', i, operator)\">\n                                        {{ operator }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n                                Operator is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"value-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" placeholder=\"Enter or select value\">\n                                <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value).length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n                                        {{ val }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n                                Value is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" matTooltip=\"Add Filter\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Filter</span>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Columns</h3>\n                    <span class=\"section-description\">Configure columns to display in this view</span>\n                </div>\n                <div formArrayName=\"columns\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"name-cell\">Column Name</div>\n                        <div class=\"bool-cell\">Sortable</div>\n                        <div class=\"bool-cell\">Filterable</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n                        <div class=\"name-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"name\" (focus)=\"onFocus('columnName', i)\" (blur)=\"onBlur('columnName', i)\" placeholder=\"Enter or select column name\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of displayedColumns\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName)\">\n                                        {{ colName }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n                                Column name is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n                                <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n                                <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" matTooltip=\"Add Column\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Column</span>\n                    </div>\n                </div>\n\n                <div class=\"form-actions\">\n                    <button type=\"button\" (click)=\"save()\" [disabled]=\"!editingView.valid\">Save</button>\n                    <button type=\"button\" (click)=\"closeModal()\">Cancel</button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <!-- SKS3MAY25 Delete List View-->\n    <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>Delete List View</h2>\n            <p>Are you sure you want to delete \"{{ viewToDelete?.filterName }}\"?</p>\n            <div class=\"form-delete\">\n                <button type=\"button\" (click)=\"deleteConfirmed()\">Delete</button>\n                <button type=\"button\" (click)=\"closeDeleteModal()\">Cancel</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".list-view-filter{padding-left:10px;padding-right:10px}.filter-label{font-size:11px;color:#747577;margin-right:8px}.select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:16px;font-weight:700}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px;margin-left:8px}.dropdown-options-container{position:absolute;top:100%;left:0;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1}.dropdown-options li.selected{background-color:#f1f1f1;font-weight:600}.list-view-item{display:flex;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#f8f9fa}.view-name{flex:1}.actions{display:flex;gap:10px}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{margin:24px 0 12px;border-bottom:1px solid #e0e0e0;padding-bottom:8px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px;margin-bottom:20px}.table-header{display:grid;background-color:#f8f9fa;font-weight:600;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.custom-select{position:relative;width:100%}.custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex;width:38px}.delete-icon{padding:2px 4px;border-radius:5px;background-color:#feeeed;align-content:center;width:32px;display:flex;justify-content:center;align-items:center}.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}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{flex:1;min-width:0}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ListViewFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-list-view-filter', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"list-view-filter\">\n    <div class=\"custom-dropdown\">\n        <div class=\"filter-label\">Data Related to</div>\n        <div class=\"select-wrapper\">\n            <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n                <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <div class=\"custom-dropdown\">\n                <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n                    {{ selectedView || 'Select a view' }}\n                    <svg class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <!-- SKS3MAY25 list view Drop down-->\n        <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n            <ul class=\"dropdown-options\">\n                <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (mouseenter)=\"showActions(view)\" (mouseleave)=\"hideActions()\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n                    <span class=\"view-name\">{{ view.filterName }}</span>\n                    <div class=\"actions\" *ngIf=\"view.showActions\">\n                        <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M9.32923 3.98726L12.0126 6.67059M9.32923 3.98726L2.50008 10.8164V13.4997H5.18342L12.0126 6.67059M9.32923 3.98726L12.0126 1.30392L14.6959 3.98726L12.0126 6.67059\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                        <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n            <div class=\"add-filter\" (click)=\"startAdd()\">\n                <div class=\"add-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n                <span>New List View</span>\n            </div>\n        </div>\n    </div>\n     <!-- SKS3MAY25 Add New List View-->\n    <div *ngIf=\"isModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>{{ isAdding ? 'Add New List View' : 'Edit List View' }}</h2>\n            <form [formGroup]=\"editingView\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <label>Name:</label>\n                        <input formControlName=\"filterName\" placeholder=\"Enter list view name\" required>\n                        <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n                            Name is required.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Order:</label>\n                        <input type=\"number\" formControlName=\"order\" placeholder=\"Enter display order\" required>\n                        <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n                            Order is required and must be a number.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Default View:</label>\n                        <div class=\"toggle-wrapper small\">\n                            <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n                            <label for=\"isDefault\" class=\"toggle-button\"></label>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Filters</h3>\n                    <span class=\"section-description\">Define conditions for filtered list view</span>\n                </div>\n                <div formArrayName=\"conditions\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"column-cell\">Column</div>\n                        <div class=\"operator-cell\">Operator</div>\n                        <div class=\"value-cell\">Value</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n                        <div class=\"column-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"field\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" placeholder=\"Enter or select column\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n                                    <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field)\">\n                                        {{ field }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n                                Column is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"operator-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"operator\" (focus)=\"onFocus('operator', i)\" (blur)=\"onBlur('operator', i)\" placeholder=\"Enter or select operator\">\n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                    <div *ngFor=\"let operator of getFilteredOperators(conditions.at(i).get('operator').value)\" class=\"dropdown-item\" (click)=\"selectOption('operator', i, operator)\">\n                                        {{ operator }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n                                Operator is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"value-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" placeholder=\"Enter or select value\">\n                                <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value).length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n                                        {{ val }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n                                Value is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" matTooltip=\"Add Filter\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Filter</span>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Columns</h3>\n                    <span class=\"section-description\">Configure columns to display in this view</span>\n                </div>\n                <div formArrayName=\"columns\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"name-cell\">Column Name</div>\n                        <div class=\"bool-cell\">Sortable</div>\n                        <div class=\"bool-cell\">Filterable</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n                        <div class=\"name-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"name\" (focus)=\"onFocus('columnName', i)\" (blur)=\"onBlur('columnName', i)\" placeholder=\"Enter or select column name\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of getFilteredColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName)\">\n                                        {{ colName }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n                                Column name is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n                                <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n                                <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" matTooltip=\"Add Column\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Column</span>\n                    </div>\n                </div>\n\n                <div class=\"form-actions\">\n                    <button type=\"button\" (click)=\"save()\" [disabled]=\"!editingView.valid\">Save</button>\n                    <button type=\"button\" (click)=\"closeModal()\">Cancel</button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <!-- SKS3MAY25 Delete List View-->\n    <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>Delete List View</h2>\n            <p>Are you sure you want to delete \"{{ viewToDelete?.filterName }}\"?</p>\n            <div class=\"form-delete\">\n                <button type=\"button\" (click)=\"deleteConfirmed()\">Delete</button>\n                <button type=\"button\" (click)=\"closeDeleteModal()\">Cancel</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".list-view-filter{padding-left:10px;padding-right:10px}.filter-label{font-size:11px;color:#747577;margin-right:8px}.select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:16px;font-weight:700}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px;margin-left:8px}.dropdown-options-container{position:absolute;top:100%;left:0;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1}.dropdown-options li.selected{background-color:#f1f1f1;font-weight:600}.list-view-item{display:flex;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#f8f9fa}.view-name{flex:1}.actions{display:flex;gap:10px}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{margin:24px 0 12px;border-bottom:1px solid #e0e0e0;padding-bottom:8px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px;margin-bottom:20px}.table-header{display:grid;background-color:#f8f9fa;font-weight:600;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.custom-select{position:relative;width:100%}.custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex;width:38px}.delete-icon{padding:2px 4px;border-radius:5px;background-color:#feeeed;align-content:center;width:32px;display:flex;justify-content:center;align-items:center}.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}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{flex:1;min-width:0}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}\n"] }]
+            args: [{ selector: 'app-list-view-filter', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"list-view-filter\">\n    <div class=\"custom-dropdown\">\n        <div class=\"filter-label\">Data Related to</div>\n        <div class=\"select-wrapper\">\n            <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n                <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <div class=\"custom-dropdown\">\n                <div class=\"selected-option\" (click)=\"toggleDropdown()\">\n                    {{ selectedView || 'Select a view' }}\n                    <svg class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <!-- SKS3MAY25 list view Drop down-->\n        <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n            <ul class=\"dropdown-options\">\n                <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (mouseenter)=\"showActions(view)\" (mouseleave)=\"hideActions()\" (click)=\"selectListView(view)\" class=\"list-view-item\">\n                    <span class=\"view-name\">{{ view.filterName }}</span>\n                    <div class=\"actions\" *ngIf=\"view.showActions\">\n                        <div class=\"edit-icon\" (click)=\"startEdit(view, $event)\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M9.32923 3.98726L12.0126 6.67059M9.32923 3.98726L2.50008 10.8164V13.4997H5.18342L12.0126 6.67059M9.32923 3.98726L12.0126 1.30392L14.6959 3.98726L12.0126 6.67059\" stroke=\"#000000\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                        <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\">\n                            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n            <div class=\"add-filter\" (click)=\"startAdd()\">\n                <div class=\"add-icon\">\n                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n                <span>New List View</span>\n            </div>\n        </div>\n    </div>\n     <!-- SKS3MAY25 Add New List View-->\n    <div *ngIf=\"isModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>{{ isAdding ? 'Add New List View' : 'Edit List View' }}</h2>\n            <form [formGroup]=\"editingView\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <label>Name:</label>\n                        <input formControlName=\"filterName\" placeholder=\"Enter list view name\" required>\n                        <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n                            Name is required.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Order:</label>\n                        <input type=\"number\" formControlName=\"order\" placeholder=\"Enter display order\" required>\n                        <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n                            Order is required and must be a number.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <label>Default View:</label>\n                        <div class=\"toggle-wrapper small\">\n                            <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n                            <label for=\"isDefault\" class=\"toggle-button\"></label>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Filters</h3>\n                    <span class=\"section-description\">Define conditions for filtered list view</span>\n                </div>\n                <div formArrayName=\"conditions\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"column-cell\">Column</div>\n                        <div class=\"operator-cell\">Operator</div>\n                        <div class=\"value-cell\">Value</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n                        <div class=\"column-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"field\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" placeholder=\"Enter or select column\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n                                    <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field)\">\n                                        {{ field }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n                                Column is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"operator-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"operator\" (focus)=\"onFocus('operator', i)\" (blur)=\"onBlur('operator', i)\" placeholder=\"Enter or select operator\">\n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                    <div *ngFor=\"let operator of getFilteredOperators(conditions.at(i).get('operator').value)\" class=\"dropdown-item\" (click)=\"selectOption('operator', i, operator)\">\n                                        {{ operator }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n                                Operator is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"value-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" placeholder=\"Enter or select value\">\n                                <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value).length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n                                        {{ val }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n                                Value is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" matTooltip=\"Add Filter\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Filter</span>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>Columns</h3>\n                    <span class=\"section-description\">Configure columns to display in this view</span>\n                </div>\n                <div formArrayName=\"columns\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"name-cell\">Column Name</div>\n                        <div class=\"bool-cell\">Sortable</div>\n                        <div class=\"bool-cell\">Filterable</div>\n                        <div class=\"action-cell\">Action</div>\n                    </div>\n                    \n                    <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n                        <div class=\"name-cell\">\n                            <div class=\"custom-select\">\n                                <input formControlName=\"name\" (focus)=\"onFocus('columnName', i)\" (blur)=\"onBlur('columnName', i)\" placeholder=\"Enter or select column name\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of displayedColumns\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName)\">\n                                        {{ colName }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n                                Column name is required.\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n                                <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n                                <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" matTooltip=\"Remove\">\n                                <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" matTooltip=\"Add Column\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <span>Add Column</span>\n                    </div>\n                </div>\n\n                <div class=\"form-actions\">\n                    <button type=\"button\" (click)=\"save()\" [disabled]=\"!editingView.valid\">Save</button>\n                    <button type=\"button\" (click)=\"closeModal()\">Cancel</button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <!-- SKS3MAY25 Delete List View-->\n    <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>Delete List View</h2>\n            <p>Are you sure you want to delete \"{{ viewToDelete?.filterName }}\"?</p>\n            <div class=\"form-delete\">\n                <button type=\"button\" (click)=\"deleteConfirmed()\">Delete</button>\n                <button type=\"button\" (click)=\"closeDeleteModal()\">Cancel</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".list-view-filter{padding-left:10px;padding-right:10px}.filter-label{font-size:11px;color:#747577;margin-right:8px}.select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:16px;font-weight:700}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px;margin-left:8px}.dropdown-options-container{position:absolute;top:100%;left:0;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1}.dropdown-options li.selected{background-color:#f1f1f1;font-weight:600}.list-view-item{display:flex;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#f8f9fa}.view-name{flex:1}.actions{display:flex;gap:10px}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{margin:24px 0 12px;border-bottom:1px solid #e0e0e0;padding-bottom:8px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px;margin-bottom:20px}.table-header{display:grid;background-color:#f8f9fa;font-weight:600;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.custom-select{position:relative;width:100%}.custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex;width:38px}.delete-icon{padding:2px 4px;border-radius:5px;background-color:#feeeed;align-content:center;width:32px;display:flex;justify-content:center;align-items:center}.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}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{flex:1;min-width:0}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: i3.FormBuilder }], propDecorators: { listViews: [{
                 type: Input
             }], tableFilterArray: [{
                 type: Input
             }], selectedView: [{
                 type: Input
+            }], displayedColumns: [{
+                type: Input
             }], availableOperators: [{
                 type: Input
             }], listViewEmit: [{
@@ -5512,7 +5522,7 @@ class NxtDatatable {
                 filtObjs[key] = new Set();
             });
             // Fill the sets with unique values
-            this.tableFilterData.forEach((element) => {
+            this.tableFilterData?.forEach((element) => {
                 this.filterColumns.forEach((key) => {
                     const value = this.getValue(element, key);
                     if (value !== undefined) {
@@ -5736,7 +5746,7 @@ class NxtDatatable {
                 filtObjs[key] = new Set();
             });
             // Fill the sets with unique values
-            this.tableFilterData.forEach((element) => {
+            this.tableFilterData?.forEach((element) => {
                 this.filterColumns.forEach((key) => {
                     const value = this.getValue(element, key);
                     if (value !== undefined) {
@@ -6498,7 +6508,7 @@ class NxtDatatable {
         this.NxtTableFilterEmit.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, deps: [{ token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", 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" }, 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> <!-- class=\"m-4\" -->\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center pt-3\">\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\n                    [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\"\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        Nos </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </div>\n            </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.name\" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n                            [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #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 displayedColumns; 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]=\"isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); sortColumns.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=\"isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"headerLabels[displayedColumns.indexOf(column)]\">\n                                                {{ headerLabels[displayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"filterColumns.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=\"sortColumns.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 displayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"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?.file)\">\n                                                                {{ data?.fileName }}\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=\"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=\"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.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.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 && isSummaryColumn && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\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]=\"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]=\"isEditable && selectedColumn === row.fieldName\">\n                                    <ng-container *ngIf=\"row.type === 'calculation'\">\n                                        <!-- Add close button for selected column -->\n                                        <div *ngIf=\"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\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 displayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!--SKS15FEB25 No Data Row -->\n                        <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"\">\n                            No records/data found.\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 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=\"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=\"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\">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                Are you sure want to delete the record ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                    (click)=\"deleteModal = false\">No</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">Yes</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;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}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "fcBtnBgColor", "fcBtnBorder", "fcBtnTextColor", "fcBtnHeight", "fcBtnWidth", "fcBtnIconLeftSrc", "fcBtnIconRightSrc", "fcBtnHoverBgColor", "fcBtnHoverTextColor", "fcBtnId", "dataDismiss", "fcButtonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: SearchFilterPipe, name: "searchFilter" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "pipe", type: EditColumnCheckPipe, name: "editColumnCheck" }, { kind: "pipe", type: EditColumnDropdownPipe, name: "editColumnDropdown" }, { kind: "pipe", type: EditColumnTypePipe, name: "editColumnType" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.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", "availableOperators"], outputs: ["listViewEmit"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.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" }, 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> <!-- class=\"m-4\" -->\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center pt-3\">\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] = 'displayedColumns'\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        Nos </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </div>\n            </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.name\" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n                            [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #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 displayedColumns; 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]=\"isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); sortColumns.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=\"isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"headerLabels[displayedColumns.indexOf(column)]\">\n                                                {{ headerLabels[displayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"filterColumns.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=\"sortColumns.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 displayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"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?.file)\">\n                                                                {{ data?.fileName }}\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=\"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=\"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.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.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 && isSummaryColumn && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\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]=\"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]=\"isEditable && selectedColumn === row.fieldName\">\n                                    <ng-container *ngIf=\"row.type === 'calculation'\">\n                                        <!-- Add close button for selected column -->\n                                        <div *ngIf=\"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\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 displayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!--SKS15FEB25 No Data Row -->\n                        <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"\">\n                            No records/data found.\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 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=\"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=\"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\">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                Are you sure want to delete the record ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                    (click)=\"deleteModal = false\">No</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">Yes</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;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}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "fcBtnBgColor", "fcBtnBorder", "fcBtnTextColor", "fcBtnHeight", "fcBtnWidth", "fcBtnIconLeftSrc", "fcBtnIconRightSrc", "fcBtnHoverBgColor", "fcBtnHoverTextColor", "fcBtnId", "dataDismiss", "fcButtonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: SearchFilterPipe, name: "searchFilter" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimePipe, name: "time" }, { kind: "pipe", type: EditColumnCheckPipe, name: "editColumnCheck" }, { kind: "pipe", type: EditColumnDropdownPipe, name: "editColumnDropdown" }, { kind: "pipe", type: EditColumnTypePipe, name: "editColumnType" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, decorators: [{
             type: Component,
@@ -6518,7 +6528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         GetValuePipe,
                         ListViewFilterComponent
                         // RowResizerDirective
-                    ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div> <!-- class=\"m-4\" -->\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center pt-3\">\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\n                    [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\"\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        Nos </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </div>\n            </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.name\" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n                            [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #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 displayedColumns; 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]=\"isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); sortColumns.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=\"isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"headerLabels[displayedColumns.indexOf(column)]\">\n                                                {{ headerLabels[displayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"filterColumns.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=\"sortColumns.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 displayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"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?.file)\">\n                                                                {{ data?.fileName }}\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=\"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=\"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.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.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 && isSummaryColumn && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\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]=\"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]=\"isEditable && selectedColumn === row.fieldName\">\n                                    <ng-container *ngIf=\"row.type === 'calculation'\">\n                                        <!-- Add close button for selected column -->\n                                        <div *ngIf=\"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\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 displayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!--SKS15FEB25 No Data Row -->\n                        <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"\">\n                            No records/data found.\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 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=\"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=\"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\">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                Are you sure want to delete the record ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                    (click)=\"deleteModal = false\">No</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">Yes</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;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}.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}\n"] }]
+                    ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div> <!-- class=\"m-4\" -->\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center pt-3\">\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] = 'displayedColumns'\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        Nos </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </div>\n            </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.name\" [buttonConfig]=\"button.buttonConfig\"\n                            [type]=\"button.type\" class=\"ms-2 me-2\" [fcBtnIconLeftSrc]=\"button.fcBtnIconLeftSrc\"\n                            [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\" [ngStyle]=\"{ height: isPagination ? '450px' : 'auto' }\" #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 displayedColumns; 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]=\"isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); sortColumns.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=\"isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"headerLabels[displayedColumns.indexOf(column)]\">\n                                                {{ headerLabels[displayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"filterColumns.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=\"sortColumns.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 displayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"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?.file)\">\n                                                                {{ data?.fileName }}\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=\"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=\"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.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.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 && isSummaryColumn && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\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]=\"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]=\"isEditable && selectedColumn === row.fieldName\">\n                                    <ng-container *ngIf=\"row.type === 'calculation'\">\n                                        <!-- Add close button for selected column -->\n                                        <div *ngIf=\"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\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 displayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!--SKS15FEB25 No Data Row -->\n                        <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\" class=\"\">\n                            No records/data found.\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 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=\"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=\"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\">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                Are you sure want to delete the record ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\"\n                    (click)=\"deleteModal = false\">No</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">Yes</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;position:relative;border-bottom:1px solid var(--border-color)}.table-cell{display:table-cell;padding:12px;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}.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}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
                 type: Input
             }], tableFilterData: [{
@@ -14450,7 +14460,7 @@ const VERSION = {
     "semver": null,
     "suffix": "05a52cb-dirty",
     "semverString": null,
-    "version": "2.1.137"
+    "version": "2.1.139"
 };
 /* tslint:enable */