@rangertechnologies/ngnxt 2.1.352 → 2.1.353

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -21,12 +21,12 @@ import * as i9 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
 import { BehaviorSubject, Subject, takeUntil, debounceTime, distinctUntilChanged, catchError, of, merge, fromEvent, auditTime, firstValueFrom, forkJoin } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$2 from '@angular/platform-browser';
 import { MatSort } from '@angular/material/sort';
 import { SelectionModel } from '@angular/cdk/collections';
-import * as i1$2 from '@angular/platform-browser';
 import * as i6$2 from '@angular/cdk/portal';
 import { DomPortalOutlet, PortalModule, CdkPortal } from '@angular/cdk/portal';
-import { takeUntil as takeUntil$1, first } from 'rxjs/operators';
+import { takeUntil as takeUntil$1, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, first } from 'rxjs/operators';
 import * as i9$1 from '@angular/cdk/bidi';
 import * as i1$3 from '@angular/router';
 import * as i8 from 'ngx-device-detector';
@@ -48254,6 +48254,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+class NxtGetValuePipe {
+    sanitizer;
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(element, column, type, ques, from, mode) {
+        if (!element || !column)
+            return from === 'table' ? '' : '';
+        const flds = column?.split('.');
+        for (let i = 0; i < flds?.length; i++) {
+            if (element === null || element === undefined)
+                return from === 'table' ? '' : ''; // <-- Protect against null here
+            let splitFlds = flds[i].split('[');
+            if (splitFlds.length === 1) {
+                const value = element[splitFlds[0]];
+                if (typeof value === "number") {
+                    element = value ?? 0;
+                }
+                else if (typeof value === "boolean") {
+                    element = value;
+                }
+                else {
+                    element = (value && value !== '') ? value : (from === 'table' ? '' : '');
+                }
+            }
+            else {
+                const arrayKey = splitFlds[0];
+                const index = Number(splitFlds[1].split(']')[0]);
+                if (!element[arrayKey] || !Array.isArray(element[arrayKey]))
+                    return from === 'table' ? '' : '';
+                const value = element[arrayKey][index];
+                if (typeof value === "number") {
+                    element = value ?? 0;
+                }
+                else if (typeof value === "boolean") {
+                    element = value;
+                }
+                else {
+                    element = (value && value !== '') ? value : (from === 'table' ? '' : '');
+                }
+            }
+        }
+        if (type === 'list') {
+            if (typeof element === 'string') {
+                return element;
+            }
+            else {
+                return this.listDataGet(element, ques, from, mode);
+            }
+        }
+        if (typeof element === 'boolean')
+            return element;
+        if (typeof element === 'number')
+            return element;
+        return element ?? '';
+    }
+    // SKS11AUG25 list data get function
+    listDataGet(event, ques, from, mode) {
+        const values = this.getValues(event, ques?.question?.subText?.field, from);
+        const filteredValues = Object.values(values).filter(val => val && val !== '');
+        if (mode === 'view') {
+            if (filteredValues.length === 0)
+                return from === 'table' ? '' : '';
+            const html = filteredValues
+                .map((val, index) => {
+                if (index === 0) {
+                    return filteredValues.length > 1 ? `<b>${val}</b>` : val;
+                }
+                else if (index === 1) {
+                    return `<span style="font-size: 12px !important;">${val}</span>`;
+                }
+                else {
+                    return `<small style="font-size: 11px !important;">${val}</small>`;
+                }
+            })
+                .join('<br>');
+            return this.sanitizer.bypassSecurityTrustHtml(html);
+        }
+        return filteredValues.join(' | ') || (from === 'table' ? '' : '');
+    }
+    // SKS11AUG25 data get from array fields
+    getValues(element, columns, from) {
+        const result = {};
+        if (!element || !columns)
+            return result;
+        const columnArray = Array.isArray(columns) ? columns : [columns];
+        columnArray.forEach((column) => {
+            if (!column)
+                return;
+            let tempElement = element;
+            const fields = column.split('.');
+            for (const field of fields) {
+                if (!tempElement)
+                    break;
+                const splitFields = field.split('[');
+                if (splitFields.length === 1) {
+                    tempElement = tempElement[field];
+                }
+                else {
+                    const indexMatch = splitFields[1]?.match(/(\d+)\]/);
+                    if (indexMatch) {
+                        const index = Number(indexMatch[1]);
+                        tempElement = tempElement[splitFields[0]]?.[index];
+                    }
+                }
+            }
+            result[column] = tempElement || (from === 'table' ? '' : '');
+        });
+        return typeof result === "boolean" ? result : typeof result === "number" ? result ?? 0 : result || '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NxtGetValuePipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: NxtGetValuePipe, isStandalone: true, name: "getValue", pure: false });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NxtGetValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'getValue',
+                    pure: false,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
+
 class nxtDropdown {
     countryService;
     translationService;
@@ -48323,12 +48445,12 @@ class nxtDropdown {
                                 results.push(resp);
                             }
                             this.options = Array.isArray(results) ? results : [];
-                            this.filteredOptions = [...this.options];
+                            this.filteredOptions = this.apiMeta?.isFilter ? this.arrayFilter(this.options) : [...(this.options || [])];
                         }
                         else {
                             responses = changeValue.valueObj;
                             this.options = Array.isArray(responses) ? responses : [];
-                            this.filteredOptions = [...this.options];
+                            this.filteredOptions = this.apiMeta?.isFilter ? this.arrayFilter(this.options) : [...(this.options || [])];
                         }
                         this.cdr.markForCheck();
                         // VD 25Oct24 - Store fetched options in local storage
@@ -48378,7 +48500,7 @@ class nxtDropdown {
             if (this.apiMeta && !this.apiMeta.isDependentField && this.selectedOption?.value === this.selectedValue) {
                 this.selectedValue = this.selectedOption?.label;
             }
-            this.filteredOptions = Array.isArray(this.options) ? [...this.options] : [];
+            this.filteredOptions = this.apiMeta?.isFilter ? this.arrayFilter(this.options) : [...(this.options || [])];
         }
     }
     getOptions() {
@@ -48398,12 +48520,12 @@ class nxtDropdown {
                     if (cachedOptions) {
                         let cachedOptionsVal = JSON.parse(cachedOptions) || [];
                         this.options = Array.isArray(cachedOptionsVal) ? cachedOptionsVal : [];
-                        this.filteredOptions = [...this.options];
+                        this.filteredOptions = this.apiMeta?.isFilter ? this.arrayFilter(this.options) : [...(this.options || [])];
                     }
                     else {
                         if (this.apiMeta.endpoint && !this.apiMeta.isDependentField) {
                             this.options = [];
-                            this.filteredOptions = [...this.options];
+                            this.filteredOptions = this.apiMeta?.isFilter ? this.arrayFilter(this.options) : [...(this.options || [])];
                         }
                         // VD 09Sep24- setup the query param for api call // MR 08JAN24 DependentField API Fix moved below logic from above if condition
                         let fullEndPoint;
@@ -48454,12 +48576,12 @@ class nxtDropdown {
                                                 results.push(resp);
                                             }
                                             this.options = Array.isArray(results) ? results : [];
-                                            this.filteredOptions = [...this.options];
+                                            this.filteredOptions = this.apiMeta?.isFilter ? this.arrayFilter(this.options) : [...(this.options || [])];
                                         }
                                         else { // VD 19JAN24 - if response has value(which is array) only
                                             responses = apiResponse;
                                             this.options = Array.isArray(responses) ? responses : [];
-                                            this.filteredOptions = [...this.options];
+                                            this.filteredOptions = this.apiMeta?.isFilter ? this.arrayFilter(this.options) : [...(this.options || [])];
                                         }
                                         // VD 25Oct24 - Store fetched options in local storage
                                         if (this.apiMeta?.uniqueKey) {
@@ -48470,7 +48592,7 @@ class nxtDropdown {
                                         this.cdr.markForCheck();
                                     }, error: () => {
                                         this.options = [];
-                                        this.filteredOptions = [...this.options];
+                                        this.filteredOptions = this.apiMeta?.isFilter ? this.arrayFilter(this.options) : [...(this.options || [])];
                                         this.noDataFound = true;
                                         this.isLoading = false;
                                         this.cdr.markForCheck();
@@ -48496,8 +48618,8 @@ class nxtDropdown {
             if (this.apiMeta?.isObject) {
                 value = event;
             }
-            else if (changeField && event?.[changeField] !== undefined) {
-                value = event[changeField];
+            else if (changeField && this.dataService.getValue(event, changeField) !== undefined) {
+                value = this.dataService.getValue(event, changeField);
             }
             else {
                 value = event?.value ?? '';
@@ -48515,7 +48637,7 @@ class nxtDropdown {
         if (Array.isArray(this.options) && this.options?.length > 0) {
             const tempOption = [...this.options];
             for (const opt of tempOption) {
-                const label = opt?.[changeField];
+                const label = this.dataService.getValue(opt, changeField);
                 if (this.apiMeta && !this.apiMeta.isDependentField && label === currentValue && this.from !== 'normalDropDown') {
                     this.selectedOption = opt;
                     break;
@@ -48565,7 +48687,7 @@ class nxtDropdown {
                 value = event?.value || event?.valueObj || event || '';
             }
         }
-        if (ques.singleFieldChange) {
+        if (ques?.singleFieldChange) {
             let change = {};
             change['fromQuestionId'] = this.question?.id;
             change['valueObj'] = value;
@@ -48583,15 +48705,15 @@ class nxtDropdown {
     filterOptions(searchValue) {
         this.searchText = searchValue;
         if (!searchValue || searchValue === "" || typeof searchValue !== 'string') {
-            this.filteredOptions = Array.isArray(this.options) ? [...this.options] : [];
+            this.filteredOptions = this.apiMeta?.isFilter ? this.arrayFilter(this.options) : [...(this.options || [])];
             return;
         }
         const lowerSearch = searchValue?.trim()?.toLowerCase();
         const changeField = this.apiMeta?.defaultField || (Array.isArray(this.apiMeta?.field) ? this.apiMeta?.field?.[0] : this.apiMeta?.field);
         this.filteredOptions = this.options?.filter(option => {
             let valueToCheck = '';
-            if (changeField && option?.[changeField]) {
-                valueToCheck = option[changeField];
+            if (changeField && this.dataService.getValue(option, changeField)) {
+                valueToCheck = this.dataService.getValue(option, changeField);
             }
             else {
                 valueToCheck = option?.label || option?.value || '';
@@ -48601,14 +48723,27 @@ class nxtDropdown {
         this.cdr.markForCheck();
         this.noDataFound = this.filteredOptions.length === 0;
     }
+    // SKS1JUL26 array filter
+    arrayFilter(array = []) {
+        return array.filter((item) => {
+            if (this.apiMeta && !this.apiMeta.isDependentField) {
+                const field = Array.isArray(this.apiMeta.field)
+                    ? this.apiMeta.field[0]
+                    : this.apiMeta.field;
+                const value = this.dataService.getValue(item, field);
+                return value !== null && value !== undefined && value !== '';
+            }
+            return !!(item?.label || item?.value);
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: nxtDropdown, deps: [{ token: CountryService }, { token: TranslationService }, { token: ChangeService }, { token: DataService }, { token: StorageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: nxtDropdown, isStandalone: true, selector: "nxt-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", readOnly: "readOnly", error: "error", fromShengel: "fromShengel", question: "question", mode: "mode", from: "from", padding: "padding", onlyView: "onlyView", labelFont: "labelFont", label: "label", labelColor: "labelColor", inputTextColor: "inputTextColor", labelSize: "labelSize", inputValueSize: "inputValueSize", labelWeight: "labelWeight", inputWeight: "inputWeight", showLabel: "showLabel", inputBorder: "inputBorder", inputBgColor: "inputBgColor", inputIconLeftSrc: "inputIconLeftSrc" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropdownWrapper class=\"nxt-dropdown-wrapper\" [ngClass]=\"{ 'loading' : isLoading }\">\n  <nxt-input\n    [type]=\"'dropdown'\"\n    [mode]=\"mode\"\n    [from]=\"from\"\n    [value]=\"selectedValue || null\"\n    [selectedOption]=\"selectedOption\"\n    (onFocus)=\"getOptions()\"\n    [labelFont]=\"labelFont\"\n    [label]=\"label ? ((question?.id+'.questionText') | nxtCustomTranslate : label) : ''\"\n    [labelColor]=\"labelColor\"\n    [inputTextColor]=\"inputTextColor\"\n    [labelSize]=\"labelSize\"\n    [inputValueSize]=\"inputValueSize\"\n    [labelWeight]=\"labelWeight\"\n    [inputWeight]=\"inputWeight\"\n    [showLabel]=\"showLabel\"\n    [readOnly]=\"readOnly\"\n    [padding]=\"padding\"\n    [inputBorder]=\"inputBorder\" \n    svgHeight=\"20px\" svgWidth=\"20px\"\n    [placeholder]=\"placeholder\"\n    [required]=\"question?.isOptional\" \n    [inputBgColor]=\" (from === 'normalDropDown' && !inputBgColor) ? '#eff8ff' : (inputBgColor || '#ffffff')\"\n    [inputId]=\"question?.trackingId\"\n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"inputIconLeftSrc\"\n    (toggleEmit)=\"toggle()\"\n    (clearInputEmit)=\"clearSelection()\"\n    [question]=\"question\"\n    [onlyView]=\"onlyView\"\n    (selectEmit)=\"selectChange({value:$event})\"\n    (inputValue)=\"inputValue($event.value,$event.question)\"\n    >\n  </nxt-input>\n  <!-- SKS11JUN25 Dropdown list -->\n  <ul class=\"nxt-dropdown-menu\" *ngIf=\"!isLoading && showOptions\">\n    <!-- No Data -->\n    <li *ngIf=\"!isLoading && noDataFound\" class=\"no-data\">\n      No Data Found\n    </li>\n    <!-- SKS3MAR25 searchable functionality -->\n    <ng-container  *ngIf=\"!isLoading && filteredOptions?.length > 0\">\n      <li *ngFor=\"let item of filteredOptions\" (mousedown)=\"selectChange(item)\" [style.font-size]=\"question?.fontSize || '12px'\">\n        @if(apiMeta && !apiMeta.isDependentField && item[apiMeta.field]){\n          {{item[ apiMeta.field?.constructor?.name === 'Array' ? apiMeta.field[0] : apiMeta.field ]}}\n        } @else {\n          {{ item.id +'.label' | nxtCustomTranslate : item?.label || item?.value}}\n        }\n      </li>\n    </ng-container>\n    \n  </ul>\n</div>", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10000;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.nxt-dropdown-wrapper{position:relative}.nxt-dropdown-wrapper{position:relative;width:100%}.no-data{font-size:12px}.nxt-dropdown-wrapper:after{content:\"\";position:absolute;left:0;bottom:0;width:100%;height:2px;overflow:hidden}.nxt-dropdown-wrapper.loading:after{background:linear-gradient(90deg,transparent,#007bff,transparent);background-size:200% 100%;animation:shimmer 1.2s linear infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: nxtDropdown, isStandalone: true, selector: "nxt-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", readOnly: "readOnly", error: "error", fromShengel: "fromShengel", question: "question", mode: "mode", from: "from", padding: "padding", onlyView: "onlyView", labelFont: "labelFont", label: "label", labelColor: "labelColor", inputTextColor: "inputTextColor", labelSize: "labelSize", inputValueSize: "inputValueSize", labelWeight: "labelWeight", inputWeight: "inputWeight", showLabel: "showLabel", inputBorder: "inputBorder", inputBgColor: "inputBgColor", inputIconLeftSrc: "inputIconLeftSrc" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropdownWrapper class=\"nxt-dropdown-wrapper\" [ngClass]=\"{ 'loading' : isLoading }\">\n  <nxt-input\n    [type]=\"'dropdown'\"\n    [mode]=\"mode\"\n    [from]=\"from\"\n    [value]=\"selectedValue || null\"\n    [selectedOption]=\"selectedOption\"\n    (onFocus)=\"getOptions()\"\n    [labelFont]=\"labelFont\"\n    [label]=\"label ? ((question?.id+'.questionText') | nxtCustomTranslate : label) : ''\"\n    [labelColor]=\"labelColor\"\n    [inputTextColor]=\"inputTextColor\"\n    [labelSize]=\"labelSize\"\n    [inputValueSize]=\"inputValueSize\"\n    [labelWeight]=\"labelWeight\"\n    [inputWeight]=\"inputWeight\"\n    [showLabel]=\"showLabel\"\n    [readOnly]=\"readOnly\"\n    [padding]=\"padding\"\n    [inputBorder]=\"inputBorder\" \n    svgHeight=\"20px\" svgWidth=\"20px\"\n    [placeholder]=\"placeholder\"\n    [required]=\"question?.isOptional\" \n    [inputBgColor]=\" (from === 'normalDropDown' && !inputBgColor) ? '#eff8ff' : (inputBgColor || '#ffffff')\"\n    [inputId]=\"question?.trackingId\"\n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"inputIconLeftSrc\"\n    (toggleEmit)=\"toggle()\"\n    (clearInputEmit)=\"clearSelection()\"\n    [question]=\"question\"\n    [onlyView]=\"onlyView\"\n    (selectEmit)=\"selectChange({value:$event})\"\n    (inputValue)=\"inputValue($event.value,$event.question)\"\n    >\n  </nxt-input>\n  <!-- SKS11JUN25 Dropdown list -->\n  <ul class=\"nxt-dropdown-menu\" *ngIf=\"!isLoading && showOptions\">\n    <!-- No Data -->\n    <li *ngIf=\"!isLoading && noDataFound\" class=\"no-data\">\n      No Data Found\n    </li>\n    <!-- SKS3MAR25 searchable functionality -->\n    <ng-container  *ngIf=\"!isLoading && filteredOptions?.length > 0\">\n      <li *ngFor=\"let item of filteredOptions\" (mousedown)=\"selectChange(item)\" [style.font-size]=\"question?.fontSize || '12px'\">\n        @if(apiMeta && !apiMeta.isDependentField && (item | getValue: apiMeta.field?.constructor?.name === 'Array' ? apiMeta.field[0] : apiMeta.field)){\n          {{item | getValue: apiMeta.field?.constructor?.name === 'Array' ? apiMeta.field[0] : apiMeta.field }}\n        } @else if(item?.label) {\n          {{ item.id +'.label' | nxtCustomTranslate : item?.label || item?.value}}\n        }\n      </li>\n    </ng-container>\n    \n  </ul>\n</div>", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10000;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.nxt-dropdown-wrapper{position:relative}.nxt-dropdown-wrapper{position:relative;width:100%}.no-data{font-size:12px}.nxt-dropdown-wrapper:after{content:\"\";position:absolute;left:0;bottom:0;width:100%;height:2px;overflow:hidden}.nxt-dropdown-wrapper.loading:after{background:linear-gradient(90deg,transparent,#007bff,transparent);background-size:200% 100%;animation:shimmer 1.2s linear infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: nxtDropdown, decorators: [{
             type: Component,
             args: [{ selector: 'nxt-dropdown', standalone: true, imports: [
-                        CommonModule, FormsModule, NxtInput, NxtCustomTranslatePipe
-                    ], template: "<div #dropdownWrapper class=\"nxt-dropdown-wrapper\" [ngClass]=\"{ 'loading' : isLoading }\">\n  <nxt-input\n    [type]=\"'dropdown'\"\n    [mode]=\"mode\"\n    [from]=\"from\"\n    [value]=\"selectedValue || null\"\n    [selectedOption]=\"selectedOption\"\n    (onFocus)=\"getOptions()\"\n    [labelFont]=\"labelFont\"\n    [label]=\"label ? ((question?.id+'.questionText') | nxtCustomTranslate : label) : ''\"\n    [labelColor]=\"labelColor\"\n    [inputTextColor]=\"inputTextColor\"\n    [labelSize]=\"labelSize\"\n    [inputValueSize]=\"inputValueSize\"\n    [labelWeight]=\"labelWeight\"\n    [inputWeight]=\"inputWeight\"\n    [showLabel]=\"showLabel\"\n    [readOnly]=\"readOnly\"\n    [padding]=\"padding\"\n    [inputBorder]=\"inputBorder\" \n    svgHeight=\"20px\" svgWidth=\"20px\"\n    [placeholder]=\"placeholder\"\n    [required]=\"question?.isOptional\" \n    [inputBgColor]=\" (from === 'normalDropDown' && !inputBgColor) ? '#eff8ff' : (inputBgColor || '#ffffff')\"\n    [inputId]=\"question?.trackingId\"\n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"inputIconLeftSrc\"\n    (toggleEmit)=\"toggle()\"\n    (clearInputEmit)=\"clearSelection()\"\n    [question]=\"question\"\n    [onlyView]=\"onlyView\"\n    (selectEmit)=\"selectChange({value:$event})\"\n    (inputValue)=\"inputValue($event.value,$event.question)\"\n    >\n  </nxt-input>\n  <!-- SKS11JUN25 Dropdown list -->\n  <ul class=\"nxt-dropdown-menu\" *ngIf=\"!isLoading && showOptions\">\n    <!-- No Data -->\n    <li *ngIf=\"!isLoading && noDataFound\" class=\"no-data\">\n      No Data Found\n    </li>\n    <!-- SKS3MAR25 searchable functionality -->\n    <ng-container  *ngIf=\"!isLoading && filteredOptions?.length > 0\">\n      <li *ngFor=\"let item of filteredOptions\" (mousedown)=\"selectChange(item)\" [style.font-size]=\"question?.fontSize || '12px'\">\n        @if(apiMeta && !apiMeta.isDependentField && item[apiMeta.field]){\n          {{item[ apiMeta.field?.constructor?.name === 'Array' ? apiMeta.field[0] : apiMeta.field ]}}\n        } @else {\n          {{ item.id +'.label' | nxtCustomTranslate : item?.label || item?.value}}\n        }\n      </li>\n    </ng-container>\n    \n  </ul>\n</div>", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10000;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.nxt-dropdown-wrapper{position:relative}.nxt-dropdown-wrapper{position:relative;width:100%}.no-data{font-size:12px}.nxt-dropdown-wrapper:after{content:\"\";position:absolute;left:0;bottom:0;width:100%;height:2px;overflow:hidden}.nxt-dropdown-wrapper.loading:after{background:linear-gradient(90deg,transparent,#007bff,transparent);background-size:200% 100%;animation:shimmer 1.2s linear infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
+                        CommonModule, FormsModule, NxtInput, NxtCustomTranslatePipe, NxtGetValuePipe
+                    ], template: "<div #dropdownWrapper class=\"nxt-dropdown-wrapper\" [ngClass]=\"{ 'loading' : isLoading }\">\n  <nxt-input\n    [type]=\"'dropdown'\"\n    [mode]=\"mode\"\n    [from]=\"from\"\n    [value]=\"selectedValue || null\"\n    [selectedOption]=\"selectedOption\"\n    (onFocus)=\"getOptions()\"\n    [labelFont]=\"labelFont\"\n    [label]=\"label ? ((question?.id+'.questionText') | nxtCustomTranslate : label) : ''\"\n    [labelColor]=\"labelColor\"\n    [inputTextColor]=\"inputTextColor\"\n    [labelSize]=\"labelSize\"\n    [inputValueSize]=\"inputValueSize\"\n    [labelWeight]=\"labelWeight\"\n    [inputWeight]=\"inputWeight\"\n    [showLabel]=\"showLabel\"\n    [readOnly]=\"readOnly\"\n    [padding]=\"padding\"\n    [inputBorder]=\"inputBorder\" \n    svgHeight=\"20px\" svgWidth=\"20px\"\n    [placeholder]=\"placeholder\"\n    [required]=\"question?.isOptional\" \n    [inputBgColor]=\" (from === 'normalDropDown' && !inputBgColor) ? '#eff8ff' : (inputBgColor || '#ffffff')\"\n    [inputId]=\"question?.trackingId\"\n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"inputIconLeftSrc\"\n    (toggleEmit)=\"toggle()\"\n    (clearInputEmit)=\"clearSelection()\"\n    [question]=\"question\"\n    [onlyView]=\"onlyView\"\n    (selectEmit)=\"selectChange({value:$event})\"\n    (inputValue)=\"inputValue($event.value,$event.question)\"\n    >\n  </nxt-input>\n  <!-- SKS11JUN25 Dropdown list -->\n  <ul class=\"nxt-dropdown-menu\" *ngIf=\"!isLoading && showOptions\">\n    <!-- No Data -->\n    <li *ngIf=\"!isLoading && noDataFound\" class=\"no-data\">\n      No Data Found\n    </li>\n    <!-- SKS3MAR25 searchable functionality -->\n    <ng-container  *ngIf=\"!isLoading && filteredOptions?.length > 0\">\n      <li *ngFor=\"let item of filteredOptions\" (mousedown)=\"selectChange(item)\" [style.font-size]=\"question?.fontSize || '12px'\">\n        @if(apiMeta && !apiMeta.isDependentField && (item | getValue: apiMeta.field?.constructor?.name === 'Array' ? apiMeta.field[0] : apiMeta.field)){\n          {{item | getValue: apiMeta.field?.constructor?.name === 'Array' ? apiMeta.field[0] : apiMeta.field }}\n        } @else if(item?.label) {\n          {{ item.id +'.label' | nxtCustomTranslate : item?.label || item?.value}}\n        }\n      </li>\n    </ng-container>\n    \n  </ul>\n</div>", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10000;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.nxt-dropdown-wrapper{position:relative}.nxt-dropdown-wrapper{position:relative;width:100%}.no-data{font-size:12px}.nxt-dropdown-wrapper:after{content:\"\";position:absolute;left:0;bottom:0;width:100%;height:2px;overflow:hidden}.nxt-dropdown-wrapper.loading:after{background:linear-gradient(90deg,transparent,#007bff,transparent);background-size:200% 100%;animation:shimmer 1.2s linear infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"] }]
         }], ctorParameters: () => [{ type: CountryService }, { type: TranslationService }, { type: ChangeService }, { type: DataService }, { type: StorageService }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
                 type: Input
             }], placeholder: [{
@@ -49679,128 +49814,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 }]
         }] });
 
-class NxtGetValuePipe {
-    sanitizer;
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    transform(element, column, type, ques, from, mode) {
-        if (!element || !column)
-            return from === 'table' ? '' : '';
-        const flds = column?.split('.');
-        for (let i = 0; i < flds?.length; i++) {
-            if (element === null || element === undefined)
-                return from === 'table' ? '' : ''; // <-- Protect against null here
-            let splitFlds = flds[i].split('[');
-            if (splitFlds.length === 1) {
-                const value = element[splitFlds[0]];
-                if (typeof value === "number") {
-                    element = value ?? 0;
-                }
-                else if (typeof value === "boolean") {
-                    element = value;
-                }
-                else {
-                    element = (value && value !== '') ? value : (from === 'table' ? '' : '');
-                }
-            }
-            else {
-                const arrayKey = splitFlds[0];
-                const index = Number(splitFlds[1].split(']')[0]);
-                if (!element[arrayKey] || !Array.isArray(element[arrayKey]))
-                    return from === 'table' ? '' : '';
-                const value = element[arrayKey][index];
-                if (typeof value === "number") {
-                    element = value ?? 0;
-                }
-                else if (typeof value === "boolean") {
-                    element = value;
-                }
-                else {
-                    element = (value && value !== '') ? value : (from === 'table' ? '' : '');
-                }
-            }
-        }
-        if (type === 'list') {
-            if (typeof element === 'string') {
-                return element;
-            }
-            else {
-                return this.listDataGet(element, ques, from, mode);
-            }
-        }
-        if (typeof element === 'boolean')
-            return element;
-        if (typeof element === 'number')
-            return element;
-        return element ?? '';
-    }
-    // SKS11AUG25 list data get function
-    listDataGet(event, ques, from, mode) {
-        const values = this.getValues(event, ques?.question?.subText?.field, from);
-        const filteredValues = Object.values(values).filter(val => val && val !== '');
-        if (mode === 'view') {
-            if (filteredValues.length === 0)
-                return from === 'table' ? '' : '';
-            const html = filteredValues
-                .map((val, index) => {
-                if (index === 0) {
-                    return filteredValues.length > 1 ? `<b>${val}</b>` : val;
-                }
-                else if (index === 1) {
-                    return `<span style="font-size: 12px !important;">${val}</span>`;
-                }
-                else {
-                    return `<small style="font-size: 11px !important;">${val}</small>`;
-                }
-            })
-                .join('<br>');
-            return this.sanitizer.bypassSecurityTrustHtml(html);
-        }
-        return filteredValues.join(' | ') || (from === 'table' ? '' : '');
-    }
-    // SKS11AUG25 data get from array fields
-    getValues(element, columns, from) {
-        const result = {};
-        if (!element || !columns)
-            return result;
-        const columnArray = Array.isArray(columns) ? columns : [columns];
-        columnArray.forEach((column) => {
-            if (!column)
-                return;
-            let tempElement = element;
-            const fields = column.split('.');
-            for (const field of fields) {
-                if (!tempElement)
-                    break;
-                const splitFields = field.split('[');
-                if (splitFields.length === 1) {
-                    tempElement = tempElement[field];
-                }
-                else {
-                    const indexMatch = splitFields[1]?.match(/(\d+)\]/);
-                    if (indexMatch) {
-                        const index = Number(indexMatch[1]);
-                        tempElement = tempElement[splitFields[0]]?.[index];
-                    }
-                }
-            }
-            result[column] = tempElement || (from === 'table' ? '' : '');
-        });
-        return typeof result === "boolean" ? result : typeof result === "number" ? result ?? 0 : result || '';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NxtGetValuePipe, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.25", ngImport: i0, type: NxtGetValuePipe, isStandalone: true, name: "getValue", pure: false });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NxtGetValuePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'getValue',
-                    pure: false,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }] });
-
 class ListViewFilterComponent {
     fb;
     nxtCustomTranslate;
@@ -50848,7 +50861,7 @@ class NxtSearchBox {
         this.clickItem(null, 'remove');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NxtSearchBox, deps: [{ token: StorageService }, { token: ChangeService }, { token: DataService }, { token: CountryService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: NxtSearchBox, isStandalone: true, selector: "nxt-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", mode: "mode", from: "from", value: "value", onlyView: "onlyView", rowData: "rowData" }, outputs: { searchValueChange: "searchValueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"search-wrapper\" #searchWrapper>\n  <nxt-input \n    [type]=\"'list'\" \n    [mode]=\"mode\" \n    [from]=\"from\" [readOnly]=\"readOnly\"\n    [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n    [labelFont]=\"question?.font\" \n    [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n    [labelColor]=\"question?.color\"\n    [labelSize]=\"question?.fontSize\" \n    [inputValueSize]=\"question?.fontSize\" \n    [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" \n    [showLabel]=\"question?.style?.showLabel\" \n    inputBorder=\"#ccc\" \n    svgHeight=\"20px\"\n    svgWidth=\"20px\" \n    [placeholder]=\"placeHolderText\" \n    [required]=\"question?.isOptional\" \n    inputBgColor=\"#ffffff\"\n    [inputId]=\"question?.trackingId\" \n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" \n    (inputValue)=\"getSourceDataLocal($event); inputValue($event.value, $event.question)\" \n    (onFocus)=\"onInputFocus()\"\n    (onBlur)=\"onInputBlur()\"\n    [showSuggestion]=\"showSuggestion\" \n    ariaOwns=\"selectList\" \n    ariaHasPopup=\"listbox\" \n    [isLoading]=\"isLoading\" \n    [question]=\"question\"\n    [onlyView]=\"onlyView\"\n    (removeValueEmit)=\"removeValueEmit()\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\" *ngIf=\"showSuggestion\">\n    <div *ngIf=\"finalResults().length > 0\" class=\"nxt-suggestions-container\">\n      <div *ngFor=\"let item of finalResults(); trackBy: trackByFn\" \n           (click)=\"clickItem(item)\" \n           class=\"suggestion-item\" \n           role=\"option\"\n           tabindex=\"0\"\n           (keydown.enter)=\"clickItem(item)\"\n           (keydown.space)=\"clickItem(item)\">\n        <div class=\"item-content\">\n          <div class=\"item-details\">\n            <div *ngIf=\"item.thumbnail\" class=\"thumbnail-wrapper\">\n              <img [src]=\"item.thumbnail\" [alt]=\"item.name + ' avatar'\" />\n            </div>\n            <div class=\"item-text\">\n              <!-- Primary text (first key) -->\n              <ng-container *ngIf=\"getKeys(getValues(item, SearchItem)).length > 0\">\n                <div class=\"item-name primary\" \n                     [innerHTML]=\"highlightText(getValues(item, SearchItem)[getKeys(getValues(item, SearchItem))[0]], searchKeyWord)\">\n                </div>\n              </ng-container>\n              \n              <!-- Secondary text (remaining keys) -->\n              <div class=\"item-secondary\" *ngIf=\"getKeys(getValues(item, SearchItem)).length > 1\">\n                <ng-container *ngFor=\"let key of getKeys(getValues(item, SearchItem)); let i = index\">\n                  <ng-container *ngIf=\"i > 0\">\n                    <span class=\"secondary-text\" \n                          [innerHTML]=\"highlightText(getValues(item, SearchItem)[key], searchKeyWord)\">\n                    </span>\n                    <span class=\"separator\" *ngIf=\"i < getKeys(getValues(item, SearchItem)).length - 1\"> | </span>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"noResult && searchKeyWord\" class=\"no-results\">\n      <div class=\"no-results-content\">\n        <p>\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <path d=\"m21 21-4.35-4.35\"></path>\n          </svg>\n          {{ 'NO_RESULTS_FOUND' | nxtCustomTranslate : 'No results found for' }} {{searchKeyWord}}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".search-wrapper{position:relative;width:100%}.suggestion-wrapper{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000001a;z-index:1001;max-height:300px;overflow:hidden}.nxt-suggestions-container{max-height:300px;overflow-y:auto;min-width:100%}.suggestion-item{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease;outline:none}.suggestion-item:hover,.suggestion-item:focus{background-color:#f5f5f5}.suggestion-item:last-child{border-bottom:none}.item-content{padding:5px}.item-details{display:flex;align-items:flex-start;gap:12px;text-align:left}.thumbnail-wrapper{flex-shrink:0}.thumbnail-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}.item-text{flex:1;min-width:0}.item-name{font-size:14px;font-weight:500;color:#333;line-height:1.4;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.item-secondary{font-size:12px;color:#666;line-height:1.3;display:flex}.secondary-text{display:inline}.separator{color:#999;margin:0 3px}.no-results{padding:5px;text-align:center;color:#666}.no-results-content{display:flex}.no-results-content svg{width:15px;height:15px}.no-results-content p{color:#6b7280;margin:0;font-size:11px}:host ::ng-deep .highlight{font-weight:700;display:inline}.nxt-suggestions-container::-webkit-scrollbar{width:6px}.nxt-suggestions-container::-webkit-scrollbar-track{background:#f1f1f1}.nxt-suggestions-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.nxt-suggestions-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media(max-width:768px){.suggestion-wrapper,.nxt-suggestions-container{max-height:250px}.item-content{padding:10px 12px}.item-details{gap:8px}.thumbnail-wrapper img{width:32px;height:32px}.item-name{font-size:13px}.item-secondary{font-size:11px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: NxtSearchBox, isStandalone: true, selector: "nxt-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", mode: "mode", from: "from", value: "value", onlyView: "onlyView", rowData: "rowData" }, outputs: { searchValueChange: "searchValueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"search-wrapper\" #searchWrapper>\n  <nxt-input \n    [type]=\"'list'\" \n    [mode]=\"mode\" \n    [from]=\"from\" [readOnly]=\"readOnly\"\n    [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n    [labelFont]=\"question?.font\" \n    [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n    [labelColor]=\"question?.color\"\n    [labelSize]=\"question?.fontSize\" \n    [inputValueSize]=\"question?.fontSize\" \n    [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" \n    [showLabel]=\"question?.style ? question?.style?.showLabel && question?.style?.showLabel !== null && question?.style?.showLabel !== undefined ? question?.style?.showLabel : true : true\" \n    inputBorder=\"#ccc\" \n    svgHeight=\"20px\"\n    svgWidth=\"20px\" \n    [placeholder]=\"placeHolderText\" \n    [required]=\"question?.isOptional\" \n    inputBgColor=\"#ffffff\"\n    [inputId]=\"question?.trackingId\" \n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" \n    (inputValue)=\"getSourceDataLocal($event); inputValue($event.value, $event.question)\" \n    (onFocus)=\"onInputFocus()\"\n    (onBlur)=\"onInputBlur()\"\n    [showSuggestion]=\"showSuggestion\" \n    ariaOwns=\"selectList\" \n    ariaHasPopup=\"listbox\" \n    [isLoading]=\"isLoading\" \n    [question]=\"question\"\n    [onlyView]=\"onlyView\"\n    (removeValueEmit)=\"removeValueEmit()\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\" *ngIf=\"showSuggestion\">\n    <div *ngIf=\"finalResults().length > 0\" class=\"nxt-suggestions-container\">\n      <div *ngFor=\"let item of finalResults(); trackBy: trackByFn\" \n           (click)=\"clickItem(item)\" \n           class=\"suggestion-item\" \n           role=\"option\"\n           tabindex=\"0\"\n           (keydown.enter)=\"clickItem(item)\"\n           (keydown.space)=\"clickItem(item)\">\n        <div class=\"item-content\">\n          <div class=\"item-details\">\n            <div *ngIf=\"item.thumbnail\" class=\"thumbnail-wrapper\">\n              <img [src]=\"item.thumbnail\" [alt]=\"item.name + ' avatar'\" />\n            </div>\n            <div class=\"item-text\">\n              <!-- Primary text (first key) -->\n              <ng-container *ngIf=\"getKeys(getValues(item, SearchItem)).length > 0\">\n                <div class=\"item-name primary\" \n                     [innerHTML]=\"highlightText(getValues(item, SearchItem)[getKeys(getValues(item, SearchItem))[0]], searchKeyWord)\">\n                </div>\n              </ng-container>\n              \n              <!-- Secondary text (remaining keys) -->\n              <div class=\"item-secondary\" *ngIf=\"getKeys(getValues(item, SearchItem)).length > 1\">\n                <ng-container *ngFor=\"let key of getKeys(getValues(item, SearchItem)); let i = index\">\n                  <ng-container *ngIf=\"i > 0\">\n                    <span class=\"secondary-text\" \n                          [innerHTML]=\"highlightText(getValues(item, SearchItem)[key], searchKeyWord)\">\n                    </span>\n                    <span class=\"separator\" *ngIf=\"i < getKeys(getValues(item, SearchItem)).length - 1\"> | </span>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"noResult && searchKeyWord\" class=\"no-results\">\n      <div class=\"no-results-content\">\n        <p>\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <path d=\"m21 21-4.35-4.35\"></path>\n          </svg>\n          {{ 'NO_RESULTS_FOUND' | nxtCustomTranslate : 'No results found for' }} {{searchKeyWord}}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".search-wrapper{position:relative;width:100%}.suggestion-wrapper{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000001a;z-index:1001;max-height:300px;overflow:hidden}.nxt-suggestions-container{max-height:300px;overflow-y:auto;min-width:100%}.suggestion-item{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease;outline:none}.suggestion-item:hover,.suggestion-item:focus{background-color:#f5f5f5}.suggestion-item:last-child{border-bottom:none}.item-content{padding:5px}.item-details{display:flex;align-items:flex-start;gap:12px;text-align:left}.thumbnail-wrapper{flex-shrink:0}.thumbnail-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}.item-text{flex:1;min-width:0}.item-name{font-size:14px;font-weight:500;color:#333;line-height:1.4;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.item-secondary{font-size:12px;color:#666;line-height:1.3;display:flex}.secondary-text{display:inline}.separator{color:#999;margin:0 3px}.no-results{padding:5px;text-align:center;color:#666}.no-results-content{display:flex}.no-results-content svg{width:15px;height:15px}.no-results-content p{color:#6b7280;margin:0;font-size:11px}:host ::ng-deep .highlight{font-weight:700;display:inline}.nxt-suggestions-container::-webkit-scrollbar{width:6px}.nxt-suggestions-container::-webkit-scrollbar-track{background:#f1f1f1}.nxt-suggestions-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.nxt-suggestions-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media(max-width:768px){.suggestion-wrapper,.nxt-suggestions-container{max-height:250px}.item-content{padding:10px 12px}.item-details{gap:8px}.thumbnail-wrapper img{width:32px;height:32px}.item-name{font-size:13px}.item-secondary{font-size:11px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NxtSearchBox, decorators: [{
             type: Component,
@@ -50857,7 +50870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         FormsModule,
                         NxtInput,
                         NxtCustomTranslatePipe
-                    ], template: "<div class=\"search-wrapper\" #searchWrapper>\n  <nxt-input \n    [type]=\"'list'\" \n    [mode]=\"mode\" \n    [from]=\"from\" [readOnly]=\"readOnly\"\n    [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n    [labelFont]=\"question?.font\" \n    [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n    [labelColor]=\"question?.color\"\n    [labelSize]=\"question?.fontSize\" \n    [inputValueSize]=\"question?.fontSize\" \n    [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" \n    [showLabel]=\"question?.style?.showLabel\" \n    inputBorder=\"#ccc\" \n    svgHeight=\"20px\"\n    svgWidth=\"20px\" \n    [placeholder]=\"placeHolderText\" \n    [required]=\"question?.isOptional\" \n    inputBgColor=\"#ffffff\"\n    [inputId]=\"question?.trackingId\" \n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" \n    (inputValue)=\"getSourceDataLocal($event); inputValue($event.value, $event.question)\" \n    (onFocus)=\"onInputFocus()\"\n    (onBlur)=\"onInputBlur()\"\n    [showSuggestion]=\"showSuggestion\" \n    ariaOwns=\"selectList\" \n    ariaHasPopup=\"listbox\" \n    [isLoading]=\"isLoading\" \n    [question]=\"question\"\n    [onlyView]=\"onlyView\"\n    (removeValueEmit)=\"removeValueEmit()\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\" *ngIf=\"showSuggestion\">\n    <div *ngIf=\"finalResults().length > 0\" class=\"nxt-suggestions-container\">\n      <div *ngFor=\"let item of finalResults(); trackBy: trackByFn\" \n           (click)=\"clickItem(item)\" \n           class=\"suggestion-item\" \n           role=\"option\"\n           tabindex=\"0\"\n           (keydown.enter)=\"clickItem(item)\"\n           (keydown.space)=\"clickItem(item)\">\n        <div class=\"item-content\">\n          <div class=\"item-details\">\n            <div *ngIf=\"item.thumbnail\" class=\"thumbnail-wrapper\">\n              <img [src]=\"item.thumbnail\" [alt]=\"item.name + ' avatar'\" />\n            </div>\n            <div class=\"item-text\">\n              <!-- Primary text (first key) -->\n              <ng-container *ngIf=\"getKeys(getValues(item, SearchItem)).length > 0\">\n                <div class=\"item-name primary\" \n                     [innerHTML]=\"highlightText(getValues(item, SearchItem)[getKeys(getValues(item, SearchItem))[0]], searchKeyWord)\">\n                </div>\n              </ng-container>\n              \n              <!-- Secondary text (remaining keys) -->\n              <div class=\"item-secondary\" *ngIf=\"getKeys(getValues(item, SearchItem)).length > 1\">\n                <ng-container *ngFor=\"let key of getKeys(getValues(item, SearchItem)); let i = index\">\n                  <ng-container *ngIf=\"i > 0\">\n                    <span class=\"secondary-text\" \n                          [innerHTML]=\"highlightText(getValues(item, SearchItem)[key], searchKeyWord)\">\n                    </span>\n                    <span class=\"separator\" *ngIf=\"i < getKeys(getValues(item, SearchItem)).length - 1\"> | </span>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"noResult && searchKeyWord\" class=\"no-results\">\n      <div class=\"no-results-content\">\n        <p>\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <path d=\"m21 21-4.35-4.35\"></path>\n          </svg>\n          {{ 'NO_RESULTS_FOUND' | nxtCustomTranslate : 'No results found for' }} {{searchKeyWord}}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".search-wrapper{position:relative;width:100%}.suggestion-wrapper{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000001a;z-index:1001;max-height:300px;overflow:hidden}.nxt-suggestions-container{max-height:300px;overflow-y:auto;min-width:100%}.suggestion-item{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease;outline:none}.suggestion-item:hover,.suggestion-item:focus{background-color:#f5f5f5}.suggestion-item:last-child{border-bottom:none}.item-content{padding:5px}.item-details{display:flex;align-items:flex-start;gap:12px;text-align:left}.thumbnail-wrapper{flex-shrink:0}.thumbnail-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}.item-text{flex:1;min-width:0}.item-name{font-size:14px;font-weight:500;color:#333;line-height:1.4;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.item-secondary{font-size:12px;color:#666;line-height:1.3;display:flex}.secondary-text{display:inline}.separator{color:#999;margin:0 3px}.no-results{padding:5px;text-align:center;color:#666}.no-results-content{display:flex}.no-results-content svg{width:15px;height:15px}.no-results-content p{color:#6b7280;margin:0;font-size:11px}:host ::ng-deep .highlight{font-weight:700;display:inline}.nxt-suggestions-container::-webkit-scrollbar{width:6px}.nxt-suggestions-container::-webkit-scrollbar-track{background:#f1f1f1}.nxt-suggestions-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.nxt-suggestions-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media(max-width:768px){.suggestion-wrapper,.nxt-suggestions-container{max-height:250px}.item-content{padding:10px 12px}.item-details{gap:8px}.thumbnail-wrapper img{width:32px;height:32px}.item-name{font-size:13px}.item-secondary{font-size:11px}}\n"] }]
+                    ], template: "<div class=\"search-wrapper\" #searchWrapper>\n  <nxt-input \n    [type]=\"'list'\" \n    [mode]=\"mode\" \n    [from]=\"from\" [readOnly]=\"readOnly\"\n    [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n    [labelFont]=\"question?.font\" \n    [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n    [labelColor]=\"question?.color\"\n    [labelSize]=\"question?.fontSize\" \n    [inputValueSize]=\"question?.fontSize\" \n    [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" \n    [showLabel]=\"question?.style ? question?.style?.showLabel && question?.style?.showLabel !== null && question?.style?.showLabel !== undefined ? question?.style?.showLabel : true : true\" \n    inputBorder=\"#ccc\" \n    svgHeight=\"20px\"\n    svgWidth=\"20px\" \n    [placeholder]=\"placeHolderText\" \n    [required]=\"question?.isOptional\" \n    inputBgColor=\"#ffffff\"\n    [inputId]=\"question?.trackingId\" \n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" \n    (inputValue)=\"getSourceDataLocal($event); inputValue($event.value, $event.question)\" \n    (onFocus)=\"onInputFocus()\"\n    (onBlur)=\"onInputBlur()\"\n    [showSuggestion]=\"showSuggestion\" \n    ariaOwns=\"selectList\" \n    ariaHasPopup=\"listbox\" \n    [isLoading]=\"isLoading\" \n    [question]=\"question\"\n    [onlyView]=\"onlyView\"\n    (removeValueEmit)=\"removeValueEmit()\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\" *ngIf=\"showSuggestion\">\n    <div *ngIf=\"finalResults().length > 0\" class=\"nxt-suggestions-container\">\n      <div *ngFor=\"let item of finalResults(); trackBy: trackByFn\" \n           (click)=\"clickItem(item)\" \n           class=\"suggestion-item\" \n           role=\"option\"\n           tabindex=\"0\"\n           (keydown.enter)=\"clickItem(item)\"\n           (keydown.space)=\"clickItem(item)\">\n        <div class=\"item-content\">\n          <div class=\"item-details\">\n            <div *ngIf=\"item.thumbnail\" class=\"thumbnail-wrapper\">\n              <img [src]=\"item.thumbnail\" [alt]=\"item.name + ' avatar'\" />\n            </div>\n            <div class=\"item-text\">\n              <!-- Primary text (first key) -->\n              <ng-container *ngIf=\"getKeys(getValues(item, SearchItem)).length > 0\">\n                <div class=\"item-name primary\" \n                     [innerHTML]=\"highlightText(getValues(item, SearchItem)[getKeys(getValues(item, SearchItem))[0]], searchKeyWord)\">\n                </div>\n              </ng-container>\n              \n              <!-- Secondary text (remaining keys) -->\n              <div class=\"item-secondary\" *ngIf=\"getKeys(getValues(item, SearchItem)).length > 1\">\n                <ng-container *ngFor=\"let key of getKeys(getValues(item, SearchItem)); let i = index\">\n                  <ng-container *ngIf=\"i > 0\">\n                    <span class=\"secondary-text\" \n                          [innerHTML]=\"highlightText(getValues(item, SearchItem)[key], searchKeyWord)\">\n                    </span>\n                    <span class=\"separator\" *ngIf=\"i < getKeys(getValues(item, SearchItem)).length - 1\"> | </span>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"noResult && searchKeyWord\" class=\"no-results\">\n      <div class=\"no-results-content\">\n        <p>\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <path d=\"m21 21-4.35-4.35\"></path>\n          </svg>\n          {{ 'NO_RESULTS_FOUND' | nxtCustomTranslate : 'No results found for' }} {{searchKeyWord}}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".search-wrapper{position:relative;width:100%}.suggestion-wrapper{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000001a;z-index:1001;max-height:300px;overflow:hidden}.nxt-suggestions-container{max-height:300px;overflow-y:auto;min-width:100%}.suggestion-item{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease;outline:none}.suggestion-item:hover,.suggestion-item:focus{background-color:#f5f5f5}.suggestion-item:last-child{border-bottom:none}.item-content{padding:5px}.item-details{display:flex;align-items:flex-start;gap:12px;text-align:left}.thumbnail-wrapper{flex-shrink:0}.thumbnail-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}.item-text{flex:1;min-width:0}.item-name{font-size:14px;font-weight:500;color:#333;line-height:1.4;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.item-secondary{font-size:12px;color:#666;line-height:1.3;display:flex}.secondary-text{display:inline}.separator{color:#999;margin:0 3px}.no-results{padding:5px;text-align:center;color:#666}.no-results-content{display:flex}.no-results-content svg{width:15px;height:15px}.no-results-content p{color:#6b7280;margin:0;font-size:11px}:host ::ng-deep .highlight{font-weight:700;display:inline}.nxt-suggestions-container::-webkit-scrollbar{width:6px}.nxt-suggestions-container::-webkit-scrollbar-track{background:#f1f1f1}.nxt-suggestions-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.nxt-suggestions-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media(max-width:768px){.suggestion-wrapper,.nxt-suggestions-container{max-height:250px}.item-content{padding:10px 12px}.item-details{gap:8px}.thumbnail-wrapper img{width:32px;height:32px}.item-name{font-size:13px}.item-secondary{font-size:11px}}\n"] }]
         }], ctorParameters: () => [{ type: StorageService }, { type: ChangeService }, { type: DataService }, { type: CountryService }, { type: i0.ElementRef }], propDecorators: { placeHolderText: [{
                 type: Input
             }], question: [{
@@ -51893,6 +51906,8 @@ class NxtDatatable {
     onlyView = false;
     tableHeight; // SKS17DEC25 table height
     serialNumberColumn = true;
+    /** SKS1JUL26 SKS1JUL26: Configuration array for the advanced filter bar. Each entry produces one filter control. */
+    advancedFilters = [];
     tableRowClick = new EventEmitter; // datas to be passed when table row is clicked
     onEditData = new EventEmitter; // if edit button is clicked, the data of that row will be passed
     onSaveData = new EventEmitter; // if save button is clicked, the data of that row will be passed
@@ -52003,6 +52018,16 @@ class NxtDatatable {
     selectedIsEmpty = true;
     destroy$ = new Subject();
     timers = [];
+    // SKS1JUL26 ── Advanced Filter state ─────────────────────────────────────────────────
+    /** Current values for every advanced filter control. */
+    advancedFilterValues = {};
+    /**
+     * SKS1JUL26: Emits a JSON-serialised snapshot of advancedFilterValues
+     * so that debounceTime(300) + distinctUntilChanged() both work correctly.
+     * Subject<void> makes distinctUntilChanged useless because every emission
+     * looks the same. Subject<string> compares serialised state.
+     */
+    advancedFilter$ = new Subject();
     constructor(countryService, storageService, cdRef, translationService, renderer, dataService, changeService) {
         this.countryService = countryService;
         this.storageService = storageService;
@@ -52014,6 +52039,10 @@ class NxtDatatable {
     }
     ngOnChanges(changes) {
         this.currencyOption = this.countryService.getCurrentCurrency();
+        // SKS1JUL26: Re-initialise advanced filter values map when config changes
+        if (changes['advancedFilters']) {
+            this.initializeAdvancedFilters();
+        }
         if ((!changes['tableParams'] || Object.keys(changes).length > 1) || this.pagination) {
             if (changes['isButtonLoading']) {
                 this.deleteModal = this.isButtonLoading;
@@ -52326,6 +52355,20 @@ class NxtDatatable {
                 this.cdRef.detectChanges();
             }
         });
+        // SKS1JUL26: Debounced advanced filter subscription.
+        // Subject<string> emits the JSON-serialised filter state so that
+        // distinctUntilChanged() actually suppresses duplicate emissions.
+        this.advancedFilter$
+            .pipe(debounceTime$1(300), distinctUntilChanged$1(), // compares serialised strings — now meaningful
+        takeUntil$1(this.destroy$))
+            .subscribe(() => {
+            // Reset to page 1 whenever any advanced filter value changes
+            this.pageIndex = 1;
+            // Delegate to the single unified pipeline
+            this.refreshTableData();
+        });
+        // SKS1JUL26: Initialise values map from input config
+        this.initializeAdvancedFilters();
         this.dataSource = { data: [] }; // or use a proper data structure
         const savedColumnMap = new Map(this.tableParams?.currentColumns?.map(col => [col.fieldName, col]) || []);
         this.currentColumns = this.columns.map((column, index) => {
@@ -53258,33 +53301,27 @@ class NxtDatatable {
         return String(value)?.toLowerCase();
     }
     // SKS15FEB25 apply search bar filter using mat
+    // SKS1JUL26: Now a thin facade — updates searchBoxValue then delegates
+    // to refreshTableData() so the full pipeline (advanced → search → column → sort → page) runs.
     applyFilter(event, from) {
-        let filterValue = event ? event?.trim()?.toLowerCase() : '';
         this.searchBoxValue = event ? event.trim() : '';
-        if (!filterValue) {
-            this.dataSource.data = this.prepareActionVisibility(this.originalData);
-        }
-        else if (!this.pagination) {
-            this.dataSource.data = this.prepareActionVisibility(this.originalData.filter(item => this.currentColumns.some(column => {
-                const cellValue = this.getObjValue(item, column.fieldName);
-                const searchable = column?.type === 'date' ? this.formatDateForSearch(cellValue, column) : typeof cellValue === 'string' ? cellValue?.toLowerCase() : cellValue;
-                return typeof searchable === 'string' && searchable?.includes(filterValue);
-            })));
-        }
         if (!this.pagination) {
             if (from !== 'pageParams' && from !== 'onChange')
                 this.pageIndex = 1;
-            this.sFilterData = this.dataSource.data;
-            this.filterTableNos = this.sFilterData?.length;
-            this.totalCount = this.data.length;
-            const start = (Number(this.pageIndex) - 1) * Number(this.pageSize);
-            const end = start + Number(this.pageSize);
-            this.dataSource.data = this.prepareActionVisibility(this.dataSource.data?.slice(start, end));
-            this.filterRetain(from === 'onChange' ? (this.tableParams?.searchFilterData || this.filterDataArray) : this.filterDataArray, from);
+            this.refreshTableData(from);
         }
         else {
-            if (from !== 'onChange')
-                this.NxtTableParamsEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: this.pageIndex }, tableSearch: { fields: this.currentColumns.map(f => f.fieldName), value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection, listView: this.selectedView }, currentColumns: this.currentColumns });
+            // SKS1JUL26 Server-side: just emit; the parent handles filtering
+            if (from !== 'onChange') {
+                this.NxtTableParamsEmit.emit({
+                    pagination: { pageSize: this.pageSize, pageIndex: this.pageIndex },
+                    tableSearch: { fields: this.currentColumns.map(f => f.fieldName), value: this.searchBoxValue },
+                    searchFilterData: this.filterDataArray,
+                    advancedFilterData: this.buildAdvancedFilterObject(),
+                    sort: { column: this.currentSortColumn, direction: this.currentSortDirection, listView: this.selectedView },
+                    currentColumns: this.currentColumns
+                });
+            }
         }
     }
     /** SKS15FEB25 Whether the number of selected elements matches the total number of rows. */
@@ -53358,51 +53395,17 @@ class NxtDatatable {
             .reduce((acc, part) => (acc && acc[part] !== undefined) ? acc[part] : undefined, obj);
     }
     //SKS15FEB25 Retain the filterdata
+    // SKS1JUL26: Simplified — all actual filtering is now done inside
+    // refreshTableData().  filterRetain() is kept for backward compatibility
+    // (external callers, formBuilder path) but delegates internally.
     filterRetain(filterkeyMap, from) {
-        let filterkey = JSON.parse(JSON.stringify(filterkeyMap));
-        if (filterkey && Object.keys(filterkey).length == 0) {
-            this.data = this.sFilterData;
-        }
-        else {
-            this.data = [];
-            let isDataChecked = false;
-            for (let key of Object.keys(filterkey)) {
-                if (filterkey[key] && filterkey[key].length > 0) {
-                    isDataChecked = true;
-                }
-            }
-            if (!isDataChecked) {
-                this.data = this.sFilterData;
-            }
-            else {
-                const filterKeys = Object.keys(filterkey);
-                const data = this.sFilterData.filter((item) => {
-                    return filterKeys.every(key => {
-                        if (!filterkey[key] || filterkey[key].length === 0) {
-                            return true; // skip empty filters
-                        }
-                        const column = this.currentColumns.find(c => c.fieldName === key);
-                        const value = this.getNestedValue(item, key);
-                        const comparable = column?.type === 'date' ? this.formatDateForSearch(value, column) : value;
-                        const normalize = (v) => v ?? "";
-                        return filterkey[key].includes(normalize(comparable));
-                    });
-                });
-                const data1 = [...this.data, ...data];
-                this.data = this.removeDuplicates(data1);
-            }
+        // Update the column-filter state so refreshTableData can read it
+        if (filterkeyMap && Object.keys(filterkeyMap).length > 0) {
+            this.filterDataArray = { ...filterkeyMap };
         }
         if (from !== 'pageParams' && from !== 'onChange')
             this.pageIndex = 1;
-        const start = (Number(this.pageIndex) - 1) * Number(this.pageSize);
-        const end = start + Number(this.pageSize);
-        this.filterBoxData = this.data;
-        this.filterTableNos = this.filterBoxData?.length;
-        if (!this.pagination) {
-            this.dataSource.data = this.prepareActionVisibility(this.data?.slice(start, end));
-        }
-        this.data = this.originalData;
-        this.sortData(this.currentSortColumn, this.currentSortDirection, undefined, from);
+        this.refreshTableData(from);
     }
     // SKS15FEB25 to remove duplicate object from two arrays (safe stringify)
     removeDuplicates(objects) {
@@ -53699,14 +53702,22 @@ class NxtDatatable {
     // SKS15FEB25 for close search filter box
     closefilter(from) {
         this.pageSize = this.pageSize || 10;
-        this.pageIndex = 1;
+        this.pageIndex = 1; // SKS1JUL26: always reset page on filter clear
         this.filterDataArray[this.selectedFilter] = [];
         this.isResized = false;
         if (!this.pagination) {
-            this.filterRetain(this.filterDataArray);
+            this.refreshTableData(from);
+        }
+        if (from !== 'onChange') {
+            this.NxtTableParamsEmit.emit({
+                pagination: { pageSize: this.pageSize, pageIndex: this.pageIndex },
+                tableSearch: { fields: this.currentColumns.map(f => f.fieldName), value: this.searchBoxValue },
+                searchFilterData: this.filterDataArray,
+                advancedFilterData: this.buildAdvancedFilterObject(), // SKS1JUL26: server-side support
+                sort: { column: this.currentSortColumn, direction: this.currentSortDirection, listView: this.selectedView },
+                currentColumns: this.currentColumns
+            });
         }
-        if (from !== 'onChange')
-            this.NxtTableParamsEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: this.pageIndex }, tableSearch: { fields: this.currentColumns.map(f => f.fieldName), value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection, listView: this.selectedView }, currentColumns: this.currentColumns });
     }
     // SKS15FEB25 search filter box checkbox retain
     isSelected(event) {
@@ -53719,9 +53730,10 @@ class NxtDatatable {
     }
     // SKS15FEB25 search filter box checkbox select
     checkedData(event, from) {
-        let selectedArray = [];
-        selectedArray = this.filterDataArray[this.selectedFilter] ? this.filterDataArray[this.selectedFilter] : [];
-        if (selectedArray && selectedArray.includes(event)) {
+        let selectedArray = this.filterDataArray[this.selectedFilter]
+            ? [...this.filterDataArray[this.selectedFilter]]
+            : [];
+        if (selectedArray.includes(event)) {
             selectedArray = selectedArray.filter((item) => item !== event);
         }
         else {
@@ -53734,10 +53746,19 @@ class NxtDatatable {
             this.pageSize = 10;
         }
         else {
-            this.filterRetain(this.filterDataArray);
+            this.pageIndex = 1; // SKS1JUL26: reset page on column filter toggle
+            this.refreshTableData(from);
+        }
+        if (from !== 'onChange') {
+            this.NxtTableParamsEmit.emit({
+                pagination: { pageSize: this.pageSize, pageIndex: this.pageIndex },
+                tableSearch: { fields: this.currentColumns.map(f => f.fieldName), value: this.searchBoxValue },
+                searchFilterData: this.filterDataArray,
+                advancedFilterData: this.buildAdvancedFilterObject(), // SKS1JUL26: server-side support
+                sort: { column: this.currentSortColumn, direction: this.currentSortDirection, listView: this.selectedView },
+                currentColumns: this.currentColumns
+            });
         }
-        if (from !== 'onChange')
-            this.NxtTableParamsEmit.emit({ pagination: { pageSize: this.pageSize, pageIndex: this.pageIndex }, tableSearch: { fields: this.currentColumns.map(f => f.fieldName), value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection, listView: this.selectedView }, currentColumns: this.currentColumns });
     }
     // SKS15FEB25  action column dropdown buttons close
     addClickOutsideListener() {
@@ -54029,8 +54050,337 @@ class NxtDatatable {
     changeAnnounce(event) {
         this.changeService.announceChange(event);
     }
+    // ──────────────────────────────────────────────────────────────────────────
+    // SKS1JUL26 — Advanced Filter Methods + Unified Pipeline
+    // ──────────────────────────────────────────────────────────────────────────
+    /**
+     * THE SINGLE UNIFIED FILTER PIPELINE (client-side mode).
+     *
+     * Pipeline order matches the documented priority:
+     *   originalData
+     *     1. List View  → sFilterData           (managed by listViewEmit / ngOnChanges)
+     *     2. Advanced Filter  → applyAdvancedFilters(sFilterData)
+     *     3. Global Search    → searchBoxValue contains match
+     *     4. Column Filter    → filterDataArray exact match
+     *     5. Sort             → currentSortColumn / currentSortDirection
+     *     6. Pagination       → pageIndex / pageSize → dataSource.data
+     *
+     * For server-side (pagination=true), we skip client filtering and just emit
+     * the full params object (including advancedFilterData) to the parent.
+     *
+     * All event handlers (onAdvancedFilterChange, applyFilter, filterRetain,
+     * checkedData, closefilter, pageParams) ultimately call this method so
+     * there is exactly ONE place where filtering logic lives.
+     */
+    refreshTableData(from) {
+        if (this.pagination) {
+            // ── Server-side mode: just emit; parent does the actual querying ──
+            if (from !== 'onChange') {
+                this.NxtTableParamsEmit.emit({
+                    pagination: { pageSize: this.pageSize, pageIndex: this.pageIndex },
+                    tableSearch: { fields: this.currentColumns.map(f => f.fieldName), value: this.searchBoxValue },
+                    searchFilterData: this.filterDataArray,
+                    advancedFilterData: this.buildAdvancedFilterObject(), // server-side advanced filter values
+                    sort: { column: this.currentSortColumn, direction: this.currentSortDirection, listView: this.selectedView },
+                    currentColumns: this.currentColumns
+                });
+            }
+            return;
+        }
+        // ── Client-side pipeline ─────────────────────────────────────────────
+        // Step 1: Start from list-view filtered data (already set by listViewEmit / ngOnChanges)
+        let result = this.sFilterData || [];
+        // Step 2: Advanced Filter — reuses getObjValue() helper
+        result = this.applyAdvancedFilters(result);
+        // Step 3: Global Search — reuses formatDateForSearch() for date columns
+        const searchVal = this.searchBoxValue?.trim()?.toLowerCase();
+        if (searchVal) {
+            result = result.filter(item => this.currentColumns.some(column => {
+                const cellValue = this.getObjValue(item, column.fieldName);
+                const searchable = column?.type === 'date'
+                    ? this.formatDateForSearch(cellValue, column)
+                    : typeof cellValue === 'string' ? cellValue?.toLowerCase() : cellValue;
+                return typeof searchable === 'string' && searchable?.includes(searchVal);
+            }));
+        }
+        // Step 4: Column Filter (exact match) — reuses getNestedValue() + formatDateForSearch()
+        const columnFilters = this.filterDataArray || {};
+        const hasColumnFilter = Object.keys(columnFilters).some(k => columnFilters[k]?.length > 0);
+        if (hasColumnFilter) {
+            result = result.filter((item) => Object.keys(columnFilters).every(key => {
+                if (!columnFilters[key] || columnFilters[key].length === 0)
+                    return true;
+                const column = this.currentColumns.find(c => c.fieldName === key);
+                const value = this.getNestedValue(item, key);
+                const comparable = column?.type === 'date' ? this.formatDateForSearch(value, column) : value;
+                return columnFilters[key].includes(comparable ?? '');
+            }));
+        }
+        // Step 5: Snapshot filtered result for count display
+        this.filterBoxData = result;
+        this.filterTableNos = result.length;
+        this.totalCount = this.originalData.length;
+        // Step 6: Sort — reuses existing sort comparison logic via getObjValue()
+        if (this.currentSortColumn && this.currentSortDirection !== 'none') {
+            result = [...result].sort((a, b) => {
+                let valueA = this.getObjValue(a, this.currentSortColumn);
+                let valueB = this.getObjValue(b, this.currentSortColumn);
+                if (valueA == null && valueB == null)
+                    return 0;
+                if (valueA == null)
+                    return this.currentSortDirection === 'asc' ? 1 : -1;
+                if (valueB == null)
+                    return this.currentSortDirection === 'asc' ? -1 : 1;
+                if (this.columns?.some(col => col.fieldName === this.currentSortColumn && col?.type === 'date')) {
+                    valueA = new Date(valueA).getTime();
+                    valueB = new Date(valueB).getTime();
+                }
+                else if (typeof valueA === 'string' && typeof valueB === 'string') {
+                    valueA = valueA.toLowerCase();
+                    valueB = valueB.toLowerCase();
+                }
+                else {
+                    valueA = Number(valueA);
+                    valueB = Number(valueB);
+                }
+                if (valueA < valueB)
+                    return this.currentSortDirection === 'asc' ? -1 : 1;
+                if (valueA > valueB)
+                    return this.currentSortDirection === 'asc' ? 1 : -1;
+                return 0;
+            });
+        }
+        // Step 7: Pagination — slice into dataSource.data
+        const pageIndex = Number(this.pageIndex) || 1;
+        const pageSize = Number(this.pageSize) || 10;
+        const start = (pageIndex - 1) * pageSize;
+        const end = start + pageSize;
+        this.dataSource.data = this.prepareActionVisibility(result.slice(start, end));
+        // Emit params (non-server mode) so parent can persist state
+        if (from !== 'onChange') {
+            this.NxtTableParamsEmit.emit({
+                pagination: { pageSize: this.pageSize, pageIndex: this.pageIndex },
+                tableSearch: { fields: this.currentColumns.map(f => f.fieldName), value: this.searchBoxValue },
+                searchFilterData: this.filterDataArray,
+                advancedFilterData: this.buildAdvancedFilterObject(), // SKS1JUL26: server-side support
+                sort: { column: this.currentSortColumn, direction: this.currentSortDirection, listView: this.selectedView },
+                currentColumns: this.currentColumns
+            });
+        }
+        this.computeSummaryValues(from);
+        this.cdRef.markForCheck();
+    }
+    /**
+     * Builds the `advancedFilterValues` map from the current `advancedFilters` config.
+     * Existing values are preserved if their field still exists in the new config.
+     * Respects `defaultValue` from the config for initial population.
+     */
+    initializeAdvancedFilters() {
+        if (!this.advancedFilters?.length) {
+            this.advancedFilterValues = {};
+            return;
+        }
+        // Sort by priority if provided
+        const sorted = [...this.advancedFilters].sort((a, b) => (a.priority ?? 9999) - (b.priority ?? 9999));
+        const next = {};
+        for (const config of sorted) {
+            if (config.hidden)
+                continue; // skip hidden controls
+            if (config.type === 'date') {
+                const existing = this.advancedFilterValues[config.field];
+                // Preserve existing or fall back to defaultValue or blank range
+                if (existing && typeof existing === 'object') {
+                    next[config.field] = existing;
+                }
+                else if (config.defaultValue) {
+                    next[config.field] = config.defaultValue;
+                }
+                else {
+                    next[config.field] = { startDate: '', endDate: '' };
+                }
+            }
+            else {
+                next[config.field] = this.advancedFilterValues[config.field]
+                    ?? config.defaultValue
+                    ?? '';
+            }
+        }
+        this.advancedFilterValues = next;
+    }
+    /**
+     * Called from the template whenever any advanced filter control changes.
+     *
+     * @param field  - The data field this filter maps to
+     * @param value  - New value:
+     *                 - text/dropdown: plain string
+     *                 - searchDropdown: scalar extracted via config.valueField from
+     *                   the emitted object shape `{ id, name, value, label, ... }`
+     *                 - date: ISO 8601 string from app-nxt-datepicker
+     * @param subKey - For date filters only: 'startDate' | 'endDate'
+     */
+    onAdvancedFilterChange(field, value, subKey) {
+        console.log(field, value);
+        if (subKey) {
+            // Date range — patch only the changed sub-key, keep the other intact
+            const current = (this.advancedFilterValues[field] ?? { startDate: '', endDate: '' });
+            this.advancedFilterValues[field] = { ...current, [subKey]: value ?? '' };
+        }
+        else {
+            this.advancedFilterValues[field] = value ?? '';
+        }
+        // Emit JSON-serialised state so distinctUntilChanged() suppresses
+        // re-triggers if the same value is set twice (e.g. user clicks same dropdown option)
+        this.advancedFilter$.next(JSON.stringify(this.advancedFilterValues));
+    }
+    /**
+     * Applies current advancedFilterValues against a data array.
+     * Returns a new filtered array — never mutates the input.
+     *
+     * Reuses existing helpers:
+     *   - getObjValue()           for field access
+     *   - formatDateForSearch()   for display-safe date formatting (NxtDatePipe)
+     *
+     * Date comparison uses formatDateForSearch() on both cell and filter values
+     * so timezone handling is consistent with the rest of the table.
+     *
+     * Filter logic per type:
+     *   text          → case-insensitive contains
+     *   dropdown      → strict string equality
+     *   searchDropdown → strict string equality on extracted valueField
+     *   date          → >= startDate and/or <= endDate (normalised via NxtDatePipe)
+     */
+    applyAdvancedFilters(baseData) {
+        if (!this.hasAdvancedFilter() || !baseData?.length) {
+            return baseData; // short-circuit — no active filters
+        }
+        // Visible, non-hidden filters sorted by priority
+        const activeFilters = this.advancedFilters
+            .filter(c => !c.hidden)
+            .sort((a, b) => (a.priority ?? 9999) - (b.priority ?? 9999));
+        return baseData.filter(row => activeFilters.every(config => {
+            const filterVal = this.advancedFilterValues[config.field];
+            // Skip if no value set
+            if (filterVal === null || filterVal === undefined)
+                return true;
+            if (typeof filterVal === 'string' && !filterVal.trim())
+                return true;
+            if (typeof filterVal === 'object' &&
+                !filterVal.startDate &&
+                !filterVal.endDate)
+                return true;
+            // Reuse existing getObjValue() for nested/array field access
+            const cellValue = this.getObjValue(row, config.field);
+            switch (config.type) {
+                case 'text':
+                    // contains (case-insensitive)
+                    return String(cellValue ?? '')
+                        .toLowerCase()
+                        .includes(String(filterVal).trim().toLowerCase());
+                case 'dropdown':
+                case 'list':
+                    // Exact match. For searchDropdown, valueField extraction was
+                    // done in onAdvancedFilterChange before the value reached here.
+                    return String(cellValue) === String(filterVal);
+                case 'date': {
+                    const { startDate, endDate } = filterVal;
+                    if (!cellValue)
+                        return false;
+                    // Reuse formatDateForSearch() (NxtDatePipe) to get a comparable
+                    // date string, then convert to timestamp. This keeps timezone
+                    // handling consistent with the rest of the datatable instead
+                    // of using `new Date(cellValue)` directly.
+                    const fakeCol = { type: 'date', calendarType: 'gregorian' };
+                    const cellFormatted = this.formatDateForSearch(cellValue, fakeCol);
+                    const startFormatted = startDate ? this.formatDateForSearch(startDate, fakeCol) : '';
+                    const endFormatted = endDate ? this.formatDateForSearch(endDate, fakeCol) : '';
+                    // Normalise to timestamps for >= / <= comparison
+                    const cellMs = new Date(cellFormatted || cellValue).getTime();
+                    const startMs = startDate ? new Date(startFormatted || startDate).getTime() : null;
+                    const endMs = endDate ? new Date(endFormatted || endDate).getTime() : null;
+                    if (isNaN(cellMs))
+                        return false;
+                    if (startMs !== null && endMs !== null)
+                        return cellMs >= startMs && cellMs <= endMs;
+                    if (startMs !== null)
+                        return cellMs >= startMs;
+                    if (endMs !== null)
+                        return cellMs <= endMs;
+                    return true;
+                }
+                default:
+                    return true;
+            }
+        }));
+    }
+    /**
+     * Resets all advanced filter values and re-runs the unified pipeline.
+     * pageIndex is reset to 1 so users don't get confused on high page numbers.
+     */
+    clearAdvancedFilters() {
+        for (const config of this.advancedFilters) {
+            if (config.hidden)
+                continue;
+            this.advancedFilterValues[config.field] = config.type === 'date'
+                ? { startDate: '', endDate: '' }
+                : '';
+        }
+        this.pageIndex = 1; // SKS1JUL26: always reset pagination on clear
+        this.refreshTableData();
+    }
+    /**
+     * Returns true if at least one visible advanced filter field has a non-empty value.
+     * Used in the template to decide whether to show the clear-all button.
+     */
+    hasAdvancedFilter() {
+        if (!this.advancedFilters?.length)
+            return false;
+        return this.advancedFilters
+            .filter(c => !c.hidden)
+            .some(config => {
+            const v = this.advancedFilterValues[config.field];
+            if (!v)
+                return false;
+            if (typeof v === 'string')
+                return v.trim().length > 0;
+            if (typeof v === 'object') {
+                return !!v.startDate || !!v.endDate;
+            }
+            return false;
+        });
+    }
+    /**
+     * Returns a clean snapshot of the ACTIVE advanced filter values.
+     * Included in NxtTableParamsEmit so server-side implementations receive
+     * the filter state under the `advancedFilterData` key:
+     *
+     *   tableParams = {
+     *     pagination:         { pageSize, pageIndex },
+     *     tableSearch:        { fields, value },
+     *     searchFilterData:   { [column]: [values] },
+     *     advancedFilterData: { [field]: string | AdvancedDateRange },  ← NEW
+     *     sort:               { column, direction, listView },
+     *   }
+     */
+    buildAdvancedFilterObject() {
+        const result = {};
+        for (const config of this.advancedFilters) {
+            if (config.hidden)
+                continue;
+            const v = this.advancedFilterValues[config.field];
+            if (!v)
+                continue;
+            if (typeof v === 'string' && v.trim())
+                result[config.field] = v;
+            if (typeof v === 'object') {
+                const { startDate, endDate } = v;
+                if (startDate || endDate)
+                    result[config.field] = v;
+            }
+        }
+        return result;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NxtDatatable, deps: [{ token: CountryService }, { token: StorageService }, { token: i0.ChangeDetectorRef }, { token: TranslationService }, { token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", summaryValues: "summaryValues", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", hideSaveButton: "hideSaveButton", 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", isListViews: "isListViews", id: "id", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons", isButtonLoading: "isButtonLoading", isPreview: "isPreview", groupFilter: "groupFilter", groupFilterConfig: "groupFilterConfig", groupFilterColumn: "groupFilterColumn", onlyView: "onlyView", tableHeight: "tableHeight", serialNumberColumn: "serialNumberColumn" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", onSaveData: "onSaveData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableParamsEmit: "NxtTableParamsEmit" }, 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}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" 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=\"align-items: center; padding-bottom: 3px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n                    (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n                </app-list-view-filter>\n                <!-- SKS15OCT25 group filter -->\n                <div *ngIf=\"groupFilter\">\n                    <nxt-button class=\"data-table-fsbtn\"\n                        [type]=\"'group'\" [selector]=\"true\"\n                        (buttonClickEmit)=\"groupFilterEmit($event)\"\n                        [buttonConfig]=\"groupFilterConfig.buttonConfig\">\n                    </nxt-button>\n                </div>\n                <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n                    style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'NOS' | nxtCustomTranslate : '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=\"16\" height=\"16\" 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' | nxtCustomTranslate : 'Search'  }}\" style=\"font-size: 13px;\"\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                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [btnBgColor]=\"button.btnBgColor\" [btnBorder]=\"button.btnBorder\" [btnBorderColor]=\"button.btnBorderColor\" [btnTextColor]=\"button.btnTextColor\"\n                            [btnHeight]=\"button.btnHeight\" [btnWidth]=\"button.btnWidth\" [btnHoverBgColor]=\"button.btnHoverBgColor\" [btnHoverTextColor]=\"button.btnHoverTextColor\" [btnIconRightSrc]=\"button.btnIconRightSrc\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" [padding]=\"button.padding\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n                <!--SKS15FEB25 Edit Button -->\n                <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n                    matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table'  }}\"\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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <i class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                    </div>\n                </div>\n                <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n                    matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard'  }}\"\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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                            d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n                            fill=\"#B0ADAB\" />\n                        </svg>\n                    </div>\n                </div>\n                <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n                    matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"\n                    style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                    <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                            d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n                            stroke=\"#B0ADAB\" />\n                            <path\n                            d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n                            fill=\"#B0ADAB\" />\n                        </svg>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ \n                    maxHeight: isPagination ? (tableHeight || '452px') : 'auto', \n                    minHeight: (dataSource?.data?.length === 0 && !isLoading ) ? ((from !== 'formBuilder' && from !== 'questionBook') ? (searchFilter ? '247px' : '0px')  : '0px' ) : (searchFilter ? '247px' : '100px') \n                }\"\n                #tableContainer (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 && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n                                    <div class=\"right nxt-resize-handle\"></div>\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                    <div class=\"nxt-resize-handle\"></div>\n                                </div>\n                                <!-- SKS17DEC25 Serial Number Column Header -->\n                                <div *ngIf=\"serialNumberColumn\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n                                    <div *ngIf=\"!withCheckBox && mode !== 'edit'\" class=\"nxt-resize-handle\"></div>\n                                    <div class=\"column-header\">\n                                        <div class=\"ellipsis\">No</div>\n                                    </div>\n                                    <!-- SKS17DEC25 resize  -->\n                                    <div class=\"nxt-resize-handle\"></div>\n                                </div>\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n                                    <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell nxtTableHeader nxt-head-color\" [style.width]=\"column.width ?  column.width + 'px' : (column.width || 'auto')\"\n                                        [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                        [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n                                        [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n                                        (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n                                        [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n                                        [style.color]=\"column?.style?.color\"\n                                        [attr.data-column-id]=\"column.uniqueIdentifier\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n                                                    class=\"close-column-btn\"\n                                                    (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n                                                    \u2715\n                                                </div>\n                                                <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n                                                    @if(column.labelPath){\n                                                        {{ column.labelPath | nxtCustomTranslate : column.label }}\n                                                    }\n                                                    @else if(from !== 'formBuilder' || from !== 'questionBook') {\n                                                        {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                    } \n                                                    @else if(column.uniqueIdentifier) {\n                                                        @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n                                                            {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                        }\n                                                    }\n                                                    @else {\n                                                        {{ column.label }}\n                                                    }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName, $event)\"\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.fieldName]?.length > 0\"\n                                                            cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                    </svg>\n                                                    <div *ngIf=\"column.sort\"\n                                                        class=\"sort-indicators\">\n                                                        <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n                                                            {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                            === 'desc' ? '\u2193' : '' }}\n                                                        </span>\n                                                        <span\n                                                            *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n                                                            class=\"sort-direction\">\n                                                            \u2191\n                                                        </span>\n                                                    </div>\n                                                    <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n                                                        class=\"search-component position-absolute\" [class.align-right]=\"alignRight\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\" style=\"align-items: center;\">\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' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <div *ngIf=\"isResized\" class=\"close-icon\">\n                                                                        <svg (click)=\"closefilter()\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.113 9.887 3.773-3.773m0 3.773L6.113 6.113M6 14.667h4c3.333 0 4.667-1.333 4.667-4.667V6c0-3.333-1.333-4.667-4.667-4.667H6C2.667 1.333 1.333 2.667 1.333 6v4c0 3.333 1.333 4.667 4.667 4.667\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                                                                    </div>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\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 || 'Blank'}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <!-- Enhanced resize handle -->\n                                        <div class=\"nxt-resize-handle\" \n                                            [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n                                    class=\"table-cell nxt-head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n                                    [style.color]=\"currentColumns?.[0]?.style?.color\"\n                                    style=\"padding: 12px !important;\">\n                                    <div style=\"display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;\">\n                                        {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                    </div>\n                                    <div class=\"nxt-resize-handle\"></div>\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; trackBy: trackByRow\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-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                                <!-- SKS17DEC25 Serial Number Cell -->\n                                <div *ngIf=\"serialNumberColumn\" class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n                                    {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n                                </div>\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n                                    <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color ellipsis\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"(column.width ? column.width + 'px' :(column.width || 'auto'))\"\n                                        [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n                                        [attr.data-column-id]=\"column.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n                                            <!-- edit mode content -->\n                                            <div [ngSwitch]=\"column.type\">\n                                                <!-- SKS22JUL25 calendar  -->\n                                                <div *ngSwitchCase=\"'calendar'\">\n                                                    <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n                                                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                                                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                                                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                                                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                                                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                                                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                                                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                                                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                                                    </app-custom-model> -->\n                                                </div>\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <i *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                                                        <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" 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\" 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\" 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\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                                stroke-linejoin=\"round\" />\n                                                        </svg>\n                                                    </div> -->\n                                                    <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n                                                        Logo preview area\n                                                        <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n                                                            <img [src]=\"column.question?.imageData\" />\n                                                        </div>\n\n                                                        Upload button\n                                                        <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n                                                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                                                <span>Upload Image</span>\n                                                            </label>\n                                                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                                                (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n                                                        </div>\n                                                    </div> -->\n                                                </div>\n                                                <!-- SKS22JUL25 icon-selector -->\n                                                <nxt-icon-selector *ngSwitchCase=\"'icon'\"  [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n                                                    [labelColor]=\"column.question?.color\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </nxt-icon-selector>\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n                                                    (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n                                                </nxt-datatable>\n                                                <!-- SKS22JUL25 list -->\n                                                <nxt-search-box  *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\" [rowData]=\"element\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\"  [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') || ''\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type); changeAnnounce($event.value)\">\n                                                </nxt-search-box>\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n                                                    [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n                                                    [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" \n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    placeholder=\"\" \n                                                    [padding]=\"column.question?.padding\"\n                                                    [readOnly]=\"column.readOnly\" \n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column?.question?.font\"\n                                                    [label]=\"column?.question?.questionText\"\n                                                    [labelColor]=\"column?.question?.color\"\n                                                    [inputTextColor]=\"column?.question?.color\"\n                                                    [labelSize]=\"column?.question?.fontSize\"\n                                                    [inputValueSize]=\"column?.question?.fontSize\"\n                                                    [labelWeight]=\"column?.question?.fontWeight\"\n                                                    [inputWeight]=\"column?.question?.fontWeight\"\n                                                    [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n                                                    [inputBgColor]=\"column?.question?.inputBgColor\"\n                                                    [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n                                                    [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-dropdown>\n                                                <!-- SKS29APR26 Multi Select -->\n                                                <nxt-multi-select *ngSwitchCase=\"'multiselect'\"\n                                                    [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\"\n                                                    [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\"\n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    placeholder=\"\"\n                                                    [padding]=\"column.question?.padding\"\n                                                    [readOnly]=\"column.readOnly\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column?.question?.font\"\n                                                    [label]=\"column?.question?.questionText\"\n                                                    [labelColor]=\"column?.question?.color\"\n                                                    [inputTextColor]=\"column?.question?.color\"\n                                                    [labelSize]=\"column?.question?.fontSize\"\n                                                    [inputValueSize]=\"column?.question?.fontSize\"\n                                                    [labelWeight]=\"column?.question?.fontWeight\"\n                                                    [inputWeight]=\"column?.question?.fontWeight\"\n                                                    [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n                                                    [inputBgColor]=\"column?.question?.inputBgColor\"\n                                                    [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-multi-select>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n                                                    [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-radio>\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n                                                    [readOnly]=\"column?.readOnly\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button *ngSwitchCase=\"'button'\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n                                                    (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n                                                    >\n                                                </nxt-button>\n                                                <!-- SKS22JUL25 book type -->\n                                                <div *ngSwitchCase=\"'book'\">\n                                                <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n                                                    [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n                                                    (handleDropDown)=\"getDropDown($event)\">\n                                                </lib-questionbook> -->\n                                                </div>\n                                                <!-- SKS10AUG25 object type element -->\n                                                <div *ngSwitchCase=\"'object'\">\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                                                </div>\n                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input *ngSwitchDefault \n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n                                                    [labelColor]=\"column.question?.color\"\n                                                    [labelSize]=\"column.question?.fontSize\"\n                                                    [inputValueSize]=\"column.question?.fontSize\"\n                                                    [labelWeight]=\"column.question?.fontWeight\"\n                                                    [inputWeight]=\"column.question?.fontWeight\"\n                                                    [showLabel]=\"column.question?.style?.showLabel\"\n                                                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                    [placeholder]=\"column.question?.question\"\n                                                    [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n                                                    [inputId]=\"column.question?.trackingId\"\n                                                    [errorMessages]=\"{ required: 'This field is required' }\"\n                                                    [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n                                                    [minDate]=\"column.question?.minDate\"\n                                                    [rows]=\"3\" [currency]=\"currencyOption?.code\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </ng-container>\n                                        \n                                        <ng-template #viewMode>\n                                            <!-- SKS10AUG25 view mode content -->\n                                            <ng-container [ngSwitch]=\"column.type\">\n                                                <ng-container *ngSwitchCase=\"'file'\">\n                                                    @defer (on viewport) {\n                                                        <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n                                                            [readOnly]=\"column?.readOnly\"\n                                                            [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                            [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                            >\n                                                        </nxt-file-upload>\n                                                    } @placeholder {\n                                                        <span class=\"skeleton-cell file-cell\"></span>\n                                                    }\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'object'\">\n                                                    <svg class=\"ms-2\" style=\"cursor: pointer;\" (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                                                <ng-container *ngSwitchCase=\"'boolean'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <!-- SKS7MAR26 Hyperlink Mode -->\n                                                        <a *ngIf=\"column.hyperLink\"\n                                                            class=\"hyperlink-input\"\n                                                            (click)=\"onClickHyperlink(column.fieldName, element, column.hyperLink)\">\n                                                            {{ (element | getValue: column.fieldName) === true || \n                                                            (element | getValue: column.fieldName) === 'true' ? 'True' : 'False' }}\n                                                        </a>\n                                                        <!-- SKS7MAR26 Normal Text Mode -->\n                                                        <span *ngIf=\"!column.hyperLink\">\n                                                            {{ (element | getValue: column.fieldName) === true || \n                                                            (element | getValue: column.fieldName) === 'true' ? 'True' : 'False' }}\n                                                        </span>\n                                                    </div>                                                                                             \n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'list'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <a \n                                                          [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\"\n                                                          (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\"\n                                                          [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n                                                        </a>\n                                                    </div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'date'\">\n                                                    <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'datetime'\">\n                                                    <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'currency'\">\n                                                    <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchDefault>\n                                                    <div class=\"ellipsis view-mode-text\"> \n                                                        <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">\n                                                            {{column.valueMap ? column.valueMap[(element | getValue: column.fieldName)] || (element | getValue: column.fieldName) : element | getValue: column.fieldName}} <!-- SKS23FEB25 valueMap used for map display value-->\n                                                        </a>\n                                                    </div>\n                                                </ng-container>\n                                        </ng-container>\n                                        </ng-template>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n                                            matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : '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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <i *ngIf=\"!element?.editRow\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                                                <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n                                            </div>\n                                        </div>\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\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 2px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg 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=\"!button.condition || element?._actions?.[button?.name]\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : 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.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor || '#787486'}}; cursor: pointer; line-height: 0px;\">\n                                                    <div (mouseenter)=\"$event.currentTarget.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.currentTarget.style.backgroundColor = button.backgroundColor\"\n                                                        [style.padding]=\"button?.padding ? button.padding + 'px' : '2px 2px'\";\n                                                        [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n                                                        style=\"\n                                                            display: inline-flex;\n                                                            align-items: center;\n                                                            justify-content: center;\n                                                            cursor: pointer;\n                                                            background-color: {{ button.backgroundColor }};\">\n                                                        <!-- IMAGE ICON (data URL or http/https) -->\n                                                        <img *ngIf=\"button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http')\"\n                                                            #imgElement\n                                                            [src]=\"button.iconSrc\"\n                                                            style=\"cursor: pointer;\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\"/>\n                                                        <!-- CSS ICON (fusion-icon-edit etc.) -->\n                                                        <i *ngIf=\"!(button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n                                                            class=\"fusion-icon nav-icon\"\n                                                            [ngClass]=\"button.iconSrc\"\n                                                            style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\">\n                                                        </i>\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 style=\"background-color: #f5f5f5; padding: 2px 2px; 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=\"!btn.condition || element?._actions?.[btn?.name]\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n                                                        [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 *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"serialNumberColumn\" class=\"non-summary-table-cell\"></div>\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <!-- SKS12SEP25 summary column input box -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container>\n                                            <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n                                                [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n                                                [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                [value]=\"summaryValues[row.fieldName]\"\n                                                [question]=\"row\" [readOnly]=\"row?.readOnly\"\n                                                [labelFont]=\"row.question?.font\"\n                                                [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n                                                [labelColor]=\"row.question?.color\"\n                                                [labelSize]=\"row.question?.fontSize\"\n                                                [inputValueSize]=\"row.question?.fontSize\"\n                                                [labelWeight]=\"row.question?.fontWeight\"\n                                                [inputWeight]=\"row.question?.fontWeight\"\n                                                [showLabel]=\"row.question?.style?.showLabel\"\n                                                inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                [placeholder]=\"row.question?.question\"\n                                                [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n                                                [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n                                                [inputId]=\"row.question?.trackingId\"\n                                                [errorMessages]=\"{ required: 'This field is required' }\"\n                                                [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n                                                [minDate]=\"row.question?.minDate\"\n                                                [rows]=\"3\" [currency]=\"currencyOption?.code\"\n                                                [onlyView]=\"onlyView\"\n                                                [mode]=\"onlyView ? 'view': 'edit'\"\n                                                (inputValue)=\"$event.tsChange ? '' : summaryValues[row.fieldName] = $event.value.valueObj;$event.tsChange ? '' : computeSummaryValues('html')\"\n                                                >\n                                            </nxt-input>\n                                            <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n                                                {{summaryValues?.[row.fieldName] | json}}\n                                            </div>\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=\"mode === 'edit' && (actionButton || isDeleteRow || isEditRow) && !onlyView\"\n                                        [ngClass]=\"addInlineRecord && k === 0 ? 'table-col-cell' : 'non-summary-table-cell'\"\n                                        [style.border-bottom]=\"(addInlineRecord && k === 0) ? '0px' : null\"\n                                        class=\"actionCol sticky-column\">\n                                        <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n                                        <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n                                            <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n                                                matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                                                <div class=\"addIcon\">\n                                                    <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n                                        class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n                                        @if (row?.columns?.includes(col.fieldName)) {\n                                        {{ summaryValues[col.fieldName] | number }}\n                                        }\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of [].constructor(withCheckBox ? currentColumns.length + 2 : currentColumns.length + 1); let i = index; trackBy: trackByColumn\" class=\"skeleton-cell\"></div>\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n                                </div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n            <!--SKS15FEB25 No Data Row -->\n            <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n                class=\"no-data\">\n                {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n            </div>\n            <!--SKS15FEB25 Pagination -->\n            <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n                    <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows?.length === 0 || (dataSource.data && dataSource?.data?.length === 0) ) ? true : (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n                        (click)=\"addTableRecord(inlineElement)\"\n                        matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></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=\"(tableSaveButton || isEditRow || addInlineRecord) && !hideSaveButton && from != 'formBuilder' && from != 'questionBook'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"(!tableEditTrack && (selection?.selected.length === 0 || selectedIsEmpty))\"\n                        (buttonClickEmit)=\"saveButton(inlineElement)\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"pagination ? (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<!--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'| nxtCustomTranslate : '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_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <nxt-button\n                    (buttonClickEmit)=\"deleteRecordData()\" \n                    [isLoading]=\"isButtonLoading\"\n                    [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n                    [btnBorderRadius]=\"4\"\n                    [btnWidth]=\"70\"\n                    [buttonType]=\"'custom-btn'\"\n                    >\n                </nxt-button>\n                <nxt-button\n                    (buttonClickEmit)=\"deleteModal = false\" \n                    [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n                    [btnBgColor]=\"'#ffffff'\"\n                    [btnTextColor]=\"'#007bff'\"\n                    [btnBorder]=\"'1'\"\n                    [btnBorderColor]=\"'#dee2e6'\"\n                    [btnBorderRadius]=\"4\"\n                    [btnWidth]=\"70\"\n                    [buttonType]=\"'custom-btn'\"\n                    >\n                </nxt-button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;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;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 0 10px 10px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .nxt-resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .nxt-resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:13px;font-weight:600;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.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)}.nxt-resize-handle{position:absolute;right:0;top:0;width:1px;height:-webkit-fill-available;cursor:col-resize;border:3px transparent;z-index:9;transition:background-color .2s ease}.nxt-resize-handle.right{right:unset!important;left:0!important;cursor:none!important}.nxt-resize-handle:hover{background:#ccc;opacity:.7}.nxt-resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.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}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a;left:0}.search-component.align-right{left:auto;right:0}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}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;padding:7px;cursor:pointer;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}.view-mode-text{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:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::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] .sort-indicators{padding-right:5px}[dir=rtl] .nxt-resize-handle{left:0!important;right:unset!important}::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:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!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:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;font-size:14px;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}.table-header .table-cell,.column-header .ellipsis{text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i6$1.JsonPipe, name: "json" }, { kind: "pipe", type: i6$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i6$1.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "padding", "isLoading", "selector", "dropdownLoadingButton"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: NxtSearchFilterPipe, name: "searchFilter" }, { 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: i9$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value", "onlyView", "rowData"], outputs: ["searchValueChange"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "component", type: NxtMultiSelect, selector: "nxt-multi-select", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc", "inputId", "allowCustomOptions"], outputs: ["valueChange"] }, { kind: "component", type: NxtRadio, selector: "nxt-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "fromShengel", "referenceField", "token", "label", "mode", "onlyView"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUpload, selector: "nxt-file-upload", inputs: ["allFiles", "mode", "config", "from", "dragAndDrop", "readOnly", "onlyView", "required", "hideSubtext", "label", "fileConfig"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableData", "tableFilterArray", "selectedView", "displayedColumns", "title", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NxtFileUpload,
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", summaryValues: "summaryValues", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", hideSaveButton: "hideSaveButton", 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", isListViews: "isListViews", id: "id", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons", isButtonLoading: "isButtonLoading", isPreview: "isPreview", groupFilter: "groupFilter", groupFilterConfig: "groupFilterConfig", groupFilterColumn: "groupFilterColumn", onlyView: "onlyView", tableHeight: "tableHeight", serialNumberColumn: "serialNumberColumn", advancedFilters: "advancedFilters" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", onSaveData: "onSaveData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableParamsEmit: "NxtTableParamsEmit" }, 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}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" 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=\"align-items: end; padding-bottom: 3px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n                    (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n                </app-list-view-filter>\n                <!-- SKS15OCT25 group filter -->\n                <div *ngIf=\"groupFilter\">\n                    <nxt-button class=\"data-table-fsbtn\"\n                        [type]=\"'group'\" [selector]=\"true\"\n                        (buttonClickEmit)=\"groupFilterEmit($event)\"\n                        [buttonConfig]=\"groupFilterConfig.buttonConfig\">\n                    </nxt-button>\n                </div>\n                <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n                    style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'NOS' | nxtCustomTranslate : '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: end;\">\n                <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n                     SKS1JUL26 \u2014 Advanced Global Filter Bar\n                     Rendered only when advancedFilters config is provided.\n                     Each entry in the array produces one filter control.\n                     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n                <div *ngIf=\"advancedFilters?.length\" class=\"adv-filter-bar\">\n                    <!-- SKS1JUL26 Iterate over each filter config entry -->\n                    <ng-container *ngFor=\"let filterConfig of advancedFilters; trackBy: trackByIndex\">\n                        <!-- SKS1JUL26 \u2500\u2500 DATE type: renders Start Date + End Date side-by-side \u2500\u2500 -->\n                        <ng-container *ngIf=\"filterConfig.type === 'date' && !filterConfig.hidden\">\n                            <div>\n                                <span class=\"adv-filter-label\"> {{ filterConfig.label }} </span>\n                                <div class=\"adv-filter-date-group\">\n                                    <!-- SKS1JUL26 Start Date -->\n                                    <nxt-input\n                                        [type]=\"'date'\"\n                                        [placeholder]=\"'Start Date'\"\n                                        [margin]=\"'0px'\"\n                                        [padding]=\"'9px 10px 9px 5px'\"\n                                        [value]=\"$any(advancedFilterValues[filterConfig.field])?.startDate || ''\"\n                                        [readOnly]=\"filterConfig.disabled || false\" [inputBgColor]=\"'#ffffff'\"\n                                        [inputBorder]=\"'#ccc'\"\n                                        (inputValue)=\"onAdvancedFilterChange(filterConfig.field, $event?.valueObj?.[filterConfig.valueField || 'value'] || $event?.[filterConfig.valueField || 'value']?.valueObj || $event?.[filterConfig.valueField || 'value'] || $event?.valueObj, 'startDate')\">\n                                    </nxt-input>\n                                    <!-- SKS1JUL26 End Date -->\n                                    <nxt-input\n                                        [type]=\"'date'\"\n                                        [margin]=\"'0px'\"\n                                        [padding]=\"'9px 10px 9px 5px'\"\n                                        [placeholder]=\"'End Date'\"\n                                        [value]=\"$any(advancedFilterValues[filterConfig.field])?.endDate || ''\"\n                                        [readOnly]=\"filterConfig.disabled || false\" [inputBgColor]=\"'#ffffff'\"\n                                        [inputBorder]=\"'#ccc'\"\n                                        (inputValue)=\"onAdvancedFilterChange(filterConfig.field, $event?.valueObj?.[filterConfig.valueField || 'value'] || $event?.[filterConfig.valueField || 'value']?.valueObj || $event?.[filterConfig.valueField || 'value'] || $event?.valueObj, 'endDate')\">\n                                    </nxt-input>\n                                </div>\n                            </div>\n                           \n                        </ng-container>\n\n                        <!-- SKS1JUL26 \u2500\u2500 TEXT type: single nxt-input with contains search \u2500\u2500 -->\n                        <ng-container *ngIf=\"filterConfig.type === 'text' && !filterConfig.hidden\">\n                             <nxt-input  \n                                [type]=\"'text'\" [label]=\"filterConfig.label\"\n                                [value]=\"$any(advancedFilterValues[filterConfig.field]) || ''\"\n                                [readOnly]=\"filterConfig.disabled || false\"\n                                svgHeight=\"20px\" svgWidth=\"20px\" [padding]=\"'9px 10px 9px 5px'\"\n                                [placeholder]=\"filterConfig.placeholder || filterConfig.label\"\n                                [errorMessages]=\"{ required: 'This field is required' }\"\n                                [direction]=\"direction\"\n                                [onlyView]=\"onlyView\"\n                                [from]=\"'nxtForm'\"\n                                [inputBgColor]=\"'#ffffff'\" [inputBorder]=\"'#ccc'\"\n                                (inputValue)=\"onAdvancedFilterChange(filterConfig.field, $event?.valueObj?.[filterConfig.valueField || 'value'] || $event?.[filterConfig.valueField || 'value']?.valueObj || $event?.[filterConfig.valueField || 'value'] || $event?.valueObj)\"\n                                >\n                            </nxt-input>\n                        </ng-container>\n\n                        <!-- SKS1JUL26 \u2500\u2500 DROPDOWN type: nxt-dropdown with exact match \u2500\u2500 -->\n                        <ng-container *ngIf=\"filterConfig.type === 'dropdown' && !filterConfig.hidden\">\n                            <nxt-dropdown\n                                [options]=\"filterConfig.options || data || []\"\n                                [from]=\"'nxtForm'\" [label]=\"filterConfig.label\" [apiMeta]=\"{field:filterConfig.labelField, defaultField:filterConfig.valueField, isFilter: true }\"\n                                [selectedValue]=\"$any(advancedFilterValues[filterConfig.field]) || ''\"\n                                [placeholder]=\"filterConfig.placeholder || filterConfig.label\"\n                                [inputBgColor]=\"'#ffffff'\" [inputBorder]=\"'#ccc'\" [padding]=\"'9px 10px 9px 5px'\"\n                                (valueChange)=\"onAdvancedFilterChange(filterConfig.field, $event?.valueObj?.value || $event?.value?.valueObj || $event?.value || $event?.valueObj)\">\n                            </nxt-dropdown>\n                        </ng-container>\n\n                        <!-- SKS1JUL26 \u2500\u2500 SEARCH DROPDOWN type: nxt-search-box with exact match \u2500\u2500 -->\n                        <!-- searchValueChange emits: { valueObj: { id, name, value, label, ... }, ... }  -->\n                        <!-- We extract the scalar via config.valueField (default: 'value') from valueObj. -->\n                        <ng-container *ngIf=\"filterConfig.type === 'list' && !filterConfig.hidden\">\n                            <nxt-search-box [question]=\"{questionText: filterConfig.label, apiMeta: { options: data || [], field: filterConfig.labelField || 'label', valueField: filterConfig.valueField || 'value', isDependentField: true,style:{padding: '9px 10px 9px 5px' } } }\" [readOnly]=\"filterConfig.disabled || false\" [apiMeta]=\"filterConfig.subText\"\n                                [id]=\"filterConfig.id\" [placeHolderText]=\"filterConfig.placeholder || ('SEARCH' | nxtCustomTranslate : 'Search') + ' ' + filterConfig.label\" [value]=\"$any(advancedFilterValues[filterConfig.field]) || ''\"\n                                (searchValueChange)=\"onAdvancedFilterChange(filterConfig.field, $event?.valueObj?.[filterConfig.valueField || 'value'] || $event?.[filterConfig.valueField || 'value']?.valueObj || $event?.[filterConfig.valueField || 'value'] || $event?.valueObj)\">\n                            </nxt-search-box>\n                        </ng-container>\n                    </ng-container>\n\n                    <!-- SKS1JUL26 \u2500\u2500 Clear All button \u2014 visible only when at least one filter is active \u2500\u2500 -->\n                    <div *ngIf=\"hasAdvancedFilter()\" class=\"adv-filter-clear-btn\" (click)=\"clearAdvancedFilters()\"\n                         [title]=\"'CLEAR_FILTERS' | nxtCustomTranslate : 'Clear Filters'\">\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"#ef4444\" stroke-width=\"2.2\"\n                                  stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                    </div>\n                </div>\n                <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n                     SKS1JUL26 END SKS_ADV_FILTER\n                     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n                <div *ngIf=\"searchBar\" class=\"search\" style=\"margin-left: 7px;\">\n\n                    <div class=\"flex search-bar\">\n                        <svg width=\"16\" height=\"16\" 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' | nxtCustomTranslate : 'Search'  }}\" style=\"font-size: 13px;\"\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                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [btnBgColor]=\"button.btnBgColor\" [btnBorder]=\"button.btnBorder\" [btnBorderColor]=\"button.btnBorderColor\" [btnTextColor]=\"button.btnTextColor\"\n                            [btnHeight]=\"button.btnHeight\" [btnWidth]=\"button.btnWidth\" [btnHoverBgColor]=\"button.btnHoverBgColor\" [btnHoverTextColor]=\"button.btnHoverTextColor\" [btnIconRightSrc]=\"button.btnIconRightSrc\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" [padding]=\"button.padding\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n                <!--SKS15FEB25 Edit Button -->\n                <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n                    matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table'  }}\"\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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <i class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                    </div>\n                </div>\n                <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n                    matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard'  }}\"\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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                            d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n                            fill=\"#B0ADAB\" />\n                        </svg>\n                    </div>\n                </div>\n                <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n                    matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"\n                    style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                    <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                            d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n                            stroke=\"#B0ADAB\" />\n                            <path\n                            d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n                            fill=\"#B0ADAB\" />\n                        </svg>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ \n                    maxHeight: isPagination ? (tableHeight || '452px') : 'auto', \n                    minHeight: (dataSource?.data?.length === 0 && !isLoading ) ? ((from !== 'formBuilder' && from !== 'questionBook') ? (searchFilter ? '247px' : '0px')  : '0px' ) : (searchFilter ? '247px' : '100px') \n                }\"\n                #tableContainer (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 && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n                                    <div class=\"right nxt-resize-handle\"></div>\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                    <div class=\"nxt-resize-handle\"></div>\n                                </div>\n                                <!-- SKS17DEC25 Serial Number Column Header -->\n                                <div *ngIf=\"serialNumberColumn\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n                                    <div *ngIf=\"!withCheckBox && mode !== 'edit'\" class=\"nxt-resize-handle\"></div>\n                                    <div class=\"column-header\">\n                                        <div class=\"ellipsis\">No</div>\n                                    </div>\n                                    <!-- SKS17DEC25 resize  -->\n                                    <div class=\"nxt-resize-handle\"></div>\n                                </div>\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n                                    <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell nxtTableHeader nxt-head-color\" [style.width]=\"column.width ?  column.width + 'px' : (column.width || 'auto')\"\n                                        [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                        [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n                                        [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n                                        (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n                                        [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n                                        [style.color]=\"column?.style?.color\"\n                                        [attr.data-column-id]=\"column.uniqueIdentifier\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n                                                    class=\"close-column-btn\"\n                                                    (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n                                                    \u2715\n                                                </div>\n                                                <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n                                                    @if(column.labelPath){\n                                                        {{ column.labelPath | nxtCustomTranslate : column.label }}\n                                                    }\n                                                    @else if(from !== 'formBuilder' || from !== 'questionBook') {\n                                                        {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                    } \n                                                    @else if(column.uniqueIdentifier) {\n                                                        @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n                                                            {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                        }\n                                                    }\n                                                    @else {\n                                                        {{ column.label }}\n                                                    }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName, $event)\"\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.fieldName]?.length > 0\"\n                                                            cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                    </svg>\n                                                    <div *ngIf=\"column.sort\"\n                                                        class=\"sort-indicators\">\n                                                        <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n                                                            {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                            === 'desc' ? '\u2193' : '' }}\n                                                        </span>\n                                                        <span\n                                                            *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n                                                            class=\"sort-direction\">\n                                                            \u2191\n                                                        </span>\n                                                    </div>\n                                                    <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n                                                        class=\"search-component position-absolute\" [class.align-right]=\"alignRight\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\" style=\"align-items: center;\">\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' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <div *ngIf=\"isResized\" class=\"close-icon\">\n                                                                        <svg (click)=\"closefilter()\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.113 9.887 3.773-3.773m0 3.773L6.113 6.113M6 14.667h4c3.333 0 4.667-1.333 4.667-4.667V6c0-3.333-1.333-4.667-4.667-4.667H6C2.667 1.333 1.333 2.667 1.333 6v4c0 3.333 1.333 4.667 4.667 4.667\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                                                                    </div>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\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 || 'Blank'}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <!-- Enhanced resize handle -->\n                                        <div class=\"nxt-resize-handle\" \n                                            [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n                                    class=\"table-cell nxt-head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n                                    [style.color]=\"currentColumns?.[0]?.style?.color\"\n                                    style=\"padding: 12px !important;\">\n                                    <div style=\"display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;\">\n                                        {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                    </div>\n                                    <div class=\"nxt-resize-handle\"></div>\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; trackBy: trackByRow\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-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                                <!-- SKS17DEC25 Serial Number Cell -->\n                                <div *ngIf=\"serialNumberColumn\" class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n                                    {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n                                </div>\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n                                    <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color ellipsis\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"(column.width ? column.width + 'px' :(column.width || 'auto'))\"\n                                        [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n                                        [attr.data-column-id]=\"column.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n                                            <!-- edit mode content -->\n                                            <div [ngSwitch]=\"column.type\">\n                                                <!-- SKS22JUL25 calendar  -->\n                                                <div *ngSwitchCase=\"'calendar'\">\n                                                    <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n                                                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                                                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                                                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                                                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                                                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                                                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                                                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                                                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                                                    </app-custom-model> -->\n                                                </div>\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <i *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                                                        <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" 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\" 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\" 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\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                                stroke-linejoin=\"round\" />\n                                                        </svg>\n                                                    </div> -->\n                                                    <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n                                                        Logo preview area\n                                                        <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n                                                            <img [src]=\"column.question?.imageData\" />\n                                                        </div>\n\n                                                        Upload button\n                                                        <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n                                                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                                                <span>Upload Image</span>\n                                                            </label>\n                                                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                                                (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n                                                        </div>\n                                                    </div> -->\n                                                </div>\n                                                <!-- SKS22JUL25 icon-selector -->\n                                                <nxt-icon-selector *ngSwitchCase=\"'icon'\"  [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n                                                    [labelColor]=\"column.question?.color\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </nxt-icon-selector>\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n                                                    (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n                                                </nxt-datatable>\n                                                <!-- SKS22JUL25 list -->\n                                                <nxt-search-box  *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\" [rowData]=\"element\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\"  [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') || ''\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type); changeAnnounce($event.value)\">\n                                                </nxt-search-box>\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n                                                    [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n                                                    [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" \n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    placeholder=\"\" \n                                                    [padding]=\"column.question?.padding\"\n                                                    [readOnly]=\"column.readOnly\" \n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column?.question?.font\"\n                                                    [label]=\"column?.question?.questionText\"\n                                                    [labelColor]=\"column?.question?.color\"\n                                                    [inputTextColor]=\"column?.question?.color\"\n                                                    [labelSize]=\"column?.question?.fontSize\"\n                                                    [inputValueSize]=\"column?.question?.fontSize\"\n                                                    [labelWeight]=\"column?.question?.fontWeight\"\n                                                    [inputWeight]=\"column?.question?.fontWeight\"\n                                                    [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n                                                    [inputBgColor]=\"column?.question?.inputBgColor\"\n                                                    [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n                                                    [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-dropdown>\n                                                <!-- SKS29APR26 Multi Select -->\n                                                <nxt-multi-select *ngSwitchCase=\"'multiselect'\"\n                                                    [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\"\n                                                    [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\"\n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    placeholder=\"\"\n                                                    [padding]=\"column.question?.padding\"\n                                                    [readOnly]=\"column.readOnly\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column?.question?.font\"\n                                                    [label]=\"column?.question?.questionText\"\n                                                    [labelColor]=\"column?.question?.color\"\n                                                    [inputTextColor]=\"column?.question?.color\"\n                                                    [labelSize]=\"column?.question?.fontSize\"\n                                                    [inputValueSize]=\"column?.question?.fontSize\"\n                                                    [labelWeight]=\"column?.question?.fontWeight\"\n                                                    [inputWeight]=\"column?.question?.fontWeight\"\n                                                    [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n                                                    [inputBgColor]=\"column?.question?.inputBgColor\"\n                                                    [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-multi-select>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n                                                    [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-radio>\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n                                                    [readOnly]=\"column?.readOnly\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button *ngSwitchCase=\"'button'\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n                                                    (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n                                                    >\n                                                </nxt-button>\n                                                <!-- SKS22JUL25 book type -->\n                                                <div *ngSwitchCase=\"'book'\">\n                                                <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n                                                    [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n                                                    (handleDropDown)=\"getDropDown($event)\">\n                                                </lib-questionbook> -->\n                                                </div>\n                                                <!-- SKS10AUG25 object type element -->\n                                                <div *ngSwitchCase=\"'object'\">\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                                                </div>\n                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input *ngSwitchDefault \n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n                                                    [labelColor]=\"column.question?.color\"\n                                                    [labelSize]=\"column.question?.fontSize\"\n                                                    [inputValueSize]=\"column.question?.fontSize\"\n                                                    [labelWeight]=\"column.question?.fontWeight\"\n                                                    [inputWeight]=\"column.question?.fontWeight\"\n                                                    [showLabel]=\"column.question?.style?.showLabel\"\n                                                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                    [placeholder]=\"column.question?.question\"\n                                                    [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n                                                    [inputId]=\"column.question?.trackingId\"\n                                                    [errorMessages]=\"{ required: 'This field is required' }\"\n                                                    [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n                                                    [minDate]=\"column.question?.minDate\"\n                                                    [rows]=\"3\" [currency]=\"currencyOption?.code\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </ng-container>\n                                        \n                                        <ng-template #viewMode>\n                                            <!-- SKS10AUG25 view mode content -->\n                                            <ng-container [ngSwitch]=\"column.type\">\n                                                <ng-container *ngSwitchCase=\"'file'\">\n                                                    @defer (on viewport) {\n                                                        <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n                                                            [readOnly]=\"column?.readOnly\"\n                                                            [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                            [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                            >\n                                                        </nxt-file-upload>\n                                                    } @placeholder {\n                                                        <span class=\"skeleton-cell file-cell\"></span>\n                                                    }\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'object'\">\n                                                    <svg class=\"ms-2\" style=\"cursor: pointer;\" (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                                                <ng-container *ngSwitchCase=\"'boolean'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <!-- SKS7MAR26 Hyperlink Mode -->\n                                                        <a *ngIf=\"column.hyperLink\"\n                                                            class=\"hyperlink-input\"\n                                                            (click)=\"onClickHyperlink(column.fieldName, element, column.hyperLink)\">\n                                                            {{ (element | getValue: column.fieldName) === true || \n                                                            (element | getValue: column.fieldName) === 'true' ? 'True' : 'False' }}\n                                                        </a>\n                                                        <!-- SKS7MAR26 Normal Text Mode -->\n                                                        <span *ngIf=\"!column.hyperLink\">\n                                                            {{ (element | getValue: column.fieldName) === true || \n                                                            (element | getValue: column.fieldName) === 'true' ? 'True' : 'False' }}\n                                                        </span>\n                                                    </div>                                                                                             \n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'list'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <a \n                                                          [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\"\n                                                          (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\"\n                                                          [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n                                                        </a>\n                                                    </div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'date'\">\n                                                    <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'datetime'\">\n                                                    <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n                                                </ng-container>\n                                                 <ng-container *ngSwitchCase=\"'time'\">\n                                                    <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{(element | getValue: column.fieldName) | NxtDate : \"hh:mm A\" : languageCode : column.calendarType}}</a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'currency'\">\n                                                    <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchDefault>\n                                                    <div class=\"ellipsis view-mode-text\"> \n                                                        <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">\n                                                            {{column.valueMap ? column.valueMap[(element | getValue: column.fieldName)] || (element | getValue: column.fieldName) : element | getValue: column.fieldName}} <!-- SKS23FEB25 valueMap used for map display value-->\n                                                        </a>\n                                                    </div>\n                                                </ng-container>\n                                        </ng-container>\n                                        </ng-template>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n                                            matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : '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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <i *ngIf=\"!element?.editRow\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                                                <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n                                            </div>\n                                        </div>\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\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 2px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg 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=\"!button.condition || element?._actions?.[button?.name]\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : 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.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor || '#787486'}}; cursor: pointer; line-height: 0px;\">\n                                                    <div (mouseenter)=\"$event.currentTarget.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.currentTarget.style.backgroundColor = button.backgroundColor\"\n                                                        [style.padding]=\"button?.padding ? button.padding + 'px' : '2px 2px'\";\n                                                        [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n                                                        style=\"\n                                                            display: inline-flex;\n                                                            align-items: center;\n                                                            justify-content: center;\n                                                            cursor: pointer;\n                                                            background-color: {{ button.backgroundColor }};\">\n                                                        <!-- IMAGE ICON (data URL or http/https) -->\n                                                        <img *ngIf=\"button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http')\"\n                                                            #imgElement\n                                                            [src]=\"button.iconSrc\"\n                                                            style=\"cursor: pointer;\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\"/>\n                                                        <!-- CSS ICON (fusion-icon-edit etc.) -->\n                                                        <i *ngIf=\"!(button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n                                                            class=\"fusion-icon nav-icon\"\n                                                            [ngClass]=\"button.iconSrc\"\n                                                            style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\">\n                                                        </i>\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 style=\"background-color: #f5f5f5; padding: 2px 2px; 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=\"!btn.condition || element?._actions?.[btn?.name]\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n                                                        [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 *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"serialNumberColumn\" class=\"non-summary-table-cell\"></div>\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <!-- SKS12SEP25 summary column input box -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container>\n                                            <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n                                                [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n                                                [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                [value]=\"summaryValues[row.fieldName]\"\n                                                [question]=\"row\" [readOnly]=\"row?.readOnly\"\n                                                [labelFont]=\"row.question?.font\"\n                                                [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n                                                [labelColor]=\"row.question?.color\"\n                                                [labelSize]=\"row.question?.fontSize\"\n                                                [inputValueSize]=\"row.question?.fontSize\"\n                                                [labelWeight]=\"row.question?.fontWeight\"\n                                                [inputWeight]=\"row.question?.fontWeight\"\n                                                [showLabel]=\"row.question?.style?.showLabel\"\n                                                inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                [placeholder]=\"row.question?.question\"\n                                                [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n                                                [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n                                                [inputId]=\"row.question?.trackingId\"\n                                                [errorMessages]=\"{ required: 'This field is required' }\"\n                                                [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n                                                [minDate]=\"row.question?.minDate\"\n                                                [rows]=\"3\" [currency]=\"currencyOption?.code\"\n                                                [onlyView]=\"onlyView\"\n                                                [mode]=\"onlyView ? 'view': 'edit'\"\n                                                (inputValue)=\"$event.tsChange ? '' : summaryValues[row.fieldName] = $event.value.valueObj;$event.tsChange ? '' : computeSummaryValues('html')\"\n                                                >\n                                            </nxt-input>\n                                            <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n                                                {{summaryValues?.[row.fieldName] | json}}\n                                            </div>\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=\"mode === 'edit' && (actionButton || isDeleteRow || isEditRow) && !onlyView\"\n                                        [ngClass]=\"addInlineRecord && k === 0 ? 'table-col-cell' : 'non-summary-table-cell'\"\n                                        [style.border-bottom]=\"(addInlineRecord && k === 0) ? '0px' : null\"\n                                        class=\"actionCol sticky-column\">\n                                        <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n                                        <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n                                            <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n                                                matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                                                <div class=\"addIcon\">\n                                                    <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n                                        class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n                                        @if (row?.columns?.includes(col.fieldName)) {\n                                        {{ summaryValues[col.fieldName] | number }}\n                                        }\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of [].constructor(withCheckBox ? currentColumns.length + 2 : currentColumns.length + 1); let i = index; trackBy: trackByColumn\" class=\"skeleton-cell\"></div>\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n                                </div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n            <!--SKS15FEB25 No Data Row -->\n            <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n                class=\"no-data\">\n                {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n            </div>\n            <!--SKS15FEB25 Pagination -->\n            <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n                    <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows?.length === 0 || (dataSource.data && dataSource?.data?.length === 0) ) ? true : (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n                        (click)=\"addTableRecord(inlineElement)\"\n                        matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></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=\"(tableSaveButton || isEditRow || addInlineRecord) && !hideSaveButton && from != 'formBuilder' && from != 'questionBook'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"(!tableEditTrack && (selection?.selected.length === 0 || selectedIsEmpty))\"\n                        (buttonClickEmit)=\"saveButton(inlineElement)\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"pagination ? (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<!--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'| nxtCustomTranslate : '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_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <nxt-button\n                    (buttonClickEmit)=\"deleteRecordData()\" \n                    [isLoading]=\"isButtonLoading\"\n                    [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n                    [btnBorderRadius]=\"4\"\n                    [btnWidth]=\"70\"\n                    [buttonType]=\"'custom-btn'\"\n                    >\n                </nxt-button>\n                <nxt-button\n                    (buttonClickEmit)=\"deleteModal = false\" \n                    [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n                    [btnBgColor]=\"'#ffffff'\"\n                    [btnTextColor]=\"'#007bff'\"\n                    [btnBorder]=\"'1'\"\n                    [btnBorderColor]=\"'#dee2e6'\"\n                    [btnBorderRadius]=\"4\"\n                    [btnWidth]=\"70\"\n                    [buttonType]=\"'custom-btn'\"\n                    >\n                </nxt-button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;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;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 0 10px 10px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .nxt-resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .nxt-resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:13px;font-weight:600;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.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)}.nxt-resize-handle{position:absolute;right:0;top:0;width:1px;height:-webkit-fill-available;cursor:col-resize;border:3px transparent;z-index:9;transition:background-color .2s ease}.nxt-resize-handle.right{right:unset!important;left:0!important;cursor:none!important}.nxt-resize-handle:hover{background:#ccc;opacity:.7}.nxt-resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;padding:4px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.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}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a;left:0}.search-component.align-right{left:auto;right:0}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}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;padding:7px;cursor:pointer;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}.view-mode-text{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:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::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] .sort-indicators{padding-right:5px}[dir=rtl] .nxt-resize-handle{left:0!important;right:unset!important}::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:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!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:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;font-size:14px;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}.table-header .table-cell,.column-header .ellipsis{text-transform:uppercase}.adv-filter-bar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:7px}.adv-filter-label{font-size:14px;font-weight:400;max-width:200px}.adv-filter-date-group{display:flex;flex-direction:row;gap:7px;align-items:flex-end}.adv-filter-clear-btn{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:6px;cursor:pointer;flex-shrink:0;align-self:flex-end;margin-bottom:2px;background:#fff1f1;border:1px solid #fecaca;transition:background .15s ease,transform .1s ease}.adv-filter-clear-btn:hover{background:#fee2e2;transform:scale(1.08)}.adv-filter-clear-btn:active{transform:scale(.95)}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn", "advancedFilters"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i6$1.JsonPipe, name: "json" }, { kind: "pipe", type: i6$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i6$1.CurrencyPipe, name: "currency" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "padding", "isLoading", "selector", "dropdownLoadingButton"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: NxtSearchFilterPipe, name: "searchFilter" }, { 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: i9$1.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value", "onlyView", "rowData"], outputs: ["searchValueChange"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "component", type: NxtMultiSelect, selector: "nxt-multi-select", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc", "inputId", "allowCustomOptions"], outputs: ["valueChange"] }, { kind: "component", type: NxtRadio, selector: "nxt-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "fromShengel", "referenceField", "token", "label", "mode", "onlyView"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUpload, selector: "nxt-file-upload", inputs: ["allFiles", "mode", "config", "from", "dragAndDrop", "readOnly", "onlyView", "required", "hideSubtext", "label", "fileConfig"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableData", "tableFilterArray", "selectedView", "displayedColumns", "title", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }, { kind: "pipe", type: NxtDatePipe, name: "NxtDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [NxtFileUpload,
                 QuestionByRowPipe]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NxtDatatable, decorators: [{
@@ -54056,8 +54406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                         NxtCustomTranslatePipe,
                         QuestionByRowPipe,
                         NxtDatePipe
-                        // RowResizerDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" 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=\"align-items: center; padding-bottom: 3px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n                    (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n                </app-list-view-filter>\n                <!-- SKS15OCT25 group filter -->\n                <div *ngIf=\"groupFilter\">\n                    <nxt-button class=\"data-table-fsbtn\"\n                        [type]=\"'group'\" [selector]=\"true\"\n                        (buttonClickEmit)=\"groupFilterEmit($event)\"\n                        [buttonConfig]=\"groupFilterConfig.buttonConfig\">\n                    </nxt-button>\n                </div>\n                <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n                    style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'NOS' | nxtCustomTranslate : '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=\"16\" height=\"16\" 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' | nxtCustomTranslate : 'Search'  }}\" style=\"font-size: 13px;\"\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                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [btnBgColor]=\"button.btnBgColor\" [btnBorder]=\"button.btnBorder\" [btnBorderColor]=\"button.btnBorderColor\" [btnTextColor]=\"button.btnTextColor\"\n                            [btnHeight]=\"button.btnHeight\" [btnWidth]=\"button.btnWidth\" [btnHoverBgColor]=\"button.btnHoverBgColor\" [btnHoverTextColor]=\"button.btnHoverTextColor\" [btnIconRightSrc]=\"button.btnIconRightSrc\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" [padding]=\"button.padding\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n                <!--SKS15FEB25 Edit Button -->\n                <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n                    matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table'  }}\"\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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <i class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                    </div>\n                </div>\n                <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n                    matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard'  }}\"\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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                            d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n                            fill=\"#B0ADAB\" />\n                        </svg>\n                    </div>\n                </div>\n                <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n                    matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"\n                    style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                    <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                            d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n                            stroke=\"#B0ADAB\" />\n                            <path\n                            d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n                            fill=\"#B0ADAB\" />\n                        </svg>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ \n                    maxHeight: isPagination ? (tableHeight || '452px') : 'auto', \n                    minHeight: (dataSource?.data?.length === 0 && !isLoading ) ? ((from !== 'formBuilder' && from !== 'questionBook') ? (searchFilter ? '247px' : '0px')  : '0px' ) : (searchFilter ? '247px' : '100px') \n                }\"\n                #tableContainer (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 && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n                                    <div class=\"right nxt-resize-handle\"></div>\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                    <div class=\"nxt-resize-handle\"></div>\n                                </div>\n                                <!-- SKS17DEC25 Serial Number Column Header -->\n                                <div *ngIf=\"serialNumberColumn\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n                                    <div *ngIf=\"!withCheckBox && mode !== 'edit'\" class=\"nxt-resize-handle\"></div>\n                                    <div class=\"column-header\">\n                                        <div class=\"ellipsis\">No</div>\n                                    </div>\n                                    <!-- SKS17DEC25 resize  -->\n                                    <div class=\"nxt-resize-handle\"></div>\n                                </div>\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n                                    <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell nxtTableHeader nxt-head-color\" [style.width]=\"column.width ?  column.width + 'px' : (column.width || 'auto')\"\n                                        [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                        [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n                                        [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n                                        (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n                                        [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n                                        [style.color]=\"column?.style?.color\"\n                                        [attr.data-column-id]=\"column.uniqueIdentifier\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n                                                    class=\"close-column-btn\"\n                                                    (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n                                                    \u2715\n                                                </div>\n                                                <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n                                                    @if(column.labelPath){\n                                                        {{ column.labelPath | nxtCustomTranslate : column.label }}\n                                                    }\n                                                    @else if(from !== 'formBuilder' || from !== 'questionBook') {\n                                                        {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                    } \n                                                    @else if(column.uniqueIdentifier) {\n                                                        @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n                                                            {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                        }\n                                                    }\n                                                    @else {\n                                                        {{ column.label }}\n                                                    }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName, $event)\"\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.fieldName]?.length > 0\"\n                                                            cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                    </svg>\n                                                    <div *ngIf=\"column.sort\"\n                                                        class=\"sort-indicators\">\n                                                        <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n                                                            {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                            === 'desc' ? '\u2193' : '' }}\n                                                        </span>\n                                                        <span\n                                                            *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n                                                            class=\"sort-direction\">\n                                                            \u2191\n                                                        </span>\n                                                    </div>\n                                                    <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n                                                        class=\"search-component position-absolute\" [class.align-right]=\"alignRight\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\" style=\"align-items: center;\">\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' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <div *ngIf=\"isResized\" class=\"close-icon\">\n                                                                        <svg (click)=\"closefilter()\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.113 9.887 3.773-3.773m0 3.773L6.113 6.113M6 14.667h4c3.333 0 4.667-1.333 4.667-4.667V6c0-3.333-1.333-4.667-4.667-4.667H6C2.667 1.333 1.333 2.667 1.333 6v4c0 3.333 1.333 4.667 4.667 4.667\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                                                                    </div>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\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 || 'Blank'}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <!-- Enhanced resize handle -->\n                                        <div class=\"nxt-resize-handle\" \n                                            [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n                                    class=\"table-cell nxt-head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n                                    [style.color]=\"currentColumns?.[0]?.style?.color\"\n                                    style=\"padding: 12px !important;\">\n                                    <div style=\"display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;\">\n                                        {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                    </div>\n                                    <div class=\"nxt-resize-handle\"></div>\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; trackBy: trackByRow\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-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                                <!-- SKS17DEC25 Serial Number Cell -->\n                                <div *ngIf=\"serialNumberColumn\" class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n                                    {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n                                </div>\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n                                    <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color ellipsis\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"(column.width ? column.width + 'px' :(column.width || 'auto'))\"\n                                        [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n                                        [attr.data-column-id]=\"column.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n                                            <!-- edit mode content -->\n                                            <div [ngSwitch]=\"column.type\">\n                                                <!-- SKS22JUL25 calendar  -->\n                                                <div *ngSwitchCase=\"'calendar'\">\n                                                    <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n                                                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                                                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                                                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                                                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                                                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                                                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                                                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                                                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                                                    </app-custom-model> -->\n                                                </div>\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <i *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                                                        <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" 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\" 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\" 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\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                                stroke-linejoin=\"round\" />\n                                                        </svg>\n                                                    </div> -->\n                                                    <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n                                                        Logo preview area\n                                                        <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n                                                            <img [src]=\"column.question?.imageData\" />\n                                                        </div>\n\n                                                        Upload button\n                                                        <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n                                                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                                                <span>Upload Image</span>\n                                                            </label>\n                                                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                                                (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n                                                        </div>\n                                                    </div> -->\n                                                </div>\n                                                <!-- SKS22JUL25 icon-selector -->\n                                                <nxt-icon-selector *ngSwitchCase=\"'icon'\"  [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n                                                    [labelColor]=\"column.question?.color\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </nxt-icon-selector>\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n                                                    (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n                                                </nxt-datatable>\n                                                <!-- SKS22JUL25 list -->\n                                                <nxt-search-box  *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\" [rowData]=\"element\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\"  [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') || ''\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type); changeAnnounce($event.value)\">\n                                                </nxt-search-box>\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n                                                    [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n                                                    [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" \n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    placeholder=\"\" \n                                                    [padding]=\"column.question?.padding\"\n                                                    [readOnly]=\"column.readOnly\" \n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column?.question?.font\"\n                                                    [label]=\"column?.question?.questionText\"\n                                                    [labelColor]=\"column?.question?.color\"\n                                                    [inputTextColor]=\"column?.question?.color\"\n                                                    [labelSize]=\"column?.question?.fontSize\"\n                                                    [inputValueSize]=\"column?.question?.fontSize\"\n                                                    [labelWeight]=\"column?.question?.fontWeight\"\n                                                    [inputWeight]=\"column?.question?.fontWeight\"\n                                                    [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n                                                    [inputBgColor]=\"column?.question?.inputBgColor\"\n                                                    [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n                                                    [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-dropdown>\n                                                <!-- SKS29APR26 Multi Select -->\n                                                <nxt-multi-select *ngSwitchCase=\"'multiselect'\"\n                                                    [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\"\n                                                    [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\"\n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    placeholder=\"\"\n                                                    [padding]=\"column.question?.padding\"\n                                                    [readOnly]=\"column.readOnly\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column?.question?.font\"\n                                                    [label]=\"column?.question?.questionText\"\n                                                    [labelColor]=\"column?.question?.color\"\n                                                    [inputTextColor]=\"column?.question?.color\"\n                                                    [labelSize]=\"column?.question?.fontSize\"\n                                                    [inputValueSize]=\"column?.question?.fontSize\"\n                                                    [labelWeight]=\"column?.question?.fontWeight\"\n                                                    [inputWeight]=\"column?.question?.fontWeight\"\n                                                    [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n                                                    [inputBgColor]=\"column?.question?.inputBgColor\"\n                                                    [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-multi-select>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n                                                    [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-radio>\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n                                                    [readOnly]=\"column?.readOnly\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button *ngSwitchCase=\"'button'\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n                                                    (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n                                                    >\n                                                </nxt-button>\n                                                <!-- SKS22JUL25 book type -->\n                                                <div *ngSwitchCase=\"'book'\">\n                                                <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n                                                    [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n                                                    (handleDropDown)=\"getDropDown($event)\">\n                                                </lib-questionbook> -->\n                                                </div>\n                                                <!-- SKS10AUG25 object type element -->\n                                                <div *ngSwitchCase=\"'object'\">\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                                                </div>\n                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input *ngSwitchDefault \n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n                                                    [labelColor]=\"column.question?.color\"\n                                                    [labelSize]=\"column.question?.fontSize\"\n                                                    [inputValueSize]=\"column.question?.fontSize\"\n                                                    [labelWeight]=\"column.question?.fontWeight\"\n                                                    [inputWeight]=\"column.question?.fontWeight\"\n                                                    [showLabel]=\"column.question?.style?.showLabel\"\n                                                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                    [placeholder]=\"column.question?.question\"\n                                                    [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n                                                    [inputId]=\"column.question?.trackingId\"\n                                                    [errorMessages]=\"{ required: 'This field is required' }\"\n                                                    [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n                                                    [minDate]=\"column.question?.minDate\"\n                                                    [rows]=\"3\" [currency]=\"currencyOption?.code\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </ng-container>\n                                        \n                                        <ng-template #viewMode>\n                                            <!-- SKS10AUG25 view mode content -->\n                                            <ng-container [ngSwitch]=\"column.type\">\n                                                <ng-container *ngSwitchCase=\"'file'\">\n                                                    @defer (on viewport) {\n                                                        <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n                                                            [readOnly]=\"column?.readOnly\"\n                                                            [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                            [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                            >\n                                                        </nxt-file-upload>\n                                                    } @placeholder {\n                                                        <span class=\"skeleton-cell file-cell\"></span>\n                                                    }\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'object'\">\n                                                    <svg class=\"ms-2\" style=\"cursor: pointer;\" (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                                                <ng-container *ngSwitchCase=\"'boolean'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <!-- SKS7MAR26 Hyperlink Mode -->\n                                                        <a *ngIf=\"column.hyperLink\"\n                                                            class=\"hyperlink-input\"\n                                                            (click)=\"onClickHyperlink(column.fieldName, element, column.hyperLink)\">\n                                                            {{ (element | getValue: column.fieldName) === true || \n                                                            (element | getValue: column.fieldName) === 'true' ? 'True' : 'False' }}\n                                                        </a>\n                                                        <!-- SKS7MAR26 Normal Text Mode -->\n                                                        <span *ngIf=\"!column.hyperLink\">\n                                                            {{ (element | getValue: column.fieldName) === true || \n                                                            (element | getValue: column.fieldName) === 'true' ? 'True' : 'False' }}\n                                                        </span>\n                                                    </div>                                                                                             \n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'list'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <a \n                                                          [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\"\n                                                          (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\"\n                                                          [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n                                                        </a>\n                                                    </div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'date'\">\n                                                    <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'datetime'\">\n                                                    <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'currency'\">\n                                                    <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchDefault>\n                                                    <div class=\"ellipsis view-mode-text\"> \n                                                        <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">\n                                                            {{column.valueMap ? column.valueMap[(element | getValue: column.fieldName)] || (element | getValue: column.fieldName) : element | getValue: column.fieldName}} <!-- SKS23FEB25 valueMap used for map display value-->\n                                                        </a>\n                                                    </div>\n                                                </ng-container>\n                                        </ng-container>\n                                        </ng-template>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n                                            matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : '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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <i *ngIf=\"!element?.editRow\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                                                <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n                                            </div>\n                                        </div>\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\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 2px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg 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=\"!button.condition || element?._actions?.[button?.name]\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : 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.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor || '#787486'}}; cursor: pointer; line-height: 0px;\">\n                                                    <div (mouseenter)=\"$event.currentTarget.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.currentTarget.style.backgroundColor = button.backgroundColor\"\n                                                        [style.padding]=\"button?.padding ? button.padding + 'px' : '2px 2px'\";\n                                                        [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n                                                        style=\"\n                                                            display: inline-flex;\n                                                            align-items: center;\n                                                            justify-content: center;\n                                                            cursor: pointer;\n                                                            background-color: {{ button.backgroundColor }};\">\n                                                        <!-- IMAGE ICON (data URL or http/https) -->\n                                                        <img *ngIf=\"button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http')\"\n                                                            #imgElement\n                                                            [src]=\"button.iconSrc\"\n                                                            style=\"cursor: pointer;\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\"/>\n                                                        <!-- CSS ICON (fusion-icon-edit etc.) -->\n                                                        <i *ngIf=\"!(button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n                                                            class=\"fusion-icon nav-icon\"\n                                                            [ngClass]=\"button.iconSrc\"\n                                                            style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\">\n                                                        </i>\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 style=\"background-color: #f5f5f5; padding: 2px 2px; 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=\"!btn.condition || element?._actions?.[btn?.name]\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n                                                        [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 *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"serialNumberColumn\" class=\"non-summary-table-cell\"></div>\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <!-- SKS12SEP25 summary column input box -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container>\n                                            <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n                                                [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n                                                [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                [value]=\"summaryValues[row.fieldName]\"\n                                                [question]=\"row\" [readOnly]=\"row?.readOnly\"\n                                                [labelFont]=\"row.question?.font\"\n                                                [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n                                                [labelColor]=\"row.question?.color\"\n                                                [labelSize]=\"row.question?.fontSize\"\n                                                [inputValueSize]=\"row.question?.fontSize\"\n                                                [labelWeight]=\"row.question?.fontWeight\"\n                                                [inputWeight]=\"row.question?.fontWeight\"\n                                                [showLabel]=\"row.question?.style?.showLabel\"\n                                                inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                [placeholder]=\"row.question?.question\"\n                                                [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n                                                [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n                                                [inputId]=\"row.question?.trackingId\"\n                                                [errorMessages]=\"{ required: 'This field is required' }\"\n                                                [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n                                                [minDate]=\"row.question?.minDate\"\n                                                [rows]=\"3\" [currency]=\"currencyOption?.code\"\n                                                [onlyView]=\"onlyView\"\n                                                [mode]=\"onlyView ? 'view': 'edit'\"\n                                                (inputValue)=\"$event.tsChange ? '' : summaryValues[row.fieldName] = $event.value.valueObj;$event.tsChange ? '' : computeSummaryValues('html')\"\n                                                >\n                                            </nxt-input>\n                                            <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n                                                {{summaryValues?.[row.fieldName] | json}}\n                                            </div>\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=\"mode === 'edit' && (actionButton || isDeleteRow || isEditRow) && !onlyView\"\n                                        [ngClass]=\"addInlineRecord && k === 0 ? 'table-col-cell' : 'non-summary-table-cell'\"\n                                        [style.border-bottom]=\"(addInlineRecord && k === 0) ? '0px' : null\"\n                                        class=\"actionCol sticky-column\">\n                                        <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n                                        <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n                                            <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n                                                matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                                                <div class=\"addIcon\">\n                                                    <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n                                        class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n                                        @if (row?.columns?.includes(col.fieldName)) {\n                                        {{ summaryValues[col.fieldName] | number }}\n                                        }\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of [].constructor(withCheckBox ? currentColumns.length + 2 : currentColumns.length + 1); let i = index; trackBy: trackByColumn\" class=\"skeleton-cell\"></div>\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n                                </div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n            <!--SKS15FEB25 No Data Row -->\n            <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n                class=\"no-data\">\n                {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n            </div>\n            <!--SKS15FEB25 Pagination -->\n            <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n                    <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows?.length === 0 || (dataSource.data && dataSource?.data?.length === 0) ) ? true : (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n                        (click)=\"addTableRecord(inlineElement)\"\n                        matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></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=\"(tableSaveButton || isEditRow || addInlineRecord) && !hideSaveButton && from != 'formBuilder' && from != 'questionBook'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"(!tableEditTrack && (selection?.selected.length === 0 || selectedIsEmpty))\"\n                        (buttonClickEmit)=\"saveButton(inlineElement)\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"pagination ? (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<!--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'| nxtCustomTranslate : '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_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <nxt-button\n                    (buttonClickEmit)=\"deleteRecordData()\" \n                    [isLoading]=\"isButtonLoading\"\n                    [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n                    [btnBorderRadius]=\"4\"\n                    [btnWidth]=\"70\"\n                    [buttonType]=\"'custom-btn'\"\n                    >\n                </nxt-button>\n                <nxt-button\n                    (buttonClickEmit)=\"deleteModal = false\" \n                    [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n                    [btnBgColor]=\"'#ffffff'\"\n                    [btnTextColor]=\"'#007bff'\"\n                    [btnBorder]=\"'1'\"\n                    [btnBorderColor]=\"'#dee2e6'\"\n                    [btnBorderRadius]=\"4\"\n                    [btnWidth]=\"70\"\n                    [buttonType]=\"'custom-btn'\"\n                    >\n                </nxt-button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;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;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 0 10px 10px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .nxt-resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .nxt-resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:13px;font-weight:600;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.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)}.nxt-resize-handle{position:absolute;right:0;top:0;width:1px;height:-webkit-fill-available;cursor:col-resize;border:3px transparent;z-index:9;transition:background-color .2s ease}.nxt-resize-handle.right{right:unset!important;left:0!important;cursor:none!important}.nxt-resize-handle:hover{background:#ccc;opacity:.7}.nxt-resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.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}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a;left:0}.search-component.align-right{left:auto;right:0}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}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;padding:7px;cursor:pointer;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}.view-mode-text{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:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::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] .sort-indicators{padding-right:5px}[dir=rtl] .nxt-resize-handle{left:0!important;right:unset!important}::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:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!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:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;font-size:14px;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}.table-header .table-cell,.column-header .ellipsis{text-transform:uppercase}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [attr.dir]=\"direction\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title && !(id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter)\" 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=\"align-items: end; padding-bottom: 3px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"id && isListViews !== false && isListViews !== 'false' && from != 'formBuilder' && !groupFilter\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\" [tableData]=\"tableFilterData\"\n                    (listViewEmit)=\"listViewEmit($event)\" [title]=\"title\">\n                </app-list-view-filter>\n                <!-- SKS15OCT25 group filter -->\n                <div *ngIf=\"groupFilter\">\n                    <nxt-button class=\"data-table-fsbtn\"\n                        [type]=\"'group'\" [selector]=\"true\"\n                        (buttonClickEmit)=\"groupFilterEmit($event)\"\n                        [buttonConfig]=\"groupFilterConfig.buttonConfig\">\n                    </nxt-button>\n                </div>\n                <div *ngIf=\"(!id || isListViews === false || isListViews === 'false' || from === 'formBuilder' || from === 'questionBook') && isNosIndicator\" class=\"noOfRec\"\n                    style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'NOS' | nxtCustomTranslate : '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: end;\">\n                <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n                     SKS1JUL26 \u2014 Advanced Global Filter Bar\n                     Rendered only when advancedFilters config is provided.\n                     Each entry in the array produces one filter control.\n                     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n                <div *ngIf=\"advancedFilters?.length\" class=\"adv-filter-bar\">\n                    <!-- SKS1JUL26 Iterate over each filter config entry -->\n                    <ng-container *ngFor=\"let filterConfig of advancedFilters; trackBy: trackByIndex\">\n                        <!-- SKS1JUL26 \u2500\u2500 DATE type: renders Start Date + End Date side-by-side \u2500\u2500 -->\n                        <ng-container *ngIf=\"filterConfig.type === 'date' && !filterConfig.hidden\">\n                            <div>\n                                <span class=\"adv-filter-label\"> {{ filterConfig.label }} </span>\n                                <div class=\"adv-filter-date-group\">\n                                    <!-- SKS1JUL26 Start Date -->\n                                    <nxt-input\n                                        [type]=\"'date'\"\n                                        [placeholder]=\"'Start Date'\"\n                                        [margin]=\"'0px'\"\n                                        [padding]=\"'9px 10px 9px 5px'\"\n                                        [value]=\"$any(advancedFilterValues[filterConfig.field])?.startDate || ''\"\n                                        [readOnly]=\"filterConfig.disabled || false\" [inputBgColor]=\"'#ffffff'\"\n                                        [inputBorder]=\"'#ccc'\"\n                                        (inputValue)=\"onAdvancedFilterChange(filterConfig.field, $event?.valueObj?.[filterConfig.valueField || 'value'] || $event?.[filterConfig.valueField || 'value']?.valueObj || $event?.[filterConfig.valueField || 'value'] || $event?.valueObj, 'startDate')\">\n                                    </nxt-input>\n                                    <!-- SKS1JUL26 End Date -->\n                                    <nxt-input\n                                        [type]=\"'date'\"\n                                        [margin]=\"'0px'\"\n                                        [padding]=\"'9px 10px 9px 5px'\"\n                                        [placeholder]=\"'End Date'\"\n                                        [value]=\"$any(advancedFilterValues[filterConfig.field])?.endDate || ''\"\n                                        [readOnly]=\"filterConfig.disabled || false\" [inputBgColor]=\"'#ffffff'\"\n                                        [inputBorder]=\"'#ccc'\"\n                                        (inputValue)=\"onAdvancedFilterChange(filterConfig.field, $event?.valueObj?.[filterConfig.valueField || 'value'] || $event?.[filterConfig.valueField || 'value']?.valueObj || $event?.[filterConfig.valueField || 'value'] || $event?.valueObj, 'endDate')\">\n                                    </nxt-input>\n                                </div>\n                            </div>\n                           \n                        </ng-container>\n\n                        <!-- SKS1JUL26 \u2500\u2500 TEXT type: single nxt-input with contains search \u2500\u2500 -->\n                        <ng-container *ngIf=\"filterConfig.type === 'text' && !filterConfig.hidden\">\n                             <nxt-input  \n                                [type]=\"'text'\" [label]=\"filterConfig.label\"\n                                [value]=\"$any(advancedFilterValues[filterConfig.field]) || ''\"\n                                [readOnly]=\"filterConfig.disabled || false\"\n                                svgHeight=\"20px\" svgWidth=\"20px\" [padding]=\"'9px 10px 9px 5px'\"\n                                [placeholder]=\"filterConfig.placeholder || filterConfig.label\"\n                                [errorMessages]=\"{ required: 'This field is required' }\"\n                                [direction]=\"direction\"\n                                [onlyView]=\"onlyView\"\n                                [from]=\"'nxtForm'\"\n                                [inputBgColor]=\"'#ffffff'\" [inputBorder]=\"'#ccc'\"\n                                (inputValue)=\"onAdvancedFilterChange(filterConfig.field, $event?.valueObj?.[filterConfig.valueField || 'value'] || $event?.[filterConfig.valueField || 'value']?.valueObj || $event?.[filterConfig.valueField || 'value'] || $event?.valueObj)\"\n                                >\n                            </nxt-input>\n                        </ng-container>\n\n                        <!-- SKS1JUL26 \u2500\u2500 DROPDOWN type: nxt-dropdown with exact match \u2500\u2500 -->\n                        <ng-container *ngIf=\"filterConfig.type === 'dropdown' && !filterConfig.hidden\">\n                            <nxt-dropdown\n                                [options]=\"filterConfig.options || data || []\"\n                                [from]=\"'nxtForm'\" [label]=\"filterConfig.label\" [apiMeta]=\"{field:filterConfig.labelField, defaultField:filterConfig.valueField, isFilter: true }\"\n                                [selectedValue]=\"$any(advancedFilterValues[filterConfig.field]) || ''\"\n                                [placeholder]=\"filterConfig.placeholder || filterConfig.label\"\n                                [inputBgColor]=\"'#ffffff'\" [inputBorder]=\"'#ccc'\" [padding]=\"'9px 10px 9px 5px'\"\n                                (valueChange)=\"onAdvancedFilterChange(filterConfig.field, $event?.valueObj?.value || $event?.value?.valueObj || $event?.value || $event?.valueObj)\">\n                            </nxt-dropdown>\n                        </ng-container>\n\n                        <!-- SKS1JUL26 \u2500\u2500 SEARCH DROPDOWN type: nxt-search-box with exact match \u2500\u2500 -->\n                        <!-- searchValueChange emits: { valueObj: { id, name, value, label, ... }, ... }  -->\n                        <!-- We extract the scalar via config.valueField (default: 'value') from valueObj. -->\n                        <ng-container *ngIf=\"filterConfig.type === 'list' && !filterConfig.hidden\">\n                            <nxt-search-box [question]=\"{questionText: filterConfig.label, apiMeta: { options: data || [], field: filterConfig.labelField || 'label', valueField: filterConfig.valueField || 'value', isDependentField: true,style:{padding: '9px 10px 9px 5px' } } }\" [readOnly]=\"filterConfig.disabled || false\" [apiMeta]=\"filterConfig.subText\"\n                                [id]=\"filterConfig.id\" [placeHolderText]=\"filterConfig.placeholder || ('SEARCH' | nxtCustomTranslate : 'Search') + ' ' + filterConfig.label\" [value]=\"$any(advancedFilterValues[filterConfig.field]) || ''\"\n                                (searchValueChange)=\"onAdvancedFilterChange(filterConfig.field, $event?.valueObj?.[filterConfig.valueField || 'value'] || $event?.[filterConfig.valueField || 'value']?.valueObj || $event?.[filterConfig.valueField || 'value'] || $event?.valueObj)\">\n                            </nxt-search-box>\n                        </ng-container>\n                    </ng-container>\n\n                    <!-- SKS1JUL26 \u2500\u2500 Clear All button \u2014 visible only when at least one filter is active \u2500\u2500 -->\n                    <div *ngIf=\"hasAdvancedFilter()\" class=\"adv-filter-clear-btn\" (click)=\"clearAdvancedFilters()\"\n                         [title]=\"'CLEAR_FILTERS' | nxtCustomTranslate : 'Clear Filters'\">\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"#ef4444\" stroke-width=\"2.2\"\n                                  stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                        </svg>\n                    </div>\n                </div>\n                <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n                     SKS1JUL26 END SKS_ADV_FILTER\n                     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n                <div *ngIf=\"searchBar\" class=\"search\" style=\"margin-left: 7px;\">\n\n                    <div class=\"flex search-bar\">\n                        <svg width=\"16\" height=\"16\" 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' | nxtCustomTranslate : 'Search'  }}\" style=\"font-size: 13px;\"\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                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; align-items: center; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\" style=\"align-items: center;\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\" [btnBgColor]=\"button.btnBgColor\" [btnBorder]=\"button.btnBorder\" [btnBorderColor]=\"button.btnBorderColor\" [btnTextColor]=\"button.btnTextColor\"\n                            [btnHeight]=\"button.btnHeight\" [btnWidth]=\"button.btnWidth\" [btnHoverBgColor]=\"button.btnHoverBgColor\" [btnHoverTextColor]=\"button.btnHoverTextColor\" [btnIconRightSrc]=\"button.btnIconRightSrc\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" [padding]=\"button.padding\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n                <!--SKS15FEB25 Edit Button -->\n                <div *ngIf=\"question && from === 'questionBook' && mode === 'view' && !onlyView\" (click)=\"editModeChange()\" class=\"eicon-container edit-icon-hide\"\n                    matTooltip=\"{{ 'EDIT_TABLE' | nxtCustomTranslate : 'Edit Table'  }}\"\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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <i class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                    </div>\n                </div>\n                <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"discardChanges()\"\n                    matTooltip=\"{{ 'DISCARD' | nxtCustomTranslate : 'Discard'  }}\"\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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                            d=\"M7.05555 4.00883L5.94 5.12438L4.82445 4.00883C4.57861 3.76299 4.18191 3.76299 3.93607 4.00883C3.69023 4.25467 3.69023 4.65137 3.93607 4.89721L5.05162 6.01276L3.93607 7.12831C3.69023 7.37415 3.69023 7.77085 3.93607 8.01669C4.18191 8.26253 4.57861 8.26253 4.82445 8.01669L5.94 6.90114L7.05555 8.01669C7.30139 8.26253 7.69809 8.26253 7.94393 8.01669C8.18977 7.77085 8.18977 7.37415 7.94393 7.12831L6.82838 6.01276L7.94393 4.89721C8.18977 4.65137 8.18977 4.25467 7.94393 4.00883C7.69809 3.77285 7.30021 3.77285 7.05555 4.00883ZM5.94 0.0820312C2.70017 0.0820312 0.0808594 2.70134 0.0808594 5.94118C0.0808594 9.18101 2.70017 11.8003 5.94 11.8003C9.17983 11.8003 11.7991 9.18101 11.7991 5.94118C11.7991 2.70134 9.17983 0.0820312 5.94 0.0820312ZM5.94 10.6367C3.35426 10.6367 1.24422 8.52667 1.24422 5.94118C1.24422 3.35553 3.35426 1.24549 5.94 1.24549C8.52558 1.24549 10.6356 3.35553 10.6356 5.94118C10.6356 8.52667 8.52558 10.6367 5.94 10.6367Z\"\n                            fill=\"#B0ADAB\" />\n                        </svg>\n                    </div>\n                </div>\n                <div *ngIf=\"question && from !== 'formBuilder' && mode === 'edit' && viewEdit\" class=\"eicon-container\" (click)=\"saveTable()\"\n                    matTooltip=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"\n                    style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                    <div style=\"padding: 2px 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 12 12\" fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                            d=\"M5.9502 0.5C8.96006 0.500106 11.4004 2.94031 11.4004 5.9502C11.4003 8.95999 8.95999 11.4003 5.9502 11.4004C2.94031 11.4004 0.500106 8.96006 0.5 5.9502C0.5 2.94024 2.94024 0.5 5.9502 0.5Z\"\n                            stroke=\"#B0ADAB\" />\n                            <path\n                            d=\"M8.88111 3.84583C8.83269 3.7972 8.77513 3.7586 8.71176 3.73227C8.64838 3.70594 8.58043 3.69238 8.5118 3.69238C8.44317 3.69238 8.37521 3.70594 8.31184 3.73227C8.24846 3.7586 8.19091 3.7972 8.14249 3.84583L4.8269 7.16347L3.35253 5.6891C3.30403 5.6406 3.24646 5.60213 3.18309 5.57588C3.11972 5.54964 3.05181 5.53613 2.98322 5.53613C2.91463 5.53613 2.84672 5.54964 2.78335 5.57588C2.71999 5.60213 2.66241 5.6406 2.61391 5.6891C2.56541 5.7376 2.52694 5.79518 2.50069 5.85854C2.47445 5.92191 2.46094 5.98982 2.46094 6.05841C2.46094 6.127 2.47445 6.19491 2.50069 6.25828C2.52694 6.32165 2.56541 6.37922 2.61391 6.42772L4.45677 8.27058C4.50519 8.31922 4.56274 8.35781 4.62612 8.38414C4.6895 8.41047 4.75745 8.42403 4.82608 8.42403C4.89471 8.42403 4.96266 8.41047 5.02604 8.38414C5.08942 8.35781 5.14697 8.31922 5.19539 8.27058L8.88111 4.58445C8.92974 4.53603 8.96834 4.47848 8.99467 4.4151C9.021 4.35173 9.03456 4.28377 9.03456 4.21514C9.03456 4.14651 9.021 4.07856 8.99467 4.01518C8.96834 3.9518 8.92974 3.89425 8.88111 3.84583Z\"\n                            fill=\"#B0ADAB\" />\n                        </svg>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ \n                    maxHeight: isPagination ? (tableHeight || '452px') : 'auto', \n                    minHeight: (dataSource?.data?.length === 0 && !isLoading ) ? ((from !== 'formBuilder' && from !== 'questionBook') ? (searchFilter ? '247px' : '0px')  : '0px' ) : (searchFilter ? '247px' : '100px') \n                }\"\n                #tableContainer (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 && mode === 'edit'\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'50px'\">\n                                    <div class=\"right nxt-resize-handle\"></div>\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                    <div class=\"nxt-resize-handle\"></div>\n                                </div>\n                                <!-- SKS17DEC25 Serial Number Column Header -->\n                                <div *ngIf=\"serialNumberColumn\" class=\"table-cell sticky-column nxt-head-color\" [style.width]=\"'60px'\" style=\"text-align: center;\">\n                                    <div *ngIf=\"!withCheckBox && mode !== 'edit'\" class=\"nxt-resize-handle\"></div>\n                                    <div class=\"column-header\">\n                                        <div class=\"ellipsis\">No</div>\n                                    </div>\n                                    <!-- SKS17DEC25 resize  -->\n                                    <div class=\"nxt-resize-handle\"></div>\n                                </div>\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index; trackBy: trackByColumn\">\n                                    <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell nxtTableHeader nxt-head-color\" [style.width]=\"column.width ?  column.width + 'px' : (column.width || 'auto')\"\n                                        [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                        [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n                                        [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n                                        (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n                                        [style.backgroundColor]=\"column?.style?.fillColor || '#ffffff'\"\n                                        [style.color]=\"column?.style?.color\"\n                                        [attr.data-column-id]=\"column.uniqueIdentifier\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier && !isPreview\"\n                                                    class=\"close-column-btn\"\n                                                    (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n                                                    \u2715\n                                                </div>\n                                                <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n                                                    @if(column.labelPath){\n                                                        {{ column.labelPath | nxtCustomTranslate : column.label }}\n                                                    }\n                                                    @else if(from !== 'formBuilder' || from !== 'questionBook') {\n                                                        {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                    } \n                                                    @else if(column.uniqueIdentifier) {\n                                                        @if( ((column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label) !== column.uniqueIdentifier+'.label'){\n                                                            {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                        }\n                                                    }\n                                                    @else {\n                                                        {{ column.label }}\n                                                    }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName, $event)\"\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.fieldName]?.length > 0\"\n                                                            cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                    </svg>\n                                                    <div *ngIf=\"column.sort\"\n                                                        class=\"sort-indicators\">\n                                                        <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n                                                            {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                            === 'desc' ? '\u2193' : '' }}\n                                                        </span>\n                                                        <span\n                                                            *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n                                                            class=\"sort-direction\">\n                                                            \u2191\n                                                        </span>\n                                                    </div>\n                                                    <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n                                                        class=\"search-component position-absolute\" [class.align-right]=\"alignRight\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\" style=\"align-items: center;\">\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' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <div *ngIf=\"isResized\" class=\"close-icon\">\n                                                                        <svg (click)=\"closefilter()\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.113 9.887 3.773-3.773m0 3.773L6.113 6.113M6 14.667h4c3.333 0 4.667-1.333 4.667-4.667V6c0-3.333-1.333-4.667-4.667-4.667H6C2.667 1.333 1.333 2.667 1.333 6v4c0 3.333 1.333 4.667 4.667 4.667\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                                                                    </div>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\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 || 'Blank'}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <!-- Enhanced resize handle -->\n                                        <div class=\"nxt-resize-handle\" \n                                            [attr.resize-data-column-id]=\"column.uniqueIdentifier\"\n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit' && !onlyView\"\n                                    class=\"table-cell nxt-head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    [style.backgroundColor]=\"currentColumns?.[0]?.style?.fillColor || '#ffffff'\"\n                                    [style.color]=\"currentColumns?.[0]?.style?.color\"\n                                    style=\"padding: 12px !important;\">\n                                    <div style=\"display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;\">\n                                        {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                    </div>\n                                    <div class=\"nxt-resize-handle\"></div>\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; trackBy: trackByRow\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox && mode === 'edit'\" class=\"table-col-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                                <!-- SKS17DEC25 Serial Number Cell -->\n                                <div *ngIf=\"serialNumberColumn\" class=\"table-col-cell sticky-column body-color view-mode-text\" style=\"text-align: center; font-weight: 500;\">\n                                    {{ ((pageIndex - 1) * pageSize) + i + 1 }}\n                                </div>\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; let c = index; trackBy: trackByColumn\">\n                                    <div *ngIf=\"column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color ellipsis\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"(column.width ? column.width + 'px' :(column.width || 'auto'))\"\n                                        [style.overflow]=\"element?.editRow ? 'unset' : ''\"\n                                        [attr.data-column-id]=\"column.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"element?.editRow && mode === 'edit'; else viewMode\">\n                                            <!-- edit mode content -->\n                                            <div [ngSwitch]=\"column.type\">\n                                                <!-- SKS22JUL25 calendar  -->\n                                                <div *ngSwitchCase=\"'calendar'\">\n                                                    <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n                                                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                                                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                                                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                                                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                                                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                                                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                                                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                                                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                                                    </app-custom-model> -->\n                                                </div>\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngSwitchCase=\"'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <i *ngIf=\"!column.readOnly\" (click)=\"onImageEdit(column.question)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                                                        <svg *ngIf=\"!column.readOnly\" (click)=\"onImageDelete(column.question)\" 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\" 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\" 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\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                                stroke-linejoin=\"round\" />\n                                                        </svg>\n                                                    </div> -->\n                                                    <img *ngIf=\"column.readOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.readOnly\" class=\"logo-container\">\n                                                        Logo preview area\n                                                        <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n                                                            <img [src]=\"column.question?.imageData\" />\n                                                        </div>\n\n                                                        Upload button\n                                                        <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n                                                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                                                <span>Upload Image</span>\n                                                            </label>\n                                                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                                                (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n                                                        </div>\n                                                    </div> -->\n                                                </div>\n                                                <!-- SKS22JUL25 icon-selector -->\n                                                <nxt-icon-selector *ngSwitchCase=\"'icon'\"  [allIcons]=\"allIcons\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n                                                    [labelColor]=\"column.question?.color\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </nxt-icon-selector>\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngSwitchCase=\"'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngSwitchCase=\"'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n                                                    (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n                                                </nxt-datatable>\n                                                <!-- SKS22JUL25 list -->\n                                                <nxt-search-box  *ngSwitchCase=\"'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.readOnly\" [apiMeta]=\"column.question?.subText\" [rowData]=\"element\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\"  [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') || ''\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type); changeAnnounce($event.value)\">\n                                                </nxt-search-box>\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <nxt-dropdown *ngSwitchCase=\"'dropdown'\" \n                                                    [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\" \n                                                    [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" \n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    placeholder=\"\" \n                                                    [padding]=\"column.question?.padding\"\n                                                    [readOnly]=\"column.readOnly\" \n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column?.question?.font\"\n                                                    [label]=\"column?.question?.questionText\"\n                                                    [labelColor]=\"column?.question?.color\"\n                                                    [inputTextColor]=\"column?.question?.color\"\n                                                    [labelSize]=\"column?.question?.fontSize\"\n                                                    [inputValueSize]=\"column?.question?.fontSize\"\n                                                    [labelWeight]=\"column?.question?.fontWeight\"\n                                                    [inputWeight]=\"column?.question?.fontWeight\"\n                                                    [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n                                                    [inputBgColor]=\"column?.question?.inputBgColor\"\n                                                    [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" \n                                                    [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-dropdown>\n                                                <!-- SKS29APR26 Multi Select -->\n                                                <nxt-multi-select *ngSwitchCase=\"'multiselect'\"\n                                                    [options]=\"column?.question?.options?.length ? column.question.options : (element | getValue : column?.question?.subText?.variable : undefined : undefined : 'table')\"\n                                                    [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\"\n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    placeholder=\"\"\n                                                    [padding]=\"column.question?.padding\"\n                                                    [readOnly]=\"column.readOnly\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column?.question?.font\"\n                                                    [label]=\"column?.question?.questionText\"\n                                                    [labelColor]=\"column?.question?.color\"\n                                                    [inputTextColor]=\"column?.question?.color\"\n                                                    [labelSize]=\"column?.question?.fontSize\"\n                                                    [inputValueSize]=\"column?.question?.fontSize\"\n                                                    [labelWeight]=\"column?.question?.fontWeight\"\n                                                    [inputWeight]=\"column?.question?.fontWeight\"\n                                                    [showLabel]=\"column?.question?.style?.showLabel ?? true\"\n                                                    [inputBgColor]=\"column?.question?.inputBgColor\"\n                                                    [inputIconLeftSrc]=\"column?.question?.iconLeftSrc\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-multi-select>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <nxt-radio *ngSwitchCase=\"'radio'\" [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                    [selectedValue]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\" [errorMessage]=\"column.question?.errorMessage\"\n                                                    [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.readOnly\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </nxt-radio>\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <nxt-file-upload *ngSwitchCase=\"'file'\" [config]=\"column | questionByRow:element:i\"\n                                                    [readOnly]=\"column?.readOnly\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button *ngSwitchCase=\"'button'\"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n                                                    (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n                                                    >\n                                                </nxt-button>\n                                                <!-- SKS22JUL25 book type -->\n                                                <div *ngSwitchCase=\"'book'\">\n                                                <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n                                                    [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n                                                    (handleDropDown)=\"getDropDown($event)\">\n                                                </lib-questionbook> -->\n                                                </div>\n                                                <!-- SKS10AUG25 object type element -->\n                                                <div *ngSwitchCase=\"'object'\">\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                                                </div>\n                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input *ngSwitchDefault \n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName : undefined : undefined : 'table'\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n                                                    [labelColor]=\"column.question?.color\"\n                                                    [labelSize]=\"column.question?.fontSize\"\n                                                    [inputValueSize]=\"column.question?.fontSize\"\n                                                    [labelWeight]=\"column.question?.fontWeight\"\n                                                    [inputWeight]=\"column.question?.fontWeight\"\n                                                    [showLabel]=\"column.question?.style?.showLabel\"\n                                                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                    [placeholder]=\"column.question?.question\"\n                                                    [readOnly]=\"column?.readOnly\" [textAlign]=\"column.type === 'currency' ? 'end' : ''\"\n                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#ffffff\"\n                                                    [inputId]=\"column.question?.trackingId\"\n                                                    [errorMessages]=\"{ required: 'This field is required' }\"\n                                                    [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n                                                    [minDate]=\"column.question?.minDate\"\n                                                    [rows]=\"3\" [currency]=\"currencyOption?.code\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </ng-container>\n                                        \n                                        <ng-template #viewMode>\n                                            <!-- SKS10AUG25 view mode content -->\n                                            <ng-container [ngSwitch]=\"column.type\">\n                                                <ng-container *ngSwitchCase=\"'file'\">\n                                                    @defer (on viewport) {\n                                                        <nxt-file-upload [config]=\"column | questionByRow:element:i\"\n                                                            [readOnly]=\"column?.readOnly\"\n                                                            [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? element?.editRow && !column.readOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                            [allFiles]=\"(column | questionByRow:element:i)?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                            >\n                                                        </nxt-file-upload>\n                                                    } @placeholder {\n                                                        <span class=\"skeleton-cell file-cell\"></span>\n                                                    }\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'object'\">\n                                                    <svg class=\"ms-2\" style=\"cursor: pointer;\" (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                                                <ng-container *ngSwitchCase=\"'boolean'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <!-- SKS7MAR26 Hyperlink Mode -->\n                                                        <a *ngIf=\"column.hyperLink\"\n                                                            class=\"hyperlink-input\"\n                                                            (click)=\"onClickHyperlink(column.fieldName, element, column.hyperLink)\">\n                                                            {{ (element | getValue: column.fieldName) === true || \n                                                            (element | getValue: column.fieldName) === 'true' ? 'True' : 'False' }}\n                                                        </a>\n                                                        <!-- SKS7MAR26 Normal Text Mode -->\n                                                        <span *ngIf=\"!column.hyperLink\">\n                                                            {{ (element | getValue: column.fieldName) === true || \n                                                            (element | getValue: column.fieldName) === 'true' ? 'True' : 'False' }}\n                                                        </span>\n                                                    </div>                                                                                             \n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'list'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <a \n                                                          [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\"\n                                                          (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\"\n                                                          [innerHTML]=\"element | getValue: column.fieldName: 'list': column : undefined : 'view'\">\n                                                        </a>\n                                                    </div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'date'\">\n                                                    <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{(element | getValue: column.fieldName) | NxtDate : 'mediumDate' : languageCode : column.calendarType}}</a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'datetime'\">\n                                                    <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{(element | getValue: column.fieldName) | NxtDate : \"DD MMM YYYY, hh:mm A\" : languageCode : column.calendarType}}</a></div>\n                                                </ng-container>\n                                                 <ng-container *ngSwitchCase=\"'time'\">\n                                                    <div class=\"ellipsis view-mode-text\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{(element | getValue: column.fieldName) | NxtDate : \"hh:mm A\" : languageCode : column.calendarType}}</a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'currency'\">\n                                                    <div class=\"ellipsis view-mode-text\" style=\"text-align: end;\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">{{ (+(element | getValue: column.fieldName) || 0) | currency : (currencyOption?.code || 'INR') : 'symbol-narrow' }} </a></div>\n                                                </ng-container>\n                                                <ng-container *ngSwitchDefault>\n                                                    <div class=\"ellipsis view-mode-text\"> \n                                                        <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\"  [attr.href]=\"column.hyperLink ? column.hyperlinkurl + '/' + (element | getValue: column.fieldName) : null\" (click)=\"column.hyperLink && $event.preventDefault(); column.hyperLink && onClickHyperlink(column.fieldName, element, column.hyperLink)\">\n                                                            {{column.valueMap ? column.valueMap[(element | getValue: column.fieldName)] || (element | getValue: column.fieldName) : element | getValue: column.fieldName}} <!-- SKS23FEB25 valueMap used for map display value-->\n                                                        </a>\n                                                    </div>\n                                                </ng-container>\n                                        </ng-container>\n                                        </ng-template>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"(actionButton || isDeleteRow || isEditRow) && mode === 'edit'\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center; justify-content: center;\">\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\" (click)=\"element?.editRow ? onSave(element) : onEdit(element)\"\n                                            matTooltip=\"{{(element?.editRow ? 'SAVE' : 'EDIT_RECORD') | nxtCustomTranslate : (element?.editRow ? 'Save' : '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 2px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <i *ngIf=\"!element?.editRow\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                                                <svg *ngIf=\"element?.editRow\" width=\"16\" height=\"16\" viewBox=\"0.09 0.12 0.3 0.25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M.35.149A.015.015 0 0 1 .351.17L.208.33a.015.015 0 0 1-.022 0L.129.266a.015.015 0 1 1 .022-.02l.046.051L.329.15A.015.015 0 0 1 .35.149\" fill=\"#6C757D\"/></svg>\n                                            </div>\n                                        </div>\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\" (click)=\"deleteRecord(element,i)\"\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 2px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg 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=\"!button.condition || element?._actions?.[button?.name]\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : 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.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor || '#787486'}}; cursor: pointer; line-height: 0px;\">\n                                                    <div (mouseenter)=\"$event.currentTarget.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.currentTarget.style.backgroundColor = button.backgroundColor\"\n                                                        [style.padding]=\"button?.padding ? button.padding + 'px' : '2px 2px'\";\n                                                        [style.border-radius]=\"button?.borderRadius ? button.borderRadius + 'px' : '5px'\";\n                                                        style=\"\n                                                            display: inline-flex;\n                                                            align-items: center;\n                                                            justify-content: center;\n                                                            cursor: pointer;\n                                                            background-color: {{ button.backgroundColor }};\">\n                                                        <!-- IMAGE ICON (data URL or http/https) -->\n                                                        <img *ngIf=\"button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http')\"\n                                                            #imgElement\n                                                            [src]=\"button.iconSrc\"\n                                                            style=\"cursor: pointer;\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\"/>\n                                                        <!-- CSS ICON (fusion-icon-edit etc.) -->\n                                                        <i *ngIf=\"!(button.iconSrc?.startsWith('data:') || button.iconSrc?.startsWith('http'))\"\n                                                            class=\"fusion-icon nav-icon\"\n                                                            [ngClass]=\"button.iconSrc\"\n                                                            style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\">\n                                                        </i>\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 style=\"background-color: #f5f5f5; padding: 2px 2px; 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=\"!btn.condition || element?._actions?.[btn?.name]\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n                                                        [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 *ngIf=\"displaySummaryRows && displaySummaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of displaySummaryRows; let k = index;\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"serialNumberColumn\" class=\"non-summary-table-cell\"></div>\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <!-- SKS12SEP25 summary column input box -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container>\n                                            <nxt-input *ngIf=\"!Array.isArray(summaryValues?.[row.fieldName])\"\n                                                [type]=\"row.type === 'boolean' ? 'checkbox' : row.type === 'richtextarea' ? 'richtext' : row.type === undefined ? 'text' : row.type \"\n                                                [mode]=\"(from === 'formBuilder' || from === 'questionBook') ? !row.readOnly ? 'edit' : 'view' : (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                [value]=\"summaryValues[row.fieldName]\"\n                                                [question]=\"row\" [readOnly]=\"row?.readOnly\"\n                                                [labelFont]=\"row.question?.font\"\n                                                [label]=\"row.question?.questionText ? ((row.question?.id+'.questionText') | nxtCustomTranslate : row.question?.questionText): ''\"\n                                                [labelColor]=\"row.question?.color\"\n                                                [labelSize]=\"row.question?.fontSize\"\n                                                [inputValueSize]=\"row.question?.fontSize\"\n                                                [labelWeight]=\"row.question?.fontWeight\"\n                                                [inputWeight]=\"row.question?.fontWeight\"\n                                                [showLabel]=\"row.question?.style?.showLabel\"\n                                                inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                [placeholder]=\"row.question?.question\"\n                                                [textAlign]=\"row.type === 'currency' ? 'end' : '' \"\n                                                [required]=\"row.question?.isOptional\" inputBgColor=\"#ffffff\"\n                                                [inputId]=\"row.question?.trackingId\"\n                                                [errorMessages]=\"{ required: 'This field is required' }\"\n                                                [inputIconLeftSrc]=\"row.question?.iconLeftSrc\" \n                                                [minDate]=\"row.question?.minDate\"\n                                                [rows]=\"3\" [currency]=\"currencyOption?.code\"\n                                                [onlyView]=\"onlyView\"\n                                                [mode]=\"onlyView ? 'view': 'edit'\"\n                                                (inputValue)=\"$event.tsChange ? '' : summaryValues[row.fieldName] = $event.value.valueObj;$event.tsChange ? '' : computeSummaryValues('html')\"\n                                                >\n                                            </nxt-input>\n                                            <div *ngIf=\"Array.isArray(summaryValues?.[row.fieldName])\">\n                                                {{summaryValues?.[row.fieldName] | json}}\n                                            </div>\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=\"mode === 'edit' && (actionButton || isDeleteRow || isEditRow) && !onlyView\"\n                                        [ngClass]=\"addInlineRecord && k === 0 ? 'table-col-cell' : 'non-summary-table-cell'\"\n                                        [style.border-bottom]=\"(addInlineRecord && k === 0) ? '0px' : null\"\n                                        class=\"actionCol sticky-column\">\n                                        <!-- SKS16OCT25 if summaryRows are present in the table, show the inline button next to the summary row action button column -->\n                                        <div *ngIf=\"addInlineRecord && k === 0\" style=\"display: flex; justify-content: center;\">\n                                            <div class=\"flex addIconBor cursor-pointer\" (click)=\"addTableRecord(inlineElement)\"\n                                                matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                                                <div class=\"addIcon\">\n                                                    <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></svg>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of displaySummaryRows; let i = index; trackBy: trackBySummary\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last; let i = index; trackBy: trackByColumn \"\n                                        class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n                                        @if (row?.columns?.includes(col.fieldName)) {\n                                        {{ summaryValues[col.fieldName] | number }}\n                                        }\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]; trackBy: trackByIndex\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of [].constructor(withCheckBox ? currentColumns.length + 2 : currentColumns.length + 1); let i = index; trackBy: trackByColumn\" class=\"skeleton-cell\"></div>\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n                                </div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n            <!--SKS15FEB25 No Data Row -->\n            <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook'\"\n                class=\"no-data\">\n                {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n            </div>\n            <!--SKS15FEB25 Pagination -->\n            <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div *ngIf=\"mode === 'edit'\" class=\"d-flex inlineAdd justify-content-end\">\n                    <!-- SKS16OCT25 added condition to hide inline button when summary row is enabled in the table -->\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"((!displaySummaryRows || displaySummaryRows?.length === 0 || (dataSource.data && dataSource?.data?.length === 0) ) ? true : (!actionButton && !isDeleteRow && !isEditRow)) && addInlineRecord && !onlyView\"\n                        (click)=\"addTableRecord(inlineElement)\"\n                        matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"20\" viewBox=\"66.666 -733.334 666.667 666.668\" width=\"20\"><path d=\"M366.666 -233.334h66.666v-133.334h133.334v-66.666H433.334v-133.334h-66.666v133.334H233.334v66.666h133.334zM400 -66.668q-69.166 0 -130 -26.25t-105.834 -71.249 -71.25 -105.834 -26.25 -130 26.25 -130 71.25 -105.834 105.834 -71.25 130 -26.25 130 26.25 105.834 71.25 71.25 105.834 26.25 130 -26.25 130 -71.25 105.834 -105.834 71.25 -130 26.25m0 -66.666q111.666 0 189.166 -77.5t77.5 -189.166 -77.5 -189.166 -189.166 -77.5 -189.166 77.5 -77.5 189.166 77.5 189.166 189.166 77.5m0 -266.666\" fill=\"#6d747d\"/></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=\"(tableSaveButton || isEditRow || addInlineRecord) && !hideSaveButton && from != 'formBuilder' && from != 'questionBook'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"(!tableEditTrack && (selection?.selected.length === 0 || selectedIsEmpty))\"\n                        (buttonClickEmit)=\"saveButton(inlineElement)\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"pagination ? (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<!--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'| nxtCustomTranslate : '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_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <nxt-button\n                    (buttonClickEmit)=\"deleteRecordData()\" \n                    [isLoading]=\"isButtonLoading\"\n                    [buttonValue]=\"'YES'| nxtCustomTranslate : 'Yes'\"\n                    [btnBorderRadius]=\"4\"\n                    [btnWidth]=\"70\"\n                    [buttonType]=\"'custom-btn'\"\n                    >\n                </nxt-button>\n                <nxt-button\n                    (buttonClickEmit)=\"deleteModal = false\" \n                    [buttonValue]=\"'NO'| nxtCustomTranslate : 'No'\"\n                    [btnBgColor]=\"'#ffffff'\"\n                    [btnTextColor]=\"'#007bff'\"\n                    [btnBorder]=\"'1'\"\n                    [btnBorderColor]=\"'#dee2e6'\"\n                    [btnBorderRadius]=\"4\"\n                    [btnWidth]=\"70\"\n                    [buttonType]=\"'custom-btn'\"\n                    >\n                </nxt-button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;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;min-height:40px}.table-cell{position:relative;min-width:50px;max-width:100%;padding:10px 12px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;align-content:center;min-width:50px;max-width:100%;padding:10px 0 10px 10px;border-bottom:solid 1px var(--border-color);box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .nxt-resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .nxt-resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;font-size:13px;font-weight:600;min-width:0;overflow:hidden}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.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)}.nxt-resize-handle{position:absolute;right:0;top:0;width:1px;height:-webkit-fill-available;cursor:col-resize;border:3px transparent;z-index:9;transition:background-color .2s ease}.nxt-resize-handle.right{right:unset!important;left:0!important;cursor:none!important}.nxt-resize-handle:hover{background:#ccc;opacity:.7}.nxt-resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;max-width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid #b1b1b1;background:#fff;border-radius:7px;padding:4px}.search-bar{width:100%;margin:3px;justify-content:center;align-items:center}.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}.nxtTableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.nxtTableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;background-color:#fff;box-shadow:0 2px 10px #0000001a;left:0}.search-component.align-right{left:auto;right:0}[dir=rtl] .search-component{left:0}.rtl .ellipsis,[dir=rtl] .ellipsis{direction:rtl;text-align:right!important}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;padding:7px;cursor:pointer;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}.view-mode-text{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:2px;border-radius:5px;border:1px solid #dcdcdc;transition:background-color .3s,border-color .3s}.addIcon{padding:0;border-radius:3px;background-color:#f5f5f5;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}::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] .sort-indicators{padding-right:5px}[dir=rtl] .nxt-resize-handle{left:0!important;right:unset!important}::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:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!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:6px;font-size:13px;font-weight:400;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-cell.file-cell{width:inherit!important;position:absolute!important;top:1px!important;height:30px!important;transition:all .2s!important}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;font-size:14px;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #a8a1a1}.hyperlink-input{color:#2c56f9!important;color:inherit;text-decoration:none;cursor:default}.hyperlink-input:hover{color:#00f!important;text-decoration:underline!important;cursor:pointer}.edit-icon-hide{display:none;cursor:pointer}.table-layout:hover .edit-icon-hide{display:block}.modal-footer{padding:0!important}.table-header .table-cell,.column-header .ellipsis{text-transform:uppercase}.adv-filter-bar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:7px}.adv-filter-label{font-size:14px;font-weight:400;max-width:200px}.adv-filter-date-group{display:flex;flex-direction:row;gap:7px;align-items:flex-end}.adv-filter-clear-btn{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:6px;cursor:pointer;flex-shrink:0;align-self:flex-end;margin-bottom:2px;background:#fff1f1;border:1px solid #fecaca;transition:background .15s ease,transform .1s ease}.adv-filter-clear-btn:hover{background:#fee2e2;transform:scale(1.08)}.adv-filter-clear-btn:active{transform:scale(.95)}\n"] }]
         }], ctorParameters: () => [{ type: CountryService }, { type: StorageService }, { type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
                 type: Input
             }], summaryValues: [{
@@ -54162,6 +54511,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
                 type: Input
             }], serialNumberColumn: [{
                 type: Input
+            }], advancedFilters: [{
+                type: Input
             }], tableRowClick: [{
                 type: Output
             }], onEditData: [{
@@ -56413,7 +56764,7 @@ class QuestionnaireComponent {
         return Object.values(item)[0];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: SharedService }, { token: i1$3.ActivatedRoute }, { token: i1$2.DomSanitizer }, { token: i6.UntypedFormBuilder }, { token: i8.DeviceDetectorService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: QuestionnaireComponent, isStandalone: true, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api", isEdit: "isEdit", direction: "direction" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, usesOnChanges: true, ngImport: i0, template: "<!-- custom loader -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" >\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\n    </button>\n  </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\" [dir]=\"direction\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.title\">\n    <h1>{{ questionItem?.title }}</h1>\n    <div>{{ questionItem?.subTitle }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div>\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n      <div class=\"nxt-largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.groupName }}\n        </h3>\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Question Handling -->\n    <!-- VD 10Aug24- question no -->\n  <div>\n    <div *ngIf=\"questionItem.questionText && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n      <span>{{questionItem?.questionNumber}}.</span>\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n       {{(questionItem.id+'.questionText') | nxtCustomTranslate : questionItem?.questionText}}\n      </p>\n    </div>\n    <!-- Title -->\n    <!-- <div *ngIf=\"questionItem.isTitle\">\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n        {{ questionItem?.questionText }}\n      </div>\n    </div> -->\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{ questionItem?.questionText }}\n        </h3>\n      </div>\n    </div> -->\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\n    <div\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\n    <div class=\"info-alert ques-alert1\">\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"nxt-dis-flex\">\n      <select class=\"nxtdropdown\"\n        [ngClass]=\"{\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n          'custom-select': !qbItem?.progressBar\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n          {{ opt.value }}\n        </option>\n        <!-- HA 20DEC23 For Translation -->\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | nxtCustomTranslate: 'pleaseMakeChoice'}}</option>\n      </select>\n    </div>\n  </div>\n\n  <!-- SKS29APR26 Multi Select-->\n  <div *ngIf=\"multiSelectFlag\">\n    <nxt-multi-select\n      [options]=\"questionItem.options\"\n      [apiMeta]=\"questionItem.subText\"\n      [selectedValue]=\"inpValue\"\n      [placeholder]=\"questionItem?.question ? ((questionItem.id+'.question') | nxtCustomTranslate : questionItem?.question) : ''\"\n      [question]=\"questionItem\"\n      [inputBgColor]=\"'#ffffff'\"\n      (valueChange)=\"inpValue = $event.value.valueObj; questionItem.input = $event.value.valueObj; clearError()\">\n    </nxt-multi-select>\n  </div>\n\n  <!--VD Radio update -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n    <div class=\"nxt-custom-radio-container\">\n      <div *ngFor=\"let opt of questionItem.options\" \n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n        <input\n          type=\"radio\"\n          [id]=\"opt.value\"\n          [(ngModel)]=\"inpValue\"\n          name=\"inpValue\"\n          [value]=\"opt.value\"\n          (change)=\"optionChange(opt.value)\"\n        />\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n      </div>\n    </div>\n\n    <!-- <div class=\"nxt-dis-flex\">\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n        <label class=\"nxt-radiocontainer container myt-font4\">\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n            (change)=\"optionChange(opt.value)\" />\n          {{ opt.value }}\n        </label>\n      </div>\n    </div> -->\n  </div>  \n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n      {{ questionItem?.errorMessage }}\n    </div>\n    <div class=\"nxt-checkbox-container\">\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n        <label class=\"nxt-container1\">\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" >\n    <div>\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <!-- HA 20DEC23 For Translation -->\n      <input type=text placeholder=\"{{'zeroOfZero' | nxtCustomTranslate: 'zeroOfZero'}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n          <!-- HA 20DEC23 For Translation -->\n          <!-- HA 02FEB24 Additional param to update the question -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                           dateandTime: !qbItem?.progressBar}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.progressBar\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.type === 'File' &&\n        !qbItem?.progressBar\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.progressBar\">\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <span class=\"f-Name\" *ngIf=\" questionItem?.style?.showLabel !== false\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <!-- HA 20DEC23 For Translation -->\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n            <span *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n            <div *ngIf=\"ques.type === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n                <div class=\"dateandtime\">\n                  <!-- HA 20DEC23 For Translation -->\n                  <!-- HA 02FEB24 Additional param to update the question -->\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.type === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                                  dateandTime: !qbItem?.progressBar}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n         \n            <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n            <nxt-input  *ngIf=\"ques.type === 'Location' || ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n              [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : ques.type === 'Location' ? 'location' : 'text'\"\n              [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n              [value]=\"ques.input\"\n              [apiKey]=\"qbItem['apiKey']\"\n              [question]=\"ques\" [readOnly]=\"ques.isReadOnly\"\n              [labelFont]=\"ques.font\"\n              [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n              [labelColor]=\"ques.color\"\n              [labelSize]=\"ques.fontSize\"\n              [inputValueSize]=\"ques.fontSize\"\n              [labelWeight]=\"ques.fontWeight\"\n              [inputWeight]=\"ques.fontWeight\"\n              [showLabel]=\"ques.style?.showLabel\"\n              inputBorder=\"#ccc\" svgHeight=\"20px\" svgWidth=\"20px\"\n              [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n              [required]=\"ques.isOptional\" inputBgColor=\"#ffffff\"\n              [inputId]=\"ques.trackingId\"\n              [errorMessages]=\"{ required: 'This field is required' }\"\n              [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n              (inputValue)=\"childEventCapture($event,ques)\"\n              >\n          </nxt-input>\n          <!-- Email -->\n          <div *ngIf=\"ques.type === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n          </div>\n\n          <div *ngIf=\"ques.type === 'File'\">\n            <div *ngIf=\"!qbItem.progressBar\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.type === 'File' &&\n                !qbItem.progressBar\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n                <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.question }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    {{'attach' | nxtCustomTranslate : 'attach'}}\n                  </span>\n                  <!-- HA 20DEC23 For Translation -->\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Table -->\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n            <!-- SKS13MAR25 nxt table change -->\n            <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n                [question]=\"ques\"\n                from = \"formBuilder\"\n                (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n                [tableConfig]=\"ques.tableConfig\"\n                tableId = \"\"\n                direction = \"ltr\"\n                tableWidth = \"auto\"\n                >\n            </nxt-datatable>\n          </div>\n\n          <!-- SKS25MAR25 Image -->\n          <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n            <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <nxt-dropdown [fromShengel]=\"qbItem.isShengel\"\n                    [options]=\"ques.options\"\n                    [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.Name\" [padding]=\"ques?.padding\"\n                    [selectedValue]=\"ques.input\"\n                    [from]=\"'nxtForm'\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [error]=\"ques?.error\"\n                    [labelFont]=\"ques?.font\"\n                    [label]=\"ques?.questionText\"\n                    [labelColor]=\"ques?.color\"\n                    [inputTextColor]=\"ques?.color\"\n                    [labelSize]=\"ques?.fontSize\"\n                    [inputValueSize]=\"ques?.fontSize\"\n                    [labelWeight]=\"ques?.fontWeight\"\n                    [inputWeight]=\"ques?.fontWeight\"\n                    [showLabel]=\"ques?.style?.showLabel ?? true\"\n                    [inputBgColor]=\"ques?.inputBgColor\"\n                    [inputIconLeftSrc]=\"ques?.iconLeftSrc\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n            </nxt-dropdown>\n          </div>\n\n          <!-- SKS29APR26 Multi Select -->\n          <div *ngIf=\"ques.type === 'MultiSelect'\" class=\"nxtdropdown\">\n            <nxt-multi-select [fromShengel]=\"qbItem.isShengel\"\n                    [options]=\"ques.options\"\n                    [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.Name\" [padding]=\"ques?.padding\"\n                    [selectedValue]=\"ques.input\"\n                    [from]=\"'nxtForm'\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [error]=\"ques?.error\"\n                    [labelFont]=\"ques?.font\"\n                    [label]=\"ques?.questionText\"\n                    [labelColor]=\"ques?.color\"\n                    [inputTextColor]=\"ques?.color\"\n                    [labelSize]=\"ques?.fontSize\"\n                    [inputValueSize]=\"ques?.fontSize\"\n                    [labelWeight]=\"ques?.fontWeight\"\n                    [inputWeight]=\"ques?.fontWeight\"\n                    [showLabel]=\"ques?.style?.showLabel ?? true\"\n                    [inputBgColor]=\"ques?.inputBgColor\"\n                    [inputIconLeftSrc]=\"ques?.iconLeftSrc\"\n                    (valueChange)=\"childEventCapture($event.value, ques); clearSQError(ques.id)\">\n            </nxt-multi-select>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n          <div>\n            <div class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</div>\n          </div>\n          <div *ngIf=\"ques.type === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n             textBox: !qbItem.progressBar\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <!-- HA 20DEC23 For Translation -->\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\">{{'add' | nxtCustomTranslate : 'add'}}</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <!-- VD button condition removed-->\n  <div class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n     <!--VD disabled -->\n    <div class=\"backbutton\" \n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-left-bt': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.back }}\n        </button>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div  *ngIf=\"qbItem.next\" >\n      <div class=\"nxtbutton\">\n         <!--VD disabled -->\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-rusty': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.next }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n  <h2>{{this.qbItem.summaryText}}</h2>\n  <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.progressBar\n               }\">\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\n           <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n            </div>\n            <!-- VD Question No added -->\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"nxt-answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\n                <div *ngIf=\"qa.qTyp == 'Book'\">\n                  <div *ngFor=\"let val of qa.myVal\">\n                    <p *ngIf=\"val.style?.showLabel !== false\">{{ val.questionText }}:<span>{{ val.input }}</span></p>\n                  </div>\n                </div>\n                <!-- HA 02FEB24 Displaying the value for direct question -->\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'  && qa.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : qa?.questionText}} <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n\n\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.progressBar\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.summaryText }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div class=\"summary\">\n            <!-- <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div> -->\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"nxt-answer\">\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.cancel }}\n        </button>\n      </div>\n    </div>\n  </div> -->\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.submit }}\n      </button>\n    </div>\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.edit }}\n      </button>\n    </div> -->\n  </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://images.rangerfusion.com/uploads/rnxt/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media(max-width:1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media(max-width:768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:10px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width:480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width:420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#f5f5f5;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#f5f5f5;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media(min-width:300px)and (max-width:399px){.nxtselbtngroup{padding-left:1.3%!important}}@media(min-width:400px)and (max-width:480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width:871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width:1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width:1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "component", type: NxtMultiSelect, selector: "nxt-multi-select", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc", "inputId", "allowCustomOptions"], outputs: ["valueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: QuestionnaireComponent, isStandalone: true, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api", isEdit: "isEdit", direction: "direction" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, usesOnChanges: true, ngImport: i0, template: "<!-- custom loader -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" >\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\n    </button>\n  </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\" [dir]=\"direction\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.title\">\n    <h1>{{ questionItem?.title }}</h1>\n    <div>{{ questionItem?.subTitle }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div>\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n      <div class=\"nxt-largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.groupName }}\n        </h3>\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Question Handling -->\n    <!-- VD 10Aug24- question no -->\n  <div>\n    <div *ngIf=\"questionItem.questionText && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n      <span>{{questionItem?.questionNumber}}.</span>\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n       {{(questionItem.id+'.questionText') | nxtCustomTranslate : questionItem?.questionText}}\n      </p>\n    </div>\n    <!-- Title -->\n    <!-- <div *ngIf=\"questionItem.isTitle\">\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n        {{ questionItem?.questionText }}\n      </div>\n    </div> -->\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{ questionItem?.questionText }}\n        </h3>\n      </div>\n    </div> -->\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\n    <div\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\n    <div class=\"info-alert ques-alert1\">\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"nxt-dis-flex\">\n      <select class=\"nxtdropdown\"\n        [ngClass]=\"{\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n          'custom-select': !qbItem?.progressBar\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n          {{ opt.value }}\n        </option>\n        <!-- HA 20DEC23 For Translation -->\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | nxtCustomTranslate: 'pleaseMakeChoice'}}</option>\n      </select>\n    </div>\n  </div>\n\n  <!-- SKS29APR26 Multi Select-->\n  <div *ngIf=\"multiSelectFlag\">\n    <nxt-multi-select\n      [options]=\"questionItem.options\"\n      [apiMeta]=\"questionItem.subText\"\n      [selectedValue]=\"inpValue\"\n      [placeholder]=\"questionItem?.question ? ((questionItem.id+'.question') | nxtCustomTranslate : questionItem?.question) : ''\"\n      [question]=\"questionItem\"\n      [inputBgColor]=\"'#ffffff'\"\n      (valueChange)=\"inpValue = $event.value.valueObj; questionItem.input = $event.value.valueObj; clearError()\">\n    </nxt-multi-select>\n  </div>\n\n  <!--VD Radio update -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n    <div class=\"nxt-custom-radio-container\">\n      <div *ngFor=\"let opt of questionItem.options\" \n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n        <input\n          type=\"radio\"\n          [id]=\"opt.value\"\n          [(ngModel)]=\"inpValue\"\n          name=\"inpValue\"\n          [value]=\"opt.value\"\n          (change)=\"optionChange(opt.value)\"\n        />\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n      </div>\n    </div>\n\n    <!-- <div class=\"nxt-dis-flex\">\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n        <label class=\"nxt-radiocontainer container myt-font4\">\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n            (change)=\"optionChange(opt.value)\" />\n          {{ opt.value }}\n        </label>\n      </div>\n    </div> -->\n  </div>  \n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n      {{ questionItem?.errorMessage }}\n    </div>\n    <div class=\"nxt-checkbox-container\">\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n        <label class=\"nxt-container1\">\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" >\n    <div>\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <!-- HA 20DEC23 For Translation -->\n      <input type=text placeholder=\"{{'zeroOfZero' | nxtCustomTranslate: 'zeroOfZero'}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n          <!-- HA 20DEC23 For Translation -->\n          <!-- HA 02FEB24 Additional param to update the question -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                           dateandTime: !qbItem?.progressBar}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.progressBar\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.type === 'File' &&\n        !qbItem?.progressBar\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.progressBar\">\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <span class=\"f-Name\" *ngIf=\" questionItem?.style?.showLabel !== false\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <!-- HA 20DEC23 For Translation -->\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n            <span *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n            <div *ngIf=\"ques.type === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n                <div class=\"dateandtime\">\n                  <!-- HA 20DEC23 For Translation -->\n                  <!-- HA 02FEB24 Additional param to update the question -->\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.type === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                                  dateandTime: !qbItem?.progressBar}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n         \n            <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n            <nxt-input  *ngIf=\"ques.type === 'Location' || ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n              [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : ques.type === 'Location' ? 'location' : 'text'\"\n              [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n              [value]=\"ques.input\"\n              [apiKey]=\"qbItem['apiKey']\"\n              [question]=\"ques\" [readOnly]=\"ques.isReadOnly\"\n              [labelFont]=\"ques.font\"\n              [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n              [labelColor]=\"ques.color\"\n              [labelSize]=\"ques.fontSize\"\n              [inputValueSize]=\"ques.fontSize\"\n              [labelWeight]=\"ques.fontWeight\"\n              [inputWeight]=\"ques.fontWeight\"\n              [showLabel]=\"ques.style?.showLabel\"\n              inputBorder=\"#ccc\" svgHeight=\"20px\" svgWidth=\"20px\"\n              [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n              [required]=\"ques.isOptional\" inputBgColor=\"#ffffff\"\n              [inputId]=\"ques.trackingId\"\n              [errorMessages]=\"{ required: 'This field is required' }\"\n              [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n              (inputValue)=\"childEventCapture($event,ques)\"\n              >\n          </nxt-input>\n          <!-- Email -->\n          <div *ngIf=\"ques.type === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n          </div>\n\n          <div *ngIf=\"ques.type === 'File'\">\n            <div *ngIf=\"!qbItem.progressBar\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.type === 'File' &&\n                !qbItem.progressBar\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n                <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.question }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    {{'attach' | nxtCustomTranslate : 'attach'}}\n                  </span>\n                  <!-- HA 20DEC23 For Translation -->\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Table -->\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n            <!-- SKS13MAR25 nxt table change -->\n            <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n                [question]=\"ques\"\n                from = \"formBuilder\"\n                (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n                [tableConfig]=\"ques.tableConfig\"\n                tableId = \"\"\n                direction = \"ltr\"\n                tableWidth = \"auto\"\n                >\n            </nxt-datatable>\n          </div>\n\n          <!-- SKS25MAR25 Image -->\n          <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n            <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <nxt-dropdown [fromShengel]=\"qbItem.isShengel\"\n                    [options]=\"ques.options\"\n                    [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.Name\" [padding]=\"ques?.padding\"\n                    [selectedValue]=\"ques.input\"\n                    [from]=\"'nxtForm'\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [error]=\"ques?.error\"\n                    [labelFont]=\"ques?.font\"\n                    [label]=\"ques?.questionText\"\n                    [labelColor]=\"ques?.color\"\n                    [inputTextColor]=\"ques?.color\"\n                    [labelSize]=\"ques?.fontSize\"\n                    [inputValueSize]=\"ques?.fontSize\"\n                    [labelWeight]=\"ques?.fontWeight\"\n                    [inputWeight]=\"ques?.fontWeight\"\n                    [showLabel]=\"ques?.style?.showLabel ?? true\"\n                    [inputBgColor]=\"ques?.inputBgColor\"\n                    [inputIconLeftSrc]=\"ques?.iconLeftSrc\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n            </nxt-dropdown>\n          </div>\n\n          <!-- SKS29APR26 Multi Select -->\n          <div *ngIf=\"ques.type === 'MultiSelect'\" class=\"nxtdropdown\">\n            <nxt-multi-select [fromShengel]=\"qbItem.isShengel\"\n                    [options]=\"ques.options\"\n                    [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.Name\" [padding]=\"ques?.padding\"\n                    [selectedValue]=\"ques.input\"\n                    [from]=\"'nxtForm'\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [error]=\"ques?.error\"\n                    [labelFont]=\"ques?.font\"\n                    [label]=\"ques?.questionText\"\n                    [labelColor]=\"ques?.color\"\n                    [inputTextColor]=\"ques?.color\"\n                    [labelSize]=\"ques?.fontSize\"\n                    [inputValueSize]=\"ques?.fontSize\"\n                    [labelWeight]=\"ques?.fontWeight\"\n                    [inputWeight]=\"ques?.fontWeight\"\n                    [showLabel]=\"ques?.style?.showLabel ?? true\"\n                    [inputBgColor]=\"ques?.inputBgColor\"\n                    [inputIconLeftSrc]=\"ques?.iconLeftSrc\"\n                    (valueChange)=\"childEventCapture($event.value, ques); clearSQError(ques.id)\">\n            </nxt-multi-select>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n          <div>\n            <div class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</div>\n          </div>\n          <div *ngIf=\"ques.type === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n             textBox: !qbItem.progressBar\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <!-- HA 20DEC23 For Translation -->\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\">{{'add' | nxtCustomTranslate : 'add'}}</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <!-- VD button condition removed-->\n  <div class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n     <!--VD disabled -->\n    <div class=\"backbutton\" \n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-left-bt': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.back }}\n        </button>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div  *ngIf=\"qbItem.next\" >\n      <div class=\"nxtbutton\">\n         <!--VD disabled -->\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-rusty': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.next }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n  <h2>{{this.qbItem.summaryText}}</h2>\n  <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.progressBar\n               }\">\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\n           <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n            </div>\n            <!-- VD Question No added -->\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"nxt-answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\n                <div *ngIf=\"qa.qTyp == 'Book'\">\n                  <div *ngFor=\"let val of qa.myVal\">\n                    <p *ngIf=\"val.style?.showLabel !== false\">{{ val.questionText }}:<span>{{ val.input }}</span></p>\n                  </div>\n                </div>\n                <!-- HA 02FEB24 Displaying the value for direct question -->\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'  && qa.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : qa?.questionText}} <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n\n\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.progressBar\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.summaryText }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div class=\"summary\">\n            <!-- <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div> -->\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"nxt-answer\">\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.cancel }}\n        </button>\n      </div>\n    </div>\n  </div> -->\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.submit }}\n      </button>\n    </div>\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.edit }}\n      </button>\n    </div> -->\n  </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://images.rangerfusion.com/uploads/rnxt/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://images.rangerfusion.com/uploads/rnxt/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media(max-width:1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media(max-width:768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:10px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width:480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width:420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#f5f5f5;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#f5f5f5;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media(min-width:300px)and (max-width:399px){.nxtselbtngroup{padding-left:1.3%!important}}@media(min-width:400px)and (max-width:480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width:871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width:1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width:1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "component", type: NxtMultiSelect, selector: "nxt-multi-select", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc", "inputId", "allowCustomOptions"], outputs: ["valueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn", "advancedFilters"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: QuestionnaireComponent, decorators: [{
             type: Component,
@@ -59093,7 +59444,7 @@ class QuestionbookComponent {
         this.loadComponent$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: QuestionbookComponent, deps: [{ token: DataService }, { token: ChangeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: QuestionbookComponent, isStandalone: true, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", isEdit: "isEdit", dropDownData: "dropDownData", dataBind: "dataBind", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", direction: "direction", languageCode: "languageCode", from: "from", bgColor: "bgColor", margin: "margin", onlyView: "onlyView", bookStyle: "bookStyle" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 18JAN24  Added class for styling -->\n<div [ngStyle]=\"bookStyle\" class=\"content-box form-group\" [ngClass]=\"{ 'form-group': from !== 'questionbook' }\" [style.background-color]=\"from === 'questionbook' ? bgColor || '' : ''\" [style.margin]=\"from === 'questionbook' ? (margin || '0px') : '0px'\" >\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n         <ng-container *ngFor=\"let ques of questions;let i = index\">\n            <div [style.display]=\"ques.isHidden ? 'none' : 'block'\" [class]=\"'col-lg-' + ques.size + ' paddingnone'\" \n                [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\" [ngStyle]=\"ques?.style?.parrentMargin ? {'margin': ques?.style?.parrentMargin } : {'margin-top': '5px', 'margin-bottom': '5px'}\" >\n                <!-- VD 09May24 is hide field change-->\n                <div class=\"nxtInputContainer\">\n                    <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n                    <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n                        *ngIf=\"(ques.style?.showLabel ?? true) && ![ 'Radio','Boolean','Text','List','Dropdown','MultiSelect','RichTextArea','DateTime','month','Location','Number','Email','Date','Time','TextArea','Label','currency','File' ].includes(ques.type)\"\n                        [style]=\"ques.style?.labelStyle\">\n                        <div style=\"gap: 5px; display: flex; align-items: center;\" [style]=\"ques.style?.labelValueStyle\"\n                            [ngStyle]=\"{\n                                'font-family': ques.font,\n                                'color': ques.color || '#212529',\n                                'font-size': ques.fontSize || '14px',\n                                'font-weight': ques.fontWeight || 'normal'\n                            }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n                            <div *ngIf=\"ques.isOptional && !ques.isReadOnly \" style=\"color: red;\">*</div>\n                        </div>\n                    </div>\n                    <!-- calendar  -->\n                    <div *ngIf=\"ques.type === 'Calendar'\" [class]=\"ques?.style?.inputClass\">\n                        <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n                            (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                            (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                        <!-- model used in calendar component -->\n                        <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                            [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                            [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                            (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                            <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                                [isEdit]=\"isEdit\" \n                                (handleQuestion)=\"handleQuestionEvent($event)\">\n                            </lib-questionbook>\n                        </app-custom-model>\n                    </div>\n                    <!-- SKS27MAR26 Image element - improved -->\n                    <div *ngIf=\"ques.type === 'Image'\" [class]=\"ques?.style?.inputClass\">\n                        <!-- SKS27MAR26 Read-only mode -->\n                        <ng-container *ngIf=\"ques.isReadOnly\">\n                        <img *ngIf=\"ques.imageData\"\n                            [style.width.px]=\"ques.imageSize?.width || 150\"\n                            [style.height.px]=\"ques.imageSize?.height || 150\"\n                            [src]=\"ques.imageData\"\n                            style=\"object-fit: cover; border-radius: 8px; display: block;\" />\n                        <span *ngIf=\"!ques.imageData\" class=\"img-empty-readonly\">No image</span>\n                        </ng-container>\n                        <!-- SKS27MAR26 Editable mode -->\n                        <ng-container *ngIf=\"!ques.isReadOnly\">\n                        <!-- SKS27MAR26 Upload placeholder (no image yet) -->\n                        <label *ngIf=\"!ques.imageData\"\n                            class=\"img-upload-zone\"\n                            [for]=\"'img-upload-' + i\">\n                            <div class=\"img-upload-icon\">\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n                                stroke=\"currentColor\" stroke-width=\"1.5\">\n                                <polyline points=\"16 16 12 12 8 16\"/>\n                                <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\"/>\n                                <path d=\"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3\"/>\n                            </svg>\n                            </div>\n                            <span class=\"img-upload-text\">Click to upload image</span>\n                            <span class=\"img-upload-hint\">PNG, JPG, WEBP</span>\n                            <input type=\"file\" [id]=\"'img-upload-' + i\"\n                            accept=\"image/*\"\n                            (change)=\"fileChangeEvent(ques, $event)\"\n                            style=\"display: none;\" />\n                        </label>\n                    \n                        <!-- SKS27MAR26 Filled state with hover overlay -->\n                        <div *ngIf=\"ques.imageData\" class=\"img-filled-wrap\">\n                            <img [src]=\"ques.imageData\" class=\"img-preview\" alt=\"preview\" />\n                            <div class=\"img-hover-overlay\">\n                            <button class=\"img-action-btn img-edit-btn\"\n                                (click)=\"onImageEdit(ques)\"\n                                title=\"Edit / crop\">\n                                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                                stroke=\"currentColor\" stroke-width=\"1.8\">\n                                <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n                                <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n                                </svg>\n                            </button>\n                            <button class=\"img-action-btn img-delete-btn\"\n                                (click)=\"onImageDelete(ques)\"\n                                title=\"Remove image\">\n                                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                                stroke=\"#E24B4A\" stroke-width=\"1.8\">\n                                <polyline points=\"3 6 5 6 21 6\"/>\n                                <path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/>\n                                <path d=\"M10 11v6\"/><path d=\"M14 11v6\"/>\n                                <path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>\n                                </svg>\n                            </button>\n                            </div>\n                        </div>\n                        </ng-container>\n                    </div>\n                    <!-- MSM10JUL25 icon-selector -->\n                    <nxt-icon-selector [class]=\"ques?.style?.inputClass\" [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n                        [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                        [labelColor]=\"ques.color\" [selectedIcon]=\"{ metadata: { name: ques.input }}\"\n                        [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n                    <!-- SKS21MAR25 line -->\n                    <hr [class]=\"ques?.style?.inputClass\" *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                    <!-- SKS13MAR25 data table -->\n                    <nxt-datatable *ngIf=\"ques.type === 'Table'\" [onlyView]=\"onlyView\" [class]=\"ques?.style?.inputClass\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"questionBook\"\n                        (valueChange)=\"childEventCapture($event, ques)\" [apiMeta]=\"ques.subText\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\" [languageCode]=\"languageCode\"\n                        [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n                    </nxt-datatable>\n                    <!-- list -->\n                    <nxt-search-box  *ngIf=\"ques.type === 'List'\" [onlyView]=\"onlyView\" [class]=\"ques?.style?.inputClass\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                        [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [value]=\"ques.input\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n                    </nxt-search-box>\n\n                    <!-- Dropdown -->\n                    <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n                    <nxt-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" \n                        [onlyView]=\"onlyView\" \n                        [class]=\"ques?.style?.inputClass\" \n                        [options]=\"ques.options\" \n                        [apiMeta]=\"ques.subText\"\n                        [id]=\"ques.id\" \n                        [from]=\"'nxtForm'\"\n                        [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                        [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                        [readOnly]=\"ques.isReadOnly\" \n                        [question]=\"ques\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\" \n                        [padding]=\"ques?.padding\"\n                        [labelFont]=\"ques?.font\"\n                        [label]=\"ques?.questionText\"\n                        [labelColor]=\"ques?.color\"\n                        [inputTextColor]=\"ques?.color\"\n                        [labelSize]=\"ques?.fontSize\"\n                        [inputValueSize]=\"ques?.fontSize\"\n                        [labelWeight]=\"ques?.fontWeight\"\n                        [inputWeight]=\"ques?.fontWeight\"\n                        [showLabel]=\"ques?.style?.showLabel ?? true\"\n                        [inputBgColor]=\"ques?.inputBgColor\"\n                        [inputIconLeftSrc]=\"ques?.iconLeftSrc\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question)\">\n                    </nxt-dropdown>\n                    <!-- SKS29APR26 Multi Select -->\n                    <nxt-multi-select *ngIf=\"ques?.type === 'MultiSelect' && ques?.options\"\n                        [onlyView]=\"onlyView\"\n                        [class]=\"ques?.style?.inputClass\"\n                        [options]=\"ques.options\"\n                        [apiMeta]=\"ques.subText\"\n                        [id]=\"ques.id\"\n                        [from]=\"'nxtForm'\"\n                        [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                        [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                        [readOnly]=\"ques.isReadOnly\"\n                        [question]=\"ques\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        [padding]=\"ques?.padding\"\n                        [labelFont]=\"ques?.font\"\n                        [label]=\"ques?.questionText\"\n                        [labelColor]=\"ques?.color\"\n                        [inputTextColor]=\"ques?.color\"\n                        [labelSize]=\"ques?.fontSize\"\n                        [inputValueSize]=\"ques?.fontSize\"\n                        [labelWeight]=\"ques?.fontWeight\"\n                        [inputWeight]=\"ques?.fontWeight\"\n                        [showLabel]=\"ques?.style?.showLabel ?? true\"\n                        [inputBgColor]=\"ques?.inputBgColor\"\n                        [inputIconLeftSrc]=\"ques?.iconLeftSrc\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question)\">\n                    </nxt-multi-select>\n                    <!-- // VD 02Aug24 custom-radio component -->\n                    <div *ngIf=\"ques.type === 'Radio' && ques?.options\" [class]=\"ques?.style?.inputClass\" class=\"\">\n                        <nxt-radio [options]=\"ques.options\" [question]=\"ques\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                            [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\"\n                            [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n                            [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                            [mode]=\"isEdit !== true ? 'view' : 'edit'\" [onlyView]=\"onlyView\"\n                            (valueChange)=\"childEventCapture($event.value,$event.question)\">\n                        </nxt-radio>\n                    </div>\n                    <!-- Attachment / Files -->\n                    <nxt-file-upload *ngIf=\"ques.type === 'File'\" \n                        [class]=\"ques?.style?.inputClass\" \n                        [config]=\"ques\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\" \n                        [readOnly]=\"ques.isReadOnly\"\n                        [allFiles]=\"ques.input\" \n                        [onlyView]=\"onlyView\"\n                        [label]=\"ques.questionText\"\n                        [required]=\"ques.isOptional\"\n                        [fileConfig]=\"ques.subText\"\n                        (selectedFileData)=\"childEventCapture($event.value,$event.config)\"\n                        (deletedFileData)=\"deleteFile($event)\">\n                    </nxt-file-upload>\n                    <!-- SKS11JUN25 Button -->\n                    <nxt-button\n                        *ngIf=\"ques.type === 'Button'\" [class]=\"ques?.style?.inputClass\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n                        (buttonClickEmit)=\"childEventCapture($event, ques)\"\n                        >\n                    </nxt-button>\n                    <!-- SKS11JUN25 book type -->\n                    <lib-questionbook *ngIf=\"ques.type === 'Book'\" [class]=\"ques?.style?.inputClass\"\n                        [bgColor]=\"ques?.style?.bgColor\" [margin]=\"ques?.style?.margin || '0px'\"\n                        [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [onlyView]=\"onlyView\"\n                        [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n                        [isEdit]=\"isEdit\" [from]=\"'questionbook'\"\n                        (handleDropDown)=\"getDropDown($event)\"\n                        [bookStyle]=\"ques?.style?.bookStyle\">\n                    </lib-questionbook>\n                    <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                    <!-- SKS16OCT25 added custom style fields for input -->\n                    <nxt-input  *ngIf=\"['Space','Text','Email','Number','Label','Boolean','RichTextArea','DateTime','month','Date','Time','TextArea','Location','currency'].includes(ques.type)\"\n                        [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' :  ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : ques.type === 'month' ? 'month' : ques.type === 'Location' ? 'location' : ques.type === 'Space' ? 'space' : ques.type === 'currency' ? 'currency': 'text'\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        [value]=\"ques.input\" [class]=\"ques?.style?.inputClass\"\n                        [question]=\"ques\" [readOnly]=\"ques.isReadOnly\"\n                        [apiKey]=\"qbItem['apiKey']\"\n                        [labelFont]=\"ques.font\"\n                        [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                        [showLabel]=\"ques.style?.showLabel\"\n                        svgHeight=\"20px\" svgWidth=\"20px\"\n                        [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                        [required]=\"ques.isOptional\"\n                        [inputId]=\"ques.trackingId\"\n                        [errorMessages]=\"{ required: 'This field is required' }\"\n                        [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n                        [minDate]=\"ques.minDate\"\n                        [maxDate]=\"ques.maxDate\"\n                        [rows]=\"2\"\n                        [apiMeta]=\"ques.subText\"\n                        [direction]=\"direction\"\n                        [onlyView]=\"onlyView\"\n                        [from]=\"'nxtForm'\"\n\n                        [padding]=\"ques?.style?.padding\" [margin]=\"ques?.style?.margin\" [inputValueSize]=\"ques?.style?.inputFontSize\"\n                        [inputBorder]=\"ques?.style?.border || '#ccc'\" [inputBgColor]=\"ques?.style?.bgColor || '#ffffff'\"\n                        [labelSize]=\"ques?.style?.labelFontSize\" [labelWeight]=\"ques?.style?.labelFontWeight\"\n                        [inputWeight]=\"ques?.style?.inputFontWeight\" [labelColor]=\"ques?.style?.labelColor\"\n                        [textAlign]=\"ques?.style?.textAlign\" [rows]=\"ques?.style?.rows\"\n\n                        [style.padding]=\"ques.type === 'Space' ? ques?.style?.padding : null\"\n                        [style.margin]=\"ques.type === 'Space' ? ques?.style?.margin : null\"\n\n                        (inputValue)=\"childEventCapture($event.value,$event.question, 'nxt-input')\"\n                        >\n                    </nxt-input>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n</div>\n  <!-- SKS27MAR26 Edit / crop modal -->\n  <div class=\"img-modal-backdrop\" *ngIf=\"isImageEdit\">\n    <div class=\"img-modal\">\n      <div class=\"img-modal-header\">\n        <span>Edit image</span>\n        <button class=\"img-modal-close\" (click)=\"closeModal()\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n            stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n          </svg>\n        </button>\n      </div>\n      <div class=\"img-modal-canvas\">\n        <image-cropper\n          *ngIf=\"selectedImageElement?.imageData\"\n          [imageBase64]=\"selectedImageElement.orgImageData\"\n          [alignImage]=\"alignImage\"\n          [roundCropper]=\"roundCropper\"\n          [backgroundColor]=\"'#111111'\"\n          [allowMoveImage]=\"false\"\n          [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\"\n          [aspectRatio]=\"aspectRatio\"\n          [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\"\n          [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\"\n          [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\"\n          [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\"\n          [resetCropOnAspectRatioChange]=\"true\"\n          [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\"\n          [onlyScaleDown]=\"true\"\n          output=\"blob\"\n          format=\"png\"\n          (imageCropped)=\"imageCropped($event)\"\n          (cropperReady)=\"cropperReady($event)\">\n        </image-cropper>\n      </div>\n\n      <div class=\"img-modal-controls\">\n        <div class=\"img-ctrl-row\">\n          <span class=\"img-ctrl-label\">Rotate</span>\n          <div class=\"img-ctrl-btns\">\n            <button class=\"img-ctrl-btn\" (click)=\"rotateLeft()\" title=\"Rotate left\">\u27F2</button>\n            <button class=\"img-ctrl-btn\" (click)=\"rotateRight()\" title=\"Rotate right\">\u27F3</button>\n          </div>\n          <div class=\"img-ctrl-divider\"></div>\n          <span class=\"img-ctrl-label\">Zoom</span>\n          <div class=\"img-ctrl-btns\">\n            <button class=\"img-ctrl-btn\" (click)=\"zoomOut()\">\u2212</button>\n            <button class=\"img-ctrl-btn\" (click)=\"zoomIn()\">+</button>\n          </div>\n          <div class=\"img-ctrl-divider\"></div>\n          <span class=\"img-ctrl-label\">Flip</span>\n          <div class=\"img-ctrl-btns\">\n            <button class=\"img-ctrl-btn\" [class.img-ctrl-active]=\"transform.flipH\"\n              (click)=\"flipHorizontal()\">\u2194 H</button>\n            <button class=\"img-ctrl-btn\" [class.img-ctrl-active]=\"transform.flipV\"\n              (click)=\"flipVertical()\">\u2195 V</button>\n          </div>\n          <div class=\"img-ctrl-divider\"></div>\n          <div class=\"img-ctrl-btns\">\n            <button class=\"img-ctrl-btn\" (click)=\"resetImage()\">Reset</button>\n          </div>\n        </div>\n        <div class=\"img-ctrl-row\">\n          <span class=\"img-ctrl-label\">Move</span>\n          <div class=\"img-ctrl-btns\">\n            <button class=\"img-ctrl-btn\" (click)=\"moveLeft()\">\u2190</button>\n            <button class=\"img-ctrl-btn\" (click)=\"moveRight()\">\u2192</button>\n            <button class=\"img-ctrl-btn\" (click)=\"moveUp()\">\u2191</button>\n            <button class=\"img-ctrl-btn\" (click)=\"moveDown()\">\u2193</button>\n          </div>\n        </div>\n      </div>\n      <div class=\"img-modal-footer\">\n        <button class=\"img-btn-secondary\" (click)=\"closeModal()\">Cancel</button>\n        <button class=\"img-btn-primary\" (click)=\"isImageEdit = false\">Apply</button>\n      </div>\n    </div>\n  </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media(min-width:1200px){.col-lg-6{width:50%!important}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.custom-line{width:100%;border:1px solid #d9d9d9}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}.img-upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:1.75rem 1rem;min-height:150px;border:1px dashed #d0cfc8;border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s;background:transparent}.img-upload-zone:hover{background:#f7f6f2;border-color:#aaa}.img-upload-icon{width:40px;height:40px;border-radius:50%;background:#f1efe8;border:.5px solid #d3d1c7;display:flex;align-items:center;justify-content:center;color:#888780}.img-upload-text{font-size:13px;color:#5f5e5a}.img-upload-hint{font-size:11px;color:#888780}.img-empty-readonly{font-size:12px;color:#888780}.img-filled-wrap{position:relative;border-radius:10px;overflow:hidden;display:inline-block;max-width:100%}.img-preview{display:block;width:100%;max-height:200px;object-fit:cover}.img-hover-overlay{position:absolute;inset:0;background:#0000;display:flex;align-items:flex-start;justify-content:flex-end;padding:8px;gap:6px;opacity:0;transition:opacity .18s,background .18s}.img-filled-wrap:hover .img-hover-overlay{opacity:1;background:#00000042}.img-action-btn{width:30px;height:30px;border-radius:6px;background:#ffffffed;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}.img-action-btn:hover{background:#fff}.img-modal-backdrop{position:fixed;inset:0;background:#00000027;display:flex;align-items:center;justify-content:center;z-index:1010}.img-modal{background:#fff;border:.5px solid #d3d1c7;border-radius:12px;width:480px;max-width:95vw;overflow:hidden}.img-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:.5px solid #e8e7e0;font-size:14px;font-weight:500}.img-modal-close{width:28px;height:28px;border-radius:6px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#888780}.img-modal-close:hover{background:#f1efe8}.img-modal-canvas{background:#111;height:220px;display:flex;align-items:center;justify-content:center}.img-modal-controls{padding:12px 14px;border-top:.5px solid #e8e7e0;display:flex;flex-direction:column;gap:8px}.img-ctrl-row{display:flex;align-items:center;gap:6px}.img-ctrl-label{font-size:11px;color:#888780;width:38px;flex-shrink:0}.img-ctrl-btns{display:flex;gap:4px}.img-ctrl-btn{height:28px;min-width:28px;padding:0 8px;border-radius:6px;background:#f1efe8;border:.5px solid #d3d1c7;cursor:pointer;font-size:12px;color:#2c2c2a;display:inline-flex;align-items:center;justify-content:center;transition:background .12s}.img-ctrl-btn:hover{background:#e8e7e0}.img-ctrl-active{background:#e6f1fb!important;border-color:#b5d4f4!important;color:#0c447c!important}.img-ctrl-divider{width:.5px;height:18px;background:#d3d1c7;flex-shrink:0;margin:0 4px}.img-modal-footer{padding:10px 14px;border-top:.5px solid #e8e7e0;display:flex;justify-content:flex-end;gap:8px}.img-btn-secondary{height:32px;padding:0 14px;border-radius:6px;background:#f1efe8;border:.5px solid #d3d1c7;font-size:13px;cursor:pointer;color:#2c2c2a}.img-btn-secondary:hover{background:#e8e7e0}.img-btn-primary{height:32px;padding:0 14px;border-radius:6px;background:#185fa5;border:none;font-size:13px;cursor:pointer;color:#fff}.img-btn-primary:hover{background:#0c447c}\n"], dependencies: [{ kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction", "languageCode", "from", "bgColor", "margin", "onlyView", "bookStyle"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: NxtFileUpload, selector: "nxt-file-upload", inputs: ["allFiles", "mode", "config", "from", "dragAndDrop", "readOnly", "onlyView", "required", "hideSubtext", "label", "fileConfig"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtRadio, selector: "nxt-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "fromShengel", "referenceField", "token", "label", "mode", "onlyView"], outputs: ["valueChange"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "component", type: NxtMultiSelect, selector: "nxt-multi-select", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc", "inputId", "allowCustomOptions"], outputs: ["valueChange"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "padding", "isLoading", "selector", "dropdownLoadingButton"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value", "onlyView", "rowData"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: QuestionbookComponent, isStandalone: true, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", isEdit: "isEdit", dropDownData: "dropDownData", dataBind: "dataBind", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", direction: "direction", languageCode: "languageCode", from: "from", bgColor: "bgColor", margin: "margin", onlyView: "onlyView", bookStyle: "bookStyle" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 18JAN24  Added class for styling -->\n<div [ngStyle]=\"bookStyle\" class=\"content-box form-group\" [ngClass]=\"{ 'form-group': from !== 'questionbook' }\" [style.background-color]=\"from === 'questionbook' ? bgColor || '' : ''\" [style.margin]=\"from === 'questionbook' ? (margin || '0px') : '0px'\" >\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n         <ng-container *ngFor=\"let ques of questions;let i = index\">\n            <div [style.display]=\"ques.isHidden ? 'none' : 'block'\" [class]=\"'col-lg-' + ques.size + ' paddingnone'\" \n                [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\" [ngStyle]=\"ques?.style?.parrentMargin ? {'margin': ques?.style?.parrentMargin } : {'margin-top': '5px', 'margin-bottom': '5px'}\" >\n                <!-- VD 09May24 is hide field change-->\n                <div class=\"nxtInputContainer\">\n                    <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n                    <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n                        *ngIf=\"(ques.style?.showLabel ?? true) && ![ 'Radio','Boolean','Text','List','Dropdown','MultiSelect','RichTextArea','DateTime','month','Location','Number','Email','Date','Time','TextArea','Label','currency','File' ].includes(ques.type)\"\n                        [style]=\"ques.style?.labelStyle\">\n                        <div style=\"gap: 5px; display: flex; align-items: center;\" [style]=\"ques.style?.labelValueStyle\"\n                            [ngStyle]=\"{\n                                'font-family': ques.font,\n                                'color': ques.color || '#212529',\n                                'font-size': ques.fontSize || '14px',\n                                'font-weight': ques.fontWeight || 'normal'\n                            }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n                            <div *ngIf=\"ques.isOptional && !ques.isReadOnly \" style=\"color: red;\">*</div>\n                        </div>\n                    </div>\n                    <!-- calendar  -->\n                    <div *ngIf=\"ques.type === 'Calendar'\" [class]=\"ques?.style?.inputClass\">\n                        <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n                            (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                            (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                        <!-- model used in calendar component -->\n                        <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                            [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                            [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                            (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                            <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                                [isEdit]=\"isEdit\" \n                                (handleQuestion)=\"handleQuestionEvent($event)\">\n                            </lib-questionbook>\n                        </app-custom-model>\n                    </div>\n                    <!-- SKS27MAR26 Image element - improved -->\n                    <div *ngIf=\"ques.type === 'Image'\" [class]=\"ques?.style?.inputClass\">\n                        <!-- SKS27MAR26 Read-only mode -->\n                        <ng-container *ngIf=\"ques.isReadOnly\">\n                        <img *ngIf=\"ques.imageData\"\n                            [style.width.px]=\"ques.imageSize?.width || 150\"\n                            [style.height.px]=\"ques.imageSize?.height || 150\"\n                            [src]=\"ques.imageData\"\n                            style=\"object-fit: cover; border-radius: 8px; display: block;\" />\n                        <span *ngIf=\"!ques.imageData\" class=\"img-empty-readonly\">No image</span>\n                        </ng-container>\n                        <!-- SKS27MAR26 Editable mode -->\n                        <ng-container *ngIf=\"!ques.isReadOnly\">\n                        <!-- SKS27MAR26 Upload placeholder (no image yet) -->\n                        <label *ngIf=\"!ques.imageData\"\n                            class=\"img-upload-zone\"\n                            [for]=\"'img-upload-' + i\">\n                            <div class=\"img-upload-icon\">\n                            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\n                                stroke=\"currentColor\" stroke-width=\"1.5\">\n                                <polyline points=\"16 16 12 12 8 16\"/>\n                                <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\"/>\n                                <path d=\"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3\"/>\n                            </svg>\n                            </div>\n                            <span class=\"img-upload-text\">Click to upload image</span>\n                            <span class=\"img-upload-hint\">PNG, JPG, WEBP</span>\n                            <input type=\"file\" [id]=\"'img-upload-' + i\"\n                            accept=\"image/*\"\n                            (change)=\"fileChangeEvent(ques, $event)\"\n                            style=\"display: none;\" />\n                        </label>\n                    \n                        <!-- SKS27MAR26 Filled state with hover overlay -->\n                        <div *ngIf=\"ques.imageData\" class=\"img-filled-wrap\">\n                            <img [src]=\"ques.imageData\" class=\"img-preview\" alt=\"preview\" />\n                            <div class=\"img-hover-overlay\">\n                            <button class=\"img-action-btn img-edit-btn\"\n                                (click)=\"onImageEdit(ques)\"\n                                title=\"Edit / crop\">\n                                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                                stroke=\"currentColor\" stroke-width=\"1.8\">\n                                <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n                                <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n                                </svg>\n                            </button>\n                            <button class=\"img-action-btn img-delete-btn\"\n                                (click)=\"onImageDelete(ques)\"\n                                title=\"Remove image\">\n                                <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n                                stroke=\"#E24B4A\" stroke-width=\"1.8\">\n                                <polyline points=\"3 6 5 6 21 6\"/>\n                                <path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/>\n                                <path d=\"M10 11v6\"/><path d=\"M14 11v6\"/>\n                                <path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"/>\n                                </svg>\n                            </button>\n                            </div>\n                        </div>\n                        </ng-container>\n                    </div>\n                    <!-- MSM10JUL25 icon-selector -->\n                    <nxt-icon-selector [class]=\"ques?.style?.inputClass\" [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n                        [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                        [labelColor]=\"ques.color\" [selectedIcon]=\"{ metadata: { name: ques.input }}\"\n                        [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n                    <!-- SKS21MAR25 line -->\n                    <hr [class]=\"ques?.style?.inputClass\" *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                    <!-- SKS13MAR25 data table -->\n                    <nxt-datatable *ngIf=\"ques.type === 'Table'\" [onlyView]=\"onlyView\" [class]=\"ques?.style?.inputClass\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"questionBook\"\n                        (valueChange)=\"childEventCapture($event, ques)\" [apiMeta]=\"ques.subText\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\" [languageCode]=\"languageCode\"\n                        [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n                    </nxt-datatable>\n                    <!-- list -->\n                    <nxt-search-box  *ngIf=\"ques.type === 'List'\" [onlyView]=\"onlyView\" [class]=\"ques?.style?.inputClass\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                        [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [value]=\"ques.input\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n                    </nxt-search-box>\n\n                    <!-- Dropdown -->\n                    <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n                    <nxt-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" \n                        [onlyView]=\"onlyView\" \n                        [class]=\"ques?.style?.inputClass\" \n                        [options]=\"ques.options\" \n                        [apiMeta]=\"ques.subText\"\n                        [id]=\"ques.id\" \n                        [from]=\"'nxtForm'\"\n                        [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                        [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                        [readOnly]=\"ques.isReadOnly\" \n                        [question]=\"ques\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\" \n                        [padding]=\"ques?.padding\"\n                        [labelFont]=\"ques?.font\"\n                        [label]=\"ques?.questionText\"\n                        [labelColor]=\"ques?.color\"\n                        [inputTextColor]=\"ques?.color\"\n                        [labelSize]=\"ques?.fontSize\"\n                        [inputValueSize]=\"ques?.fontSize\"\n                        [labelWeight]=\"ques?.fontWeight\"\n                        [inputWeight]=\"ques?.fontWeight\"\n                        [showLabel]=\"ques?.style?.showLabel ?? true\"\n                        [inputBgColor]=\"ques?.inputBgColor\"\n                        [inputIconLeftSrc]=\"ques?.iconLeftSrc\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question)\">\n                    </nxt-dropdown>\n                    <!-- SKS29APR26 Multi Select -->\n                    <nxt-multi-select *ngIf=\"ques?.type === 'MultiSelect' && ques?.options\"\n                        [onlyView]=\"onlyView\"\n                        [class]=\"ques?.style?.inputClass\"\n                        [options]=\"ques.options\"\n                        [apiMeta]=\"ques.subText\"\n                        [id]=\"ques.id\"\n                        [from]=\"'nxtForm'\"\n                        [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                        [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                        [readOnly]=\"ques.isReadOnly\"\n                        [question]=\"ques\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        [padding]=\"ques?.padding\"\n                        [labelFont]=\"ques?.font\"\n                        [label]=\"ques?.questionText\"\n                        [labelColor]=\"ques?.color\"\n                        [inputTextColor]=\"ques?.color\"\n                        [labelSize]=\"ques?.fontSize\"\n                        [inputValueSize]=\"ques?.fontSize\"\n                        [labelWeight]=\"ques?.fontWeight\"\n                        [inputWeight]=\"ques?.fontWeight\"\n                        [showLabel]=\"ques?.style?.showLabel ?? true\"\n                        [inputBgColor]=\"ques?.inputBgColor\"\n                        [inputIconLeftSrc]=\"ques?.iconLeftSrc\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question)\">\n                    </nxt-multi-select>\n                    <!-- // VD 02Aug24 custom-radio component -->\n                    <div *ngIf=\"ques.type === 'Radio' && ques?.options\" [class]=\"ques?.style?.inputClass\" class=\"\">\n                        <nxt-radio [options]=\"ques.options\" [question]=\"ques\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                            [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\"\n                            [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n                            [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                            [mode]=\"isEdit !== true ? 'view' : 'edit'\" [onlyView]=\"onlyView\"\n                            (valueChange)=\"childEventCapture($event.value,$event.question)\">\n                        </nxt-radio>\n                    </div>\n                    <!-- Attachment / Files -->\n                    <nxt-file-upload *ngIf=\"ques.type === 'File'\" \n                        [class]=\"ques?.style?.inputClass\" \n                        [config]=\"ques\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\" \n                        [readOnly]=\"ques.isReadOnly\"\n                        [allFiles]=\"ques.input\" \n                        [onlyView]=\"onlyView\"\n                        [label]=\"ques.questionText\"\n                        [required]=\"ques.isOptional\"\n                        [fileConfig]=\"ques.subText\"\n                        (selectedFileData)=\"childEventCapture($event.value,$event.config)\"\n                        (deletedFileData)=\"deleteFile($event)\">\n                    </nxt-file-upload>\n                    <!-- SKS11JUN25 Button -->\n                    <nxt-button\n                        *ngIf=\"ques.type === 'Button'\" [class]=\"ques?.style?.inputClass\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n                        (buttonClickEmit)=\"childEventCapture($event, ques)\"\n                        >\n                    </nxt-button>\n                    <!-- SKS11JUN25 book type -->\n                    <lib-questionbook *ngIf=\"ques.type === 'Book'\" [class]=\"ques?.style?.inputClass\"\n                        [bgColor]=\"ques?.style?.bgColor\" [margin]=\"ques?.style?.margin || '0px'\"\n                        [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\" [onlyView]=\"onlyView\"\n                        [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n                        [isEdit]=\"isEdit\" [from]=\"'questionbook'\"\n                        (handleDropDown)=\"getDropDown($event)\"\n                        [bookStyle]=\"ques?.style?.bookStyle\">\n                    </lib-questionbook>\n                    <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                    <!-- SKS16OCT25 added custom style fields for input -->\n                    <nxt-input  *ngIf=\"['Space','Text','Email','Number','Label','Boolean','RichTextArea','DateTime','month','Date','Time','TextArea','Location','currency'].includes(ques.type)\"\n                        [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' :  ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : ques.type === 'month' ? 'month' : ques.type === 'Location' ? 'location' : ques.type === 'Space' ? 'space' : ques.type === 'currency' ? 'currency': 'text'\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        [value]=\"ques.input\" [class]=\"ques?.style?.inputClass\"\n                        [question]=\"ques\" [readOnly]=\"ques.isReadOnly\"\n                        [apiKey]=\"qbItem['apiKey']\"\n                        [labelFont]=\"ques.font\"\n                        [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                        [showLabel]=\"ques.style?.showLabel\"\n                        svgHeight=\"20px\" svgWidth=\"20px\"\n                        [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                        [required]=\"ques.isOptional\"\n                        [inputId]=\"ques.trackingId\"\n                        [errorMessages]=\"{ required: 'This field is required' }\"\n                        [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n                        [minDate]=\"ques.minDate\"\n                        [maxDate]=\"ques.maxDate\"\n                        [rows]=\"2\"\n                        [apiMeta]=\"ques.subText\"\n                        [direction]=\"direction\"\n                        [onlyView]=\"onlyView\"\n                        [from]=\"'nxtForm'\"\n\n                        [padding]=\"ques?.style?.padding\" [margin]=\"ques?.style?.margin\" [inputValueSize]=\"ques?.style?.inputFontSize\"\n                        [inputBorder]=\"ques?.style?.border || '#ccc'\" [inputBgColor]=\"ques?.style?.bgColor || '#ffffff'\"\n                        [labelSize]=\"ques?.style?.labelFontSize\" [labelWeight]=\"ques?.style?.labelFontWeight\"\n                        [inputWeight]=\"ques?.style?.inputFontWeight\" [labelColor]=\"ques?.style?.labelColor\"\n                        [textAlign]=\"ques?.style?.textAlign\" [rows]=\"ques?.style?.rows\"\n\n                        [style.padding]=\"ques.type === 'Space' ? ques?.style?.padding : null\"\n                        [style.margin]=\"ques.type === 'Space' ? ques?.style?.margin : null\"\n\n                        (inputValue)=\"childEventCapture($event.value,$event.question, 'nxt-input')\"\n                        >\n                    </nxt-input>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n</div>\n  <!-- SKS27MAR26 Edit / crop modal -->\n  <div class=\"img-modal-backdrop\" *ngIf=\"isImageEdit\">\n    <div class=\"img-modal\">\n      <div class=\"img-modal-header\">\n        <span>Edit image</span>\n        <button class=\"img-modal-close\" (click)=\"closeModal()\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\n            stroke=\"currentColor\" stroke-width=\"2\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n          </svg>\n        </button>\n      </div>\n      <div class=\"img-modal-canvas\">\n        <image-cropper\n          *ngIf=\"selectedImageElement?.imageData\"\n          [imageBase64]=\"selectedImageElement.orgImageData\"\n          [alignImage]=\"alignImage\"\n          [roundCropper]=\"roundCropper\"\n          [backgroundColor]=\"'#111111'\"\n          [allowMoveImage]=\"false\"\n          [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\"\n          [aspectRatio]=\"aspectRatio\"\n          [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\"\n          [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\"\n          [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\"\n          [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\"\n          [resetCropOnAspectRatioChange]=\"true\"\n          [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\"\n          [onlyScaleDown]=\"true\"\n          output=\"blob\"\n          format=\"png\"\n          (imageCropped)=\"imageCropped($event)\"\n          (cropperReady)=\"cropperReady($event)\">\n        </image-cropper>\n      </div>\n\n      <div class=\"img-modal-controls\">\n        <div class=\"img-ctrl-row\">\n          <span class=\"img-ctrl-label\">Rotate</span>\n          <div class=\"img-ctrl-btns\">\n            <button class=\"img-ctrl-btn\" (click)=\"rotateLeft()\" title=\"Rotate left\">\u27F2</button>\n            <button class=\"img-ctrl-btn\" (click)=\"rotateRight()\" title=\"Rotate right\">\u27F3</button>\n          </div>\n          <div class=\"img-ctrl-divider\"></div>\n          <span class=\"img-ctrl-label\">Zoom</span>\n          <div class=\"img-ctrl-btns\">\n            <button class=\"img-ctrl-btn\" (click)=\"zoomOut()\">\u2212</button>\n            <button class=\"img-ctrl-btn\" (click)=\"zoomIn()\">+</button>\n          </div>\n          <div class=\"img-ctrl-divider\"></div>\n          <span class=\"img-ctrl-label\">Flip</span>\n          <div class=\"img-ctrl-btns\">\n            <button class=\"img-ctrl-btn\" [class.img-ctrl-active]=\"transform.flipH\"\n              (click)=\"flipHorizontal()\">\u2194 H</button>\n            <button class=\"img-ctrl-btn\" [class.img-ctrl-active]=\"transform.flipV\"\n              (click)=\"flipVertical()\">\u2195 V</button>\n          </div>\n          <div class=\"img-ctrl-divider\"></div>\n          <div class=\"img-ctrl-btns\">\n            <button class=\"img-ctrl-btn\" (click)=\"resetImage()\">Reset</button>\n          </div>\n        </div>\n        <div class=\"img-ctrl-row\">\n          <span class=\"img-ctrl-label\">Move</span>\n          <div class=\"img-ctrl-btns\">\n            <button class=\"img-ctrl-btn\" (click)=\"moveLeft()\">\u2190</button>\n            <button class=\"img-ctrl-btn\" (click)=\"moveRight()\">\u2192</button>\n            <button class=\"img-ctrl-btn\" (click)=\"moveUp()\">\u2191</button>\n            <button class=\"img-ctrl-btn\" (click)=\"moveDown()\">\u2193</button>\n          </div>\n        </div>\n      </div>\n      <div class=\"img-modal-footer\">\n        <button class=\"img-btn-secondary\" (click)=\"closeModal()\">Cancel</button>\n        <button class=\"img-btn-primary\" (click)=\"isImageEdit = false\">Apply</button>\n      </div>\n    </div>\n  </div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media(min-width:1200px){.col-lg-6{width:50%!important}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.custom-line{width:100%;border:1px solid #d9d9d9}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}.img-upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:1.75rem 1rem;min-height:150px;border:1px dashed #d0cfc8;border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s;background:transparent}.img-upload-zone:hover{background:#f7f6f2;border-color:#aaa}.img-upload-icon{width:40px;height:40px;border-radius:50%;background:#f1efe8;border:.5px solid #d3d1c7;display:flex;align-items:center;justify-content:center;color:#888780}.img-upload-text{font-size:13px;color:#5f5e5a}.img-upload-hint{font-size:11px;color:#888780}.img-empty-readonly{font-size:12px;color:#888780}.img-filled-wrap{position:relative;border-radius:10px;overflow:hidden;display:inline-block;max-width:100%}.img-preview{display:block;width:100%;max-height:200px;object-fit:cover}.img-hover-overlay{position:absolute;inset:0;background:#0000;display:flex;align-items:flex-start;justify-content:flex-end;padding:8px;gap:6px;opacity:0;transition:opacity .18s,background .18s}.img-filled-wrap:hover .img-hover-overlay{opacity:1;background:#00000042}.img-action-btn{width:30px;height:30px;border-radius:6px;background:#ffffffed;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s}.img-action-btn:hover{background:#fff}.img-modal-backdrop{position:fixed;inset:0;background:#00000027;display:flex;align-items:center;justify-content:center;z-index:1010}.img-modal{background:#fff;border:.5px solid #d3d1c7;border-radius:12px;width:480px;max-width:95vw;overflow:hidden}.img-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:.5px solid #e8e7e0;font-size:14px;font-weight:500}.img-modal-close{width:28px;height:28px;border-radius:6px;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#888780}.img-modal-close:hover{background:#f1efe8}.img-modal-canvas{background:#111;height:220px;display:flex;align-items:center;justify-content:center}.img-modal-controls{padding:12px 14px;border-top:.5px solid #e8e7e0;display:flex;flex-direction:column;gap:8px}.img-ctrl-row{display:flex;align-items:center;gap:6px}.img-ctrl-label{font-size:11px;color:#888780;width:38px;flex-shrink:0}.img-ctrl-btns{display:flex;gap:4px}.img-ctrl-btn{height:28px;min-width:28px;padding:0 8px;border-radius:6px;background:#f1efe8;border:.5px solid #d3d1c7;cursor:pointer;font-size:12px;color:#2c2c2a;display:inline-flex;align-items:center;justify-content:center;transition:background .12s}.img-ctrl-btn:hover{background:#e8e7e0}.img-ctrl-active{background:#e6f1fb!important;border-color:#b5d4f4!important;color:#0c447c!important}.img-ctrl-divider{width:.5px;height:18px;background:#d3d1c7;flex-shrink:0;margin:0 4px}.img-modal-footer{padding:10px 14px;border-top:.5px solid #e8e7e0;display:flex;justify-content:flex-end;gap:8px}.img-btn-secondary{height:32px;padding:0 14px;border-radius:6px;background:#f1efe8;border:.5px solid #d3d1c7;font-size:13px;cursor:pointer;color:#2c2c2a}.img-btn-secondary:hover{background:#e8e7e0}.img-btn-primary{height:32px;padding:0 14px;border-radius:6px;background:#185fa5;border:none;font-size:13px;cursor:pointer;color:#fff}.img-btn-primary:hover{background:#0c447c}\n"], dependencies: [{ kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction", "languageCode", "from", "bgColor", "margin", "onlyView", "bookStyle"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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: NxtFileUpload, selector: "nxt-file-upload", inputs: ["allFiles", "mode", "config", "from", "dragAndDrop", "readOnly", "onlyView", "required", "hideSubtext", "label", "fileConfig"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtRadio, selector: "nxt-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "fromShengel", "referenceField", "token", "label", "mode", "onlyView"], outputs: ["valueChange"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "component", type: NxtMultiSelect, selector: "nxt-multi-select", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc", "inputId", "allowCustomOptions"], outputs: ["valueChange"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "padding", "isLoading", "selector", "dropdownLoadingButton"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value", "onlyView", "rowData"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn", "advancedFilters"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: QuestionbookComponent, decorators: [{
             type: Component,
@@ -59898,7 +60249,7 @@ const VERSION = {
     "semver": null,
     "suffix": "ed0865a9-dirty",
     "semverString": null,
-    "version": "2.1.352"
+    "version": "2.1.353"
 };
 /* tslint:enable */
 
@@ -65618,7 +65969,7 @@ class PdfDesignerComponent {
         return `${normalized[1]}px ${normalized[2]}px ${normalized[3]}px ${normalized[0]}px`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PdfDesignerComponent, deps: [{ token: DataService }, { token: ChangeService }, { token: CountryService }, { token: PdfDesignerService }, { token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview", from: "from", dataBind: "dataBind", isPropertyHide: "isPropertyHide", pdfDefinitionOptions: "pdfDefinitionOptions" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit", pdfOutputEmit: "pdfOutputEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>    \n    <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n      <div class=\"form-preview\">\n        <!-- AP-10MAR25 Heading -->\n        <div *ngIf=\"!isPreview\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\"\n          style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n          (click)=\"selectHeading('Header')\">\n          <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n            <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n              <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n              <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n            </div>\n            <div class=\"action-buttons\">\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n            </div>\n          </div>\n        </div>\n        <!-- SKS26MAY26 pdf page -->\n        <div class=\"pdf-page\" [style.background-color]=\"getPageBackgroundColor()\">\n          <div *ngIf=\"getWatermarkText()\" class=\"pdf-watermark\" [ngStyle]=\"getWatermarkStyle()\">\n            {{ getWatermarkText() }}\n          </div>\n          <div *ngIf=\"shouldShowHeaderOnCanvas()\" class=\"pdf-page-header\" [ngStyle]=\"getHeaderStyle()\">\n            <div class=\"pdf-running-band\" [ngStyle]=\"getRunningBandBorderStyle('header')\">\n              <ng-container *ngIf=\"getRunningBandColumns('header').length === 3; else singleHeader\">\n                <span>{{ getRunningBandColumns('header')[0] }}</span>\n                <span>{{ getRunningBandColumns('header')[1] }}</span>\n                <span>{{ getRunningBandColumns('header')[2] }}</span>\n              </ng-container>\n              <ng-template #singleHeader>\n                <span class=\"pdf-running-single\">{{ getRunningBandColumns('header')[0] }}</span>\n              </ng-template>\n            </div>\n          </div>\n          <div class=\"pdf-page-content\" [ngStyle]=\"getPageContentStyle()\">\n        <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n          <!-- AP-19MAR25 Line Element -->\n          <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n            (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div *ngIf=\"!isPreview \" class=\"line-element\">\n              <div></div>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                'font-family': field?.style?.font || 'Helvetica Neue',\n                'font-weight': field?.style?.bold ? '700' : '400',\n                'font-size': (field?.style?.fontSize || 12) + 'px',\n                'width': (field?.width || 100) + '%',\n                'text-align': field.textAlign || 'left',\n                'border-radius': '5px',\n                'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                'border-color': field.lineColor || field?.style?.color || '#000000',\n                'border-width': (field.lineWidth || 1) + 'px 0 0 0',\n                'color': field?.style?.color || '#000000',\n                'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n              }\" />\n          </div>\n  \n          <!--SKS25MAR25 Image Upload Element -->\n          <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n            (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" \n            (mouseenter)=\"isImageHover = true;\"\n            (mouseleave)=\"isImageHover = false;\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div>\n                    <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                      <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                        <div style=\"display: flex; justify-content: end;\">\n                          <i (click)=\"onImageEdit(field)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                          <svg (click)=\"onImageDelete(field)\" 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\" 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\" 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\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                          </svg>\n                        </div>\n                        <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n                      </div>\n  \n                      <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                        <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                          <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                          <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                        </label>\n                        <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                          style=\"display: none;\" />\n                      </div>\n                    </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Space Element -->\n          <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div *ngIf=\"!isPreview \" class=\"field-content\">\n                <div class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- SKS21NOV25  signaturePad -->\n          <div *ngIf=\"field?.type === 'signaturePad'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div  *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <!-- SKS21NOV25 Signature Pad Field -->\n                <div class=\"signature-pad-container\">\n                  <!-- SKS21NOV25 Builder mode (editable) -->\n                  <canvas *ngIf=\"!isPreview\"\n                    #sigCanvas\n                    [id]=\"field.id\"\n                    class=\"signature-pad\"\n                    (pointerdown)=\"pointerDown($event, field)\"\n                    (pointermove)=\"pointerMove($event, field)\"\n                    (pointerup)=\"pointerUp($event, field)\"\n                    (pointercancel)=\"pointerUp($event, field)\"\n                    (lostpointercapture)=\"pointerUp($event, field)\">\n                  </canvas>\n\n                  <!-- SKS21NOV25 Preview mode (static image) -->\n                  <img *ngIf=\"isPreview && field.value\"\n                      [src]=\"field.value\"\n                      class=\"signature-preview\" />\n                  <!-- SKS21NOV25 Empty state in preview -->\n                  <div *ngIf=\"isPreview && !field.value\"\n                      class=\"signature-placeholder\">\n                      Signature\n                  </div>\n                  <!-- SKS21NOV25 Builder buttons -->\n                  <div *ngIf=\"!isPreview\" class=\"signature-actions\">\n                      <button type=\"button\" (click)=\"onQuestionChange($event.value, field)\">Save</button>\n                      <button type=\"button\" (click)=\"clearSignature(field)\">Clear</button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- SKS16SEP25 Date, currency, boolean, text -->\n          <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' ||  field?.type === 'boolean' || field?.type === 'text' || field?.type === 'Section' || field?.type === 'RichText' || field?.type === 'Note' || field?.type === 'PageBreak' || field?.type === 'PdfMake'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <ng-container [ngSwitch]=\"field?.type\">\n                  <div *ngSwitchCase=\"'Section'\" class=\"pdf-section-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    {{ displayFieldValue(field) }}\n                  </div>\n\n                  <div *ngSwitchCase=\"'Note'\" class=\"pdf-note-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    {{ displayFieldValue(field) }}\n                  </div>\n\n                  <div *ngSwitchCase=\"'RichText'\" class=\"pdf-richtext-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    <div *ngIf=\"isRichTextHtml(field); else plainRichText\" class=\"pdf-richtext-html ql-editor\" [innerHTML]=\"getRichTextHtml(field)\"></div>\n                    <ng-template #plainRichText>\n                      <ng-container *ngFor=\"let line of getRichTextLines(field); let lineIndex = index\">\n                        <div *ngIf=\"isRichTextHeading(field, lineIndex, line)\" class=\"pdf-richtext-heading\">\n                          {{ getRichTextLineText(line) }}\n                        </div>\n                        <div *ngIf=\"!isRichTextHeading(field, lineIndex, line) && !isRichTextBullet(line)\" class=\"pdf-richtext-line\">\n                          {{ line }}\n                        </div>\n                        <div *ngIf=\"isRichTextBullet(line)\" class=\"pdf-richtext-bullet\">\n                          <span>\u2022</span>\n                          <span>{{ getRichTextLineText(line) }}</span>\n                        </div>\n                      </ng-container>\n                    </ng-template>\n                  </div>\n\n                  <div *ngSwitchCase=\"'PageBreak'\" class=\"pdf-pagebreak-render\">\n                    <span>Page break</span>\n                  </div>\n\n                  <div *ngSwitchCase=\"'PdfMake'\" class=\"pdfmake-render\">\n                    <div class=\"pdfmake-title\">Advanced pdfmake content</div>\n                    <pre>{{ getPdfMakePreview(field) }}</pre>\n                  </div>\n\n                  <ng-container *ngSwitchCase=\"'boolean'\">\n                    <nxt-input *ngIf=\"!isPreview\" [type]=\"'checkbox'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n                      [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"field.isReadOnly\"\n                      [currency]=\"selectedCurrency\" [label]=\"field?.questionText\" [inputWeight]=\"\"\n                      [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                      [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"false\"\n                      inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"field?.style?.alignment || ''\"\n                      [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n                    </nxt-input>\n\n                    <div *ngIf=\"isPreview\" class=\"pdf-text-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                      <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"pdf-field-label\" [ngStyle]=\"getElementLabelStyle(field)\">\n                        {{ field.questionText }}\n                      </div>\n                      <div class=\"pdf-field-value\">{{ displayFieldValue(field) }}</div>\n                    </div>\n                  </ng-container>\n\n                  <div *ngSwitchDefault class=\"pdf-text-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"pdf-field-label\" [ngStyle]=\"getElementLabelStyle(field)\">\n                      {{ field.questionText }}\n                    </div>\n                    <ng-container *ngIf=\"shouldRenderStyledTextLines(field); else plainTextValue\">\n                      <div *ngFor=\"let line of getStyledTextLines(field); let lineIndex = index\"\n                        class=\"pdf-field-value\"\n                        [class.pdf-text-heading-line]=\"isTextHeadingLine(field, lineIndex, line)\"\n                        [class.pdf-text-empty-line]=\"!line\"\n                        [ngStyle]=\"getStyledTextLineStyle(field, lineIndex, line)\">\n                        {{ line || ' ' }}\n                      </div>\n                    </ng-container>\n                    <ng-template #plainTextValue>\n                      <div class=\"pdf-field-value\">{{ displayFieldValue(field) }}</div>\n                    </ng-template>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n            <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n              [ngStyle]=\"{\n                position: 'absolute',\n                background: '#fff',\n                border: '1px solid #ccc',\n                padding: '6px 10px',\n                'border-radius': '4px',\n                'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                'z-index': '65535',\n                display: 'flex',\n                'text-align': 'center',\n                gap: '8px'\n              }\">\n          \n              <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                <option [value]=\"12\">12pt</option>\n                <option [value]=\"14\">14pt</option>\n                <option [value]=\"16\">16pt</option>\n                <option [value]=\"18\">18pt</option>\n                <option [value]=\"24\">24pt</option>\n              </select>\n  \n              <label title=\"Text Color\" class=\"color-label\">\n              <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n              <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n              </label>\n  \n              <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n            \n              <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n  \n  \n            \n              <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n              </button>\n          \n              <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n            </div>\n          </div>\n  \n          <!-- Pdf -->\n          <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg> \n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n                <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"pdf-nested-render\">\n                  <app-booklet [referenceKey]=\"field?.pdfReference\" [questions]=\"field?.pdfReferenceQuestions[field?.pdfReference]\" [isPreview]=\"isPreview\" [currencySymbol]=\"getCurrencySymbol()\" (questionChange)=\"onQuestionChange($event.value, $event.field)\"></app-booklet>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!--  Table  -->\n          <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper table-field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <div class=\"nxt-table-container\">\n                  <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n                    [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                    tableWidth=\"auto\" isEditable=true isPreview=isPreview (columnSelected)=\"selectElement(i);columnSelected($event)\"\n                    [data]=\"field.value?.data\" [serialNumberColumn]=\"false\"\n                    [summaryValues]=\"field.value?.summaryValues || field.value?.summaryValue\"\n                    (valueChange)=\"onQuestionChange($event, field)\"\n                    (removeColumn)=removeColumn($event)>\n                  </nxt-datatable>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n          </div>\n          <!-- SKS26MAY26 pdf footer -->\n          <div *ngIf=\"shouldShowFooterOnCanvas()\" class=\"pdf-page-footer\" [ngStyle]=\"getFooterStyle()\">\n            <div class=\"pdf-running-band\" [ngStyle]=\"getRunningBandBorderStyle('footer')\">\n              <ng-container *ngIf=\"getRunningBandColumns('footer').length === 3; else singleFooter\">\n                <span>{{ getRunningBandColumns('footer')[0] }}</span>\n                <span>{{ getRunningBandColumns('footer')[1] }}</span>\n                <span>{{ getRunningBandColumns('footer')[2] }}</span>\n              </ng-container>\n              <ng-template #singleFooter>\n                <span class=\"pdf-running-single\">{{ getRunningBandColumns('footer')[0] }}</span>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"!isPropertyHide && isPreview\" style=\"width: 25%; margin-bottom:10px\">\n        <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n          <div class=\"color-picker\">\n            <label>Change Color</label>\n            <div class=\"colors\">\n              <!-- Default colors -->\n              <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n                   [style.background]=\"color\"\n                   (click)=\"selectColor(color)\">\n              </div>\n          \n              <!-- Last box: custom color picker with eyedropper -->\n              <label class=\"color-swatch custom-picker\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n                <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n              </label>\n            </div>\n          </div> \n           <!-- SKS22JUL25 Dropdown -->\n           <nxt-dropdown  \n              [options]=\"currencyOptions\"\n              [id]=\"bookletId\" \n              [selectedValue]=\"selectedCurrency\"\n              [labelColor]=\"'#ffff'\"\n              [inputTextColor]=\"'#ffff'\"\n              [inputBgColor]=\"'#585653'\"\n              placeholder=\"\" [from]=\"'normalDropDown'\"\n              [apiMeta] = \"{'field': 'name','isObject': true}\"\n              (valueChange)=\"currencyChange($event.value.valueObj)\">\n          </nxt-dropdown>    \n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n        <div style=\"height: 200px;\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : '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)\">\n          </image-cropper>\n        </div>\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.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}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container.isPreview{border:none;background-color:#fff}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);min-height:250px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.pdf-page{position:relative;width:794px;min-height:1123px;margin:12px auto 28px;box-shadow:0 18px 45px #0f172a29;overflow:hidden}.pdf-page-content{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-start;min-height:100%;box-sizing:border-box}.pdf-watermark{position:absolute;top:50%;left:50%;z-index:0;width:900px;text-align:center;font-weight:700;letter-spacing:0;pointer-events:none;-webkit-user-select:none;user-select:none}.pdf-page-footer,.pdf-page-header{position:absolute;z-index:2;min-height:24px;white-space:pre-wrap}.pdf-running-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;padding:8px 0}.pdf-running-band span{overflow-wrap:anywhere}.pdf-running-band span:nth-child(2){text-align:center}.pdf-running-band span:nth-child(3){text-align:right}.pdf-running-single{grid-column:1 / -1;text-align:inherit!important}.pdf-text-render{min-height:16px;white-space:pre-wrap;overflow-wrap:anywhere;box-sizing:border-box}.pdf-field-label{margin-bottom:2px}.pdf-field-value{min-height:16px}.pdf-text-heading-line{line-height:1.05}.pdf-text-empty-line{font-size:0}.pdf-section-render{width:100%;min-height:32px;box-sizing:border-box;overflow-wrap:anywhere}.pdf-note-render{width:100%;min-height:34px;border:1px solid currentColor;box-sizing:border-box;overflow-wrap:anywhere;white-space:pre-wrap}.pdf-richtext-render{width:100%;white-space:normal;overflow-wrap:anywhere}.pdf-richtext-html{padding:0;line-height:inherit;font-size:inherit;color:inherit}:host ::ng-deep .pdf-richtext-html h1,:host ::ng-deep .pdf-richtext-html h2,:host ::ng-deep .pdf-richtext-html h3,:host ::ng-deep .pdf-richtext-html h4{color:var(--pdf-heading-color, inherit);margin:8px 0 5px;font-weight:700;line-height:1.15}:host ::ng-deep .pdf-richtext-html h1:first-child,:host ::ng-deep .pdf-richtext-html h2:first-child,:host ::ng-deep .pdf-richtext-html h3:first-child,:host ::ng-deep .pdf-richtext-html h4:first-child{margin-top:0}:host ::ng-deep .pdf-richtext-html p{margin:0 0 2px}:host ::ng-deep .pdf-richtext-html ul,:host ::ng-deep .pdf-richtext-html ol{margin:1px 0 5px;padding-left:20px}.pdf-richtext-heading{color:var(--pdf-heading-color, inherit);font-weight:600;margin-bottom:8px}.pdf-richtext-line{margin-bottom:7px}.pdf-richtext-bullet{display:grid;grid-template-columns:14px minmax(0,1fr);gap:4px;margin-bottom:7px}.pdf-pagebreak-render{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;color:#64748b;font-size:11px;border:1px dashed #94a3b8;background:#f8fafc;text-transform:uppercase;letter-spacing:0}.pdfmake-render{width:100%;border:1px dashed #94a3b8;background:#f8fafc;color:#334155;padding:10px;box-sizing:border-box}.pdfmake-title{font-size:11px;font-weight:700;margin-bottom:6px}.pdfmake-render pre{margin:0;max-height:160px;overflow:auto;white-space:pre-wrap;font-size:11px}.pdf-table-render{width:100%;overflow-x:auto}.pdf-nested-render{width:100%;padding:0}.pdf-table-render table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:inherit}.pdf-table-render th,.pdf-table-render td{border:1px solid #cfd8d1;padding:6px;vertical-align:top;overflow-wrap:anywhere}.pdf-table-render th{cursor:pointer;position:relative}.pdf-table-render th:hover{outline:2px solid rgba(85,146,253,.45);outline-offset:-2px}.pdf-table-render .pdf-table-column-selected{box-shadow:inset 0 0 0 2px #5592fd}.pdf-summary-row td{border-color:transparent;background:transparent}.pdf-summary-label{color:#555;text-align:right}.pdf-summary-value{color:#222;font-weight:600}.pdf-page .field-container,.pdf-page .line-field{background:transparent;border:1px solid transparent;box-sizing:border-box}.pdf-page .field-container.highlight,.pdf-page .line-field.highlight{border-color:#5592fd!important;background:#eff8ff8c}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:flex-start;align-items:center;width:100%;overflow-x:auto;overflow-y:hidden}nxt-datatable{width:max-content!important;min-width:100%;max-width:none}.table-field-wrapper{overflow-x:auto;overflow-y:hidden}:host ::ng-deep .nxt-table-container .table-layout,:host ::ng-deep .nxt-table-container .custom-table,:host ::ng-deep .nxt-table-container .table-row{min-width:800px}:host ::ng-deep .nxt-table-container .table-cell:not(.sticky-column):not(.actionCol){flex:0 0 92px;width:92px!important;min-width:92px;max-width:92px}:host ::ng-deep .nxt-table-container .nxtTableHeader{min-width:92px}:host ::ng-deep .nxt-table-container .nxtTableHeader[data-column-id=ngnxtTM0xwMZqrrr]{flex-basis:130px;width:130px!important;min-width:130px;max-width:130px}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media(max-width:600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}.signature-pad-container{width:100%;position:relative}.signature-pad{width:100%;height:90px;border:1px dashed #aaa;border-radius:6px;touch-action:none}.signature-preview{width:100%;height:90px;object-fit:contain;border:1px solid #ccc;border-radius:6px}.signature-placeholder{width:100%;height:90px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa}.signature-actions{margin-top:5px;display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "component", type: BookletComponent, selector: "app-booklet", inputs: ["referenceKey", "questions", "isPreview", "currencySymbol"], outputs: ["questionChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview", from: "from", dataBind: "dataBind", isPropertyHide: "isPropertyHide", pdfDefinitionOptions: "pdfDefinitionOptions" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit", pdfOutputEmit: "pdfOutputEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>    \n    <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n      <div class=\"form-preview\">\n        <!-- AP-10MAR25 Heading -->\n        <div *ngIf=\"!isPreview\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\"\n          style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n          (click)=\"selectHeading('Header')\">\n          <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n            <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n              <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n              <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n            </div>\n            <div class=\"action-buttons\">\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n            </div>\n          </div>\n        </div>\n        <!-- SKS26MAY26 pdf page -->\n        <div class=\"pdf-page\" [style.background-color]=\"getPageBackgroundColor()\">\n          <div *ngIf=\"getWatermarkText()\" class=\"pdf-watermark\" [ngStyle]=\"getWatermarkStyle()\">\n            {{ getWatermarkText() }}\n          </div>\n          <div *ngIf=\"shouldShowHeaderOnCanvas()\" class=\"pdf-page-header\" [ngStyle]=\"getHeaderStyle()\">\n            <div class=\"pdf-running-band\" [ngStyle]=\"getRunningBandBorderStyle('header')\">\n              <ng-container *ngIf=\"getRunningBandColumns('header').length === 3; else singleHeader\">\n                <span>{{ getRunningBandColumns('header')[0] }}</span>\n                <span>{{ getRunningBandColumns('header')[1] }}</span>\n                <span>{{ getRunningBandColumns('header')[2] }}</span>\n              </ng-container>\n              <ng-template #singleHeader>\n                <span class=\"pdf-running-single\">{{ getRunningBandColumns('header')[0] }}</span>\n              </ng-template>\n            </div>\n          </div>\n          <div class=\"pdf-page-content\" [ngStyle]=\"getPageContentStyle()\">\n        <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n          <!-- AP-19MAR25 Line Element -->\n          <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n            (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div *ngIf=\"!isPreview \" class=\"line-element\">\n              <div></div>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                'font-family': field?.style?.font || 'Helvetica Neue',\n                'font-weight': field?.style?.bold ? '700' : '400',\n                'font-size': (field?.style?.fontSize || 12) + 'px',\n                'width': (field?.width || 100) + '%',\n                'text-align': field.textAlign || 'left',\n                'border-radius': '5px',\n                'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                'border-color': field.lineColor || field?.style?.color || '#000000',\n                'border-width': (field.lineWidth || 1) + 'px 0 0 0',\n                'color': field?.style?.color || '#000000',\n                'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n              }\" />\n          </div>\n  \n          <!--SKS25MAR25 Image Upload Element -->\n          <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n            (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" \n            (mouseenter)=\"isImageHover = true;\"\n            (mouseleave)=\"isImageHover = false;\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div>\n                    <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                      <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                        <div style=\"display: flex; justify-content: end;\">\n                          <i (click)=\"onImageEdit(field)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                          <svg (click)=\"onImageDelete(field)\" 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\" 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\" 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\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                          </svg>\n                        </div>\n                        <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n                      </div>\n  \n                      <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                        <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                          <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                          <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                        </label>\n                        <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                          style=\"display: none;\" />\n                      </div>\n                    </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Space Element -->\n          <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div *ngIf=\"!isPreview \" class=\"field-content\">\n                <div class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- SKS21NOV25  signaturePad -->\n          <div *ngIf=\"field?.type === 'signaturePad'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div  *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <!-- SKS21NOV25 Signature Pad Field -->\n                <div class=\"signature-pad-container\">\n                  <!-- SKS21NOV25 Builder mode (editable) -->\n                  <canvas *ngIf=\"!isPreview\"\n                    #sigCanvas\n                    [id]=\"field.id\"\n                    class=\"signature-pad\"\n                    (pointerdown)=\"pointerDown($event, field)\"\n                    (pointermove)=\"pointerMove($event, field)\"\n                    (pointerup)=\"pointerUp($event, field)\"\n                    (pointercancel)=\"pointerUp($event, field)\"\n                    (lostpointercapture)=\"pointerUp($event, field)\">\n                  </canvas>\n\n                  <!-- SKS21NOV25 Preview mode (static image) -->\n                  <img *ngIf=\"isPreview && field.value\"\n                      [src]=\"field.value\"\n                      class=\"signature-preview\" />\n                  <!-- SKS21NOV25 Empty state in preview -->\n                  <div *ngIf=\"isPreview && !field.value\"\n                      class=\"signature-placeholder\">\n                      Signature\n                  </div>\n                  <!-- SKS21NOV25 Builder buttons -->\n                  <div *ngIf=\"!isPreview\" class=\"signature-actions\">\n                      <button type=\"button\" (click)=\"onQuestionChange($event.value, field)\">Save</button>\n                      <button type=\"button\" (click)=\"clearSignature(field)\">Clear</button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- SKS16SEP25 Date, currency, boolean, text -->\n          <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' ||  field?.type === 'boolean' || field?.type === 'text' || field?.type === 'Section' || field?.type === 'RichText' || field?.type === 'Note' || field?.type === 'PageBreak' || field?.type === 'PdfMake'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <ng-container [ngSwitch]=\"field?.type\">\n                  <div *ngSwitchCase=\"'Section'\" class=\"pdf-section-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    {{ displayFieldValue(field) }}\n                  </div>\n\n                  <div *ngSwitchCase=\"'Note'\" class=\"pdf-note-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    {{ displayFieldValue(field) }}\n                  </div>\n\n                  <div *ngSwitchCase=\"'RichText'\" class=\"pdf-richtext-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    <div *ngIf=\"isRichTextHtml(field); else plainRichText\" class=\"pdf-richtext-html ql-editor\" [innerHTML]=\"getRichTextHtml(field)\"></div>\n                    <ng-template #plainRichText>\n                      <ng-container *ngFor=\"let line of getRichTextLines(field); let lineIndex = index\">\n                        <div *ngIf=\"isRichTextHeading(field, lineIndex, line)\" class=\"pdf-richtext-heading\">\n                          {{ getRichTextLineText(line) }}\n                        </div>\n                        <div *ngIf=\"!isRichTextHeading(field, lineIndex, line) && !isRichTextBullet(line)\" class=\"pdf-richtext-line\">\n                          {{ line }}\n                        </div>\n                        <div *ngIf=\"isRichTextBullet(line)\" class=\"pdf-richtext-bullet\">\n                          <span>\u2022</span>\n                          <span>{{ getRichTextLineText(line) }}</span>\n                        </div>\n                      </ng-container>\n                    </ng-template>\n                  </div>\n\n                  <div *ngSwitchCase=\"'PageBreak'\" class=\"pdf-pagebreak-render\">\n                    <span>Page break</span>\n                  </div>\n\n                  <div *ngSwitchCase=\"'PdfMake'\" class=\"pdfmake-render\">\n                    <div class=\"pdfmake-title\">Advanced pdfmake content</div>\n                    <pre>{{ getPdfMakePreview(field) }}</pre>\n                  </div>\n\n                  <ng-container *ngSwitchCase=\"'boolean'\">\n                    <nxt-input *ngIf=\"!isPreview\" [type]=\"'checkbox'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n                      [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"field.isReadOnly\"\n                      [currency]=\"selectedCurrency\" [label]=\"field?.questionText\" [inputWeight]=\"\"\n                      [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                      [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"false\"\n                      inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"field?.style?.alignment || ''\"\n                      [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n                    </nxt-input>\n\n                    <div *ngIf=\"isPreview\" class=\"pdf-text-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                      <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"pdf-field-label\" [ngStyle]=\"getElementLabelStyle(field)\">\n                        {{ field.questionText }}\n                      </div>\n                      <div class=\"pdf-field-value\">{{ displayFieldValue(field) }}</div>\n                    </div>\n                  </ng-container>\n\n                  <div *ngSwitchDefault class=\"pdf-text-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"pdf-field-label\" [ngStyle]=\"getElementLabelStyle(field)\">\n                      {{ field.questionText }}\n                    </div>\n                    <ng-container *ngIf=\"shouldRenderStyledTextLines(field); else plainTextValue\">\n                      <div *ngFor=\"let line of getStyledTextLines(field); let lineIndex = index\"\n                        class=\"pdf-field-value\"\n                        [class.pdf-text-heading-line]=\"isTextHeadingLine(field, lineIndex, line)\"\n                        [class.pdf-text-empty-line]=\"!line\"\n                        [ngStyle]=\"getStyledTextLineStyle(field, lineIndex, line)\">\n                        {{ line || ' ' }}\n                      </div>\n                    </ng-container>\n                    <ng-template #plainTextValue>\n                      <div class=\"pdf-field-value\">{{ displayFieldValue(field) }}</div>\n                    </ng-template>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n            <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n              [ngStyle]=\"{\n                position: 'absolute',\n                background: '#fff',\n                border: '1px solid #ccc',\n                padding: '6px 10px',\n                'border-radius': '4px',\n                'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                'z-index': '65535',\n                display: 'flex',\n                'text-align': 'center',\n                gap: '8px'\n              }\">\n          \n              <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                <option [value]=\"12\">12pt</option>\n                <option [value]=\"14\">14pt</option>\n                <option [value]=\"16\">16pt</option>\n                <option [value]=\"18\">18pt</option>\n                <option [value]=\"24\">24pt</option>\n              </select>\n  \n              <label title=\"Text Color\" class=\"color-label\">\n              <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n              <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n              </label>\n  \n              <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n            \n              <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n  \n  \n            \n              <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n              </button>\n          \n              <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n            </div>\n          </div>\n  \n          <!-- Pdf -->\n          <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg> \n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n                <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"pdf-nested-render\">\n                  <app-booklet [referenceKey]=\"field?.pdfReference\" [questions]=\"field?.pdfReferenceQuestions[field?.pdfReference]\" [isPreview]=\"isPreview\" [currencySymbol]=\"getCurrencySymbol()\" (questionChange)=\"onQuestionChange($event.value, $event.field)\"></app-booklet>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!--  Table  -->\n          <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper table-field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <div class=\"nxt-table-container\">\n                  <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n                    [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                    tableWidth=\"auto\" isEditable=true isPreview=isPreview (columnSelected)=\"selectElement(i);columnSelected($event)\"\n                    [data]=\"field.value?.data\" [serialNumberColumn]=\"false\"\n                    [summaryValues]=\"field.value?.summaryValues || field.value?.summaryValue\"\n                    (valueChange)=\"onQuestionChange($event, field)\"\n                    (removeColumn)=removeColumn($event)>\n                  </nxt-datatable>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n          </div>\n          <!-- SKS26MAY26 pdf footer -->\n          <div *ngIf=\"shouldShowFooterOnCanvas()\" class=\"pdf-page-footer\" [ngStyle]=\"getFooterStyle()\">\n            <div class=\"pdf-running-band\" [ngStyle]=\"getRunningBandBorderStyle('footer')\">\n              <ng-container *ngIf=\"getRunningBandColumns('footer').length === 3; else singleFooter\">\n                <span>{{ getRunningBandColumns('footer')[0] }}</span>\n                <span>{{ getRunningBandColumns('footer')[1] }}</span>\n                <span>{{ getRunningBandColumns('footer')[2] }}</span>\n              </ng-container>\n              <ng-template #singleFooter>\n                <span class=\"pdf-running-single\">{{ getRunningBandColumns('footer')[0] }}</span>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"!isPropertyHide && isPreview\" style=\"width: 25%; margin-bottom:10px\">\n        <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n          <div class=\"color-picker\">\n            <label>Change Color</label>\n            <div class=\"colors\">\n              <!-- Default colors -->\n              <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n                   [style.background]=\"color\"\n                   (click)=\"selectColor(color)\">\n              </div>\n          \n              <!-- Last box: custom color picker with eyedropper -->\n              <label class=\"color-swatch custom-picker\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n                <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n              </label>\n            </div>\n          </div> \n           <!-- SKS22JUL25 Dropdown -->\n           <nxt-dropdown  \n              [options]=\"currencyOptions\"\n              [id]=\"bookletId\" \n              [selectedValue]=\"selectedCurrency\"\n              [labelColor]=\"'#ffff'\"\n              [inputTextColor]=\"'#ffff'\"\n              [inputBgColor]=\"'#585653'\"\n              placeholder=\"\" [from]=\"'normalDropDown'\"\n              [apiMeta] = \"{'field': 'name','isObject': true}\"\n              (valueChange)=\"currencyChange($event.value.valueObj)\">\n          </nxt-dropdown>    \n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n        <div style=\"height: 200px;\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : '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)\">\n          </image-cropper>\n        </div>\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.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}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container.isPreview{border:none;background-color:#fff}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);min-height:250px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.pdf-page{position:relative;width:794px;min-height:1123px;margin:12px auto 28px;box-shadow:0 18px 45px #0f172a29;overflow:hidden}.pdf-page-content{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-start;min-height:100%;box-sizing:border-box}.pdf-watermark{position:absolute;top:50%;left:50%;z-index:0;width:900px;text-align:center;font-weight:700;letter-spacing:0;pointer-events:none;-webkit-user-select:none;user-select:none}.pdf-page-footer,.pdf-page-header{position:absolute;z-index:2;min-height:24px;white-space:pre-wrap}.pdf-running-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;padding:8px 0}.pdf-running-band span{overflow-wrap:anywhere}.pdf-running-band span:nth-child(2){text-align:center}.pdf-running-band span:nth-child(3){text-align:right}.pdf-running-single{grid-column:1 / -1;text-align:inherit!important}.pdf-text-render{min-height:16px;white-space:pre-wrap;overflow-wrap:anywhere;box-sizing:border-box}.pdf-field-label{margin-bottom:2px}.pdf-field-value{min-height:16px}.pdf-text-heading-line{line-height:1.05}.pdf-text-empty-line{font-size:0}.pdf-section-render{width:100%;min-height:32px;box-sizing:border-box;overflow-wrap:anywhere}.pdf-note-render{width:100%;min-height:34px;border:1px solid currentColor;box-sizing:border-box;overflow-wrap:anywhere;white-space:pre-wrap}.pdf-richtext-render{width:100%;white-space:normal;overflow-wrap:anywhere}.pdf-richtext-html{padding:0;line-height:inherit;font-size:inherit;color:inherit}:host ::ng-deep .pdf-richtext-html h1,:host ::ng-deep .pdf-richtext-html h2,:host ::ng-deep .pdf-richtext-html h3,:host ::ng-deep .pdf-richtext-html h4{color:var(--pdf-heading-color, inherit);margin:8px 0 5px;font-weight:700;line-height:1.15}:host ::ng-deep .pdf-richtext-html h1:first-child,:host ::ng-deep .pdf-richtext-html h2:first-child,:host ::ng-deep .pdf-richtext-html h3:first-child,:host ::ng-deep .pdf-richtext-html h4:first-child{margin-top:0}:host ::ng-deep .pdf-richtext-html p{margin:0 0 2px}:host ::ng-deep .pdf-richtext-html ul,:host ::ng-deep .pdf-richtext-html ol{margin:1px 0 5px;padding-left:20px}.pdf-richtext-heading{color:var(--pdf-heading-color, inherit);font-weight:600;margin-bottom:8px}.pdf-richtext-line{margin-bottom:7px}.pdf-richtext-bullet{display:grid;grid-template-columns:14px minmax(0,1fr);gap:4px;margin-bottom:7px}.pdf-pagebreak-render{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;color:#64748b;font-size:11px;border:1px dashed #94a3b8;background:#f8fafc;text-transform:uppercase;letter-spacing:0}.pdfmake-render{width:100%;border:1px dashed #94a3b8;background:#f8fafc;color:#334155;padding:10px;box-sizing:border-box}.pdfmake-title{font-size:11px;font-weight:700;margin-bottom:6px}.pdfmake-render pre{margin:0;max-height:160px;overflow:auto;white-space:pre-wrap;font-size:11px}.pdf-table-render{width:100%;overflow-x:auto}.pdf-nested-render{width:100%;padding:0}.pdf-table-render table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:inherit}.pdf-table-render th,.pdf-table-render td{border:1px solid #cfd8d1;padding:6px;vertical-align:top;overflow-wrap:anywhere}.pdf-table-render th{cursor:pointer;position:relative}.pdf-table-render th:hover{outline:2px solid rgba(85,146,253,.45);outline-offset:-2px}.pdf-table-render .pdf-table-column-selected{box-shadow:inset 0 0 0 2px #5592fd}.pdf-summary-row td{border-color:transparent;background:transparent}.pdf-summary-label{color:#555;text-align:right}.pdf-summary-value{color:#222;font-weight:600}.pdf-page .field-container,.pdf-page .line-field{background:transparent;border:1px solid transparent;box-sizing:border-box}.pdf-page .field-container.highlight,.pdf-page .line-field.highlight{border-color:#5592fd!important;background:#eff8ff8c}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:flex-start;align-items:center;width:100%;overflow-x:auto;overflow-y:hidden}nxt-datatable{width:max-content!important;min-width:100%;max-width:none}.table-field-wrapper{overflow-x:auto;overflow-y:hidden}:host ::ng-deep .nxt-table-container .table-layout,:host ::ng-deep .nxt-table-container .custom-table,:host ::ng-deep .nxt-table-container .table-row{min-width:800px}:host ::ng-deep .nxt-table-container .table-cell:not(.sticky-column):not(.actionCol){flex:0 0 92px;width:92px!important;min-width:92px;max-width:92px}:host ::ng-deep .nxt-table-container .nxtTableHeader{min-width:92px}:host ::ng-deep .nxt-table-container .nxtTableHeader[data-column-id=ngnxtTM0xwMZqrrr]{flex-basis:130px;width:130px!important;min-width:130px;max-width:130px}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media(max-width:600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}.signature-pad-container{width:100%;position:relative}.signature-pad{width:100%;height:90px;border:1px dashed #aaa;border-radius:6px;touch-action:none}.signature-preview{width:100%;height:90px;object-fit:contain;border:1px solid #ccc;border-radius:6px}.signature-placeholder{width:100%;height:90px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa}.signature-actions{margin-top:5px;display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i6$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i6$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { 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: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn", "advancedFilters"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "component", type: BookletComponent, selector: "app-booklet", inputs: ["referenceKey", "questions", "isPreview", "currencySymbol"], outputs: ["questionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PdfDesignerComponent, decorators: [{
             type: Component,
@@ -67818,7 +68169,7 @@ class ElementComponent {
         this.translationService.setFormBuilderLanguage(this.languageCode);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ElementComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FormBuilderService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <nxt-dropdown \n        [options]=\"langOption\" \n        [selectedValue]=\"languageCode\" \n        [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </nxt-dropdown>\n    </div>\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- SKS12FEB26 TextBox and default element -->\n      <div *ngIf=\"field.type === 'Text' || field.type === 'currency' || !statictype.includes(field.type)\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF',\n          'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n        }\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date & Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n      <!-- SKS7AUG25 month -->\n      <div *ngIf=\"field.type === 'month'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" \n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{field.questionText ? field.questionText : ('SELECT_MONTH' | nxtCustomTranslate : 'Select Month')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"month\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\" from=\"formBuilder\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.color || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown' || field.type === 'MultiSelect'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.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}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;min-height:250px;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent$1, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "isLoading", "onlyView", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent", "formEditEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <nxt-dropdown \n        [options]=\"langOption\" \n        [selectedValue]=\"languageCode\" \n        [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </nxt-dropdown>\n    </div>\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- SKS12FEB26 TextBox and default element -->\n      <div *ngIf=\"field.type === 'Text' || field.type === 'currency' || !statictype.includes(field.type)\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF',\n          'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n        }\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date & Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n      <!-- SKS7AUG25 month -->\n      <div *ngIf=\"field.type === 'month'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" \n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{field.questionText ? field.questionText : ('SELECT_MONTH' | nxtCustomTranslate : 'Select Month')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"month\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\" from=\"formBuilder\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.color || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown' || field.type === 'MultiSelect'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.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}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;min-height:250px;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.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: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent$1, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "isLoading", "onlyView", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent", "formEditEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn", "advancedFilters"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,