@rangertechnologies/ngnxt 2.1.151 → 2.1.152

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -4893,7 +4893,14 @@ class ListViewFilterComponent {
     tableFilterArray = [];
     selectedView = '';
     displayedColumns = [];
-    availableOperators = ['=', '!=', '>', '<', '>=', '<=']; // 'contains', 'not contains', 'starts with', 'ends with'
+    availableOperators = [
+        { label: 'Equals (=)', value: '=' },
+        { label: 'Not Equal (!=)', value: '!=' },
+        { label: 'Greater Than (>)', value: '>' },
+        { label: 'Less Than (<)', value: '<' },
+        { label: 'Greater Than or Equal (>=)', value: '>=' },
+        { label: 'Less Than or Equal (<=)', value: '<=' }
+    ]; // 'contains', 'not contains', 'starts with', 'ends with'
     listViewEmit = new EventEmitter();
     isDropdownOpen = false;
     isModalOpen = false;
@@ -4901,8 +4908,6 @@ class ListViewFilterComponent {
     isAdding = false;
     viewToDelete = null;
     editingView;
-    columnValuesMap = {};
-    columnNames = [];
     isColumnDropdownOpen = [];
     isOperatorDropdownOpen = [];
     isValueDropdownOpen = [];
@@ -4921,30 +4926,12 @@ class ListViewFilterComponent {
         if (!this.selectedView && this.listViews?.length > 0) {
             this.selectedView = this.listViews[0].filterName;
         }
-        // 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;
         }
         console.log(this.tableFilterArray);
-        // 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);
     }
     get conditions() {
         return this.editingView.get('conditions');
@@ -5016,17 +5003,17 @@ class ListViewFilterComponent {
                 value: [filter.value, Validators.required]
             }));
         });
-        view?.columns?.forEach(field => {
-            this.columns.push(this.fb.group({
-                name: [field.name, Validators.required],
-                sortable: [field.sortable],
-                filterable: [field.filterable]
-            }));
+        view?.columns?.forEach(col => {
+            this.displayedColumns.forEach(field => {
+                if (col.name == field.fieldName) {
+                    this.columns.push(this.fb.group({
+                        name: [field.label, Validators.required],
+                        sortable: [col.sortable],
+                        filterable: [col.filterable]
+                    }));
+                }
+            });
         });
-        if (this.conditions.length === 0)
-            this.addFilter();
-        if (this.columns.length === 0)
-            this.addColumn();
     }
     // SKS3MAY25 Opens modal to create a new list view
     startAdd() {
@@ -5042,11 +5029,26 @@ class ListViewFilterComponent {
             isDefault: false
         });
         this.isDropdownOpen = false;
+        // SKS26MAY25 Second loop: from displayedColumns, skip duplicates
+        this.displayedColumns.forEach(field => {
+            this.columns.push(this.fb.group({
+                name: [field.label, Validators.required],
+                sortable: [field.hyperLink],
+                filterable: [field.filter]
+            }));
+        });
     }
     // SKS3MAY25 Saves the currently edited or added list view
     save() {
         if (this.editingView.valid) {
             const formValue = this.editingView.value;
+            formValue?.columns?.forEach((col) => {
+                this.displayedColumns.forEach((dCol) => {
+                    if (dCol.label === col.name) {
+                        col.name = dCol.fieldName;
+                    }
+                });
+            });
             const listView = {
                 filterName: formValue.filterName,
                 order: formValue.order,
@@ -5113,20 +5115,41 @@ class ListViewFilterComponent {
     // SKS3MAY25 Returns filtered list of columns based on input search term
     getFilteredColumns(term) {
         if (!term)
-            return this.columnNames;
+            return this.tableFilterArray;
+        term = term.toLowerCase();
+        return this.tableFilterArray.filter(col => col.label.toLowerCase().includes(term));
+    }
+    getColumnColumns(term) {
+        console.log(term);
+        if (!term)
+            return this.displayedColumns;
         term = term.toLowerCase();
-        return this.columnNames.filter(field => field.toLowerCase().includes(term));
+        return this.displayedColumns.filter(col => col.label.toLowerCase().includes(term));
+    }
+    // SKS3MAY25 Returns possible values for a selected field/column
+    getPossibleValues(field, term) {
+        const match = this.tableFilterArray.find(col => col.label === field);
+        if (!match || !Array.isArray(match.value))
+            return [];
+        if (!term)
+            return match.value;
+        const lowerTerm = term.toLowerCase();
+        return match.value.filter(val => typeof val === 'string' && val.toLowerCase().includes(lowerTerm));
     }
     // SKS3MAY25 Returns filtered list of operators based on input search term
     getFilteredOperators(term) {
         if (!term)
             return this.availableOperators;
         term = term.toLowerCase();
-        return this.availableOperators.filter(operator => operator.toLowerCase().includes(term));
+        return this.availableOperators.filter(operator => operator.label.toLowerCase().includes(term));
     }
-    // SKS3MAY25 Returns possible values for a selected field/column
-    getPossibleValues(field) {
-        return this.columnValuesMap[field] || [];
+    operatorInput = [];
+    onOperatorInput(value, index) {
+        this.operatorInput[index] = value;
+    }
+    getOperatorLabel(value) {
+        const found = this.availableOperators.find(op => op.value === value);
+        return found ? found.label : value;
     }
     // SKS3MAY25 Opens a dropdown on focus for the given input type and index
     onFocus(type, index) {
@@ -5179,6 +5202,17 @@ class ListViewFilterComponent {
             this.isColumnNameDropdownOpen[index] = false;
         }
     }
+    getLabelByFieldName(fieldName) {
+        console.log(fieldName);
+        const match = this.displayedColumns.find(col => col.fieldName === fieldName);
+        return match?.label ? match.label : fieldName;
+    }
+    onManualInput(inputValue, index) {
+        const match = this.displayedColumns.find(col => col.label.toLowerCase() === inputValue.toLowerCase());
+        if (match) {
+            this.columns.at(index).get('name').setValue(match.label);
+        }
+    }
     // SKS3MAY25 Listens to document click and closes the dropdown if clicked outside
     onDocumentClick(event) {
         event.stopPropagation();
@@ -5188,11 +5222,11 @@ 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", 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                <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n                    At least one filter or one column is required.\n                </div>                  \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">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}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}\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\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (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.label)\">\n                                        {{ field.label }}\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\n                                  [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n                                  (input)=\"onOperatorInput($event.target.value, i)\"\n                                  (focus)=\"onFocus('operator', i)\"\n                                  (blur)=\"onBlur('operator', i)\"\n                                  placeholder=\"Enter or select operator\"\n                                />\n                              \n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                  <div\n                                    *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n                                    class=\"dropdown-item\"\n                                    (click)=\"selectOption('operator', i, operator.value)\"\n                                  >\n                                    {{ operator.label }}\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, conditions.at(i).get('value').value)?.length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').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\">Select field to display in table</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 \n                                formControlName=\"name\" \n                                (focus)=\"onFocus('columnName', i)\" \n                                (blur)=\"onBlur('columnName', i)\" \n                                (input)=\"onManualInput($event.target.value, i)\"\n                                placeholder=\"Enter or select column name\">\n                                 <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n                                        {{ colName.label }}\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                <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n                    At least one filter or one column is required.\n                </div>                  \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">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{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}.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;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}\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 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                <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n                    At least one filter or one column is required.\n                </div>                  \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">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}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}\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\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (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.label)\">\n                                        {{ field.label }}\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\n                                  [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n                                  (input)=\"onOperatorInput($event.target.value, i)\"\n                                  (focus)=\"onFocus('operator', i)\"\n                                  (blur)=\"onBlur('operator', i)\"\n                                  placeholder=\"Enter or select operator\"\n                                />\n                              \n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                  <div\n                                    *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n                                    class=\"dropdown-item\"\n                                    (click)=\"selectOption('operator', i, operator.value)\"\n                                  >\n                                    {{ operator.label }}\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, conditions.at(i).get('value').value)?.length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').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\">Select field to display in table</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 \n                                formControlName=\"name\" \n                                (focus)=\"onFocus('columnName', i)\" \n                                (blur)=\"onBlur('columnName', i)\" \n                                (input)=\"onManualInput($event.target.value, i)\"\n                                placeholder=\"Enter or select column name\">\n                                 <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n                                        {{ colName.label }}\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                <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n                    At least one filter or one column is required.\n                </div>                  \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">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{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}.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;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}\n"] }]
         }], ctorParameters: () => [{ type: i3.FormBuilder }], propDecorators: { listViews: [{
                 type: Input
             }], tableFilterArray: [{
@@ -5538,26 +5572,28 @@ class NxtDatatable {
             this.multipleFilterArray = this.multipleFilter;
         }
         // Create a temporary filtered array that excludes any column with '['
-        const tempFilterColumns = this.displayedColumns.filter((key) => !key.includes('['));
+        const tempFilterColumns = this.columns.filter(col => !col.fieldName.includes('['));
+        console.log("tempFilterColumns", tempFilterColumns, "this.tableFilterData", this.tableFilterData);
         if (tempFilterColumns?.length > 0) {
             const filtObjs = {};
-            // Initialize empty Set for each filtered column
-            tempFilterColumns.forEach((key) => {
-                filtObjs[key] = new Set();
+            // SKS26MAY25 Initialize sets to collect unique values for each column
+            tempFilterColumns.forEach((col) => {
+                filtObjs[col.fieldName] = new Set();
             });
-            // Fill the sets with unique values
+            // SKS26MAY25 Collect unique values from tableFilterData
             this.tableFilterData?.forEach((element) => {
-                tempFilterColumns.forEach((key) => {
-                    const value = this.getValue(element, key);
+                tempFilterColumns.forEach((col) => {
+                    const value = this.getValue(element, col.fieldName);
                     if (value !== undefined) {
-                        filtObjs[key].add(value);
+                        filtObjs[col.fieldName].add(value);
                     }
                 });
             });
-            // Convert sets to arrays and format as requested
-            this.tableFilterArray = tempFilterColumns.map((key) => {
-                return { [key]: Array.from(filtObjs[key]) };
-            });
+            // SKS26MAY25 Append "value" property to each column object with the array of unique values
+            this.tableFilterArray = tempFilterColumns.map((col) => ({
+                ...col,
+                value: Array.from(filtObjs[col.fieldName])
+            }));
         }
         setTimeout(() => {
             if (this.tableContainer?.nativeElement) {
@@ -5792,26 +5828,28 @@ class NxtDatatable {
             this.multipleFilterArray = this.multipleFilter;
         }
         // Create a temporary filtered array that excludes any column with '['
-        const tempFilterColumns = this.displayedColumns.filter((key) => !key.includes('['));
+        const tempFilterColumns = this.columns.filter(col => !col.fieldName.includes('['));
+        console.log("tempFilterColumns", tempFilterColumns, "this.tableFilterData", this.tableFilterData);
         if (tempFilterColumns?.length > 0) {
             const filtObjs = {};
-            // Initialize empty Set for each filtered column
-            tempFilterColumns.forEach((key) => {
-                filtObjs[key] = new Set();
+            // SKS26MAY25 Initialize sets to collect unique values for each column
+            tempFilterColumns.forEach((col) => {
+                filtObjs[col.fieldName] = new Set();
             });
-            // Fill the sets with unique values
+            // SKS26MAY25 Collect unique values from tableFilterData
             this.tableFilterData?.forEach((element) => {
-                tempFilterColumns.forEach((key) => {
-                    const value = this.getValue(element, key);
+                tempFilterColumns.forEach((col) => {
+                    const value = this.getValue(element, col.fieldName);
                     if (value !== undefined) {
-                        filtObjs[key].add(value);
+                        filtObjs[col.fieldName].add(value);
                     }
                 });
             });
-            // Convert sets to arrays and format as requested
-            this.tableFilterArray = tempFilterColumns.map((key) => {
-                return { [key]: Array.from(filtObjs[key]) };
-            });
+            // SKS26MAY25 Append "value" property to each column object with the array of unique values
+            this.tableFilterArray = tempFilterColumns.map((col) => ({
+                ...col,
+                value: Array.from(filtObjs[col.fieldName])
+            }));
         }
         this.selection = new SelectionModel(true, []);
         setTimeout(() => {
@@ -6605,7 +6643,7 @@ class NxtDatatable {
         }
     }
     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>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n                    [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\"\n                    [displayedColumns] = 'displayedColumns'\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        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 currentDisplayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\"\n                                    [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    [class.selected-column]=\"isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n                                    (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n                                                {{ currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n                                                    style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                    viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                        stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle\n                                                        *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n                                                        cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                        {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                        === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span\n                                                        *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n                                                        class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\"\n                                                    class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\n                                                    <div class=\"card\">\n                                                        <div class=\"content\">\n                                                            <div class=\"flex\">\n                                                                <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                    <div class=\"fsearch-bar\">\n                                                                        <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                            viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path\n                                                                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                        </svg>\n                                                                        <input class=\"width-100\" type=\"text\"\n                                                                            placeholder=\"Search\"\n                                                                            [(ngModel)]=\"searchText\"\n                                                                            class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                    class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                    viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path\n                                                                        d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div\n                                                                    *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                        style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\"\n                                                                            [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                            [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                        <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    style=\"padding: 12px !important;\">\n                                    {{actionColumHeader}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <div *ngFor=\"let column of currentDisplayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"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 currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!--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"] }] });
+    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>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n                    [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\"\n                    [displayedColumns] = 'columns'\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        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 currentDisplayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\"\n                                    [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    [class.selected-column]=\"isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n                                    (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n                                                {{ currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n                                                    style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                    viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                        stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle\n                                                        *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n                                                        cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                        {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                        === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span\n                                                        *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n                                                        class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\"\n                                                    class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\n                                                    <div class=\"card\">\n                                                        <div class=\"content\">\n                                                            <div class=\"flex\">\n                                                                <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                    <div class=\"fsearch-bar\">\n                                                                        <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                            viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path\n                                                                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                        </svg>\n                                                                        <input class=\"width-100\" type=\"text\"\n                                                                            placeholder=\"Search\"\n                                                                            [(ngModel)]=\"searchText\"\n                                                                            class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                    class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                    viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path\n                                                                        d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div\n                                                                    *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                        style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\"\n                                                                            [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                            [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                        <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    style=\"padding: 12px !important;\">\n                                    {{actionColumHeader}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <div *ngFor=\"let column of currentDisplayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"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 currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!--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,
@@ -6625,7 +6663,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>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n                    [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\"\n                    [displayedColumns] = 'displayedColumns'\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        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 currentDisplayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\"\n                                    [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    [class.selected-column]=\"isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n                                    (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n                                                {{ currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n                                                    style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                    viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                        stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle\n                                                        *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n                                                        cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                        {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                        === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span\n                                                        *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n                                                        class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\"\n                                                    class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\n                                                    <div class=\"card\">\n                                                        <div class=\"content\">\n                                                            <div class=\"flex\">\n                                                                <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                    <div class=\"fsearch-bar\">\n                                                                        <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                            viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path\n                                                                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                        </svg>\n                                                                        <input class=\"width-100\" type=\"text\"\n                                                                            placeholder=\"Search\"\n                                                                            [(ngModel)]=\"searchText\"\n                                                                            class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                    class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                    viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path\n                                                                        d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div\n                                                                    *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                        style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\"\n                                                                            [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                            [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                        <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    style=\"padding: 12px !important;\">\n                                    {{actionColumHeader}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <div *ngFor=\"let column of currentDisplayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"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 currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!--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>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\" style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\"\n                    [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\"\n                    [displayedColumns] = 'columns'\n                    [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\" style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        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 currentDisplayedColumns; let i = index\"\n                                    class=\"table-cell tableHeader head-color\"\n                                    [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                    [class.active-column]=\"activeColumn === column\"\n                                    [class.selected-column]=\"isEditable && selectedColumn === column\"\n                                    (click)=\"$event.stopPropagation(); onColumnClick(column); currentSortColumns.includes(column) ? sortData(column) : ''\"\n                                    (mouseenter)=\"hoveredColumn = column\" (mouseleave)=\"hoveredColumn = null\">\n                                    <div class=\"columnDiv\">\n                                        <div class=\"column-header\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"isEditable && selectedColumn === column\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(column)\">\n                                                \u2715\n                                            </div>\n                                            <div class=\"ellipsis\"\n                                                [title]=\"currentHeaderLabels[currentDisplayedColumns.indexOf(column)]\">\n                                                {{ currentHeaderLabels[currentDisplayedColumns.indexOf(column)] }}\n                                            </div>\n                                            <div class=\"position-relative\">\n                                                <svg *ngIf=\"currentFilterColumns.includes(column)\" (click)=\"$event.stopPropagation(); filter(column)\"\n                                                    style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                    viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                        stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <!--SKS15FEB25 Red dot for active filter -->\n                                                    <circle\n                                                        *ngIf=\"filterDataArray && filterDataArray[column]?.length > 0\"\n                                                        cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                </svg>\n                                                <div *ngIf=\"currentSortColumns.includes(column)\" class=\"sort-indicators\">\n                                                    <span *ngIf=\"currentSortColumn === column\" class=\"sort-direction\">\n                                                        {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                        === 'desc' ? '\u2193' : '' }}\n                                                    </span>\n                                                    <span\n                                                        *ngIf=\"hoveredColumn === column && currentSortColumn !== column\"\n                                                        class=\"sort-direction\">\n                                                        \u2191\n                                                    </span>\n                                                </div>\n                                                <div *ngIf=\"searchFilter && column === selectedFilter\"\n                                                    class=\"search-component position-absolute\" (click)=\"$event.stopPropagation();\">\n                                                    <div class=\"card\">\n                                                        <div class=\"content\">\n                                                            <div class=\"flex\">\n                                                                <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                    <div class=\"fsearch-bar\">\n                                                                        <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                            viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                            xmlns=\"http://www.w3.org/2000/svg\">\n                                                                            <path\n                                                                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                            <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                stroke-linecap=\"round\"\n                                                                                stroke-linejoin=\"round\" />\n                                                                        </svg>\n                                                                        <input class=\"width-100\" type=\"text\"\n                                                                            placeholder=\"Search\"\n                                                                            [(ngModel)]=\"searchText\"\n                                                                            class=\"searchinput\">\n                                                                    </div>\n                                                                </div>\n                                                                <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                    class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                    viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                    xmlns=\"http://www.w3.org/2000/svg\">\n                                                                    <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                    <path\n                                                                        d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                        stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                        stroke-linecap=\"round\"\n                                                                        stroke-linejoin=\"round\" />\n                                                                </svg>\n                                                            </div>\n                                                            <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                <div\n                                                                    *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                    <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                        style=\"gap: 5px;\">\n                                                                        <input type=\"checkbox\"\n                                                                            [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                            [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                        <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"resize-handle\"></div> <!--SKS15FEB25 appRowResizer -->\n                                    </div>\n                                </div>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    style=\"padding: 12px !important;\">\n                                    {{actionColumHeader}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <div *ngFor=\"let column of currentDisplayedColumns; let last = last; ellipsis\"\n                                    class=\"table-cell body-color\"\n                                    [class.selected-cell]=\"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 currentDisplayedColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\"></div>\n                            </div>\n                        </div>\n                        <!--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: [{
@@ -13053,7 +13091,13 @@ class QuestionbookComponent {
                     ques.isReadOnly = false;
                 }
             });
-            this.cdr.detectChanges();
+            if (this.dataBind) {
+                this.questions.forEach(ques => {
+                    if (ques.referenceField) {
+                        ques.isReadOnly = false;
+                    }
+                });
+            }
         }
     }
     ngAfterViewInit() {
@@ -13863,7 +13907,7 @@ class BookletComponent {
         else if (this.bookletJSON) {
             // Try to pass a value from Backend to differentiate the QuestionBook Read and AnswerBook Read
             this.isAnswerFlag = true;
-            if (this.bookletJSON != null || this.bookletJSON != undefined) {
+            if (this.bookletJSON != null && this.bookletJSON != undefined) {
                 // SKS28MAR25 get the nested reference qb 
                 let tempbook = this.bookletJSON?.bookQuestionsMap[Object.keys(this.bookletJSON.bookQuestionsMap)[0]].subQuestions;
                 tempbook.forEach((element) => {
@@ -13906,9 +13950,11 @@ class BookletComponent {
             for (var value in this.bookletJSON?.translationMap) {
                 this.translateMap.set(value, this.bookletJSON.translationMap[value]);
             }
-            // VD 31NOV24 wrapper changes
+            // AP 23MAY25 - supports both stringified and object formats
             if (this.bookletJSON.questionbook?.action != undefined && this.bookletJSON.questionbook?.action != '') {
-                this.actions = JSON.parse(this.bookletJSON.questionbook.action);
+                this.actions = typeof this.bookletJSON.questionbook.action === 'string'
+                    ? JSON.parse(this.bookletJSON.questionbook.action)
+                    : this.bookletJSON.questionbook.action;
             }
         }
         // HA 19DEC23 langDirection variable value assigning
@@ -14298,11 +14344,11 @@ class BookletComponent {
         this.handleCalendarEvent.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: StorageService }, { token: i1.ActivatedRoute }, { token: i6$2.DomSanitizer }, { token: ChangeService }, { token: i0.ElementRef }, { token: I18nService }, { token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", from: "from", apiUrl: "apiUrl", isEdit: "isEdit", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, viewQueries: [{ propertyName: "questionbookComponent", first: true, predicate: ["questionbook"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ ques?.questionText }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                <!-- AP-19MAY25 - Added [isEdit] binding --> \n                <!-- AP-19MAY25 - QuestionBook component for rendering dynamic form questions -->\n                <lib-questionbook #questionbook [qbItem]=\"qb\" [token]=\"token\"\n                [labelValue]=\"labelValue\"\n                [questionItem]=\"ques\"\n                [translatedQuestions]=\"readTransQuestions(qb.id)\"\n                [questions]=\"readQuestions(qb.id)\"\n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                [dataBind]=\"dataBind\"\n                [isEdit]=\"isEdit\" \n                ></lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n                        {{ qb?.questionText }}\n                        {{ qb?.title }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <!-- AP-19MAY25 - QuestionBook component for rendering dynamic form questions -->\n                <lib-questionbook #questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n</div>\n<!-- RS 09DEC24 Changed keys-->\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [ngClass]=\"langDirection\">\n    <div *ngFor=\"let action of actions; let i = index\">\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n            {{ action.name }}\n        </button>\n    </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"], dependencies: [{ 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: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookletComponent, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", from: "from", apiUrl: "apiUrl", isEdit: "isEdit", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, viewQueries: [{ propertyName: "questionbookComponent", first: true, predicate: ["questionbook"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ ques?.questionText }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                 <!-- AP-19MAY25 - Added [isEdit] binding --> \n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n                [labelValue]=\"labelValue\"\n                [questionItem]=\"ques\"\n                [translatedQuestions]=\"readTransQuestions(qb.id)\"\n                [questions]=\"readQuestions(qb.id)\"\n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                [dataBind]=\"dataBind\"\n                [isEdit]=\"isEdit\" \n                ></lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n                        {{ qb?.questionText }}\n                        {{ qb?.title }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n</div>\n<!-- RS 09DEC24 Changed keys-->\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n<div *ngIf=\"abItem?.status != 'Completed'\" \n     [ngClass]=\"langDirection\" \n     class=\"button-container\">\n  \n  <div *ngFor=\"let action of actions; let i = index\"\n       class=\"button-wrapper\"\n       [ngStyle]=\"{\n         'left': (action.positionPercent || 0) + '%',\n         'width': (action.width || 120) + 'px'\n       }\">\n       \n    <button \n      (click)=\"handleBookletActionClick(action)\" \n      [ngStyle]=\"{\n        '--btn-bg': action.bgColor,\n        'background-color': action.bgColor,\n        'color': action.textColor,\n        'border-radius': (action.borderRadius || 0) + 'px',\n        'width': '100%'\n      }\"\n      class=\"action-btn\">\n      {{ action.name }}\n    </button>\n  </div>\n\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.button-container{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:20px}.button-container{position:relative;width:100%;min-height:80px}.button-wrapper{position:absolute;top:0;transform:translate(-50%);transition:left .3s ease}.action-btn{background-color:var(--btn-bg, #007bff);color:#fff;border:none;height:50px;width:100%;padding:0 15px;cursor:pointer;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;transition:all .3s ease}\n"], dependencies: [{ 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: "component", type: i7.NgxSpinnerComponent, selector: "ngx-spinner", inputs: ["bdColor", "size", "color", "type", "fullScreen", "name", "zIndex", "template", "showSpinner", "disableAnimation"] }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind"], outputs: ["handleDropDown", "handleQuestion", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-booklet', template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ ques?.questionText }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                <!-- AP-19MAY25 - Added [isEdit] binding --> \n                <!-- AP-19MAY25 - QuestionBook component for rendering dynamic form questions -->\n                <lib-questionbook #questionbook [qbItem]=\"qb\" [token]=\"token\"\n                [labelValue]=\"labelValue\"\n                [questionItem]=\"ques\"\n                [translatedQuestions]=\"readTransQuestions(qb.id)\"\n                [questions]=\"readQuestions(qb.id)\"\n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                [dataBind]=\"dataBind\"\n                [isEdit]=\"isEdit\" \n                ></lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n                        {{ qb?.questionText }}\n                        {{ qb?.title }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <!-- AP-19MAY25 - QuestionBook component for rendering dynamic form questions -->\n                <lib-questionbook #questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n</div>\n<!-- RS 09DEC24 Changed keys-->\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n<div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [ngClass]=\"langDirection\">\n    <div *ngFor=\"let action of actions; let i = index\">\n    <!-- // HA 22JAN24 Commonise the button style in fusion -->\n        <button (click)=\"handleBookletActionClick(action)\" ngClass=\"btn btn-primary fc-button nxtButton\">\n            {{ action.name }}\n        </button>\n    </div>\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}\n"] }]
+            args: [{ selector: 'lib-booklet', template: "<ngx-spinner size=\"medium\" [name]=\"spinnerName\" [type]=\"spinnerType\"></ngx-spinner>\n<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [ngClass]=\"langDirection\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ ques?.questionText }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                 <!-- AP-19MAY25 - Added [isEdit] binding --> \n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n                [labelValue]=\"labelValue\"\n                [questionItem]=\"ques\"\n                [translatedQuestions]=\"readTransQuestions(qb.id)\"\n                [questions]=\"readQuestions(qb.id)\"\n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                [dataBind]=\"dataBind\"\n                [isEdit]=\"isEdit\" \n                ></lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n                        {{ qb?.questionText }}\n                        {{ qb?.title }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [translatedQuestions]=\"readTransQuestions(qb.id)\" [questions]=\"readQuestions(qb.id)\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n</div>\n<!-- RS 09DEC24 Changed keys-->\n<!-- Group Actions -->\n<!-- HA 19DEC23 For Direction -->\n <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n<div *ngIf=\"abItem?.status != 'Completed'\" \n     [ngClass]=\"langDirection\" \n     class=\"button-container\">\n  \n  <div *ngFor=\"let action of actions; let i = index\"\n       class=\"button-wrapper\"\n       [ngStyle]=\"{\n         'left': (action.positionPercent || 0) + '%',\n         'width': (action.width || 120) + 'px'\n       }\">\n       \n    <button \n      (click)=\"handleBookletActionClick(action)\" \n      [ngStyle]=\"{\n        '--btn-bg': action.bgColor,\n        'background-color': action.bgColor,\n        'color': action.textColor,\n        'border-radius': (action.borderRadius || 0) + 'px',\n        'width': '100%'\n      }\"\n      class=\"action-btn\">\n      {{ action.name }}\n    </button>\n  </div>\n\n</div>\n", styles: [".align-submit-row{display:flex}.header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.button-container{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:20px}.button-container{position:relative;width:100%;min-height:80px}.button-wrapper{position:absolute;top:0;transform:translate(-50%);transition:left .3s ease}.action-btn{background-color:var(--btn-bg, #007bff);color:#fff;border:none;height:50px;width:100%;padding:0 15px;cursor:pointer;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;transition:all .3s ease}\n"] }]
         }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: StorageService }, { type: i1.ActivatedRoute }, { type: i6$2.DomSanitizer }, { type: ChangeService }, { type: i0.ElementRef }, { type: I18nService }, { type: i1$1.HttpClient }], propDecorators: { bookletId: [{
                 type: Input
             }], serv: [{
@@ -14706,7 +14752,7 @@ const VERSION = {
     "semver": null,
     "suffix": "05a52cb-dirty",
     "semverString": null,
-    "version": "2.1.151"
+    "version": "2.1.152"
 };
 /* tslint:enable */
 
@@ -14717,6 +14763,7 @@ class FormBuilderService {
     formElementsSubject = new BehaviorSubject([]);
     selectedElementSubject = new BehaviorSubject(-1);
     selectHeaderSubject = new BehaviorSubject(null);
+    actionSubject = new BehaviorSubject(null);
     elementComponent = null;
     book;
     unique_id;
@@ -14724,6 +14771,7 @@ class FormBuilderService {
     formElements$ = this.formElementsSubject.asObservable();
     selectedElement$ = this.selectedElementSubject.asObservable();
     selectHeaderSubject$ = this.selectHeaderSubject.asObservable();
+    actionSubject$ = this.actionSubject.asObservable();
     currentElement;
     selectTableColumn;
     // book: { bookQuestionsMap: { unique_id: { subQuestions: any[]; }; }; };
@@ -14775,6 +14823,19 @@ class FormBuilderService {
         }
         return prefix + core;
     }
+    // AP 23MAY25 Updates the questionbook action buttons: adds or removes based on action type
+    updateQuestionBookActionButtons(button, action) {
+        if (!this.book.questionbook) {
+            this.book.questionbook = {};
+        }
+        if (action === 'add') {
+            this.book.questionbook.action.push(button);
+        }
+        else if (action === 'remove') {
+            this.book.questionbook.action = this.book.questionbook.action.filter((item) => item.id !== button.id);
+        }
+        this.actionSubject.next(this.book);
+    }
     newBook() {
         this.unique_id = this.addElementWithId();
         this.book = {
@@ -14785,7 +14846,28 @@ class FormBuilderService {
                 }
             },
             'questionbook': {
-                "action": "[{\"name\": \"Cancel\", \"eventtoemit\": \"close\", \"alt\":\"\"},{\"name\": \"Save\", \"eventtoemit\": \"submit\", \"alt\":\"\",\"endpoint\":\"\",\"method\":\"POST\"}]"
+                "action": [
+                    {
+                        "name": "Cancel",
+                        "eventtoemit": "close",
+                        "alt": "",
+                        "positionPercent": 3,
+                        "width": 100,
+                        "textColor": "#ffffff",
+                        "borderRadius": 6
+                    },
+                    {
+                        "name": "Save",
+                        "eventtoemit": "submit",
+                        "alt": "",
+                        "endpoint": "",
+                        "method": "POST",
+                        "positionPercent": 14,
+                        "width": 100,
+                        "textColor": "#ffffff",
+                        "borderRadius": 6
+                    }
+                ]
             },
             'records': [{
                     'id': this.unique_id,
@@ -14910,7 +14992,6 @@ class FormBuilderService {
         this.selectedElementSubject.next(index);
     }
     removeSelectedTableElement(index, event) {
-        // console.log("ddd",index, event)
         this.currentElement = this.formElements[index];
         if (this.currentElement?.type === 'Table') {
             this.currentElement['fieldsMeta'] = typeof this.currentElement?.fieldsMeta === 'object' ? this.currentElement?.fieldsMeta : JSON.parse(this.currentElement.fieldsMeta);
@@ -15206,6 +15287,7 @@ class ElementComponent {
         }
         else {
             const newElement = {
+                action: null,
                 id: unique_id,
                 uid: unique_id,
                 type,
@@ -17132,6 +17214,40 @@ class PropertiesComponent {
             }
             this.getProperties();
         });
+        this.formBuilderService.selectHeaderSubject$.subscribe(action => {
+            if (action) {
+                this.book = this.formBuilderService.getBook();
+            }
+        });
+    }
+    // AP 23MAY25 - Add a new button with default styling
+    addNewButton() {
+        const lastPercent = this.book?.questionbook?.action?.slice(-1)[0]?.positionPercent || 0;
+        const buttons = {
+            name: '',
+            eventtoemit: '',
+            alt: '',
+            endpoint: '',
+            method: '',
+            id: this.formBuilderService.addElementWithId(),
+            positionPercent: lastPercent + 10,
+            width: 100,
+            borderRadius: 6,
+            alignment: 'flex-start'
+        };
+        this.formBuilderService.updateQuestionBookActionButtons(buttons, 'add');
+    }
+    //AP 23MAY25 - Remove a button from the action list
+    removeButton(btn) {
+        this.formBuilderService.updateQuestionBookActionButtons(btn, 'remove');
+    }
+    //AP 23MAY25 - Update a specific property of a button
+    onButtonPropertyChange(index, key, value) {
+        const buttons = this.getValueByPath('action') || [];
+        if (buttons[index]) {
+            buttons[index][key] = value;
+            this.setValueByPath('action', buttons);
+        }
     }
     //AP-10MAR25 Updates the title using the form builder service  
     updateTitle(event) {
@@ -17200,7 +17316,6 @@ class PropertiesComponent {
                 this.formBuilderService.sortElementsByOrder();
             }
             if (key === 'fontWeight') {
-                // console.log('Font weight selected:', value);
                 this.selectedElement[key] = value;
             }
             const update = { [key]: value };
@@ -17410,7 +17525,6 @@ class PropertiesComponent {
             }
         });
         this.formBuilderService.elementUpdate(this.selectedElementIndex, this.selectedElement);
-        // console.log("val change", obj)
     }
     getStyleKeys() {
         return Object.keys((this.selectedElement.style === null || this.selectedElement.style === '') ?
@@ -17657,11 +17771,11 @@ class PropertiesComponent {
         this.draggedId = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1$1.HttpClient }, { token: FormBuilderService }, { token: TemplateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      Attributes\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      Property\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      Appearance\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!-- AP-06MAR25 Select element type show -->\n    <div *ngIf=\"getProperties()\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'Image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search book specific for book element -->\n      <div *ngIf=\"selectedElement?.type === 'Book'\">\n        <label class=\"text-sm\">Search Book</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <lib-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n            (searchValueChange)=\"childEventCapture($event)\">\n          </lib-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>Endpoint:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>Variable:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>Field:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>Default Field:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- help text -->\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n            selectedElement.helpText }}</div>\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">Select file category</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n          </div>\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{ prop.label }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!-- AP 25FEB25 - Change key size -->\n          <div *ngIf=\"prop.key === 'size'\">\n            <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n              class=\"size-input\" />\n          </div>\n\n          <!-- AP-19MAR25 Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!-- AP-06MAR25 Show elements ID  -->\n    <div *ngIf=\"getProperties()\">\n      <label>Label Id</label>\n      <div\n        style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n                  (change)=\"onRequiredChange($event.target.checked)\" />\n                Required\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n                  (change)=\"onToggleChange('isReadOnly', $event)\" />\n                Read Only\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n                  (change)=\"onToggleChange('isHidden', $event)\" />\n                Is Hide\n              </label>\n            </div>\n          </div>\n\n          <!-- AP 28FEB25 - handled options with UUID -->\n          <div\n            *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n\n      <!-- SKS21MAR25 Move Style Outside the Loop -->\n      <!-- Style Toggle -->\n      <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n        <div class=\"head-elements\">Style</div>\n        <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n          alt=\"Toggle Arrow\" class=\"arrow-icon\">\n      </div>\n\n      <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n        <div class=\"form-group\">\n          <div *ngFor=\"let key of getStyleKeys()\">\n            <label>{{ key }}</label>\n            <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n              (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <!-- Font Selection -->\n          <div *ngIf=\"prop.key === 'font'\">\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n              (change)=\"setValueByPath('font', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n          <!-- Font Size Selection -->\n          <div *ngIf=\"prop.key === 'fontSize'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n          <!-- Font Weight Selection -->\n          <div *ngIf=\"prop.key === 'fontWeight'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n\n          <div class=\"flex-container\">\n            <!-- Dropdown Box -->\n            <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n              <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n                <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                  {{ option }}\n                </option>\n              </select>\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n                (change)=\"setValueByPath('fontColor', $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n                (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n          </div>\n          \n          <!-- AP-17APR25 Button for Duplicate Field  -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n  <button type=\"button\"\n    class=\"toggle-button\"\n    (click)=\"duplicateField(selectedElement)\">\n    Add Duplicate\n  </button>\n</div>\n\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n  <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}.button-container{flex-wrap:wrap}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}.button-container{padding:1rem}.button-container button{width:100%}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{margin-left:10px;cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}\n"], dependencies: [{ 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: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      Attributes\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      Property\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      Appearance\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!-- AP-06MAR25 Select element type show -->\n    <div *ngIf=\"getProperties()\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'Image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search book specific for book element -->\n      <div *ngIf=\"selectedElement?.type === 'Book'\">\n        <label class=\"text-sm\">Search Book</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <lib-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n            (searchValueChange)=\"childEventCapture($event)\">\n          </lib-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>Endpoint:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>Variable:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>Field:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>Default Field:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- help text -->\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n            selectedElement.helpText }}</div>\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">Select file category</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n          </div>\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{ prop.label }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!-- AP 25FEB25 - Change key size -->\n          <div *ngIf=\"prop.key === 'size'\">\n            <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n              class=\"size-input\" />\n          </div>\n\n          <!-- AP-19MAR25 Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n        \n         <!-- AP 23MAY25 - Action Button -->\n        <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n          <div class=\"form-header\">\n            <label class=\"form-label\">{{ prop.label }}</label>\n            <button (click)=\"addNewButton()\" class=\"add-button\">+ Add Button</button>\n          </div>\n        \n          <div *ngFor=\"let btn of book?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n            <div class=\"form-group\">\n              <label>Button Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event)\" placeholder=\"Enter button name\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Event Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Alt</label>\n              <input type=\"text\" [(ngModel)]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Endpoint</label>\n              <input type=\"text\" [(ngModel)]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Method</label>\n              <select [(ngModel)]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n                <option [value]=\"'GET'\">GET</option>\n                <option [value]=\"'POST'\">POST</option>\n                <option [value]=\"'PUT'\">PUT</option>\n                <option [value]=\"'DELETE'\">DELETE</option>\n              </select>\n            </div>\n        \n            <!-- AP 23MAY25 - Action Style Fields -->\n            <div class=\"form-group\">\n              <label>Background Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Border Radius</label>\n              <input type=\"range\" min=\"0\" max=\"50\" [(ngModel)]=\"btn.borderRadius\" \n                     (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n              <span>{{ btn.borderRadius }}px</span>\n            </div>            \n            \n            <div class=\"form-group\">\n              <label>Button Width (px)</label>\n              <input type=\"number\" [(ngModel)]=\"btn.width\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Text Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.textColor\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Position (%)</label>\n              <input type=\"range\" min=\"0\" max=\"100\" [(ngModel)]=\"btn.positionPercent\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n              <span>{{ btn.positionPercent }}%</span>\n            </div>\n            <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 Remove</button>\n          </div>\n        </div>\n        \n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!-- AP-06MAR25 Show elements ID  -->\n    <div *ngIf=\"getProperties()\">\n      <label>Label Id</label>\n      <div\n        style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n                  (change)=\"onRequiredChange($event.target.checked)\" />\n                Required\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n                  (change)=\"onToggleChange('isReadOnly', $event)\" />\n                Read Only\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n                  (change)=\"onToggleChange('isHidden', $event)\" />\n                Is Hide\n              </label>\n            </div>\n          </div>\n\n          <!-- AP 28FEB25 - handled options with UUID -->\n          <div\n            *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n\n      <!-- SKS21MAR25 Move Style Outside the Loop -->\n      <!-- Style Toggle -->\n      <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n        <div class=\"head-elements\">Style</div>\n        <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n          alt=\"Toggle Arrow\" class=\"arrow-icon\">\n      </div>\n\n      <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n        <div class=\"form-group\">\n          <div *ngFor=\"let key of getStyleKeys()\">\n            <label>{{ key }}</label>\n            <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n              (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <!-- Font Selection -->\n          <div *ngIf=\"prop.key === 'font'\">\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n              (change)=\"setValueByPath('font', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n          <!-- Font Size Selection -->\n          <div *ngIf=\"prop.key === 'fontSize'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n          <!-- Font Weight Selection -->\n          <div *ngIf=\"prop.key === 'fontWeight'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n\n          <div class=\"flex-container\">\n            <!-- Dropdown Box -->\n            <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n              <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n                <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                  {{ option }}\n                </option>\n              </select>\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n                (change)=\"setValueByPath('fontColor', $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n                (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n          </div>\n          \n          <!-- AP-17APR25 Button for Duplicate Field  -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n  <button type=\"button\"\n    class=\"toggle-button\"\n    (click)=\"duplicateField(selectedElement)\">\n    Add Duplicate\n  </button>\n</div>\n\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n  <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}.button-container{flex-wrap:wrap}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}.button-container{padding:1rem}.button-container button{width:100%}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{margin-left:10px;cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.add-button{padding:8px 14px;background-color:#0954c5;color:#fff;border:none;border-radius:8px;cursor:pointer}.add-button:hover{background-color:#0954c5}.button-config-card{background-color:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.form-group{margin-bottom:12px}.form-group label{display:block;font-weight:600;margin-bottom:6px}.form-group input,.form-group select{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:6px}.remove-button{background-color:#e74c3c;color:#fff;border:none;padding:6px 12px;margin-top:10px;border-radius:6px;cursor:pointer}.remove-button:hover{background-color:#c0392b}\n"], dependencies: [{ 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: 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "filterName"], outputs: ["searchValueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      Attributes\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      Property\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      Appearance\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!-- AP-06MAR25 Select element type show -->\n    <div *ngIf=\"getProperties()\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'Image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search book specific for book element -->\n      <div *ngIf=\"selectedElement?.type === 'Book'\">\n        <label class=\"text-sm\">Search Book</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <lib-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n            (searchValueChange)=\"childEventCapture($event)\">\n          </lib-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>Endpoint:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>Variable:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>Field:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>Default Field:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- help text -->\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n            selectedElement.helpText }}</div>\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">Select file category</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n          </div>\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{ prop.label }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!-- AP 25FEB25 - Change key size -->\n          <div *ngIf=\"prop.key === 'size'\">\n            <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n              class=\"size-input\" />\n          </div>\n\n          <!-- AP-19MAR25 Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!-- AP-06MAR25 Show elements ID  -->\n    <div *ngIf=\"getProperties()\">\n      <label>Label Id</label>\n      <div\n        style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n                  (change)=\"onRequiredChange($event.target.checked)\" />\n                Required\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n                  (change)=\"onToggleChange('isReadOnly', $event)\" />\n                Read Only\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n                  (change)=\"onToggleChange('isHidden', $event)\" />\n                Is Hide\n              </label>\n            </div>\n          </div>\n\n          <!-- AP 28FEB25 - handled options with UUID -->\n          <div\n            *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n\n      <!-- SKS21MAR25 Move Style Outside the Loop -->\n      <!-- Style Toggle -->\n      <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n        <div class=\"head-elements\">Style</div>\n        <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n          alt=\"Toggle Arrow\" class=\"arrow-icon\">\n      </div>\n\n      <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n        <div class=\"form-group\">\n          <div *ngFor=\"let key of getStyleKeys()\">\n            <label>{{ key }}</label>\n            <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n              (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <!-- Font Selection -->\n          <div *ngIf=\"prop.key === 'font'\">\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n              (change)=\"setValueByPath('font', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n          <!-- Font Size Selection -->\n          <div *ngIf=\"prop.key === 'fontSize'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n          <!-- Font Weight Selection -->\n          <div *ngIf=\"prop.key === 'fontWeight'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n\n          <div class=\"flex-container\">\n            <!-- Dropdown Box -->\n            <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n              <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n                <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                  {{ option }}\n                </option>\n              </select>\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n                (change)=\"setValueByPath('fontColor', $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n                (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n          </div>\n          \n          <!-- AP-17APR25 Button for Duplicate Field  -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n  <button type=\"button\"\n    class=\"toggle-button\"\n    (click)=\"duplicateField(selectedElement)\">\n    Add Duplicate\n  </button>\n</div>\n\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n  <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}.button-container{flex-wrap:wrap}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}.button-container{padding:1rem}.button-container button{width:100%}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{margin-left:10px;cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}\n"] }]
+            args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      Attributes\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      Property\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      Appearance\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!-- AP-06MAR25 Select element type show -->\n    <div *ngIf=\"getProperties()\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'Image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search book specific for book element -->\n      <div *ngIf=\"selectedElement?.type === 'Book'\">\n        <label class=\"text-sm\">Search Book</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <lib-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n            (searchValueChange)=\"childEventCapture($event)\">\n          </lib-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>Endpoint:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>Variable:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>Field:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>Default Field:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- help text -->\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n            selectedElement.helpText }}</div>\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">Select file category</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n          </div>\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{ prop.label }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!-- AP 25FEB25 - Change key size -->\n          <div *ngIf=\"prop.key === 'size'\">\n            <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n              class=\"size-input\" />\n          </div>\n\n          <!-- AP-19MAR25 Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n        \n         <!-- AP 23MAY25 - Action Button -->\n        <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n          <div class=\"form-header\">\n            <label class=\"form-label\">{{ prop.label }}</label>\n            <button (click)=\"addNewButton()\" class=\"add-button\">+ Add Button</button>\n          </div>\n        \n          <div *ngFor=\"let btn of book?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n            <div class=\"form-group\">\n              <label>Button Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event)\" placeholder=\"Enter button name\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Event Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Alt</label>\n              <input type=\"text\" [(ngModel)]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Endpoint</label>\n              <input type=\"text\" [(ngModel)]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Method</label>\n              <select [(ngModel)]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n                <option [value]=\"'GET'\">GET</option>\n                <option [value]=\"'POST'\">POST</option>\n                <option [value]=\"'PUT'\">PUT</option>\n                <option [value]=\"'DELETE'\">DELETE</option>\n              </select>\n            </div>\n        \n            <!-- AP 23MAY25 - Action Style Fields -->\n            <div class=\"form-group\">\n              <label>Background Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Border Radius</label>\n              <input type=\"range\" min=\"0\" max=\"50\" [(ngModel)]=\"btn.borderRadius\" \n                     (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n              <span>{{ btn.borderRadius }}px</span>\n            </div>            \n            \n            <div class=\"form-group\">\n              <label>Button Width (px)</label>\n              <input type=\"number\" [(ngModel)]=\"btn.width\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Text Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.textColor\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Position (%)</label>\n              <input type=\"range\" min=\"0\" max=\"100\" [(ngModel)]=\"btn.positionPercent\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n              <span>{{ btn.positionPercent }}%</span>\n            </div>\n            <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 Remove</button>\n          </div>\n        </div>\n        \n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!-- AP-06MAR25 Show elements ID  -->\n    <div *ngIf=\"getProperties()\">\n      <label>Label Id</label>\n      <div\n        style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n                  (change)=\"onRequiredChange($event.target.checked)\" />\n                Required\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n                  (change)=\"onToggleChange('isReadOnly', $event)\" />\n                Read Only\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n                  (change)=\"onToggleChange('isHidden', $event)\" />\n                Is Hide\n              </label>\n            </div>\n          </div>\n\n          <!-- AP 28FEB25 - handled options with UUID -->\n          <div\n            *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n\n      <!-- SKS21MAR25 Move Style Outside the Loop -->\n      <!-- Style Toggle -->\n      <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n        <div class=\"head-elements\">Style</div>\n        <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n          alt=\"Toggle Arrow\" class=\"arrow-icon\">\n      </div>\n\n      <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n        <div class=\"form-group\">\n          <div *ngFor=\"let key of getStyleKeys()\">\n            <label>{{ key }}</label>\n            <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n              (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <!-- Font Selection -->\n          <div *ngIf=\"prop.key === 'font'\">\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n              (change)=\"setValueByPath('font', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n          <!-- Font Size Selection -->\n          <div *ngIf=\"prop.key === 'fontSize'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n          <!-- Font Weight Selection -->\n          <div *ngIf=\"prop.key === 'fontWeight'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n\n          <div class=\"flex-container\">\n            <!-- Dropdown Box -->\n            <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n              <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n                <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                  {{ option }}\n                </option>\n              </select>\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n                (change)=\"setValueByPath('fontColor', $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n                (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n          </div>\n          \n          <!-- AP-17APR25 Button for Duplicate Field  -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n  <button type=\"button\"\n    class=\"toggle-button\"\n    (click)=\"duplicateField(selectedElement)\">\n    Add Duplicate\n  </button>\n</div>\n\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n  <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}.button-container{flex-wrap:wrap}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}.button-container{padding:1rem}.button-container button{width:100%}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{margin-left:10px;cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.add-button{padding:8px 14px;background-color:#0954c5;color:#fff;border:none;border-radius:8px;cursor:pointer}.add-button:hover{background-color:#0954c5}.button-config-card{background-color:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.form-group{margin-bottom:12px}.form-group label{display:block;font-weight:600;margin-bottom:6px}.form-group input,.form-group select{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:6px}.remove-button{background-color:#e74c3c;color:#fff;border:none;padding:6px 12px;margin-top:10px;border-radius:6px;cursor:pointer}.remove-button:hover{background-color:#c0392b}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }, { type: TemplateService }], propDecorators: { formButtonHandler: [{
                 type: Output
             }], templateSaveHandler: [{