@rangertechnologies/ngnxt 2.1.321 → 2.1.323

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -19,15 +19,15 @@ import * as i5$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i9 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
-import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil, catchError, of, merge, fromEvent, forkJoin } from 'rxjs';
+import { BehaviorSubject, Subject, takeUntil, debounceTime, distinctUntilChanged, catchError, of, merge, fromEvent, auditTime, firstValueFrom, forkJoin } from 'rxjs';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatSort } from '@angular/material/sort';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i1$2 from '@angular/platform-browser';
+import { takeUntil as takeUntil$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';
-import { takeUntil as takeUntil$1, first } from 'rxjs/operators';
 import _ from 'lodash';
 
 class NxtAppService {
@@ -46936,6 +46936,9 @@ class NxtInput {
     markerOptions;
     markerPosition;
     googleMapsPromise = null;
+    destroy$ = new Subject();
+    removeDocClick;
+    timers = [];
     constructor(nxtDatePipe, mapsLoader, cdr, ngZone, countryService, storageService, translationService, renderer, elRef, elementRef, changeService, dataService) {
         this.nxtDatePipe = nxtDatePipe;
         this.mapsLoader = mapsLoader;
@@ -46951,7 +46954,7 @@ class NxtInput {
         this.dataService = dataService;
     }
     ngAfterViewInit() {
-        this.renderer.listen('document', 'click', (event) => {
+        this.removeDocClick = this.renderer.listen('document', 'click', (event) => {
             if (!this.elRef.nativeElement.contains(event.target)) {
                 this.showCountryDropdown = false;
             }
@@ -47017,7 +47020,9 @@ class NxtInput {
     ngOnInit() {
         // SKS28FEB25 default country set 
         // SKS12SEP25 get current currency code from service
-        this.countryService.currentCurrencyOption$.subscribe(option => {
+        this.countryService.currentCurrencyOption$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(option => {
             if (option) {
                 this.currentCurrency = this.countryService.getCurrentCurrency();
                 this.currency = this.currentCurrency?.code;
@@ -47079,7 +47084,9 @@ class NxtInput {
             // this.disabled = true;
             let dependencyObj = this.question?.subText;
             // Subscribe for the changes
-            this.subscription = this.changeService.changeAnnounced$.subscribe((changeValue) => {
+            this.changeService.changeAnnounced$
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(changeValue => {
                 if (changeValue != undefined) {
                     if (changeValue.fromQuestionId && changeValue.valueObj !== undefined && (Array.isArray(dependencyObj.sourceQuestionId) ? dependencyObj.sourceQuestionId.includes(changeValue.fromQuestionId) : changeValue.fromQuestionId === dependencyObj.sourceQuestionId)) {
                         if (Array.isArray(dependencyObj.queryValue) ? dependencyObj.queryValue.includes(changeValue.referenceField) : changeValue.referenceField === dependencyObj.queryValue) {
@@ -47195,10 +47202,12 @@ class NxtInput {
                 }
             });
         }
-        document.addEventListener('quill-save', this.saveChanges.bind(this));
-        document.addEventListener('quill-discard', this.discardChanges.bind(this));
+        document.addEventListener('quill-save', this.saveChanges);
+        document.addEventListener('quill-discard', this.discardChanges);
         this.updateInputList();
-        this.translationService.languageChange$.subscribe((lang) => {
+        this.translationService.languageChange$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(lang => {
             this.languageCode = lang;
         });
         // HA-11-01-2024 Changed the map Call from constructor to ngOnInit as it was giving undefined values in the outsourced
@@ -47221,8 +47230,12 @@ class NxtInput {
         }
     }
     ngOnDestroy() {
-        document.removeEventListener('quill-save', this.saveChanges.bind(this));
-        document.removeEventListener('quill-discard', this.discardChanges.bind(this));
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.removeDocClick?.();
+        this.timers.forEach(t => clearTimeout(t));
+        document.removeEventListener('quill-save', this.saveChanges);
+        document.removeEventListener('quill-discard', this.discardChanges);
     }
     updateInputList() {
         this.cachedInputList = this.type !== 'otp' ? this.inputs.controls.slice(0, 1) : this.inputs.controls;
@@ -47440,13 +47453,17 @@ class NxtInput {
     registerOnChange(fn) {
         this.onChange = fn;
         if (this.type === 'otp') {
-            this.inputs.valueChanges.subscribe(() => {
+            this.inputs.valueChanges
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
                 const value = this.inputs.value.join('');
                 this.onChange(value);
             });
         }
         else {
-            this.control.valueChanges.subscribe((value) => {
+            this.control.valueChanges
+                .pipe(takeUntil(this.destroy$))
+                .subscribe((value) => {
                 this.onChange(value);
             });
         }
@@ -47659,9 +47676,10 @@ class NxtInput {
     onHijriInputClick() {
         if (this.mode !== 'edit')
             return;
-        setTimeout(() => {
+        const t = window.setTimeout(() => {
             this.showHijriPicker = true;
-        }, 0); // Next tick
+        });
+        this.timers.push(t);
     }
     // SKS7AUG25 data get function from endpoint
     searchFromApi(keyword) {
@@ -47722,7 +47740,7 @@ class NxtInput {
                 }
             }
             this.dataService.apiResponse(finalGetCall)
-                .pipe()
+                .pipe(takeUntil(this.destroy$))
                 .subscribe({
                 next: (apiResponse) => {
                     let response;
@@ -47880,7 +47898,7 @@ class NxtInput {
                 useExisting: forwardRef(() => NxtInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "inputEls", predicate: ["inputEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n  <div>\n    <div *ngIf=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\"  \n      [style.justify-content]=\"textAlign || 'start'\"\n      [style.font-weight]=\"labelWeight ||  type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"(labelSize && labelSize !== '' )? labelSize : type === 'label' ? '16px' : '14px'\"\n      style=\"display: flex; gap: 5px;\"> \n      {{ label }}\n      <div *ngIf=\"helpText\" [matTooltip]=\"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 *ngIf=\"label && type != 'checkbox' && required && showLabel && mode === 'edit'\" style=\"color: red;\">*</div>\n    </div>\n    <div *ngIf=\"type !== 'label' && type !== 'richtext' && type !== 'textarea'\" style=\"display: flex;\">\n      <div class=\"input-container\"\n        [style.backgroundColor]=\"(type === 'otp' || mode !== 'edit') ? (inputBgColor || '#f5f5f5') : from === 'nxtTable' ? '' : inputBgColor\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding]=\"(mode === 'edit' && from !== 'nxtTable') ? type === 'checkbox' ? '10px 13px 10px 0px !important' : '' :  type === 'checkbox' ? '10px 0px 9px 0px !important' : ''\"\n        [style.margin]=\"(margin && margin !== '') ? margin : (showLabel && label) ? from === 'nxtTable' ? '0px !important' : '' : (from === 'nxtTable' || from === 'normalDropDown') ? '0px !important' : from === 'nxtForm' ? '21px 0px 0px 0px' : '0px !important'\"\n        [style.border]=\"type === 'space' ? 'none' : mode === 'edit' ? (from === 'nxtTable' && !readOnly) ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + (inputBgColor || '#ffffff')) : ( (inputBorderSize || 1) + 'px solid ' + inputBorder)  : 'none'\"\n        style=\"position: relative; width: 100%;\"\n        [ngClass]=\"{\n          'checkbox-padding': type === 'checkbox' || type === 'otp',\n          'pad-nxt-0': from === 'nxtTable' && mode !== 'edit',\n          'pad-nxt-1': from === 'nxtTable' && mode === 'edit'\n        }\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <div *ngIf=\"mode === 'edit' && type === 'list'\">\n          <!-- Inline search icon SVG -->\n          <svg [attr.width]=\"from === 'nxtTable' ? 12 : 18\" [attr.height]=\"from === 'nxtTable' ? 12 : 18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n            <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n            <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n          </svg>\n        </div>\n        <!-- SKS28FEB25 mobile number input -->\n        <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n          <div  class=\"country-selector\" style=\"padding-left: 10px;\"\n            (click)=\"toggleCountryDropdown()\">\n            <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n            <span class=\"dial-code\" [style.font-weight]=\"inputWeight || '400'\" [style.font-size]=\"inputValueSize || '12px'\">{{ selectedCountry.dial_code }}</span>\n            <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n                fill=\"#626262\" />\n            </svg>\n          </div>\n          <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n            <div class=\"search-box\">\n              <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n                (input)=\"filterCountries($event)\">\n            </div>\n            <div class=\"country-list\">\n              <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n                <span class=\"flag\">{{ country.flag }}</span>\n                <span class=\"name\">{{ country.name }}</span>\n                <span class=\"dial-code\">{{ country.dial_code }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- SKS12SEP25 currency code -->\n        <div *ngIf=\"mode === 'edit' && readOnly !== true && type === 'currency'\" [style.font-size]=\"inputValueSize || '12px'\" class=\"phone-input-container\">\n          {{currentCurrency.symbol}}\n        </div>\n        @if((type === 'currency' ? mode === 'edit' && readOnly === false : type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month' && type !== 'space')){\n          <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n            [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n            [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : placeholder)\"\n            [formControl]=\"type === 'otp' ? $any(input) : control\"\n            [style.backgroundColor]=\"(type === 'otp'|| mode !== 'edit') ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n            [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n            [style.border]=\" (type === 'otp' || mode !== 'edit')  ? '' : from === 'nxtTable' ? type === 'checkbox' ? '1px solid gray !important' : 'none' : type === 'checkbox' ? ( inputBorderSize || 1 + 'px solid ' + inputBorder) : inputBorder\"\n            [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '100% !important' : type === 'checkbox' ? 'auto' : inputWidth || '100% !important'\"\n            [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [value]=\"type === 'tel' ? rawInputVal : value\"\n            (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n            [checked]=\"type === 'checkbox' ? value : ''\"\n            [style.font-size]=\"type === 'otp' ? '' : inputValueSize || '12px'\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n            [style.text-align]=\"(type === 'currency' && mode === 'edit') ? 'start' : textAlign || 'start'\"\n            [style.font-weight]=\"inputWeight || '400'\"\n            (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n            (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n            (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n            (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n            [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n            [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n            [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n            (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n            [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n            [readonly]=\"from === 'normalDropDown'\" \n            [ngStyle]=\"{\n                '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n                '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n                '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n                '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n              }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n            autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n            spellcheck=\"type === 'location' ? 'off' : ''\"\n          />\n        }\n        @else if(type === 'time' || type === 'month' || type === 'datetime' || type === 'date') {\n            <div style=\"position: relative; width: 100%;\">\n              <input [id]=\"inputId\"\n                type=\"text\" \n                [formControl]=\"control\"\n                readonly\n                [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\"\n                [ngClass]=\"'nxt-custom-input'\" \n                [value]=\"value | NxtDate : type : languageCode : dateFormatName\"\n                [style.backgroundColor]=\"mode !== 'edit' ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n                [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n                [style.height]=\"inputHeight\"\n                [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n                [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n                [style.text-align]=\"textAlign || 'start'\"\n                [style.font-weight]=\"inputWeight || '400'\"\n                (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n                (click)=\"onHijriInputClick();\"\n                [attr.autocomplete]=\"'off'\"\n                [attr.readonly]=\"'true'\"\n                [readonly]=\"'true'\" \n                [disabled]=\"mode === 'edit' ? readOnly === true : true\"\n                [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n                [ngStyle]=\"{\n                  '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n                  '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n                  '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n                  '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n                }\" style=\"\n                    width: 100% !important;\n                    padding: 10px;\n                    padding-left: 5px;\n                    border-radius: 5px;\n                    border: none !important;\n                    font-size: 14px;\" \n              />\n              <!-- SKS14AUG25 Hijri Datepicker Popup -->\n              <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [ngClass]=\"{'rtl-class': direction === 'rtl'}\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n                <app-nxt-datepicker\n                  [type]=\"type\"\n                  [value]=\"value\"\n                  [languageCode]=\"languageCode\"\n                  (dateChange)=\"onInputChange($event);\"\n                  >\n                </app-nxt-datepicker>\n              </div>\n            </div>\n          }\n          <div *ngIf=\"(type === 'currency' && (mode !== 'edit' || readOnly === true))\"\n            [style.backgroundColor]=\"from === 'nxtTable' ? '' : inputBgColor\"\n            [style.color]=\"inputTextColor\"\n            [style.border]=\"from === 'nxtTable' ? 'none' : inputBorder\"\n            [style.height]=\"inputHeight\" \n            [style.width]=\"inputWidth || '100% !important'\"\n            [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [style.font-size]=\"inputValueSize || '12px'\"\n            [style.text-align]=\"textAlign || 'start'\"\n            [style.font-weight]=\"inputWeight || '400'\"\n          >\n          @if(question?.subText?.isAmountInWords){\n            {{value | amountInWords }}\n          } @else {\n            {{value | currency : currentCurrency.code : currentCurrency.symbol }}\n          }\n        </div>\n        <!-- SKS7AUG25 api call Dotted Loader -->\n        <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader input-icons\" aria-label=\"Loading\" role=\"status\">\n          <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n        </div>\n        <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date' || type === 'month' || type === 'time')\" (click)=\"openDatePicker(type);   $event.stopPropagation()\" class=\"input-icons\"\n           style=\"cursor: pointer;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"from === 'nxtTable' ? 12 : 18\" [attr.height]=\"from === 'nxtTable' ? 12 : 18\" viewBox=\"0 0 18 18\" fill=\"none\">\n            <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.0329 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.97435 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.1787 2.68457H5.82822C3.6257 2.68457 2.25 3.91152 2.25 6.16684V12.9541C2.25 15.2449 3.6257 16.5002 5.82822 16.5002H12.1718C14.3812 16.5002 15.75 15.2661 15.75 13.0108V6.16684C15.7569 3.91152 14.3882 2.68457 12.1787 2.68457Z\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div *ngIf=\"mode === 'edit' && !readOnly && type === 'location' \" class=\"input-icons\">\n          <svg *ngIf=\"!isLoading\" (click)=\"openMap()\" (keydown.enter)=\"openMap()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <rect x=\"0.5\" y=\"0.5\" [attr.width]=\"from === 'nxtTable' ? 12 : 15\" [attr.height]=\"from === 'nxtTable' ? 12 : 15\" stroke=\"white\"/>\n            <path d=\"M7.99992 8.95321C9.14867 8.95321 10.0799 8.02197 10.0799 6.87321C10.0799 5.72446 9.14867 4.79321 7.99992 4.79321C6.85117 4.79321 5.91992 5.72446 5.91992 6.87321C5.91992 8.02197 6.85117 8.95321 7.99992 8.95321Z\" stroke=\"#B1ADAB\" stroke-width=\"1.5\"/>\n            <path d=\"M2.41379 5.65992C3.72712 -0.113413 12.2805 -0.106746 13.5871 5.66659C14.3538 9.05325 12.2471 11.9199 10.4005 13.6933C9.06046 14.9866 6.94046 14.9866 5.59379 13.6933C3.75379 11.9199 1.64712 9.04659 2.41379 5.65992Z\" stroke=\"#B1ADAB\" stroke-width=\"1.5\"/>\n          </svg>        \n        </div>\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"input-icons\">\n          <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" style=\"cursor: pointer;\" [attr.width]=\"from === 'nxtTable' ? 12 : 16\" [attr.height]=\"from === 'nxtTable' ? 12 : 16\" viewBox=\"0 0 0.48 0.48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.03 0.075a0.015 0.015 0 0 0 0 0.03zm0.42 0.03a0.015 0.015 0 0 0 0 -0.03zm-0.42 0h0.42v-0.03h-0.42z\" fill=\"#71717A\"/><path d=\"M0.195 0.03V0.015zM0.165 0.06H0.15zM0.15 0.09a0.015 0.015 0 0 0 0.03 0zm0.15 0a0.015 0.015 0 0 0 0.03 0zm0.015 -0.03h0.015zM0.285 0.015h-0.09v0.03h0.09zm-0.09 0a0.045 0.045 0 0 0 -0.032 0.013l0.021 0.021a0.015 0.015 0 0 1 0.011 -0.004zm-0.032 0.013A0.045 0.045 0 0 0 0.15 0.06H0.18a0.015 0.015 0 0 1 0.004 -0.011zM0.15 0.06v0.03H0.18V0.06zm0.18 0.03V0.06H0.3v0.03zm0 -0.03a0.045 0.045 0 0 0 -0.013 -0.032l-0.021 0.021c0.003 0.003 0.004 0.007 0.004 0.011zm-0.013 -0.032A0.045 0.045 0 0 0 0.285 0.015v0.03a0.015 0.015 0 0 1 0.011 0.004z\" fill=\"#71717A\"/><path d=\"M0.18 0.345a0.015 0.015 0 0 0 0.03 0zm0.03 -0.15a0.015 0.015 0 0 0 -0.03 0zm0 0.15v-0.15H0.18v0.15z\" fill=\"#71717A\"/><path d=\"M0.27 0.345a0.015 0.015 0 0 0 0.03 0zm0.03 -0.15a0.015 0.015 0 0 0 -0.03 0zm0 0.15v-0.15h-0.03v0.15z\" fill=\"#71717A\"/><path d=\"m0.377 0.422 -0.015 -0.001zM0.347 0.45v-0.015zm-0.215 0v-0.015zm-0.03 -0.028 0.015 -0.001zM0.09 0.089a0.015 0.015 0 0 0 -0.03 0.002zm0.33 0.002a0.015 0.015 0 1 0 -0.03 -0.002zm-0.058 0.33a0.015 0.015 0 0 1 -0.005 0.01l0.02 0.022a0.045 0.045 0 0 0 0.014 -0.029zm-0.005 0.01a0.015 0.015 0 0 1 -0.01 0.004v0.03a0.045 0.045 0 0 0 0.03 -0.012zm-0.01 0.004H0.133v0.03H0.347zm-0.215 0a0.015 0.015 0 0 1 -0.01 -0.004l-0.02 0.022c0.008 0.008 0.019 0.012 0.03 0.012zm-0.01 -0.004a0.015 0.015 0 0 1 -0.005 -0.01l-0.03 0.002a0.045 0.045 0 0 0 0.014 0.029zm-0.005 -0.01L0.09 0.089l-0.03 0.002 0.028 0.332zm0.272 -0.332 -0.028 0.332 0.03 0.002 0.028 -0.332z\" fill=\"#71717A\"/></svg>      \n        </div>\n        <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n          [style.font-size]=\"labelSize\" [style.color]=\"inputTextColor || labelColor || '#212529'\"\n          [style.justify-content]=\"textAlign || 'start'\"\n          style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n          <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n        </label>     \n        <!-- Always Show Dropdown Icon -->\n        <div *ngIf=\"mode === 'edit' && type === 'dropdown'\" class=\"input-icons\">\n          <svg (mousedown)=\"toggle($event); $event.preventDefault()\" xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"from === 'nxtTable' ? 12 : 16\" [attr.height]=\"from === 'nxtTable' ? 12 : 16\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.23499 5.32L6 7.08L7.765 5.32\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n\n        <img *ngIf=\"mode === 'edit' && inputIconRightSrc\" [src]=\"inputIconRightSrc\" class=\"icon right-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\">\n        <img *ngIf=\"mode === 'edit' && type === 'password'\" class=\"toggle-icon\" (click)=\"togglePasswordVisibility()\"\n          [src]=\"!isPasswordVisible ? '/assets/images/icons/general/Hide-Password.svg' : '/assets/images/icons/general/Show-Password.svg'\" />\n       <div *ngIf=\"mode !== 'edit' && !readOnly && from !== 'nxtTable' && !onlyView\" class=\"input-icons\">\n        <svg class=\"edit-icon\" \n          (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n            d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n            fill=\"#B0ADAB\" />\n        </svg>\n       </div>\n        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"(apiMeta?.singleFieldDisable === undefined || !apiMeta?.singleFieldDisable) && viewEdit ? !apiMeta?.singleFieldDisable : viewEdit\" class=\"input-icons\">\n          <svg (click)=\"saveChanges()\" 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 *ngIf=\"viewEdit\" class=\"input-icons\">\n          <svg (click)=\"discardChanges()\" 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>\n    <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n      <div class=\"input-container\"\n        [style.margin]=\"(margin && margin !== '') ? margin : showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' :  from === 'nxtForm' ? '21px 0px 0px 0px' : '0px !important'\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : (inputBgColor || '#f5f5f5')\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : (inputBorderSize || 1 + 'px solid ' + inputBorder) : 'none'\"\n        [ngClass]=\"{\n          'pad-nxt-0': from === 'nxtTable' && mode !== 'edit',\n          'pad-nxt-1': from === 'nxtTable' && mode === 'edit',\n          'pad-rich-0': mode === 'edit' && type === 'richtext'\n        }\">\n        <!-- SKS14JUN25  Dynamically load Quill editor toolbar -->\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder || ''\"\n          [readOnly]=\"mode !== 'edit' || readOnly\"\n          (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n          [modules]=\"getQuillModules(question.id)\"\n          [style.padding]=\"'0px'\"\n          style=\"width: 100%;\n          border-radius: 5px;\n          border: none;\n          font-size: 16px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div  *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-snow\"\n          style=\"width: 98.5%;\n            border-radius: 5px;\n            border: none;\n            padding: unset;\n            font-size: 16px;\n            min-height: 38px;\">\n          <div class=\"ql-editor\" [innerHTML]=\"value\"\n          [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '1px 10px 0px 5px'\"\n          [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n          [attr.dir]='direction' style=\"font-size: 12px;\"\n          ></div>\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\" [ngClass]=\"'custom-input'\"\n          [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n          [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [style.text-align]=\"textAlign || 'start'\"\n          [style.font-weight]=\"inputWeight || '400'\"\n          [readOnly]=\"mode !== 'edit' || readOnly\" [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n          }\" \n          [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '1px 10px 0px 5px'\"\n          style=\"\n              width: 100%;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\"\n          >\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !readOnly && !onlyView\"\n          class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n            d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n            fill=\"#B0ADAB\" />\n        </svg>\n        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"(apiMeta?.singleFieldDisable === undefined || !apiMeta?.singleFieldDisable) && (viewEdit ? !apiMeta?.singleFieldDisable : viewEdit) && type === 'textarea'\" class=\"input-icons\">\n          <svg (click)=\"saveChanges()\" 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 *ngIf=\"viewEdit && type === 'textarea'\" class=\"input-icons\">\n          <svg (click)=\"discardChanges()\" 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>\n    <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n    <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n      <div class=\"error-message\">\n        {{ getErrorMessage() }}\n      </div>\n    </div>\n  </div>\n</div>\n<!-- SKS18SEP25 google map popup -->\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n  <div class=\"map-modal\">\n    <div class=\"map-modal-content\">\n      <div class=\"map-modal-header\">\n        <!-- HA 19DEC23 For translation -->\n        <h4>{{ 'pickYourLocation' | nxtCustomTranslate : 'pickYourLocation' }}</h4>\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n      </div>\n      <google-map [zoom]=\"10\" [center]=\"markerPosition\" (mapClick)=\"onMapClick($event)\">\n        <map-marker\n          [position]=\"markerPosition\"\n          [options]=\"markerOptions\"\n          (mapDragend)=\"onMarkerDragEnd($event)\">\n        </map-marker>\n      </google-map>\n    </div>\n  </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}textarea:focus-visible,textarea:focus,input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.pad-nxt-0{padding-left:0!important;padding-right:0!important}.pad-nxt-1{padding-left:1px!important;padding-right:1px!important}.pad-rich-0{padding-left:0!important;padding-right:0!important}.checkbox-padding{margin-top:20px;width:100%!important;border:none!important}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:28px;height:28px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled:not([type=checkbox]){cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}input[type=checkbox]:disabled{border:1px solid #5353532b!important}input[type=checkbox]:focus{border:1px solid #5353532b!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#292929!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;left:0;z-index:9999;background:#fff;box-shadow:0 0 5px #0000001a;border-radius:5px}.hijri-popup.rtl-class{left:auto!important;right:0!important}.input-icons{display:flex;align-items:center}::ng-deep .ql-container.ql-snow{border:none!important}::ng-deep .ql-toolbar.ql-snow{border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:1px solid #ccc!important}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i9.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i9.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { 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: "pipe", type: NxtDatePipe, name: "NxtDate" }, { kind: "component", type: NxtDatepickerComponent, selector: "app-nxt-datepicker", inputs: ["type", "languageCode", "value"], outputs: ["dateChange"] }, { kind: "pipe", type: AmountInWordsPipe, name: "amountInWords" }] });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "inputEls", predicate: ["inputEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n  <div>\n    <div *ngIf=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\"  \n      [style.justify-content]=\"textAlign || 'start'\"\n      [style.font-weight]=\"labelWeight ||  type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"(labelSize && labelSize !== '' )? labelSize : type === 'label' ? '16px' : '14px'\"\n      style=\"display: flex; gap: 5px;\"> \n      {{ label }}\n      <div *ngIf=\"helpText\" [matTooltip]=\"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 *ngIf=\"label && type != 'checkbox' && required && showLabel && mode === 'edit'\" style=\"color: red;\">*</div>\n    </div>\n    <div *ngIf=\"type !== 'label' && type !== 'richtext' && type !== 'textarea'\" style=\"display: flex;\">\n      <div class=\"input-container\"\n        [style.backgroundColor]=\"(type === 'otp' || mode !== 'edit') ? (inputBgColor || '#f5f5f5') : from === 'nxtTable' ? '' : inputBgColor\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding]=\"(mode === 'edit' && from !== 'nxtTable') ? type === 'checkbox' ? '10px 13px 10px 0px !important' : '' :  type === 'checkbox' ? '10px 0px 9px 0px !important' : ''\"\n        [style.margin]=\"(margin && margin !== '') ? margin : (showLabel && label) ? from === 'nxtTable' ? '0px !important' : '' : (from === 'nxtTable' || from === 'normalDropDown') ? '0px !important' : from === 'nxtForm' ? '21px 0px 0px 0px' : '0px !important'\"\n        [style.border]=\"type === 'space' ? 'none' : mode === 'edit' ? (from === 'nxtTable' && !readOnly) ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + (inputBgColor || '#ffffff')) : ( (inputBorderSize || 1) + 'px solid ' + inputBorder)  : 'none'\"\n        style=\"position: relative; width: 100%;\"\n        [ngClass]=\"{\n          'checkbox-padding': type === 'checkbox' || type === 'otp',\n          'pad-nxt-0': from === 'nxtTable' && mode !== 'edit',\n          'pad-nxt-1': from === 'nxtTable' && mode === 'edit'\n        }\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <div *ngIf=\"mode === 'edit' && type === 'list'\">\n          <!-- Inline search icon SVG -->\n          <svg [attr.width]=\"from === 'nxtTable' ? 12 : 18\" [attr.height]=\"from === 'nxtTable' ? 12 : 18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n            <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n            <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n          </svg>\n        </div>\n        <!-- SKS28FEB25 mobile number input -->\n        <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n          <div  class=\"country-selector\" style=\"padding-left: 10px;\"\n            (click)=\"toggleCountryDropdown()\">\n            <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n            <span class=\"dial-code\" [style.font-weight]=\"inputWeight || '400'\" [style.font-size]=\"inputValueSize || '12px'\">{{ selectedCountry.dial_code }}</span>\n            <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n                fill=\"#626262\" />\n            </svg>\n          </div>\n          <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n            <div class=\"search-box\">\n              <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n                (input)=\"filterCountries($event)\">\n            </div>\n            <div class=\"country-list\">\n              <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n                <span class=\"flag\">{{ country.flag }}</span>\n                <span class=\"name\">{{ country.name }}</span>\n                <span class=\"dial-code\">{{ country.dial_code }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- SKS12SEP25 currency code -->\n        <div *ngIf=\"mode === 'edit' && readOnly !== true && type === 'currency'\" [style.font-size]=\"inputValueSize || '12px'\" class=\"phone-input-container\">\n          {{currentCurrency.symbol}}\n        </div>\n        @if((type === 'currency' ? mode === 'edit' && readOnly === false : type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month' && type !== 'space')){\n          <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n            [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n            [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : placeholder)\"\n            [formControl]=\"type === 'otp' ? $any(input) : control\"\n            [style.backgroundColor]=\"(type === 'otp'|| mode !== 'edit') ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n            [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n            [style.border]=\" (type === 'otp' || mode !== 'edit')  ? '' : from === 'nxtTable' ? type === 'checkbox' ? '1px solid gray !important' : 'none' : type === 'checkbox' ? ( inputBorderSize || 1 + 'px solid ' + inputBorder) : inputBorder\"\n            [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '100% !important' : type === 'checkbox' ? 'auto' : inputWidth || '100% !important'\"\n            [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [value]=\"type === 'tel' ? rawInputVal : value\"\n            (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n            [checked]=\"type === 'checkbox' ? value : ''\"\n            [style.font-size]=\"type === 'otp' ? '' : inputValueSize || '12px'\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n            [style.text-align]=\"(type === 'currency' && mode === 'edit') ? 'start' : textAlign || 'start'\"\n            [style.font-weight]=\"inputWeight || '400'\"\n            (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n            (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n            (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n            (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n            [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n            [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n            [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n            (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n            [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n            [readonly]=\"from === 'normalDropDown'\" \n            [ngStyle]=\"{\n                '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n                '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n                '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n                '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n              }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n            autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n            spellcheck=\"type === 'location' ? 'off' : ''\"\n          />\n        }\n        @else if(type === 'time' || type === 'month' || type === 'datetime' || type === 'date') {\n            <div style=\"position: relative; width: 100%;\">\n              <input [id]=\"inputId\"\n                type=\"text\" \n                [formControl]=\"control\"\n                readonly\n                [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\"\n                [ngClass]=\"'nxt-custom-input'\" \n                [value]=\"value | NxtDate : type : languageCode : dateFormatName\"\n                [style.backgroundColor]=\"mode !== 'edit' ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n                [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n                [style.height]=\"inputHeight\"\n                [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n                [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n                [style.text-align]=\"textAlign || 'start'\"\n                [style.font-weight]=\"inputWeight || '400'\"\n                (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n                (click)=\"onHijriInputClick();\"\n                [attr.autocomplete]=\"'off'\"\n                [attr.readonly]=\"'true'\"\n                [readonly]=\"'true'\" \n                [disabled]=\"mode === 'edit' ? readOnly === true : true\"\n                [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n                [ngStyle]=\"{\n                  '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n                  '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n                  '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n                  '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n                }\" style=\"\n                    width: 100% !important;\n                    padding: 10px;\n                    padding-left: 5px;\n                    border-radius: 5px;\n                    border: none !important;\n                    font-size: 14px;\" \n              />\n              <!-- SKS14AUG25 Hijri Datepicker Popup -->\n              <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [ngClass]=\"{'rtl-class': direction === 'rtl'}\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n                <app-nxt-datepicker\n                  [type]=\"type\"\n                  [value]=\"value\"\n                  [languageCode]=\"languageCode\"\n                  (dateChange)=\"onInputChange($event);\"\n                  >\n                </app-nxt-datepicker>\n              </div>\n            </div>\n          }\n          <div *ngIf=\"(type === 'currency' && (mode !== 'edit' || readOnly === true))\"\n            [style.backgroundColor]=\"from === 'nxtTable' ? '' : inputBgColor\"\n            [style.color]=\"inputTextColor\"\n            [style.border]=\"from === 'nxtTable' ? 'none' : inputBorder\"\n            [style.height]=\"inputHeight\" \n            [style.width]=\"inputWidth || '100% !important'\"\n            [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [style.font-size]=\"inputValueSize || '12px'\"\n            [style.text-align]=\"textAlign || 'start'\"\n            [style.font-weight]=\"inputWeight || '400'\"\n          >\n          @if(question?.subText?.isAmountInWords){\n            {{value | amountInWords }}\n          } @else {\n            {{value | currency : currentCurrency.code : currentCurrency.symbol }}\n          }\n        </div>\n        <!-- SKS7AUG25 api call Dotted Loader -->\n        <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader input-icons\" aria-label=\"Loading\" role=\"status\">\n          <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n        </div>\n        <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date' || type === 'month' || type === 'time')\" (click)=\"openDatePicker(type);   $event.stopPropagation()\" class=\"input-icons\"\n           style=\"cursor: pointer;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"from === 'nxtTable' ? 12 : 18\" [attr.height]=\"from === 'nxtTable' ? 12 : 18\" viewBox=\"0 0 18 18\" fill=\"none\">\n            <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.0329 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.97435 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.1787 2.68457H5.82822C3.6257 2.68457 2.25 3.91152 2.25 6.16684V12.9541C2.25 15.2449 3.6257 16.5002 5.82822 16.5002H12.1718C14.3812 16.5002 15.75 15.2661 15.75 13.0108V6.16684C15.7569 3.91152 14.3882 2.68457 12.1787 2.68457Z\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div *ngIf=\"mode === 'edit' && !readOnly && type === 'location' \" class=\"input-icons\">\n          <svg *ngIf=\"!isLoading\" (click)=\"openMap()\" (keydown.enter)=\"openMap()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <rect x=\"0.5\" y=\"0.5\" [attr.width]=\"from === 'nxtTable' ? 12 : 15\" [attr.height]=\"from === 'nxtTable' ? 12 : 15\" stroke=\"white\"/>\n            <path d=\"M7.99992 8.95321C9.14867 8.95321 10.0799 8.02197 10.0799 6.87321C10.0799 5.72446 9.14867 4.79321 7.99992 4.79321C6.85117 4.79321 5.91992 5.72446 5.91992 6.87321C5.91992 8.02197 6.85117 8.95321 7.99992 8.95321Z\" stroke=\"#B1ADAB\" stroke-width=\"1.5\"/>\n            <path d=\"M2.41379 5.65992C3.72712 -0.113413 12.2805 -0.106746 13.5871 5.66659C14.3538 9.05325 12.2471 11.9199 10.4005 13.6933C9.06046 14.9866 6.94046 14.9866 5.59379 13.6933C3.75379 11.9199 1.64712 9.04659 2.41379 5.65992Z\" stroke=\"#B1ADAB\" stroke-width=\"1.5\"/>\n          </svg>        \n        </div>\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"input-icons\">\n          <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" style=\"cursor: pointer;\" [attr.width]=\"from === 'nxtTable' ? 12 : 16\" [attr.height]=\"from === 'nxtTable' ? 12 : 16\" viewBox=\"0 0 0.48 0.48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.03 0.075a0.015 0.015 0 0 0 0 0.03zm0.42 0.03a0.015 0.015 0 0 0 0 -0.03zm-0.42 0h0.42v-0.03h-0.42z\" fill=\"#71717A\"/><path d=\"M0.195 0.03V0.015zM0.165 0.06H0.15zM0.15 0.09a0.015 0.015 0 0 0 0.03 0zm0.15 0a0.015 0.015 0 0 0 0.03 0zm0.015 -0.03h0.015zM0.285 0.015h-0.09v0.03h0.09zm-0.09 0a0.045 0.045 0 0 0 -0.032 0.013l0.021 0.021a0.015 0.015 0 0 1 0.011 -0.004zm-0.032 0.013A0.045 0.045 0 0 0 0.15 0.06H0.18a0.015 0.015 0 0 1 0.004 -0.011zM0.15 0.06v0.03H0.18V0.06zm0.18 0.03V0.06H0.3v0.03zm0 -0.03a0.045 0.045 0 0 0 -0.013 -0.032l-0.021 0.021c0.003 0.003 0.004 0.007 0.004 0.011zm-0.013 -0.032A0.045 0.045 0 0 0 0.285 0.015v0.03a0.015 0.015 0 0 1 0.011 0.004z\" fill=\"#71717A\"/><path d=\"M0.18 0.345a0.015 0.015 0 0 0 0.03 0zm0.03 -0.15a0.015 0.015 0 0 0 -0.03 0zm0 0.15v-0.15H0.18v0.15z\" fill=\"#71717A\"/><path d=\"M0.27 0.345a0.015 0.015 0 0 0 0.03 0zm0.03 -0.15a0.015 0.015 0 0 0 -0.03 0zm0 0.15v-0.15h-0.03v0.15z\" fill=\"#71717A\"/><path d=\"m0.377 0.422 -0.015 -0.001zM0.347 0.45v-0.015zm-0.215 0v-0.015zm-0.03 -0.028 0.015 -0.001zM0.09 0.089a0.015 0.015 0 0 0 -0.03 0.002zm0.33 0.002a0.015 0.015 0 1 0 -0.03 -0.002zm-0.058 0.33a0.015 0.015 0 0 1 -0.005 0.01l0.02 0.022a0.045 0.045 0 0 0 0.014 -0.029zm-0.005 0.01a0.015 0.015 0 0 1 -0.01 0.004v0.03a0.045 0.045 0 0 0 0.03 -0.012zm-0.01 0.004H0.133v0.03H0.347zm-0.215 0a0.015 0.015 0 0 1 -0.01 -0.004l-0.02 0.022c0.008 0.008 0.019 0.012 0.03 0.012zm-0.01 -0.004a0.015 0.015 0 0 1 -0.005 -0.01l-0.03 0.002a0.045 0.045 0 0 0 0.014 0.029zm-0.005 -0.01L0.09 0.089l-0.03 0.002 0.028 0.332zm0.272 -0.332 -0.028 0.332 0.03 0.002 0.028 -0.332z\" fill=\"#71717A\"/></svg>      \n        </div>\n        <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n          [style.font-size]=\"labelSize\" [style.color]=\"inputTextColor || labelColor || '#212529'\"\n          [style.justify-content]=\"textAlign || 'start'\"\n          style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n          <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n        </label>     \n        <!-- Always Show Dropdown Icon -->\n        <div *ngIf=\"mode === 'edit' && type === 'dropdown'\" class=\"input-icons\">\n          <svg (mousedown)=\"toggle($event); $event.preventDefault()\" xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"from === 'nxtTable' ? 12 : 16\" [attr.height]=\"from === 'nxtTable' ? 12 : 16\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.23499 5.32L6 7.08L7.765 5.32\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n\n        <img *ngIf=\"mode === 'edit' && inputIconRightSrc\" [src]=\"inputIconRightSrc\" class=\"icon right-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\">\n        <img *ngIf=\"mode === 'edit' && type === 'password'\" class=\"toggle-icon\" (click)=\"togglePasswordVisibility()\"\n          [src]=\"!isPasswordVisible ? '/assets/images/icons/general/Hide-Password.svg' : '/assets/images/icons/general/Show-Password.svg'\" />\n       <div *ngIf=\"mode !== 'edit' && !readOnly && from !== 'nxtTable' && !onlyView && type !== 'space'\" class=\"input-icons\">\n        <svg class=\"edit-icon\" \n          (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n            d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n            fill=\"#B0ADAB\" />\n        </svg>\n       </div>\n        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"(apiMeta?.singleFieldDisable === undefined || !apiMeta?.singleFieldDisable) && viewEdit ? (!apiMeta?.singleFieldDisable && type !== 'space') : (viewEdit && type !== 'space')\" class=\"input-icons\">\n          <svg (click)=\"saveChanges()\" 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 *ngIf=\"viewEdit && type !== 'space'\" class=\"input-icons\">\n          <svg (click)=\"discardChanges()\" 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>\n    <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n      <div class=\"input-container\"\n        [style.margin]=\"(margin && margin !== '') ? margin : showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' :  from === 'nxtForm' ? '21px 0px 0px 0px' : '0px !important'\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : (inputBgColor || '#f5f5f5')\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : (inputBorderSize || 1 + 'px solid ' + inputBorder) : 'none'\"\n        [ngClass]=\"{\n          'pad-nxt-0': from === 'nxtTable' && mode !== 'edit',\n          'pad-nxt-1': from === 'nxtTable' && mode === 'edit',\n          'pad-rich-0': mode === 'edit' && type === 'richtext'\n        }\">\n        <!-- SKS14JUN25  Dynamically load Quill editor toolbar -->\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder || ''\"\n          [readOnly]=\"mode !== 'edit' || readOnly\"\n          (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n          [modules]=\"getQuillModules(question.id)\"\n          [style.padding]=\"'0px'\"\n          style=\"width: 100%;\n          border-radius: 5px;\n          border: none;\n          font-size: 16px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div  *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-snow\"\n          style=\"width: 98.5%;\n            border-radius: 5px;\n            border: none;\n            padding: unset;\n            font-size: 16px;\n            min-height: 38px;\">\n          <div class=\"ql-editor\" [innerHTML]=\"value\"\n          [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '1px 10px 0px 5px'\"\n          [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n          [attr.dir]='direction' style=\"font-size: 12px;\"\n          ></div>\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\" [ngClass]=\"'custom-input'\"\n          [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n          [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [style.text-align]=\"textAlign || 'start'\"\n          [style.font-weight]=\"inputWeight || '400'\"\n          [readOnly]=\"mode !== 'edit' || readOnly\" [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n          }\" \n          [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '1px 10px 0px 5px'\"\n          style=\"\n              width: 100%;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\"\n          >\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !readOnly && !onlyView \"\n          class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n            d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n            fill=\"#B0ADAB\" />\n        </svg>\n        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"(apiMeta?.singleFieldDisable === undefined || !apiMeta?.singleFieldDisable) && (viewEdit ? !apiMeta?.singleFieldDisable : viewEdit) && type === 'textarea'\" class=\"input-icons\">\n          <svg (click)=\"saveChanges()\" 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 *ngIf=\"viewEdit && type === 'textarea'\" class=\"input-icons\">\n          <svg (click)=\"discardChanges()\" 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>\n    <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n    <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n      <div class=\"error-message\">\n        {{ getErrorMessage() }}\n      </div>\n    </div>\n  </div>\n</div>\n<!-- SKS18SEP25 google map popup -->\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n  <div class=\"map-modal\">\n    <div class=\"map-modal-content\">\n      <div class=\"map-modal-header\">\n        <!-- HA 19DEC23 For translation -->\n        <h4>{{ 'pickYourLocation' | nxtCustomTranslate : 'pickYourLocation' }}</h4>\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n      </div>\n      <google-map [zoom]=\"10\" [center]=\"markerPosition\" (mapClick)=\"onMapClick($event)\">\n        <map-marker\n          [position]=\"markerPosition\"\n          [options]=\"markerOptions\"\n          (mapDragend)=\"onMarkerDragEnd($event)\">\n        </map-marker>\n      </google-map>\n    </div>\n  </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}textarea:focus-visible,textarea:focus,input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.pad-nxt-0{padding-left:0!important;padding-right:0!important}.pad-nxt-1{padding-left:1px!important;padding-right:1px!important}.pad-rich-0{padding-left:0!important;padding-right:0!important}.checkbox-padding{margin-top:20px;width:100%!important;border:none!important}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:28px;height:28px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled:not([type=checkbox]){cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}input[type=checkbox]:disabled{border:1px solid #5353532b!important}input[type=checkbox]:focus{border:1px solid #5353532b!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#292929!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;left:0;z-index:9999;background:#fff;box-shadow:0 0 5px #0000001a;border-radius:5px}.hijri-popup.rtl-class{left:auto!important;right:0!important}.input-icons{display:flex;align-items:center}::ng-deep .ql-container.ql-snow{border:none!important}::ng-deep .ql-toolbar.ql-snow{border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:1px solid #ccc!important}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i9.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i9.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { 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: "pipe", type: NxtDatePipe, name: "NxtDate" }, { kind: "component", type: NxtDatepickerComponent, selector: "app-nxt-datepicker", inputs: ["type", "languageCode", "value"], outputs: ["dateChange"] }, { kind: "pipe", type: AmountInWordsPipe, name: "amountInWords" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: NxtInput, decorators: [{
             type: Component,
@@ -47895,7 +47913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                             useExisting: forwardRef(() => NxtInput),
                             multi: true,
                         },
-                    ], template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n  <div>\n    <div *ngIf=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\"  \n      [style.justify-content]=\"textAlign || 'start'\"\n      [style.font-weight]=\"labelWeight ||  type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"(labelSize && labelSize !== '' )? labelSize : type === 'label' ? '16px' : '14px'\"\n      style=\"display: flex; gap: 5px;\"> \n      {{ label }}\n      <div *ngIf=\"helpText\" [matTooltip]=\"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 *ngIf=\"label && type != 'checkbox' && required && showLabel && mode === 'edit'\" style=\"color: red;\">*</div>\n    </div>\n    <div *ngIf=\"type !== 'label' && type !== 'richtext' && type !== 'textarea'\" style=\"display: flex;\">\n      <div class=\"input-container\"\n        [style.backgroundColor]=\"(type === 'otp' || mode !== 'edit') ? (inputBgColor || '#f5f5f5') : from === 'nxtTable' ? '' : inputBgColor\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding]=\"(mode === 'edit' && from !== 'nxtTable') ? type === 'checkbox' ? '10px 13px 10px 0px !important' : '' :  type === 'checkbox' ? '10px 0px 9px 0px !important' : ''\"\n        [style.margin]=\"(margin && margin !== '') ? margin : (showLabel && label) ? from === 'nxtTable' ? '0px !important' : '' : (from === 'nxtTable' || from === 'normalDropDown') ? '0px !important' : from === 'nxtForm' ? '21px 0px 0px 0px' : '0px !important'\"\n        [style.border]=\"type === 'space' ? 'none' : mode === 'edit' ? (from === 'nxtTable' && !readOnly) ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + (inputBgColor || '#ffffff')) : ( (inputBorderSize || 1) + 'px solid ' + inputBorder)  : 'none'\"\n        style=\"position: relative; width: 100%;\"\n        [ngClass]=\"{\n          'checkbox-padding': type === 'checkbox' || type === 'otp',\n          'pad-nxt-0': from === 'nxtTable' && mode !== 'edit',\n          'pad-nxt-1': from === 'nxtTable' && mode === 'edit'\n        }\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <div *ngIf=\"mode === 'edit' && type === 'list'\">\n          <!-- Inline search icon SVG -->\n          <svg [attr.width]=\"from === 'nxtTable' ? 12 : 18\" [attr.height]=\"from === 'nxtTable' ? 12 : 18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n            <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n            <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n          </svg>\n        </div>\n        <!-- SKS28FEB25 mobile number input -->\n        <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n          <div  class=\"country-selector\" style=\"padding-left: 10px;\"\n            (click)=\"toggleCountryDropdown()\">\n            <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n            <span class=\"dial-code\" [style.font-weight]=\"inputWeight || '400'\" [style.font-size]=\"inputValueSize || '12px'\">{{ selectedCountry.dial_code }}</span>\n            <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n                fill=\"#626262\" />\n            </svg>\n          </div>\n          <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n            <div class=\"search-box\">\n              <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n                (input)=\"filterCountries($event)\">\n            </div>\n            <div class=\"country-list\">\n              <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n                <span class=\"flag\">{{ country.flag }}</span>\n                <span class=\"name\">{{ country.name }}</span>\n                <span class=\"dial-code\">{{ country.dial_code }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- SKS12SEP25 currency code -->\n        <div *ngIf=\"mode === 'edit' && readOnly !== true && type === 'currency'\" [style.font-size]=\"inputValueSize || '12px'\" class=\"phone-input-container\">\n          {{currentCurrency.symbol}}\n        </div>\n        @if((type === 'currency' ? mode === 'edit' && readOnly === false : type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month' && type !== 'space')){\n          <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n            [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n            [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : placeholder)\"\n            [formControl]=\"type === 'otp' ? $any(input) : control\"\n            [style.backgroundColor]=\"(type === 'otp'|| mode !== 'edit') ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n            [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n            [style.border]=\" (type === 'otp' || mode !== 'edit')  ? '' : from === 'nxtTable' ? type === 'checkbox' ? '1px solid gray !important' : 'none' : type === 'checkbox' ? ( inputBorderSize || 1 + 'px solid ' + inputBorder) : inputBorder\"\n            [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '100% !important' : type === 'checkbox' ? 'auto' : inputWidth || '100% !important'\"\n            [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [value]=\"type === 'tel' ? rawInputVal : value\"\n            (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n            [checked]=\"type === 'checkbox' ? value : ''\"\n            [style.font-size]=\"type === 'otp' ? '' : inputValueSize || '12px'\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n            [style.text-align]=\"(type === 'currency' && mode === 'edit') ? 'start' : textAlign || 'start'\"\n            [style.font-weight]=\"inputWeight || '400'\"\n            (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n            (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n            (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n            (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n            [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n            [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n            [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n            (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n            [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n            [readonly]=\"from === 'normalDropDown'\" \n            [ngStyle]=\"{\n                '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n                '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n                '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n                '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n              }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n            autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n            spellcheck=\"type === 'location' ? 'off' : ''\"\n          />\n        }\n        @else if(type === 'time' || type === 'month' || type === 'datetime' || type === 'date') {\n            <div style=\"position: relative; width: 100%;\">\n              <input [id]=\"inputId\"\n                type=\"text\" \n                [formControl]=\"control\"\n                readonly\n                [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\"\n                [ngClass]=\"'nxt-custom-input'\" \n                [value]=\"value | NxtDate : type : languageCode : dateFormatName\"\n                [style.backgroundColor]=\"mode !== 'edit' ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n                [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n                [style.height]=\"inputHeight\"\n                [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n                [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n                [style.text-align]=\"textAlign || 'start'\"\n                [style.font-weight]=\"inputWeight || '400'\"\n                (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n                (click)=\"onHijriInputClick();\"\n                [attr.autocomplete]=\"'off'\"\n                [attr.readonly]=\"'true'\"\n                [readonly]=\"'true'\" \n                [disabled]=\"mode === 'edit' ? readOnly === true : true\"\n                [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n                [ngStyle]=\"{\n                  '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n                  '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n                  '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n                  '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n                }\" style=\"\n                    width: 100% !important;\n                    padding: 10px;\n                    padding-left: 5px;\n                    border-radius: 5px;\n                    border: none !important;\n                    font-size: 14px;\" \n              />\n              <!-- SKS14AUG25 Hijri Datepicker Popup -->\n              <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [ngClass]=\"{'rtl-class': direction === 'rtl'}\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n                <app-nxt-datepicker\n                  [type]=\"type\"\n                  [value]=\"value\"\n                  [languageCode]=\"languageCode\"\n                  (dateChange)=\"onInputChange($event);\"\n                  >\n                </app-nxt-datepicker>\n              </div>\n            </div>\n          }\n          <div *ngIf=\"(type === 'currency' && (mode !== 'edit' || readOnly === true))\"\n            [style.backgroundColor]=\"from === 'nxtTable' ? '' : inputBgColor\"\n            [style.color]=\"inputTextColor\"\n            [style.border]=\"from === 'nxtTable' ? 'none' : inputBorder\"\n            [style.height]=\"inputHeight\" \n            [style.width]=\"inputWidth || '100% !important'\"\n            [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [style.font-size]=\"inputValueSize || '12px'\"\n            [style.text-align]=\"textAlign || 'start'\"\n            [style.font-weight]=\"inputWeight || '400'\"\n          >\n          @if(question?.subText?.isAmountInWords){\n            {{value | amountInWords }}\n          } @else {\n            {{value | currency : currentCurrency.code : currentCurrency.symbol }}\n          }\n        </div>\n        <!-- SKS7AUG25 api call Dotted Loader -->\n        <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader input-icons\" aria-label=\"Loading\" role=\"status\">\n          <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n        </div>\n        <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date' || type === 'month' || type === 'time')\" (click)=\"openDatePicker(type);   $event.stopPropagation()\" class=\"input-icons\"\n           style=\"cursor: pointer;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"from === 'nxtTable' ? 12 : 18\" [attr.height]=\"from === 'nxtTable' ? 12 : 18\" viewBox=\"0 0 18 18\" fill=\"none\">\n            <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.0329 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.97435 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.1787 2.68457H5.82822C3.6257 2.68457 2.25 3.91152 2.25 6.16684V12.9541C2.25 15.2449 3.6257 16.5002 5.82822 16.5002H12.1718C14.3812 16.5002 15.75 15.2661 15.75 13.0108V6.16684C15.7569 3.91152 14.3882 2.68457 12.1787 2.68457Z\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div *ngIf=\"mode === 'edit' && !readOnly && type === 'location' \" class=\"input-icons\">\n          <svg *ngIf=\"!isLoading\" (click)=\"openMap()\" (keydown.enter)=\"openMap()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <rect x=\"0.5\" y=\"0.5\" [attr.width]=\"from === 'nxtTable' ? 12 : 15\" [attr.height]=\"from === 'nxtTable' ? 12 : 15\" stroke=\"white\"/>\n            <path d=\"M7.99992 8.95321C9.14867 8.95321 10.0799 8.02197 10.0799 6.87321C10.0799 5.72446 9.14867 4.79321 7.99992 4.79321C6.85117 4.79321 5.91992 5.72446 5.91992 6.87321C5.91992 8.02197 6.85117 8.95321 7.99992 8.95321Z\" stroke=\"#B1ADAB\" stroke-width=\"1.5\"/>\n            <path d=\"M2.41379 5.65992C3.72712 -0.113413 12.2805 -0.106746 13.5871 5.66659C14.3538 9.05325 12.2471 11.9199 10.4005 13.6933C9.06046 14.9866 6.94046 14.9866 5.59379 13.6933C3.75379 11.9199 1.64712 9.04659 2.41379 5.65992Z\" stroke=\"#B1ADAB\" stroke-width=\"1.5\"/>\n          </svg>        \n        </div>\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"input-icons\">\n          <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" style=\"cursor: pointer;\" [attr.width]=\"from === 'nxtTable' ? 12 : 16\" [attr.height]=\"from === 'nxtTable' ? 12 : 16\" viewBox=\"0 0 0.48 0.48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.03 0.075a0.015 0.015 0 0 0 0 0.03zm0.42 0.03a0.015 0.015 0 0 0 0 -0.03zm-0.42 0h0.42v-0.03h-0.42z\" fill=\"#71717A\"/><path d=\"M0.195 0.03V0.015zM0.165 0.06H0.15zM0.15 0.09a0.015 0.015 0 0 0 0.03 0zm0.15 0a0.015 0.015 0 0 0 0.03 0zm0.015 -0.03h0.015zM0.285 0.015h-0.09v0.03h0.09zm-0.09 0a0.045 0.045 0 0 0 -0.032 0.013l0.021 0.021a0.015 0.015 0 0 1 0.011 -0.004zm-0.032 0.013A0.045 0.045 0 0 0 0.15 0.06H0.18a0.015 0.015 0 0 1 0.004 -0.011zM0.15 0.06v0.03H0.18V0.06zm0.18 0.03V0.06H0.3v0.03zm0 -0.03a0.045 0.045 0 0 0 -0.013 -0.032l-0.021 0.021c0.003 0.003 0.004 0.007 0.004 0.011zm-0.013 -0.032A0.045 0.045 0 0 0 0.285 0.015v0.03a0.015 0.015 0 0 1 0.011 0.004z\" fill=\"#71717A\"/><path d=\"M0.18 0.345a0.015 0.015 0 0 0 0.03 0zm0.03 -0.15a0.015 0.015 0 0 0 -0.03 0zm0 0.15v-0.15H0.18v0.15z\" fill=\"#71717A\"/><path d=\"M0.27 0.345a0.015 0.015 0 0 0 0.03 0zm0.03 -0.15a0.015 0.015 0 0 0 -0.03 0zm0 0.15v-0.15h-0.03v0.15z\" fill=\"#71717A\"/><path d=\"m0.377 0.422 -0.015 -0.001zM0.347 0.45v-0.015zm-0.215 0v-0.015zm-0.03 -0.028 0.015 -0.001zM0.09 0.089a0.015 0.015 0 0 0 -0.03 0.002zm0.33 0.002a0.015 0.015 0 1 0 -0.03 -0.002zm-0.058 0.33a0.015 0.015 0 0 1 -0.005 0.01l0.02 0.022a0.045 0.045 0 0 0 0.014 -0.029zm-0.005 0.01a0.015 0.015 0 0 1 -0.01 0.004v0.03a0.045 0.045 0 0 0 0.03 -0.012zm-0.01 0.004H0.133v0.03H0.347zm-0.215 0a0.015 0.015 0 0 1 -0.01 -0.004l-0.02 0.022c0.008 0.008 0.019 0.012 0.03 0.012zm-0.01 -0.004a0.015 0.015 0 0 1 -0.005 -0.01l-0.03 0.002a0.045 0.045 0 0 0 0.014 0.029zm-0.005 -0.01L0.09 0.089l-0.03 0.002 0.028 0.332zm0.272 -0.332 -0.028 0.332 0.03 0.002 0.028 -0.332z\" fill=\"#71717A\"/></svg>      \n        </div>\n        <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n          [style.font-size]=\"labelSize\" [style.color]=\"inputTextColor || labelColor || '#212529'\"\n          [style.justify-content]=\"textAlign || 'start'\"\n          style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n          <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n        </label>     \n        <!-- Always Show Dropdown Icon -->\n        <div *ngIf=\"mode === 'edit' && type === 'dropdown'\" class=\"input-icons\">\n          <svg (mousedown)=\"toggle($event); $event.preventDefault()\" xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"from === 'nxtTable' ? 12 : 16\" [attr.height]=\"from === 'nxtTable' ? 12 : 16\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.23499 5.32L6 7.08L7.765 5.32\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n\n        <img *ngIf=\"mode === 'edit' && inputIconRightSrc\" [src]=\"inputIconRightSrc\" class=\"icon right-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\">\n        <img *ngIf=\"mode === 'edit' && type === 'password'\" class=\"toggle-icon\" (click)=\"togglePasswordVisibility()\"\n          [src]=\"!isPasswordVisible ? '/assets/images/icons/general/Hide-Password.svg' : '/assets/images/icons/general/Show-Password.svg'\" />\n       <div *ngIf=\"mode !== 'edit' && !readOnly && from !== 'nxtTable' && !onlyView\" class=\"input-icons\">\n        <svg class=\"edit-icon\" \n          (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n            d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n            fill=\"#B0ADAB\" />\n        </svg>\n       </div>\n        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"(apiMeta?.singleFieldDisable === undefined || !apiMeta?.singleFieldDisable) && viewEdit ? !apiMeta?.singleFieldDisable : viewEdit\" class=\"input-icons\">\n          <svg (click)=\"saveChanges()\" 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 *ngIf=\"viewEdit\" class=\"input-icons\">\n          <svg (click)=\"discardChanges()\" 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>\n    <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n      <div class=\"input-container\"\n        [style.margin]=\"(margin && margin !== '') ? margin : showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' :  from === 'nxtForm' ? '21px 0px 0px 0px' : '0px !important'\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : (inputBgColor || '#f5f5f5')\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : (inputBorderSize || 1 + 'px solid ' + inputBorder) : 'none'\"\n        [ngClass]=\"{\n          'pad-nxt-0': from === 'nxtTable' && mode !== 'edit',\n          'pad-nxt-1': from === 'nxtTable' && mode === 'edit',\n          'pad-rich-0': mode === 'edit' && type === 'richtext'\n        }\">\n        <!-- SKS14JUN25  Dynamically load Quill editor toolbar -->\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder || ''\"\n          [readOnly]=\"mode !== 'edit' || readOnly\"\n          (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n          [modules]=\"getQuillModules(question.id)\"\n          [style.padding]=\"'0px'\"\n          style=\"width: 100%;\n          border-radius: 5px;\n          border: none;\n          font-size: 16px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div  *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-snow\"\n          style=\"width: 98.5%;\n            border-radius: 5px;\n            border: none;\n            padding: unset;\n            font-size: 16px;\n            min-height: 38px;\">\n          <div class=\"ql-editor\" [innerHTML]=\"value\"\n          [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '1px 10px 0px 5px'\"\n          [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n          [attr.dir]='direction' style=\"font-size: 12px;\"\n          ></div>\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\" [ngClass]=\"'custom-input'\"\n          [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n          [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [style.text-align]=\"textAlign || 'start'\"\n          [style.font-weight]=\"inputWeight || '400'\"\n          [readOnly]=\"mode !== 'edit' || readOnly\" [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n          }\" \n          [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '1px 10px 0px 5px'\"\n          style=\"\n              width: 100%;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\"\n          >\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !readOnly && !onlyView\"\n          class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n            d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n            fill=\"#B0ADAB\" />\n        </svg>\n        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"(apiMeta?.singleFieldDisable === undefined || !apiMeta?.singleFieldDisable) && (viewEdit ? !apiMeta?.singleFieldDisable : viewEdit) && type === 'textarea'\" class=\"input-icons\">\n          <svg (click)=\"saveChanges()\" 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 *ngIf=\"viewEdit && type === 'textarea'\" class=\"input-icons\">\n          <svg (click)=\"discardChanges()\" 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>\n    <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n    <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n      <div class=\"error-message\">\n        {{ getErrorMessage() }}\n      </div>\n    </div>\n  </div>\n</div>\n<!-- SKS18SEP25 google map popup -->\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n  <div class=\"map-modal\">\n    <div class=\"map-modal-content\">\n      <div class=\"map-modal-header\">\n        <!-- HA 19DEC23 For translation -->\n        <h4>{{ 'pickYourLocation' | nxtCustomTranslate : 'pickYourLocation' }}</h4>\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n      </div>\n      <google-map [zoom]=\"10\" [center]=\"markerPosition\" (mapClick)=\"onMapClick($event)\">\n        <map-marker\n          [position]=\"markerPosition\"\n          [options]=\"markerOptions\"\n          (mapDragend)=\"onMarkerDragEnd($event)\">\n        </map-marker>\n      </google-map>\n    </div>\n  </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}textarea:focus-visible,textarea:focus,input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.pad-nxt-0{padding-left:0!important;padding-right:0!important}.pad-nxt-1{padding-left:1px!important;padding-right:1px!important}.pad-rich-0{padding-left:0!important;padding-right:0!important}.checkbox-padding{margin-top:20px;width:100%!important;border:none!important}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:28px;height:28px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled:not([type=checkbox]){cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}input[type=checkbox]:disabled{border:1px solid #5353532b!important}input[type=checkbox]:focus{border:1px solid #5353532b!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#292929!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;left:0;z-index:9999;background:#fff;box-shadow:0 0 5px #0000001a;border-radius:5px}.hijri-popup.rtl-class{left:auto!important;right:0!important}.input-icons{display:flex;align-items:center}::ng-deep .ql-container.ql-snow{border:none!important}::ng-deep .ql-toolbar.ql-snow{border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:1px solid #ccc!important}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"] }]
+                    ], template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n  <div>\n    <div *ngIf=\"label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\"  \n      [style.justify-content]=\"textAlign || 'start'\"\n      [style.font-weight]=\"labelWeight ||  type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"(labelSize && labelSize !== '' )? labelSize : type === 'label' ? '16px' : '14px'\"\n      style=\"display: flex; gap: 5px;\"> \n      {{ label }}\n      <div *ngIf=\"helpText\" [matTooltip]=\"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 *ngIf=\"label && type != 'checkbox' && required && showLabel && mode === 'edit'\" style=\"color: red;\">*</div>\n    </div>\n    <div *ngIf=\"type !== 'label' && type !== 'richtext' && type !== 'textarea'\" style=\"display: flex;\">\n      <div class=\"input-container\"\n        [style.backgroundColor]=\"(type === 'otp' || mode !== 'edit') ? (inputBgColor || '#f5f5f5') : from === 'nxtTable' ? '' : inputBgColor\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding]=\"(mode === 'edit' && from !== 'nxtTable') ? type === 'checkbox' ? '10px 13px 10px 0px !important' : '' :  type === 'checkbox' ? '10px 0px 9px 0px !important' : ''\"\n        [style.margin]=\"(margin && margin !== '') ? margin : (showLabel && label) ? from === 'nxtTable' ? '0px !important' : '' : (from === 'nxtTable' || from === 'normalDropDown') ? '0px !important' : from === 'nxtForm' ? '21px 0px 0px 0px' : '0px !important'\"\n        [style.border]=\"type === 'space' ? 'none' : mode === 'edit' ? (from === 'nxtTable' && !readOnly) ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + (inputBgColor || '#ffffff')) : ( (inputBorderSize || 1) + 'px solid ' + inputBorder)  : 'none'\"\n        style=\"position: relative; width: 100%;\"\n        [ngClass]=\"{\n          'checkbox-padding': type === 'checkbox' || type === 'otp',\n          'pad-nxt-0': from === 'nxtTable' && mode !== 'edit',\n          'pad-nxt-1': from === 'nxtTable' && mode === 'edit'\n        }\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <div *ngIf=\"mode === 'edit' && type === 'list'\">\n          <!-- Inline search icon SVG -->\n          <svg [attr.width]=\"from === 'nxtTable' ? 12 : 18\" [attr.height]=\"from === 'nxtTable' ? 12 : 18\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"1.5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n            <circle cx=\"8.25\" cy=\"8.25\" r=\"5.25\" />\n            <path d=\"M15 15L12.75 12.75\" stroke-linecap=\"round\" />\n          </svg>\n        </div>\n        <!-- SKS28FEB25 mobile number input -->\n        <div *ngIf=\"type === 'tel'\" class=\"phone-input-container\">\n          <div  class=\"country-selector\" style=\"padding-left: 10px;\"\n            (click)=\"toggleCountryDropdown()\">\n            <!-- <span class=\"flag\">{{ selectedCountry.flag }}</span> -->\n            <span class=\"dial-code\" [style.font-weight]=\"inputWeight || '400'\" [style.font-size]=\"inputValueSize || '12px'\">{{ selectedCountry.dial_code }}</span>\n            <svg class=\"arrow\" width=\"9\" height=\"6\" viewBox=\"0 0 9 6\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                d=\"M0.684136 0.767477C0.922999 0.5378 1.30282 0.545248 1.5325 0.784111L4.5 3.93431L7.4675 0.784111C7.69718 0.545248 8.077 0.5378 8.31587 0.767477C8.55473 0.997153 8.56218 1.37698 8.3325 1.61584L4.9325 5.21584C4.81938 5.33349 4.66321 5.39998 4.5 5.39998C4.33679 5.39998 4.18062 5.33349 4.0675 5.21584L0.667501 1.61584C0.437825 1.37698 0.445272 0.997153 0.684136 0.767477Z\"\n                fill=\"#626262\" />\n            </svg>\n          </div>\n          <div *ngIf=\"showCountryDropdown\" class=\"country-dropdown\">\n            <div class=\"search-box\">\n              <input type=\"text\" [readOnly]=\"mode !== 'edit'\" placeholder=\"Search country...\" [value]=\"countrySearch\"\n                (input)=\"filterCountries($event)\">\n            </div>\n            <div class=\"country-list\">\n              <div *ngFor=\"let country of filteredCountries\" class=\"country-item\" (click)=\"selectCountry(country)\">\n                <span class=\"flag\">{{ country.flag }}</span>\n                <span class=\"name\">{{ country.name }}</span>\n                <span class=\"dial-code\">{{ country.dial_code }}</span>\n              </div>\n            </div>\n          </div>\n        </div>\n        <!-- SKS12SEP25 currency code -->\n        <div *ngIf=\"mode === 'edit' && readOnly !== true && type === 'currency'\" [style.font-size]=\"inputValueSize || '12px'\" class=\"phone-input-container\">\n          {{currentCurrency.symbol}}\n        </div>\n        @if((type === 'currency' ? mode === 'edit' && readOnly === false : type !== 'datetime' && type !== 'date' && type !== 'time' && type !== 'month' && type !== 'space')){\n          <input *ngFor=\"let input of cachedInputList; let i = index\" #inputEl #inputRef [id]=\"inputId\"\n            [type]=\"isPasswordVisible ? 'text' : type === 'otp' || type === 'dropdown' ? 'text' : type\"\n            [attr.placeholder]=\"type === 'otp' || mode !== 'edit' ? '' : (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : placeholder)\"\n            [formControl]=\"type === 'otp' ? $any(input) : control\"\n            [style.backgroundColor]=\"(type === 'otp'|| mode !== 'edit') ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n            [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n            [style.border]=\" (type === 'otp' || mode !== 'edit')  ? '' : from === 'nxtTable' ? type === 'checkbox' ? '1px solid gray !important' : 'none' : type === 'checkbox' ? ( inputBorderSize || 1 + 'px solid ' + inputBorder) : inputBorder\"\n            [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '100% !important' : type === 'checkbox' ? 'auto' : inputWidth || '100% !important'\"\n            [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [value]=\"type === 'tel' ? rawInputVal : value\"\n            (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\n            [checked]=\"type === 'checkbox' ? value : ''\"\n            [style.font-size]=\"type === 'otp' ? '' : inputValueSize || '12px'\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\n            [style.text-align]=\"(type === 'currency' && mode === 'edit') ? 'start' : textAlign || 'start'\"\n            [style.font-weight]=\"inputWeight || '400'\"\n            (blur)=\"type === 'otp' ? onTouched() : blurEmit()\"\n            (keypress)=\"type === 'otp' ? handleKeyPress($event, i) : null\"\n            (keydown)=\"type === 'otp' ? handleKeyDown($event, i) : from === 'normalDropDown' ? $event.preventDefault() : null\"\n            (paste)=\"type === 'otp' ? handlePaste($event, i) : null\" inputmode=\"type === 'otp' ? numeric : null\"\n            [attr.autocomplete]=\"type === 'otp' && i === 0 ? 'one-time-code' : type === 'list' ? 'list' : 'off'\"\n            [attr.aria-expanded]=\"type === 'list' ? showSuggestion : 'off'\"\n            [attr.inputmode]=\"type === 'otp' ? 'numeric' : null\" [attr.name]=\"type === 'otp' && i === 0 ? 'otp' : null\"\n            (focusin)=\"focusinEmit($event)\" [attr.aria-owns]=\"type === 'list' ? ariaOwns : 'off'\"\n            [attr.aria-haspopup]=\"type === 'list' ? ariaHasPopup : 'off'\" \n            [readonly]=\"from === 'normalDropDown'\" \n            [ngStyle]=\"{\n                '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n                '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n                '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n                '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n              }\" (keydown.enter)=\"type === 'location' ? $event.preventDefault() : ''\"\n            autocorrect=\"type === 'location' ? 'off' : ''\" autocapitalize=\"type === 'location' ? 'off' : ''\"\n            spellcheck=\"type === 'location' ? 'off' : ''\"\n          />\n        }\n        @else if(type === 'time' || type === 'month' || type === 'datetime' || type === 'date') {\n            <div style=\"position: relative; width: 100%;\">\n              <input [id]=\"inputId\"\n                type=\"text\" \n                [formControl]=\"control\"\n                readonly\n                [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\"\n                [ngClass]=\"'nxt-custom-input'\" \n                [value]=\"value | NxtDate : type : languageCode : dateFormatName\"\n                [style.backgroundColor]=\"mode !== 'edit' ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n                [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? 'none' : inputBorder\"\n                [style.height]=\"inputHeight\"\n                [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n                [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n                [style.text-align]=\"textAlign || 'start'\"\n                [style.font-weight]=\"inputWeight || '400'\"\n                (focus)=\"onHijriInputClick(); $event.stopPropagation()\"\n                (click)=\"onHijriInputClick();\"\n                [attr.autocomplete]=\"'off'\"\n                [attr.readonly]=\"'true'\"\n                [readonly]=\"'true'\" \n                [disabled]=\"mode === 'edit' ? readOnly === true : true\"\n                [class]=\"'nxt-' + (question.nxtTableId || question.id)\"\n                [ngStyle]=\"{\n                  '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n                  '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n                  '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n                  '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n                }\" style=\"\n                    width: 100% !important;\n                    padding: 10px;\n                    padding-left: 5px;\n                    border-radius: 5px;\n                    border: none !important;\n                    font-size: 14px;\" \n              />\n              <!-- SKS14AUG25 Hijri Datepicker Popup -->\n              <div *ngIf=\"showHijriPicker\" class=\"hijri-popup\" [ngClass]=\"{'rtl-class': direction === 'rtl'}\" [class]=\"'nxt-' + (question.nxtTableId || question.id)\">\n                <app-nxt-datepicker\n                  [type]=\"type\"\n                  [value]=\"value\"\n                  [languageCode]=\"languageCode\"\n                  (dateChange)=\"onInputChange($event);\"\n                  >\n                </app-nxt-datepicker>\n              </div>\n            </div>\n          }\n          <div *ngIf=\"(type === 'currency' && (mode !== 'edit' || readOnly === true))\"\n            [style.backgroundColor]=\"from === 'nxtTable' ? '' : inputBgColor\"\n            [style.color]=\"inputTextColor\"\n            [style.border]=\"from === 'nxtTable' ? 'none' : inputBorder\"\n            [style.height]=\"inputHeight\" \n            [style.width]=\"inputWidth || '100% !important'\"\n            [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [style.font-size]=\"inputValueSize || '12px'\"\n            [style.text-align]=\"textAlign || 'start'\"\n            [style.font-weight]=\"inputWeight || '400'\"\n          >\n          @if(question?.subText?.isAmountInWords){\n            {{value | amountInWords }}\n          } @else {\n            {{value | currency : currentCurrency.code : currentCurrency.symbol }}\n          }\n        </div>\n        <!-- SKS7AUG25 api call Dotted Loader -->\n        <div *ngIf=\"mode === 'edit' && isLoading\" class=\"dotted-loader input-icons\" aria-label=\"Loading\" role=\"status\">\n          <span *ngFor=\"let dot of [].constructor(6); let i = index\" class=\"dot\" [style.--i]=\"i\"></span>\n        </div>\n        <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date' || type === 'month' || type === 'time')\" (click)=\"openDatePicker(type);   $event.stopPropagation()\" class=\"input-icons\"\n           style=\"cursor: pointer;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"from === 'nxtTable' ? 12 : 18\" [attr.height]=\"from === 'nxtTable' ? 12 : 18\" viewBox=\"0 0 18 18\" fill=\"none\">\n            <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.0329 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.97435 1.5V3.96809\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.1787 2.68457H5.82822C3.6257 2.68457 2.25 3.91152 2.25 6.16684V12.9541C2.25 15.2449 3.6257 16.5002 5.82822 16.5002H12.1718C14.3812 16.5002 15.75 15.2661 15.75 13.0108V6.16684C15.7569 3.91152 14.3882 2.68457 12.1787 2.68457Z\" stroke=\"#B0ADAB\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div *ngIf=\"mode === 'edit' && !readOnly && type === 'location' \" class=\"input-icons\">\n          <svg *ngIf=\"!isLoading\" (click)=\"openMap()\" (keydown.enter)=\"openMap()\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n            <rect x=\"0.5\" y=\"0.5\" [attr.width]=\"from === 'nxtTable' ? 12 : 15\" [attr.height]=\"from === 'nxtTable' ? 12 : 15\" stroke=\"white\"/>\n            <path d=\"M7.99992 8.95321C9.14867 8.95321 10.0799 8.02197 10.0799 6.87321C10.0799 5.72446 9.14867 4.79321 7.99992 4.79321C6.85117 4.79321 5.91992 5.72446 5.91992 6.87321C5.91992 8.02197 6.85117 8.95321 7.99992 8.95321Z\" stroke=\"#B1ADAB\" stroke-width=\"1.5\"/>\n            <path d=\"M2.41379 5.65992C3.72712 -0.113413 12.2805 -0.106746 13.5871 5.66659C14.3538 9.05325 12.2471 11.9199 10.4005 13.6933C9.06046 14.9866 6.94046 14.9866 5.59379 13.6933C3.75379 11.9199 1.64712 9.04659 2.41379 5.65992Z\" stroke=\"#B1ADAB\" stroke-width=\"1.5\"/>\n          </svg>        \n        </div>\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"input-icons\">\n          <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" style=\"cursor: pointer;\" [attr.width]=\"from === 'nxtTable' ? 12 : 16\" [attr.height]=\"from === 'nxtTable' ? 12 : 16\" viewBox=\"0 0 0.48 0.48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.03 0.075a0.015 0.015 0 0 0 0 0.03zm0.42 0.03a0.015 0.015 0 0 0 0 -0.03zm-0.42 0h0.42v-0.03h-0.42z\" fill=\"#71717A\"/><path d=\"M0.195 0.03V0.015zM0.165 0.06H0.15zM0.15 0.09a0.015 0.015 0 0 0 0.03 0zm0.15 0a0.015 0.015 0 0 0 0.03 0zm0.015 -0.03h0.015zM0.285 0.015h-0.09v0.03h0.09zm-0.09 0a0.045 0.045 0 0 0 -0.032 0.013l0.021 0.021a0.015 0.015 0 0 1 0.011 -0.004zm-0.032 0.013A0.045 0.045 0 0 0 0.15 0.06H0.18a0.015 0.015 0 0 1 0.004 -0.011zM0.15 0.06v0.03H0.18V0.06zm0.18 0.03V0.06H0.3v0.03zm0 -0.03a0.045 0.045 0 0 0 -0.013 -0.032l-0.021 0.021c0.003 0.003 0.004 0.007 0.004 0.011zm-0.013 -0.032A0.045 0.045 0 0 0 0.285 0.015v0.03a0.015 0.015 0 0 1 0.011 0.004z\" fill=\"#71717A\"/><path d=\"M0.18 0.345a0.015 0.015 0 0 0 0.03 0zm0.03 -0.15a0.015 0.015 0 0 0 -0.03 0zm0 0.15v-0.15H0.18v0.15z\" fill=\"#71717A\"/><path d=\"M0.27 0.345a0.015 0.015 0 0 0 0.03 0zm0.03 -0.15a0.015 0.015 0 0 0 -0.03 0zm0 0.15v-0.15h-0.03v0.15z\" fill=\"#71717A\"/><path d=\"m0.377 0.422 -0.015 -0.001zM0.347 0.45v-0.015zm-0.215 0v-0.015zm-0.03 -0.028 0.015 -0.001zM0.09 0.089a0.015 0.015 0 0 0 -0.03 0.002zm0.33 0.002a0.015 0.015 0 1 0 -0.03 -0.002zm-0.058 0.33a0.015 0.015 0 0 1 -0.005 0.01l0.02 0.022a0.045 0.045 0 0 0 0.014 -0.029zm-0.005 0.01a0.015 0.015 0 0 1 -0.01 0.004v0.03a0.045 0.045 0 0 0 0.03 -0.012zm-0.01 0.004H0.133v0.03H0.347zm-0.215 0a0.015 0.015 0 0 1 -0.01 -0.004l-0.02 0.022c0.008 0.008 0.019 0.012 0.03 0.012zm-0.01 -0.004a0.015 0.015 0 0 1 -0.005 -0.01l-0.03 0.002a0.045 0.045 0 0 0 0.014 0.029zm-0.005 -0.01L0.09 0.089l-0.03 0.002 0.028 0.332zm0.272 -0.332 -0.028 0.332 0.03 0.002 0.028 -0.332z\" fill=\"#71717A\"/></svg>      \n        </div>\n        <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n          [style.font-size]=\"labelSize\" [style.color]=\"inputTextColor || labelColor || '#212529'\"\n          [style.justify-content]=\"textAlign || 'start'\"\n          style=\"margin-bottom: 0; padding-left: 10px; padding-right: 10px; width: 100% !important;\"> {{ label }}\n          <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n        </label>     \n        <!-- Always Show Dropdown Icon -->\n        <div *ngIf=\"mode === 'edit' && type === 'dropdown'\" class=\"input-icons\">\n          <svg (mousedown)=\"toggle($event); $event.preventDefault()\" xmlns=\"http://www.w3.org/2000/svg\" [attr.width]=\"from === 'nxtTable' ? 12 : 16\" [attr.height]=\"from === 'nxtTable' ? 12 : 16\" viewBox=\"0 0 12 12\" fill=\"none\">\n            <path d=\"M4.5 11H7.5C10 11 11 10 11 7.5V4.5C11 2 10 1 7.5 1H4.5C2 1 1 2 1 4.5V7.5C1 10 2 11 4.5 11Z\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M4.23499 5.32L6 7.08L7.765 5.32\" stroke=\"#B0ADAB\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </div>\n\n        <img *ngIf=\"mode === 'edit' && inputIconRightSrc\" [src]=\"inputIconRightSrc\" class=\"icon right-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\">\n        <img *ngIf=\"mode === 'edit' && type === 'password'\" class=\"toggle-icon\" (click)=\"togglePasswordVisibility()\"\n          [src]=\"!isPasswordVisible ? '/assets/images/icons/general/Hide-Password.svg' : '/assets/images/icons/general/Show-Password.svg'\" />\n       <div *ngIf=\"mode !== 'edit' && !readOnly && from !== 'nxtTable' && !onlyView && type !== 'space'\" class=\"input-icons\">\n        <svg class=\"edit-icon\" \n          (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n            d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n            fill=\"#B0ADAB\" />\n        </svg>\n       </div>\n        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"(apiMeta?.singleFieldDisable === undefined || !apiMeta?.singleFieldDisable) && viewEdit ? (!apiMeta?.singleFieldDisable && type !== 'space') : (viewEdit && type !== 'space')\" class=\"input-icons\">\n          <svg (click)=\"saveChanges()\" 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 *ngIf=\"viewEdit && type !== 'space'\" class=\"input-icons\">\n          <svg (click)=\"discardChanges()\" 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>\n    <div *ngIf=\"type !== 'label' && type !== 'checkbox' && (type === 'richtext' || type === 'textarea')\" style=\"display: flex;\">\n      <div class=\"input-container\"\n        [style.margin]=\"(margin && margin !== '') ? margin : showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' :  from === 'nxtForm' ? '21px 0px 0px 0px' : '0px !important'\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : (inputBgColor || '#f5f5f5')\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : (inputBorderSize || 1 + 'px solid ' + inputBorder) : 'none'\"\n        [ngClass]=\"{\n          'pad-nxt-0': from === 'nxtTable' && mode !== 'edit',\n          'pad-nxt-1': from === 'nxtTable' && mode === 'edit',\n          'pad-rich-0': mode === 'edit' && type === 'richtext'\n        }\">\n        <!-- SKS14JUN25  Dynamically load Quill editor toolbar -->\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" (ngModelChange)=\"onInputChange($event)\" [placeholder]=\"placeholder || ''\"\n          [readOnly]=\"mode !== 'edit' || readOnly\"\n          (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n          [modules]=\"getQuillModules(question.id)\"\n          [style.padding]=\"'0px'\"\n          style=\"width: 100%;\n          border-radius: 5px;\n          border: none;\n          font-size: 16px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div  *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content ql-snow\"\n          style=\"width: 98.5%;\n            border-radius: 5px;\n            border: none;\n            padding: unset;\n            font-size: 16px;\n            min-height: 38px;\">\n          <div class=\"ql-editor\" [innerHTML]=\"value\"\n          [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '1px 10px 0px 5px'\"\n          [style.text-align]=\"direction === 'rtl' ? 'right' : '' \"\n          [attr.dir]='direction' style=\"font-size: 12px;\"\n          ></div>\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || ''\" [ngClass]=\"'custom-input'\"\n          [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '#f5f5f5' : from === 'nxtTable' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder\"\n          [style.height]=\"inputHeight\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize || '12px'\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [style.text-align]=\"textAlign || 'start'\"\n          [style.font-weight]=\"inputWeight || '400'\"\n          [readOnly]=\"mode !== 'edit' || readOnly\" [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize || '12px' : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || inputWeight || '400' : ''\n          }\" \n          [style.padding]=\"(padding && padding !== '') ? padding : from === 'nxtTable' ? '0px' : '1px 10px 0px 5px'\"\n          style=\"\n              width: 100%;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\"\n          >\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && from !== 'nxtTable' && (type === 'richtext' || type === 'textarea') && !readOnly && !onlyView \"\n          class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n            d=\"M1.99987 9.0017L4.39602 11.3979C4.50371 11.5055 4.66525 11.5055 4.77294 11.3979L10.7499 5.39401C10.8576 5.28631 10.8576 5.12477 10.7499 5.01708L8.38064 2.64785C8.27294 2.54016 8.11141 2.54016 8.00371 2.64785L1.99987 8.6517C1.89217 8.75939 1.89217 8.92093 1.99987 9.0017ZM9.1614 1.54401C9.05371 1.6517 9.05371 1.81324 9.1614 1.92093L11.5306 4.29016C11.6383 4.39785 11.7999 4.39785 11.9076 4.29016L12.5806 3.61708C13.0114 3.21324 13.0114 2.56708 12.5806 2.13631L11.3153 0.870928C10.8845 0.440159 10.2114 0.440159 9.78063 0.870928L9.1614 1.54401ZM0.00755862 12.9863C-0.0462875 13.2555 0.19602 13.4979 0.465251 13.444L3.39987 12.744C3.50756 12.7171 3.58833 12.6632 3.64217 12.6094L3.69602 12.5555C3.74987 12.5017 3.77679 12.3132 3.6691 12.2055L1.24602 9.78247C1.13833 9.67478 0.949866 9.7017 0.89602 9.75554L0.842174 9.80939C0.761405 9.89016 0.734482 9.97093 0.707559 10.0517L0.00755862 12.9863Z\"\n            fill=\"#B0ADAB\" />\n        </svg>\n        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"(apiMeta?.singleFieldDisable === undefined || !apiMeta?.singleFieldDisable) && (viewEdit ? !apiMeta?.singleFieldDisable : viewEdit) && type === 'textarea'\" class=\"input-icons\">\n          <svg (click)=\"saveChanges()\" 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 *ngIf=\"viewEdit && type === 'textarea'\" class=\"input-icons\">\n          <svg (click)=\"discardChanges()\" 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>\n    <!-- SKS23APR25 Use control.invalid to show error on submit click -->\n    <div *ngIf=\"type != 'checkbox' && type !== 'label' && control.invalid && (control.touched || control.dirty)\" style=\"height: 20px;\">\n      <div class=\"error-message\">\n        {{ getErrorMessage() }}\n      </div>\n    </div>\n  </div>\n</div>\n<!-- SKS18SEP25 google map popup -->\n<div class=\"map-overlay\" *ngIf=\"showModal\">\n  <div class=\"map-modal\">\n    <div class=\"map-modal-content\">\n      <div class=\"map-modal-header\">\n        <!-- HA 19DEC23 For translation -->\n        <h4>{{ 'pickYourLocation' | nxtCustomTranslate : 'pickYourLocation' }}</h4>\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n      </div>\n      <google-map [zoom]=\"10\" [center]=\"markerPosition\" (mapClick)=\"onMapClick($event)\">\n        <map-marker\n          [position]=\"markerPosition\"\n          [options]=\"markerOptions\"\n          (mapDragend)=\"onMarkerDragEnd($event)\">\n        </map-marker>\n      </google-map>\n    </div>\n  </div>\n</div>", styles: ["label{font-size:14px;margin-bottom:10px;color:color-mix(in srgb,black,rgb(0,0,0) 80%)}.toggle-icon{width:20px;height:20px;cursor:pointer;fill:#666}.error-message{color:red;font-size:12px}input[type=text].custom-input,input[type=password].custom-input,input[type=number].custom-input,input[type=email].custom-input,input[type=tel].custom-input,input[type=list].custom-input,input[type=dropdown].custom-input,input[type=location].custom-input{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}input.nxt-custom-input{width:100%!important;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.custom-input:-webkit-autofill:active,.nxt-custom-input:-webkit-autofill,.nxt-custom-input:-webkit-autofill:hover,.nxt-custom-input:-webkit-autofill:focus,.nxt-custom-input:-webkit-autofill:active{transition:background-color 5000s ease-in-out 0s!important;-webkit-text-fill-color:inherit!important}.phone-input-container{display:flex;align-items:center;position:relative}.country-selector{display:flex;align-items:center;cursor:pointer;padding-right:12px;border-right:#ccc;margin-right:12px}.flag{margin-right:8px;font-size:20px}.dial-code{margin-right:8px;font-weight:500}.country-dropdown{position:absolute;top:100%;left:0;width:300px;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.search-box{padding:8px;border-bottom:1px solid #ccc}.search-box input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px}.country-list{max-height:200px;overflow-y:auto}.country-item{display:flex;align-items:center;padding:8px 12px;cursor:pointer}.country-item:hover{background-color:color-mix(in srgb,#fff,rgba(0,0,0,0) 30%)}.country-item .name{flex:1;margin:0 12px}.fcOtp{width:40px;height:40px;text-align:center;font-size:18px;border:1px solid #ccc;border-radius:5px;margin:5px;outline:none;transition:border-color .2s ease-in-out}textarea:focus-visible,textarea:focus,input:focus{outline:none;border-color:transparent;box-shadow:none}.input-container{display:flex;align-items:center;width:100%;border-radius:5px;border:1px solid #ccc;padding-left:5px;padding-right:5px}.pad-nxt-0{padding-left:0!important;padding-right:0!important}.pad-nxt-1{padding-left:1px!important;padding-right:1px!important}.pad-rich-0{padding-left:0!important;padding-right:0!important}.checkbox-padding{margin-top:20px;width:100%!important;border:none!important}.icon-container{right:15px;padding-right:5px;pointer-events:auto;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.input-container.invalid{border:1px solid #DC3545!important;border-radius:5px}.view-mode{font-size:14px;color:#333}@media print{.view-mode{font-size:12pt;color:#000}}input::placeholder{font-family:var(--placeholder-font);color:var(--placeholder-color);font-size:var(--placeholder-size);font-weight:var(--placeholder-weight)}.dotted-loader{position:relative;width:28px;height:28px}.dotted-loader .dot{--i: 0;position:absolute;top:50%;left:50%;width:3px;height:3px;margin:-2px 0 0 -2px;border-radius:50%;background-color:#696969;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg));animation:spinDot 1s linear infinite;animation-delay:calc(var(--i) * .1s)}@keyframes spinDot{0%{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}50%{opacity:1;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(1.3)}to{opacity:.3;transform:rotate(calc(var(--i) * 60deg)) translate(8px) rotate(calc(var(--i) * -60deg)) scale(.9)}}input:disabled:not([type=checkbox]){cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important;border:none!important}input[type=checkbox]:disabled{border:1px solid #5353532b!important}input[type=checkbox]:focus{border:1px solid #5353532b!important}textarea:disabled{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}.quill-view-content{cursor:default;background-color:light-dark(rgba(239,239,239,0),rgba(59,59,59,0))!important;color:light-dark(rgb(84,84,84),rgb(170,170,170))!important}:is() .ql-editor img{cursor:pointer}:is() .image-resizer{display:block!important;visibility:visible!important}:is() .ql-editor .image-resizer{border:1px dashed #000;position:absolute}:is() .ql-editor .image-resizer .handle{background-color:#000;border:1px solid #fff;border-radius:50%;height:12px;width:12px;position:absolute}quill-editor{width:100%}.quill-view-content{background-color:#f0f0f0;border-radius:5px;border:none;padding:10px;overflow-wrap:break-word}.quill-view-content .ql-editor{white-space:normal;overflow:visible;min-height:auto}[dir=rtl] .quill-view-content *,.rtl .quill-view-content *{text-align:right!important;direction:rtl!important}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#292929!important}input:disabled.from-nxt-table,textarea:disabled.from-nxt-table,.quill-view-content.from-nxt-table{color:#2c3137!important}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:unset!important}.input-wrapper{position:relative}.input-container{pointer-events:auto!important;position:relative}.custom-input,.nxt-custom-input{pointer-events:auto!important}.hijri-popup{position:absolute;top:100%;left:0;z-index:9999;background:#fff;box-shadow:0 0 5px #0000001a;border-radius:5px}.hijri-popup.rtl-class{left:auto!important;right:0!important}.input-icons{display:flex;align-items:center}::ng-deep .ql-container.ql-snow{border:none!important}::ng-deep .ql-toolbar.ql-snow{border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:1px solid #ccc!important}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"] }]
         }], ctorParameters: () => [{ type: NxtDatePipe }, { type: GoogleMapsLoaderService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: CountryService }, { type: StorageService }, { type: TranslationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ElementRef }, { type: ChangeService }, { type: DataService }], propDecorators: { label: [{
                 type: Input
             }], labelFont: [{
@@ -49321,11 +49339,11 @@ class ListViewFilterComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListViewFilterComponent, deps: [{ token: i6.FormBuilder }, { token: NxtCustomTranslatePipe }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: ListViewFilterComponent, isStandalone: true, selector: "app-list-view-filter", inputs: { listViews: "listViews", tableData: "tableData", tableFilterArray: "tableFilterArray", selectedView: "selectedView", displayedColumns: "displayedColumns", title: "title", availableOperators: "availableOperators" }, outputs: { listViewEmit: "listViewEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [NxtCustomTranslatePipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"list-view-filter\" style=\"line-height: 0px;\">\n    <div class=\"custom-dropdown\">\n        <div *ngIf=\"title\" class=\"filter-label\">{{title}}</div>\n        <div class=\"select-wrapper\">\n            <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n                <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <div class=\"custom-dropdown\">\n                <div class=\"selected-option\" style=\"cursor: pointer;\" (click)=\"toggleDropdown()\">\n                    <div style=\"display: flex; align-items: center;\">\n                        {{ selectedViewPath || selectedView | nxtCustomTranslate : selectedView}}\n                    </div>\n                    <svg style=\"cursor: pointer;\" class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <!-- SKS3MAY25 list view Drop down-->\n        <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n            <ul class=\"dropdown-options\">\n                <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (click)=\"selectListView(view)\" class=\"list-view-item\" style=\"line-height: 1.5;\">\n                    <div class=\"view-name\">{{ view.labelPath || view.filterName | nxtCustomTranslate : view.filterName }}</div>\n                    <div *ngIf=\"!view.system\" class=\"actions\">\n                        <div  class=\"edit-icon\" (click)=\"startEdit(view, $event)\" style=\"cursor: pointer;\">\n                            <svg style=\"cursor: pointer;\" fill=\"#000000\" width=\"16px\" height=\"16px\" viewBox=\"0 0 0.48 0.48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.44 0.145a0.02 0.02 0 0 0 -0.006 -0.014l-0.085 -0.085a0.02 0.02 0 0 0 -0.014 -0.006 0.02 0.02 0 0 0 -0.014 0.006l-0.057 0.057L0.046 0.321a0.02 0.02 0 0 0 -0.006 0.014V0.42a0.02 0.02 0 0 0 0.02 0.02h0.085a0.02 0.02 0 0 0 0.015 -0.006l0.217 -0.219L0.434 0.16a0.024 0.024 0 0 0 0.004 -0.007 0.02 0.02 0 0 0 0 -0.005 0.014 0.014 0 0 0 0 -0.003ZM0.137 0.4H0.08v-0.057l0.199 -0.199 0.057 0.057ZM0.363 0.173l-0.057 -0.057 0.028 -0.028 0.056 0.056Z\"/></svg>\n                        </div>\n                        <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\" style=\"cursor: pointer;\">\n                            <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n            <div class=\"add-filter\" style=\"cursor: pointer; font-size: 14px;\" (click)=\"startAdd()\">\n                <div class=\"add-icon\">\n                    <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n                <div>{{'NEW_LIST_VIEW' | nxtCustomTranslate : 'New List View'}}</div>\n            </div>\n        </div>\n    </div>\n     <!-- SKS3MAY25 Add New List View-->\n    <div *ngIf=\"isModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header-div\">\n                {{ (isAdding ? 'ADD_NEW_LIST_VIEW' : 'EDIT_LIST_VIEW')  | nxtCustomTranslate : (isAdding ? 'Add New List View' : 'Edit List View') }} \n                <div class=\"close\" (click)=\"closeModal()\">&times;</div>\n            </div>\n            <form [formGroup]=\"editingView\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <div style=\"display: flex;\">{{'NAME' | nxtCustomTranslate :'Name'}}<div style=\"color: red; padding-left: 3px;\">*</div></div>\n                        <input formControlName=\"filterName\" [placeholder]=\"'ENTER_LIST_VIEW_NAME' | nxtCustomTranslate : 'Enter list view name'\" required>\n                        <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n                            {{ 'NAME_IS_REQ' | nxtCustomTranslate : 'Name is required'}}.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <div>{{'ORDER' | nxtCustomTranslate : 'Order'}}</div>\n                        <input type=\"number\" formControlName=\"order\" [placeholder]=\" 'ENTER_DISPLAY_ORDER' | nxtCustomTranslate : 'Enter display order'\" required>\n                        <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n                            {{'ORDER_IS_REQ_AND_BE_A_NUM' | nxtCustomTranslate : 'Order is required and must be a number'}}.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <div>{{'DEFAULT_VIEW' | nxtCustomTranslate : 'Default View'}}</div>\n                        <div class=\"toggle-wrapper small\">\n                            <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n                            <label for=\"isDefault\" class=\"toggle-button\" style=\"margin-bottom: 0px; display: flex;\"></label>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>{{'FILTERS' | nxtCustomTranslate : 'Filters'}}</h3>\n                    <div class=\"section-description\">{{'DEFINE_CONDITIONS_FOR_FILTERED_LIST_VIEW' | nxtCustomTranslate : 'Define conditions for filtered list view'}}</div>\n                </div>\n                <div formArrayName=\"conditions\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"column-cell\">{{'COLUMN' | nxtCustomTranslate : 'Column'}}</div>\n                        <div class=\"operator-cell\">{{'OPERATOR' | nxtCustomTranslate : 'Operator'}}</div>\n                        <div class=\"value-cell\">{{'VALUE' | nxtCustomTranslate : 'Value'}}</div>\n                        <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n                    </div>\n                    \n                    <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n                        <div class=\"column-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input formControlName=\"field\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" [placeholder]=\"'ENTER_OR_SELECT_COLUMN' | nxtCustomTranslate : 'Enter or select column'\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n                                    <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field.label)\">\n                                        {{ field.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n                                {{'COLUMN_IS_REQ' | nxtCustomTranslate : 'Column is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"operator-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input\n                                  [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n                                  (input)=\"onOperatorInput($event.target.value, i)\"\n                                  (focus)=\"onFocus('operator', i)\"\n                                  (blur)=\"onBlur('operator', i)\"\n                                  [placeholder]=\"'ENTER_OR_SELECT_OPERATOR' | nxtCustomTranslate : 'Enter or select operator'\"\n                                />\n                              \n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                  <div\n                                    *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n                                    class=\"dropdown-item\"\n                                    (click)=\"selectOption('operator', i, operator.value)\"\n                                  >\n                                    {{ operator.label }}\n                                  </div>\n                                </div>\n                              </div>                              \n                            <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n                                {{'OPERATOR_IS_REQ' | nxtCustomTranslate : 'Operator is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"value-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" [placeholder]=\"'ENTER_OR_SELECT_VALUE' | nxtCustomTranslate : 'Enter or select value'\">\n                                <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)?.length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n                                        {{ val }}\n                                    </div>\n                                </div>\n                            </div>\n                            <!-- <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n                                {{'VALUE_IS_REQUIRED' | nxtCustomTranslate : 'Value is required'}}.\n                            </div> -->\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n                                <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" [matTooltip]=\"'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <div>{{'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'}}</div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>{{'COLUMNS' | nxtCustomTranslate : 'Columns'}}</h3>\n                    <div class=\"section-description\">{{'SELECT_FIELD_TO_DISPLAY_IN_TABLE' | nxtCustomTranslate : 'Select field to display in table'}}</div>\n                </div>\n                <div formArrayName=\"columns\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"name-cell\">{{'COLUMN_NAME' | nxtCustomTranslate : 'Column Name'}}</div>\n                        <div class=\"bool-cell\">{{'SORTABLE' | nxtCustomTranslate : 'Sortable'}}</div>\n                        <div class=\"bool-cell\">{{'FILTERABLE' | nxtCustomTranslate :'Filterable'}}</div>\n                        <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n                    </div>\n                    \n                    <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n                        <div class=\"name-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input \n                                formControlName=\"name\" \n                                (focus)=\"onFocus('columnName', i)\" \n                                (blur)=\"onBlur('columnName', i)\" \n                                (input)=\"onManualInput($event.target.value, i)\"\n                                [placeholder]=\"'ENTER_OR_SELECT_COLUMN_NAME' | nxtCustomTranslate : 'Enter or select column name'\">\n                                 <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n                                        {{ colName.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n                                {{'COLUMN_NAME_IS_REQ' | nxtCustomTranslate : 'Column name is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n                                <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n                                <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n                                <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" [matTooltip]=\"'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <div>{{'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'}}</div>\n                    </div>\n                </div>\n                <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n                   {{'AT_LEAST_ONE_FILTER_OR_ONE_COLUMN_IS_REQ' | nxtCustomTranslate : ' At least one filter or one column is required'}}.\n                </div>                  \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">{{'SAVE' | nxtCustomTranslate : 'Save'}}</button>\n                    <button type=\"button\" (click)=\"closeModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <!-- SKS3MAY25 Delete List View-->\n    <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>{{'DELETE_LIST_VIEW' | nxtCustomTranslate : 'Delete List View'}}</h2>\n            <p>{{'ARE_YOU_SURE_YOU_WANT_TO_DELETE' | nxtCustomTranslate : 'Are you sure you want to delete'}} \"{{ viewToDelete?.filterName }}\"?</p>\n            <div class=\"form-delete\">\n                <button type=\"button\" (click)=\"deleteConfirmed()\">{{'DELETE' | nxtCustomTranslate : 'Delete'}}</button>\n                <button type=\"button\" (click)=\"closeDeleteModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:14px;font-weight:400;display:flex;gap:4px}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px}.dropdown-options-container{position:absolute;top:100%;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1b4}.dropdown-options li.selected{background-color:#ececec}.list-view-item{display:flex;font-size:14px;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#cce6ff35}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{padding-bottom:8px;padding-top:2px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px}.table-header{display:grid;background-color:#f8f9fa;font-weight:400;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.listview-custom-select{position:relative;width:100%}.listview-custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}.addIcon{padding:1px;border-radius:5px;background-color:#f5f5f5;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex}.delete-icon{display:flex;justify-content:center;align-items:center}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.delete-icon:hover svg path{stroke:#ff7575!important;fill:transparent!important}.edit-icon:hover svg path{fill:#007bff!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{min-width:0;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.listview-custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}.modal-header-div{display:flex;justify-content:space-between;font-size:18px;padding-bottom:10px}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.list-view-item{position:relative}.actions{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.list-view-item:hover .actions{display:flex;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i6.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: ListViewFilterComponent, isStandalone: true, selector: "app-list-view-filter", inputs: { listViews: "listViews", tableData: "tableData", tableFilterArray: "tableFilterArray", selectedView: "selectedView", displayedColumns: "displayedColumns", title: "title", availableOperators: "availableOperators" }, outputs: { listViewEmit: "listViewEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [NxtCustomTranslatePipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"list-view-filter\">\n    <div class=\"custom-dropdown\">\n        <div *ngIf=\"title\" class=\"filter-label\">{{title}}</div>\n        <div class=\"select-wrapper\">\n            <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n                <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <div class=\"custom-dropdown\">\n                <div class=\"selected-option\" style=\"cursor: pointer;\" (click)=\"toggleDropdown()\">\n                    <div style=\"display: flex; align-items: center;\">\n                        {{ selectedViewPath || selectedView | nxtCustomTranslate : selectedView}}\n                    </div>\n                    <svg style=\"cursor: pointer;\" class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <!-- SKS3MAY25 list view Drop down-->\n        <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n            <ul class=\"dropdown-options\">\n                <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (click)=\"selectListView(view)\" class=\"list-view-item\" style=\"line-height: 1.5;\">\n                    <div class=\"view-name\">{{ view.labelPath || view.filterName | nxtCustomTranslate : view.filterName }}</div>\n                    <div *ngIf=\"!view.system\" class=\"actions\">\n                        <div  class=\"edit-icon\" (click)=\"startEdit(view, $event)\" style=\"cursor: pointer;\">\n                            <svg style=\"cursor: pointer;\" fill=\"#000000\" width=\"16px\" height=\"16px\" viewBox=\"0 0 0.48 0.48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.44 0.145a0.02 0.02 0 0 0 -0.006 -0.014l-0.085 -0.085a0.02 0.02 0 0 0 -0.014 -0.006 0.02 0.02 0 0 0 -0.014 0.006l-0.057 0.057L0.046 0.321a0.02 0.02 0 0 0 -0.006 0.014V0.42a0.02 0.02 0 0 0 0.02 0.02h0.085a0.02 0.02 0 0 0 0.015 -0.006l0.217 -0.219L0.434 0.16a0.024 0.024 0 0 0 0.004 -0.007 0.02 0.02 0 0 0 0 -0.005 0.014 0.014 0 0 0 0 -0.003ZM0.137 0.4H0.08v-0.057l0.199 -0.199 0.057 0.057ZM0.363 0.173l-0.057 -0.057 0.028 -0.028 0.056 0.056Z\"/></svg>\n                        </div>\n                        <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\" style=\"cursor: pointer;\">\n                            <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n            <div class=\"add-filter\" style=\"cursor: pointer; font-size: 14px;\" (click)=\"startAdd()\">\n                <div class=\"add-icon\">\n                    <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n                <div>{{'NEW_LIST_VIEW' | nxtCustomTranslate : 'New List View'}}</div>\n            </div>\n        </div>\n    </div>\n     <!-- SKS3MAY25 Add New List View-->\n    <div *ngIf=\"isModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header-div\" style=\"align-items: center;\">\n                <div style=\"align-items: center;\">\n                    {{ (isAdding ? 'ADD_NEW_LIST_VIEW' : 'EDIT_LIST_VIEW')  | nxtCustomTranslate : (isAdding ? 'Add New List View' : 'Edit List View') }} \n                </div>\n                <div class=\"close\" (click)=\"closeModal()\">&times;</div>\n            </div>\n            <form [formGroup]=\"editingView\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <div style=\"display: flex;\">\n                            <div>{{'NAME' | nxtCustomTranslate :'Name'}}</div>\n                            <div style=\"color: red; padding-left: 3px;\">*</div>\n                        </div>\n                        <input formControlName=\"filterName\" [placeholder]=\"'ENTER_LIST_VIEW_NAME' | nxtCustomTranslate : 'Enter list view name'\" required>\n                        <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n                            {{ 'NAME_IS_REQ' | nxtCustomTranslate : 'Name is required'}}.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <div>{{'ORDER' | nxtCustomTranslate : 'Order'}}</div>\n                        <input type=\"number\" formControlName=\"order\" [placeholder]=\" 'ENTER_DISPLAY_ORDER' | nxtCustomTranslate : 'Enter display order'\" required>\n                        <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n                            {{'ORDER_IS_REQ_AND_BE_A_NUM' | nxtCustomTranslate : 'Order is required and must be a number'}}.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <div>{{'DEFAULT_VIEW' | nxtCustomTranslate : 'Default View'}}</div>\n                        <div class=\"toggle-wrapper small\" style=\"line-height: 0px;\">\n                            <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\" style=\"line-height: 0px;\">\n                            <label for=\"isDefault\" class=\"toggle-button\" style=\"margin-bottom: 0px; display: flex;\"></label>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>{{'FILTERS' | nxtCustomTranslate : 'Filters'}}</h3>\n                    <div class=\"section-description\">{{'DEFINE_CONDITIONS_FOR_FILTERED_LIST_VIEW' | nxtCustomTranslate : 'Define conditions for filtered list view'}}</div>\n                </div>\n                <div formArrayName=\"conditions\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"column-cell\">{{'COLUMN' | nxtCustomTranslate : 'Column'}}</div>\n                        <div class=\"operator-cell\">{{'OPERATOR' | nxtCustomTranslate : 'Operator'}}</div>\n                        <div class=\"value-cell\">{{'VALUE' | nxtCustomTranslate : 'Value'}}</div>\n                        <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n                    </div>\n                    \n                    <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n                        <div class=\"column-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input formControlName=\"field\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" [placeholder]=\"'ENTER_OR_SELECT_COLUMN' | nxtCustomTranslate : 'Enter or select column'\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n                                    <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field.label)\">\n                                        {{ field.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n                                {{'COLUMN_IS_REQ' | nxtCustomTranslate : 'Column is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"operator-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input\n                                  [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n                                  (input)=\"onOperatorInput($event.target.value, i)\"\n                                  (focus)=\"onFocus('operator', i)\"\n                                  (blur)=\"onBlur('operator', i)\"\n                                  [placeholder]=\"'ENTER_OR_SELECT_OPERATOR' | nxtCustomTranslate : 'Enter or select operator'\"\n                                />\n                              \n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                  <div\n                                    *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n                                    class=\"dropdown-item\"\n                                    (click)=\"selectOption('operator', i, operator.value)\"\n                                  >\n                                    {{ operator.label }}\n                                  </div>\n                                </div>\n                              </div>                              \n                            <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n                                {{'OPERATOR_IS_REQ' | nxtCustomTranslate : 'Operator is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"value-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" [placeholder]=\"'ENTER_OR_SELECT_VALUE' | nxtCustomTranslate : 'Enter or select value'\">\n                                <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)?.length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n                                        {{ val }}\n                                    </div>\n                                </div>\n                            </div>\n                            <!-- <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n                                {{'VALUE_IS_REQUIRED' | nxtCustomTranslate : 'Value is required'}}.\n                            </div> -->\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n                                <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" [matTooltip]=\"'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <div>{{'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'}}</div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>{{'COLUMNS' | nxtCustomTranslate : 'Columns'}}</h3>\n                    <div class=\"section-description\">{{'SELECT_FIELD_TO_DISPLAY_IN_TABLE' | nxtCustomTranslate : 'Select field to display in table'}}</div>\n                </div>\n                <div formArrayName=\"columns\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"name-cell\">{{'COLUMN_NAME' | nxtCustomTranslate : 'Column Name'}}</div>\n                        <div class=\"bool-cell\">{{'SORTABLE' | nxtCustomTranslate : 'Sortable'}}</div>\n                        <div class=\"bool-cell\">{{'FILTERABLE' | nxtCustomTranslate :'Filterable'}}</div>\n                        <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n                    </div>\n                    \n                    <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n                        <div class=\"name-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input \n                                formControlName=\"name\" \n                                (focus)=\"onFocus('columnName', i)\" \n                                (blur)=\"onBlur('columnName', i)\" \n                                (input)=\"onManualInput($event.target.value, i)\"\n                                [placeholder]=\"'ENTER_OR_SELECT_COLUMN_NAME' | nxtCustomTranslate : 'Enter or select column name'\">\n                                 <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n                                        {{ colName.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n                                {{'COLUMN_NAME_IS_REQ' | nxtCustomTranslate : 'Column name is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n                                <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n                                <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n                                <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" [matTooltip]=\"'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <div>{{'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'}}</div>\n                    </div>\n                </div>\n                <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n                   {{'AT_LEAST_ONE_FILTER_OR_ONE_COLUMN_IS_REQ' | nxtCustomTranslate : ' At least one filter or one column is required'}}.\n                </div>                  \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">{{'SAVE' | nxtCustomTranslate : 'Save'}}</button>\n                    <button type=\"button\" (click)=\"closeModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <!-- SKS3MAY25 Delete List View-->\n    <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>{{'DELETE_LIST_VIEW' | nxtCustomTranslate : 'Delete List View'}}</h2>\n            <p>{{'ARE_YOU_SURE_YOU_WANT_TO_DELETE' | nxtCustomTranslate : 'Are you sure you want to delete'}} \"{{ viewToDelete?.filterName }}\"?</p>\n            <div class=\"form-delete\">\n                <button type=\"button\" (click)=\"deleteConfirmed()\">{{'DELETE' | nxtCustomTranslate : 'Delete'}}</button>\n                <button type=\"button\" (click)=\"closeDeleteModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:14px;font-weight:400;display:flex;gap:4px}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px}.dropdown-options-container{position:absolute;top:100%;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1b4}.dropdown-options li.selected{background-color:#ececec}.list-view-item{display:flex;font-size:14px;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#cce6ff35}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{padding-bottom:8px;padding-top:2px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px}.table-header{display:grid;background-color:#f8f9fa;font-weight:400;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.listview-custom-select{position:relative;width:100%}.listview-custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}.addIcon{padding:1px;border-radius:5px;background-color:#f5f5f5;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex}.delete-icon{display:flex;justify-content:center;align-items:center}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.delete-icon:hover svg path{stroke:#ff7575!important;fill:transparent!important}.edit-icon:hover svg path{fill:#007bff!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{min-width:0;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.listview-custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}.modal-header-div{display:flex;justify-content:space-between;font-size:18px;padding-bottom:10px}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.list-view-item{position:relative}.actions{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.list-view-item:hover .actions{display:flex;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i6.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: ListViewFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-list-view-filter', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, NxtCustomTranslatePipe, MatTooltipModule], providers: [NxtCustomTranslatePipe], template: "<div class=\"list-view-filter\" style=\"line-height: 0px;\">\n    <div class=\"custom-dropdown\">\n        <div *ngIf=\"title\" class=\"filter-label\">{{title}}</div>\n        <div class=\"select-wrapper\">\n            <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n                <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <div class=\"custom-dropdown\">\n                <div class=\"selected-option\" style=\"cursor: pointer;\" (click)=\"toggleDropdown()\">\n                    <div style=\"display: flex; align-items: center;\">\n                        {{ selectedViewPath || selectedView | nxtCustomTranslate : selectedView}}\n                    </div>\n                    <svg style=\"cursor: pointer;\" class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <!-- SKS3MAY25 list view Drop down-->\n        <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n            <ul class=\"dropdown-options\">\n                <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (click)=\"selectListView(view)\" class=\"list-view-item\" style=\"line-height: 1.5;\">\n                    <div class=\"view-name\">{{ view.labelPath || view.filterName | nxtCustomTranslate : view.filterName }}</div>\n                    <div *ngIf=\"!view.system\" class=\"actions\">\n                        <div  class=\"edit-icon\" (click)=\"startEdit(view, $event)\" style=\"cursor: pointer;\">\n                            <svg style=\"cursor: pointer;\" fill=\"#000000\" width=\"16px\" height=\"16px\" viewBox=\"0 0 0.48 0.48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.44 0.145a0.02 0.02 0 0 0 -0.006 -0.014l-0.085 -0.085a0.02 0.02 0 0 0 -0.014 -0.006 0.02 0.02 0 0 0 -0.014 0.006l-0.057 0.057L0.046 0.321a0.02 0.02 0 0 0 -0.006 0.014V0.42a0.02 0.02 0 0 0 0.02 0.02h0.085a0.02 0.02 0 0 0 0.015 -0.006l0.217 -0.219L0.434 0.16a0.024 0.024 0 0 0 0.004 -0.007 0.02 0.02 0 0 0 0 -0.005 0.014 0.014 0 0 0 0 -0.003ZM0.137 0.4H0.08v-0.057l0.199 -0.199 0.057 0.057ZM0.363 0.173l-0.057 -0.057 0.028 -0.028 0.056 0.056Z\"/></svg>\n                        </div>\n                        <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\" style=\"cursor: pointer;\">\n                            <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n            <div class=\"add-filter\" style=\"cursor: pointer; font-size: 14px;\" (click)=\"startAdd()\">\n                <div class=\"add-icon\">\n                    <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n                <div>{{'NEW_LIST_VIEW' | nxtCustomTranslate : 'New List View'}}</div>\n            </div>\n        </div>\n    </div>\n     <!-- SKS3MAY25 Add New List View-->\n    <div *ngIf=\"isModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header-div\">\n                {{ (isAdding ? 'ADD_NEW_LIST_VIEW' : 'EDIT_LIST_VIEW')  | nxtCustomTranslate : (isAdding ? 'Add New List View' : 'Edit List View') }} \n                <div class=\"close\" (click)=\"closeModal()\">&times;</div>\n            </div>\n            <form [formGroup]=\"editingView\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <div style=\"display: flex;\">{{'NAME' | nxtCustomTranslate :'Name'}}<div style=\"color: red; padding-left: 3px;\">*</div></div>\n                        <input formControlName=\"filterName\" [placeholder]=\"'ENTER_LIST_VIEW_NAME' | nxtCustomTranslate : 'Enter list view name'\" required>\n                        <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n                            {{ 'NAME_IS_REQ' | nxtCustomTranslate : 'Name is required'}}.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <div>{{'ORDER' | nxtCustomTranslate : 'Order'}}</div>\n                        <input type=\"number\" formControlName=\"order\" [placeholder]=\" 'ENTER_DISPLAY_ORDER' | nxtCustomTranslate : 'Enter display order'\" required>\n                        <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n                            {{'ORDER_IS_REQ_AND_BE_A_NUM' | nxtCustomTranslate : 'Order is required and must be a number'}}.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <div>{{'DEFAULT_VIEW' | nxtCustomTranslate : 'Default View'}}</div>\n                        <div class=\"toggle-wrapper small\">\n                            <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\">\n                            <label for=\"isDefault\" class=\"toggle-button\" style=\"margin-bottom: 0px; display: flex;\"></label>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>{{'FILTERS' | nxtCustomTranslate : 'Filters'}}</h3>\n                    <div class=\"section-description\">{{'DEFINE_CONDITIONS_FOR_FILTERED_LIST_VIEW' | nxtCustomTranslate : 'Define conditions for filtered list view'}}</div>\n                </div>\n                <div formArrayName=\"conditions\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"column-cell\">{{'COLUMN' | nxtCustomTranslate : 'Column'}}</div>\n                        <div class=\"operator-cell\">{{'OPERATOR' | nxtCustomTranslate : 'Operator'}}</div>\n                        <div class=\"value-cell\">{{'VALUE' | nxtCustomTranslate : 'Value'}}</div>\n                        <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n                    </div>\n                    \n                    <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n                        <div class=\"column-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input formControlName=\"field\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" [placeholder]=\"'ENTER_OR_SELECT_COLUMN' | nxtCustomTranslate : 'Enter or select column'\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n                                    <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field.label)\">\n                                        {{ field.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n                                {{'COLUMN_IS_REQ' | nxtCustomTranslate : 'Column is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"operator-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input\n                                  [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n                                  (input)=\"onOperatorInput($event.target.value, i)\"\n                                  (focus)=\"onFocus('operator', i)\"\n                                  (blur)=\"onBlur('operator', i)\"\n                                  [placeholder]=\"'ENTER_OR_SELECT_OPERATOR' | nxtCustomTranslate : 'Enter or select operator'\"\n                                />\n                              \n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                  <div\n                                    *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n                                    class=\"dropdown-item\"\n                                    (click)=\"selectOption('operator', i, operator.value)\"\n                                  >\n                                    {{ operator.label }}\n                                  </div>\n                                </div>\n                              </div>                              \n                            <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n                                {{'OPERATOR_IS_REQ' | nxtCustomTranslate : 'Operator is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"value-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" [placeholder]=\"'ENTER_OR_SELECT_VALUE' | nxtCustomTranslate : 'Enter or select value'\">\n                                <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)?.length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n                                        {{ val }}\n                                    </div>\n                                </div>\n                            </div>\n                            <!-- <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n                                {{'VALUE_IS_REQUIRED' | nxtCustomTranslate : 'Value is required'}}.\n                            </div> -->\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n                                <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" [matTooltip]=\"'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <div>{{'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'}}</div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>{{'COLUMNS' | nxtCustomTranslate : 'Columns'}}</h3>\n                    <div class=\"section-description\">{{'SELECT_FIELD_TO_DISPLAY_IN_TABLE' | nxtCustomTranslate : 'Select field to display in table'}}</div>\n                </div>\n                <div formArrayName=\"columns\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"name-cell\">{{'COLUMN_NAME' | nxtCustomTranslate : 'Column Name'}}</div>\n                        <div class=\"bool-cell\">{{'SORTABLE' | nxtCustomTranslate : 'Sortable'}}</div>\n                        <div class=\"bool-cell\">{{'FILTERABLE' | nxtCustomTranslate :'Filterable'}}</div>\n                        <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n                    </div>\n                    \n                    <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n                        <div class=\"name-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input \n                                formControlName=\"name\" \n                                (focus)=\"onFocus('columnName', i)\" \n                                (blur)=\"onBlur('columnName', i)\" \n                                (input)=\"onManualInput($event.target.value, i)\"\n                                [placeholder]=\"'ENTER_OR_SELECT_COLUMN_NAME' | nxtCustomTranslate : 'Enter or select column name'\">\n                                 <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n                                        {{ colName.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n                                {{'COLUMN_NAME_IS_REQ' | nxtCustomTranslate : 'Column name is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n                                <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n                                <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n                                <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" [matTooltip]=\"'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <div>{{'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'}}</div>\n                    </div>\n                </div>\n                <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n                   {{'AT_LEAST_ONE_FILTER_OR_ONE_COLUMN_IS_REQ' | nxtCustomTranslate : ' At least one filter or one column is required'}}.\n                </div>                  \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">{{'SAVE' | nxtCustomTranslate : 'Save'}}</button>\n                    <button type=\"button\" (click)=\"closeModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <!-- SKS3MAY25 Delete List View-->\n    <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>{{'DELETE_LIST_VIEW' | nxtCustomTranslate : 'Delete List View'}}</h2>\n            <p>{{'ARE_YOU_SURE_YOU_WANT_TO_DELETE' | nxtCustomTranslate : 'Are you sure you want to delete'}} \"{{ viewToDelete?.filterName }}\"?</p>\n            <div class=\"form-delete\">\n                <button type=\"button\" (click)=\"deleteConfirmed()\">{{'DELETE' | nxtCustomTranslate : 'Delete'}}</button>\n                <button type=\"button\" (click)=\"closeDeleteModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:14px;font-weight:400;display:flex;gap:4px}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px}.dropdown-options-container{position:absolute;top:100%;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1b4}.dropdown-options li.selected{background-color:#ececec}.list-view-item{display:flex;font-size:14px;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#cce6ff35}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{padding-bottom:8px;padding-top:2px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px}.table-header{display:grid;background-color:#f8f9fa;font-weight:400;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.listview-custom-select{position:relative;width:100%}.listview-custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}.addIcon{padding:1px;border-radius:5px;background-color:#f5f5f5;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex}.delete-icon{display:flex;justify-content:center;align-items:center}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.delete-icon:hover svg path{stroke:#ff7575!important;fill:transparent!important}.edit-icon:hover svg path{fill:#007bff!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{min-width:0;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.listview-custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}.modal-header-div{display:flex;justify-content:space-between;font-size:18px;padding-bottom:10px}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.list-view-item{position:relative}.actions{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.list-view-item:hover .actions{display:flex;gap:5px}\n"] }]
+            args: [{ selector: 'app-list-view-filter', standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, NxtCustomTranslatePipe, MatTooltipModule], providers: [NxtCustomTranslatePipe], template: "<div class=\"list-view-filter\">\n    <div class=\"custom-dropdown\">\n        <div *ngIf=\"title\" class=\"filter-label\">{{title}}</div>\n        <div class=\"select-wrapper\">\n            <svg class=\"filter-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <rect width=\"24\" height=\"24\" rx=\"5\" fill=\"#F1F1F1\" />\n                <path d=\"M5.51288 4.5H12.1879C12.7429 4.5 13.2004 4.9575 13.2004 5.5125V6.62249C13.2004 7.02749 12.9454 7.53 12.6979 7.785L10.5229 9.705C10.2229 9.96 10.0204 10.4625 10.0204 10.8675V13.0425C10.0204 13.3425 9.8179 13.7475 9.5629 13.905L8.85789 14.3625C8.19789 14.7675 7.29037 14.31 7.29037 13.5V10.8225C7.29037 10.47 7.08789 10.0125 6.88539 9.75751L4.96539 7.7325C4.71039 7.4775 4.5079 7.02749 4.5079 6.71999V5.5575C4.5004 4.9575 4.95788 4.5 5.51288 4.5Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M4.5 11.9999V14.2499C4.5 17.9999 6 19.4999 9.75 19.4999H14.25C18 19.4999 19.5 17.9999 19.5 14.2499V9.74994C19.5 7.40994 18.915 5.93993 17.5575 5.17493C17.175 4.95743 16.41 4.79243 15.7125 4.67993\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M12.75 12.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M11.25 15.75H16.5\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <div class=\"custom-dropdown\">\n                <div class=\"selected-option\" style=\"cursor: pointer;\" (click)=\"toggleDropdown()\">\n                    <div style=\"display: flex; align-items: center;\">\n                        {{ selectedViewPath || selectedView | nxtCustomTranslate : selectedView}}\n                    </div>\n                    <svg style=\"cursor: pointer;\" class=\"chevron-icon\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </div>\n        </div>\n        <!-- SKS3MAY25 list view Drop down-->\n        <div *ngIf=\"isDropdownOpen\" class=\"dropdown-options-container\">\n            <ul class=\"dropdown-options\">\n                <li *ngFor=\"let view of listViews\" [class.selected]=\"selectedView === view.filterName\" (click)=\"selectListView(view)\" class=\"list-view-item\" style=\"line-height: 1.5;\">\n                    <div class=\"view-name\">{{ view.labelPath || view.filterName | nxtCustomTranslate : view.filterName }}</div>\n                    <div *ngIf=\"!view.system\" class=\"actions\">\n                        <div  class=\"edit-icon\" (click)=\"startEdit(view, $event)\" style=\"cursor: pointer;\">\n                            <svg style=\"cursor: pointer;\" fill=\"#000000\" width=\"16px\" height=\"16px\" viewBox=\"0 0 0.48 0.48\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M0.44 0.145a0.02 0.02 0 0 0 -0.006 -0.014l-0.085 -0.085a0.02 0.02 0 0 0 -0.014 -0.006 0.02 0.02 0 0 0 -0.014 0.006l-0.057 0.057L0.046 0.321a0.02 0.02 0 0 0 -0.006 0.014V0.42a0.02 0.02 0 0 0 0.02 0.02h0.085a0.02 0.02 0 0 0 0.015 -0.006l0.217 -0.219L0.434 0.16a0.024 0.024 0 0 0 0.004 -0.007 0.02 0.02 0 0 0 0 -0.005 0.014 0.014 0 0 0 0 -0.003ZM0.137 0.4H0.08v-0.057l0.199 -0.199 0.057 0.057ZM0.363 0.173l-0.057 -0.057 0.028 -0.028 0.056 0.056Z\"/></svg>\n                        </div>\n                        <div class=\"delete-icon\" (click)=\"confirmDelete(view, $event)\" *ngIf=\"listViews.length > 1\" style=\"cursor: pointer;\">\n                            <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#000000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n            <div class=\"add-filter\" style=\"cursor: pointer; font-size: 14px;\" (click)=\"startAdd()\">\n                <div class=\"add-icon\">\n                    <svg style=\"cursor: pointer;\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n                <div>{{'NEW_LIST_VIEW' | nxtCustomTranslate : 'New List View'}}</div>\n            </div>\n        </div>\n    </div>\n     <!-- SKS3MAY25 Add New List View-->\n    <div *ngIf=\"isModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header-div\" style=\"align-items: center;\">\n                <div style=\"align-items: center;\">\n                    {{ (isAdding ? 'ADD_NEW_LIST_VIEW' : 'EDIT_LIST_VIEW')  | nxtCustomTranslate : (isAdding ? 'Add New List View' : 'Edit List View') }} \n                </div>\n                <div class=\"close\" (click)=\"closeModal()\">&times;</div>\n            </div>\n            <form [formGroup]=\"editingView\">\n                <div class=\"form-row\">\n                    <div class=\"form-group\">\n                        <div style=\"display: flex;\">\n                            <div>{{'NAME' | nxtCustomTranslate :'Name'}}</div>\n                            <div style=\"color: red; padding-left: 3px;\">*</div>\n                        </div>\n                        <input formControlName=\"filterName\" [placeholder]=\"'ENTER_LIST_VIEW_NAME' | nxtCustomTranslate : 'Enter list view name'\" required>\n                        <div *ngIf=\"editingView.get('filterName')?.invalid && (editingView.get('filterName')?.dirty || editingView.get('filterName')?.touched)\" class=\"error-message\">\n                            {{ 'NAME_IS_REQ' | nxtCustomTranslate : 'Name is required'}}.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <div>{{'ORDER' | nxtCustomTranslate : 'Order'}}</div>\n                        <input type=\"number\" formControlName=\"order\" [placeholder]=\" 'ENTER_DISPLAY_ORDER' | nxtCustomTranslate : 'Enter display order'\" required>\n                        <div *ngIf=\"editingView.get('order')?.invalid && (editingView.get('order')?.dirty || editingView.get('order')?.touched)\" class=\"error-message\">\n                            {{'ORDER_IS_REQ_AND_BE_A_NUM' | nxtCustomTranslate : 'Order is required and must be a number'}}.\n                        </div>\n                    </div>\n                    <div class=\"form-group\">\n                        <div>{{'DEFAULT_VIEW' | nxtCustomTranslate : 'Default View'}}</div>\n                        <div class=\"toggle-wrapper small\" style=\"line-height: 0px;\">\n                            <input type=\"checkbox\" formControlName=\"isDefault\" id=\"isDefault\" style=\"line-height: 0px;\">\n                            <label for=\"isDefault\" class=\"toggle-button\" style=\"margin-bottom: 0px; display: flex;\"></label>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>{{'FILTERS' | nxtCustomTranslate : 'Filters'}}</h3>\n                    <div class=\"section-description\">{{'DEFINE_CONDITIONS_FOR_FILTERED_LIST_VIEW' | nxtCustomTranslate : 'Define conditions for filtered list view'}}</div>\n                </div>\n                <div formArrayName=\"conditions\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"column-cell\">{{'COLUMN' | nxtCustomTranslate : 'Column'}}</div>\n                        <div class=\"operator-cell\">{{'OPERATOR' | nxtCustomTranslate : 'Operator'}}</div>\n                        <div class=\"value-cell\">{{'VALUE' | nxtCustomTranslate : 'Value'}}</div>\n                        <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n                    </div>\n                    \n                    <div *ngFor=\"let filter of conditions.controls; let i = index\" [formGroupName]=\"i\" class=\"filter-row\">\n                        <div class=\"column-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input formControlName=\"field\" [value]=\"getLabelByFieldName(conditions.at(i).get('field').value)\" (focus)=\"onFocus('field', i)\" (blur)=\"onBlur('field', i)\" [placeholder]=\"'ENTER_OR_SELECT_COLUMN' | nxtCustomTranslate : 'Enter or select column'\">\n                                <div class=\"dropdown-list\" *ngIf=\"isColumnDropdownOpen[i]\">\n                                    <div *ngFor=\"let field of getFilteredColumns(conditions.at(i).get('field').value)\" class=\"dropdown-item\" (click)=\"selectOption('field', i, field.label)\">\n                                        {{ field.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"filter.get('field')?.invalid && (filter.get('field')?.dirty || filter.get('field')?.touched)\" class=\"error-message\">\n                                {{'COLUMN_IS_REQ' | nxtCustomTranslate : 'Column is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"operator-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input\n                                  [value]=\"getOperatorLabel(conditions.at(i).get('operator').value)\"\n                                  (input)=\"onOperatorInput($event.target.value, i)\"\n                                  (focus)=\"onFocus('operator', i)\"\n                                  (blur)=\"onBlur('operator', i)\"\n                                  [placeholder]=\"'ENTER_OR_SELECT_OPERATOR' | nxtCustomTranslate : 'Enter or select operator'\"\n                                />\n                              \n                                <div class=\"dropdown-list\" *ngIf=\"isOperatorDropdownOpen[i]\">\n                                  <div\n                                    *ngFor=\"let operator of getFilteredOperators(operatorInput[i])\"\n                                    class=\"dropdown-item\"\n                                    (click)=\"selectOption('operator', i, operator.value)\"\n                                  >\n                                    {{ operator.label }}\n                                  </div>\n                                </div>\n                              </div>                              \n                            <div *ngIf=\"filter.get('operator')?.invalid && (filter.get('operator')?.dirty || filter.get('operator')?.touched)\" class=\"error-message\">\n                                {{'OPERATOR_IS_REQ' | nxtCustomTranslate : 'Operator is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"value-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input formControlName=\"value\" (focus)=\"onFocus('value', i)\" (blur)=\"onBlur('value', i)\" [placeholder]=\"'ENTER_OR_SELECT_VALUE' | nxtCustomTranslate : 'Enter or select value'\">\n                                <div class=\"dropdown-list\" *ngIf=\"isValueDropdownOpen[i] && getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)?.length > 0\">\n                                    <div *ngFor=\"let val of getPossibleValues(conditions.at(i).get('field').value, conditions.at(i).get('value').value)\" class=\"dropdown-item\" (click)=\"selectOption('value', i, val)\">\n                                        {{ val }}\n                                    </div>\n                                </div>\n                            </div>\n                            <!-- <div *ngIf=\"filter.get('value')?.invalid && (filter.get('value')?.dirty || filter.get('value')?.touched)\" class=\"error-message\">\n                                {{'VALUE_IS_REQUIRED' | nxtCustomTranslate : 'Value is required'}}.\n                            </div> -->\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n                                <div class=\"delete-icon\" (click)=\"removeFilter(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addFilter()\" [matTooltip]=\"'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <div>{{'ADD_FILTER' | nxtCustomTranslate : 'Add Filter'}}</div>\n                    </div>\n                </div>\n\n                <div class=\"section-header\">\n                    <h3>{{'COLUMNS' | nxtCustomTranslate : 'Columns'}}</h3>\n                    <div class=\"section-description\">{{'SELECT_FIELD_TO_DISPLAY_IN_TABLE' | nxtCustomTranslate : 'Select field to display in table'}}</div>\n                </div>\n                <div formArrayName=\"columns\" class=\"table-container\">\n                    <div class=\"table-header\">\n                        <div class=\"name-cell\">{{'COLUMN_NAME' | nxtCustomTranslate : 'Column Name'}}</div>\n                        <div class=\"bool-cell\">{{'SORTABLE' | nxtCustomTranslate : 'Sortable'}}</div>\n                        <div class=\"bool-cell\">{{'FILTERABLE' | nxtCustomTranslate :'Filterable'}}</div>\n                        <div class=\"action-cell\">{{'ACTION' | nxtCustomTranslate : 'Action'}}</div>\n                    </div>\n                    \n                    <div *ngFor=\"let field of columns.controls; let i = index\" [formGroupName]=\"i\" class=\"column-row\">\n                        <div class=\"name-cell\">\n                            <div class=\"listview-custom-select\">\n                                <input \n                                formControlName=\"name\" \n                                (focus)=\"onFocus('columnName', i)\" \n                                (blur)=\"onBlur('columnName', i)\" \n                                (input)=\"onManualInput($event.target.value, i)\"\n                                [placeholder]=\"'ENTER_OR_SELECT_COLUMN_NAME' | nxtCustomTranslate : 'Enter or select column name'\">\n                                 <div class=\"dropdown-list\" *ngIf=\"isColumnNameDropdownOpen[i]\">\n                                    <div *ngFor=\"let colName of getColumnColumns(columns.at(i).get('name').value)\" class=\"dropdown-item\" (click)=\"selectOption('columnName', i, colName.label); isColumnNameDropdownOpen[i] = false\">\n                                        {{ colName.label }}\n                                    </div>\n                                </div>\n                            </div>\n                            <div *ngIf=\"field.get('name')?.invalid && (field.get('name')?.dirty || field.get('name')?.touched)\" class=\"error-message\">\n                                {{'COLUMN_NAME_IS_REQ' | nxtCustomTranslate : 'Column name is required'}}.\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'sortable-' + i\" formControlName=\"sortable\">\n                                <label [for]=\"'sortable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"bool-cell\">\n                            <div class=\"toggle-wrapper small\">\n                                <input type=\"checkbox\" [id]=\"'filterable-' + i\" formControlName=\"filterable\">\n                                <label [for]=\"'filterable-' + i\" class=\"toggle-button\"></label>\n                            </div>\n                        </div>\n                        \n                        <div class=\"action-cell\">\n                            <div class=\"dicon-container\" [matTooltip]=\"'REMOVE' | nxtCustomTranslate : 'Remove'\">\n                                <div class=\"delete-icon\" (click)=\"removeColumn(i)\">\n                                    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                        <path d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                        <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    </svg>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <div class=\"add-row\">\n                        <div class=\"flex addIconBor cursor-pointer\" (click)=\"addColumn()\" [matTooltip]=\"'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'\">\n                            <div class=\"addIcon\">\n                                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path d=\"M8 3.33325V12.6666\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                    <path d=\"M3.33301 8H12.6663\" stroke=\"#007bff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                </svg>\n                            </div>\n                        </div>\n                        <div>{{'ADD_COLUMN' | nxtCustomTranslate : 'Add Column'}}</div>\n                    </div>\n                </div>\n                <div *ngIf=\"conditions.length === 0 && columns.length === 0\" class=\"error-message\">\n                   {{'AT_LEAST_ONE_FILTER_OR_ONE_COLUMN_IS_REQ' | nxtCustomTranslate : ' At least one filter or one column is required'}}.\n                </div>                  \n                <div class=\"form-actions\">\n                    <button type=\"button\" class=\"save-button\" (click)=\"save()\" [disabled]=\"!editingView.valid || (conditions.length === 0 && columns.length === 0)\">{{'SAVE' | nxtCustomTranslate : 'Save'}}</button>\n                    <button type=\"button\" (click)=\"closeModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n                </div>\n            </form>\n        </div>\n    </div>\n    <!-- SKS3MAY25 Delete List View-->\n    <div *ngIf=\"isDeleteModalOpen\" class=\"modal\">\n        <div class=\"modal-content\">\n            <h2>{{'DELETE_LIST_VIEW' | nxtCustomTranslate : 'Delete List View'}}</h2>\n            <p>{{'ARE_YOU_SURE_YOU_WANT_TO_DELETE' | nxtCustomTranslate : 'Are you sure you want to delete'}} \"{{ viewToDelete?.filterName }}\"?</p>\n            <div class=\"form-delete\">\n                <button type=\"button\" (click)=\"deleteConfirmed()\">{{'DELETE' | nxtCustomTranslate : 'Delete'}}</button>\n                <button type=\"button\" (click)=\"closeDeleteModal()\">{{'CANCEL' | nxtCustomTranslate : 'Cancel'}}</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".select-wrapper{display:flex;align-items:center;cursor:pointer}.custom-dropdown{position:relative;cursor:pointer;display:inline-block}.selected-option{padding:2px 5px;font-size:14px;font-weight:400;display:flex;gap:4px}.chevron-icon{cursor:pointer;background-color:#f5f5f5;border-radius:5px}.dropdown-options-container{position:absolute;top:100%;display:flex;flex-direction:column;border:1px solid #ccc;background:#fff;box-shadow:0 2px 8px #0000001a;z-index:1000;min-width:250px}.dropdown-options{background:#fff;list-style:none;padding:0;margin:0;white-space:nowrap;width:100%;max-height:300px;overflow-y:auto}.dropdown-options li{padding:8px;cursor:pointer}.dropdown-options li:hover{background-color:#f1f1f1b4}.dropdown-options li.selected{background-color:#ececec}.list-view-item{display:flex;font-size:14px;justify-content:space-between;padding:8px;cursor:pointer;border-bottom:1px solid #f0f0f0}.list-view-item:hover{background-color:#cce6ff35}.edit-icon,.delete-icon{cursor:pointer;color:#666;transition:color .2s}.edit-icon:hover{color:#007bff}.delete-icon:hover{color:#dc3545}.add-filter{background-color:#fff;padding:10px;border-top:1px solid #dddddd;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%}.add-filter:hover{background-color:#f8f9fa}.add-icon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.modal-content{background-color:#fff;border-radius:8px;padding:24px;width:700px;max-width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-content h2{margin-top:0;margin-bottom:20px;font-size:20px;color:#333}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.form-group input{width:100%;padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px}.toggle-wrapper{position:relative;display:inline-block}.toggle-wrapper input[type=checkbox]{opacity:0;width:0;height:0}.toggle-button{position:relative;display:inline-block;width:50px;height:24px;background-color:#ccc;border-radius:24px;transition:.3s;cursor:pointer}.toggle-button:before{position:absolute;content:\"\";height:20px;width:20px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:.3s}input[type=checkbox]:checked+.toggle-button{background-color:#007bff}input[type=checkbox]:checked+.toggle-button:before{transform:translate(20px)}.toggle-wrapper.small .toggle-button{width:40px;height:20px}.toggle-wrapper.small .toggle-button:before{height:16px;width:16px}input[type=checkbox]:checked+.toggle-button.small:before{transform:translate(20px)}.section-header{padding-bottom:8px;padding-top:2px}.section-header h3{margin:0 0 4px;font-size:16px;color:#333}.section-description{font-size:12px;color:#777}.table-container{border:1px solid #e0e0e0;border-radius:4px}.table-header{display:grid;background-color:#f8f9fa;font-weight:400;font-size:12px;padding:8px 12px;border-bottom:1px solid #e0e0e0}.filter-row,.column-row{display:grid;padding:8px 12px;border-bottom:1px solid #f0f0f0;align-items:center}.filter-row,.column-row,.table-header{grid-template-columns:1fr 1fr 1fr auto;gap:10px}.table-header.column-header{grid-template-columns:1fr 1fr 1fr auto}.column-cell,.operator-cell,.value-cell,.name-cell,.bool-cell,.action-cell{padding:5px}.action-cell{display:flex;justify-content:center}.listview-custom-select{position:relative;width:100%}.listview-custom-select input{border:none;font-size:12px}.dropdown-list{position:absolute;top:100%;left:0;width:100%;max-height:200px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-top:none;border-radius:0 0 4px 4px;z-index:10;box-shadow:0 4px 8px #0000001a}.dropdown-item{padding:8px 12px;cursor:pointer}.dropdown-item:hover{background-color:#f5f5f5}.add-row{display:flex;align-items:center;gap:8px;padding:10px;cursor:pointer}.add-row:hover{background-color:#f8f9fa}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIconBor:hover .addIcon{background-color:#c8d2ff}.addIcon{padding:1px;border-radius:5px;background-color:#f5f5f5;transition:background-color .3s}.dicon-container{padding:2px;border:1px solid #ffb5b5;border-radius:5px;margin-left:3px;margin-right:3px;display:flex}.delete-icon{display:flex;justify-content:center;align-items:center}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.delete-icon:hover svg path{stroke:#ff7575!important;fill:transparent!important}.edit-icon:hover svg path{fill:#007bff!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.form-delete{display:flex;justify-content:flex-end;gap:12px}.form-actions button,.form-delete button{padding:8px 16px;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .2s}.form-actions button:first-child{background-color:#007bff;color:#fff;border:1px solid #007bff}.form-actions button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-delete button:first-child{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.form-delete button:nth-child(2){background-color:#f8f9fa;border:1px solid #ddd;color:#333}.form-actions button:hover,.form-delete button:hover{opacity:.9}.cursor-pointer{cursor:pointer}.flex{display:flex}.form-row{display:flex;gap:16px;align-items:flex-start}.form-group{min-width:0;margin-bottom:0!important}.error-message{color:#dc3545;font-size:12px;margin-top:4px}.listview-custom-select input[readonly]{cursor:pointer;background-color:#fff}.error-message{color:#ff2c10;font-size:.875rem;margin-bottom:.5rem}.save-button:disabled{background-color:#ccc!important;color:#666!important;cursor:not-allowed!important}.modal-header-div{display:flex;justify-content:space-between;font-size:18px;padding-bottom:10px}.close{color:#aaa;float:right;font-size:28px;font-weight:700}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}.list-view-item{position:relative}.actions{display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%)}.list-view-item:hover .actions{display:flex;gap:5px}\n"] }]
         }], ctorParameters: () => [{ type: i6.FormBuilder }, { type: NxtCustomTranslatePipe }, { type: DataService }], propDecorators: { listViews: [{
                 type: Input
             }], tableData: [{
@@ -50876,7 +50894,6 @@ class NxtDatatable {
     dropdownActionButton; // for action column dropdown button
     currentOpenIndex = null; // track the current open action dropdown icon index
     clickListener; // action column dropdown button click listener for close a dropdown button
-    subscription; // for table data subscription
     deleteIndex; // to get the delete index
     showPopover = true;
     isSummaryColumn = false; // SKS20MAR25 Flag to check if the column is in the displycolumns array
@@ -50909,6 +50926,8 @@ class NxtDatatable {
     tableEditTrack = false;
     alignRight = false;
     selectedIsEmpty = true;
+    destroy$ = new Subject();
+    timers = [];
     constructor(countryService, storageService, cdRef, translationService, renderer, dataService, changeService) {
         this.countryService = countryService;
         this.storageService = storageService;
@@ -50953,9 +50972,15 @@ class NxtDatatable {
                         delete newItem.apiName;
                     }
                     if (newItem.fldType !== undefined) {
-                        newItem.type = newItem.fldType.toLowerCase();
+                        newItem.type = newItem?.fldType?.toLowerCase();
                         delete newItem.fldType;
                     }
+                    if (newItem?.question?.isHidden !== undefined && newItem?.question?.isHidden !== null) {
+                        newItem.isHide = newItem?.question?.isHidden;
+                    }
+                    if (this.question?.columnWidth) {
+                        newItem['width'] = this.columnWidthTrack[newItem.uniqueIdentifier || `${newItem.fieldName || 'column'}-${index}`] || newItem.width || 'auto'; // Set default width
+                    }
                     newItem['defaultValue'] = newItem?.question?.defaultValue || '';
                     newItem.uniqueIdentifier = newItem.uniqueIdentifier || `${newItem.fieldName || 'column'}-${index}`; // SKS10AUG25 uniqueIdentifier
                     return newItem;
@@ -50999,13 +51024,13 @@ class NxtDatatable {
             //SKS15FEB25 Initialize this in your data fetch method
             if (changes['data']) {
                 this.originalData = [...this.data]; // New reference
-                this.dataSource.data = this.originalData;
+                this.dataSource.data = this.prepareActionVisibility(this.originalData);
                 this.computeSummaryValues('onChange');
                 this.cdRef.markForCheck(); //SKS10AUG25 Trigger change detection
             }
             this.originalData = [...this.data];
             this.sFilterData = [...this.data];
-            this.dataSource.data = this.originalData;
+            this.dataSource.data = this.prepareActionVisibility(this.originalData);
             this.pageSize = this.tableParams?.pagination?.pageSize ? this.tableParams?.pagination['pageSize'] : this.pageSize || 10;
             this.pageIndex = this.tableParams?.pagination?.pageIndex ? this.tableParams?.pagination['pageIndex'] : this.pageIndex || 1;
             this.totalRecords = this.tableParams?.pagination?.['totalRecords'] ? this.tableParams?.pagination['totalRecords'] : undefined;
@@ -51027,7 +51052,7 @@ class NxtDatatable {
                     }
                 }
             }
-            this.inlineElement = Object.fromEntries(this.currentColumns.map(element => [element.fieldName, element?.defaultValue || ""]));
+            this.inlineElement = Object.fromEntries(this.currentColumns.map(element => [element.fieldName, element?.type === 'boolean' ? ((element?.defaultValue && element?.defaultValue == 'true') ? true : false) : (element?.defaultValue || "")]));
             this.dropdownActionButton = (this.actionButtonArray?.buttonArray && this.actionButtonArray?.buttonArray?.length > 0) ? this.actionButtonArray?.buttonArray?.slice(this.actionButtonArray?.size) : [];
             setTimeout(() => {
                 this.dataSource.sort = this.sort;
@@ -51188,11 +51213,11 @@ class NxtDatatable {
                 const pageSize = Number(this.pageSize) || 10;
                 const start = (pageIndex - 1) * pageSize;
                 const end = start + pageSize;
-                this.dataSource.data = this.data?.slice(start, end) || [];
+                this.dataSource.data = this.prepareActionVisibility(this.data?.slice(start, end) || []);
                 this.cdRef.markForCheck();
             }
             else if (!this.isPagination && !this.pagination) {
-                this.dataSource.data = this.data;
+                this.dataSource.data = this.prepareActionVisibility(this.data);
             }
         }
         // SKS16OCT25 for SummaryColumns value calculation
@@ -51202,7 +51227,9 @@ class NxtDatatable {
     }
     ngOnInit() {
         // SKS12SEP25 current currency code get from service
-        this.countryService.currentCurrencyOption$.subscribe(option => {
+        this.countryService.currentCurrencyOption$
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(option => {
             if (option) {
                 this.currencyOption = this.countryService.getCurrentCurrency();
                 this.cdRef.detectChanges();
@@ -51219,7 +51246,9 @@ class NxtDatatable {
         });
         // SKS13MAR25 get data from question if from formBuilder
         if (this.from === 'formBuilder' || this.from === 'questionBook') {
-            this.subscription = this.changeService.customChange$.subscribe((changeValue) => {
+            this.changeService.customChange$
+                .pipe(takeUntil$1(this.destroy$))
+                .subscribe(changeValue => {
                 if (changeValue == 'dataBind') {
                     this.ngOnChanges({});
                 }
@@ -51240,9 +51269,15 @@ class NxtDatatable {
                     delete newItem.apiName;
                 }
                 if (newItem.fldType !== undefined) {
-                    newItem.type = newItem.fldType.toLowerCase();
+                    newItem.type = newItem?.fldType?.toLowerCase();
                     delete newItem.fldType;
                 }
+                if (newItem?.question?.isHidden !== undefined && newItem?.question?.isHidden !== null) {
+                    newItem.isHide = newItem?.question?.isHidden;
+                }
+                if (this.question?.columnWidth) {
+                    newItem['width'] = this.columnWidthTrack[newItem.uniqueIdentifier || `${newItem.fieldName || 'column'}-${index}`] || newItem.width || 'auto'; // Set default width
+                }
                 newItem['defaultValue'] = newItem?.question?.defaultValue || '';
                 newItem.uniqueIdentifier = newItem.uniqueIdentifier || `${newItem.fieldName || 'column'}-${index}`; // Ensure uniqueIdentifier
                 return newItem;
@@ -51298,7 +51333,9 @@ class NxtDatatable {
                 this.apiMeta = typeof this.apiMeta === 'object' ? this.apiMeta : this.apiMeta ? JSON.parse(this.apiMeta) : null;
                 let apiObj = this.apiMeta;
                 if (apiObj && apiObj.endpoint) {
-                    this.dataService.apiResponse(apiObj.endpoint)?.subscribe((apiResponse) => {
+                    this.dataService.apiResponse(apiObj.endpoint)
+                        ?.pipe(takeUntil$1(this.destroy$))
+                        .subscribe(apiResponse => {
                         let responses;
                         if (apiObj.variable) {
                             // VD 22May24 - handling multiple child objects
@@ -51323,7 +51360,11 @@ class NxtDatatable {
                 let field = apiObj?.field; // VD 13MAY24 - dynamic field changes
                 if (apiObj?.sourceQuestionId || this.columnSourceId?.length > 0) {
                     // // VD 10May24 Subscribe for the changes
-                    this.subscription = this.changeService.changeAnnounced$.subscribe((changeValue) => {
+                    this.changeService.changeAnnounced$
+                        .pipe(takeUntil$1(this.destroy$))
+                        .subscribe(changeValue => {
+                        if (!changeValue)
+                            return;
                         if (changeValue != undefined) {
                             if (!apiObj?.isDependentField && changeValue.fromQuestionId && changeValue.valueObj !== undefined && (Array.isArray(apiObj?.sourceQuestionId) ? apiObj?.sourceQuestionId.includes(changeValue.fromQuestionId) : changeValue.fromQuestionId === apiObj?.sourceQuestionId)) {
                                 options = options.map((obj) => ({ ...obj, edit: false }));
@@ -51361,7 +51402,7 @@ class NxtDatatable {
                                 this.data = [...this.data];
                                 this.originalData = [...this.data];
                                 this.sFilterData = [...this.data];
-                                this.dataSource.data = this.originalData;
+                                this.dataSource.data = this.prepareActionVisibility(this.originalData);
                                 this.question.input = this.originalData;
                                 // SKS20MAR25 Manually trigger ngOnChanges
                                 this.ngOnChanges({});
@@ -51430,7 +51471,7 @@ class NxtDatatable {
         this.isPagination === undefined || this.isPagination === true ? this.isPagination = true : this.isPagination = false;
         this.isNosIndicator === undefined || this.isNosIndicator === true ? this.isNosIndicator = true : this.isNosIndicator = false;
         this.isEditable === undefined || this.isEditable === false ? this.isEditable = false : this.isEditable = true;
-        this.inlineElement = Object.fromEntries(this.currentColumns.map(element => [element.fieldName, element?.defaultValue || ""]));
+        this.inlineElement = Object.fromEntries(this.currentColumns.map(element => [element.fieldName, element?.type === 'boolean' ? ((element?.defaultValue && element?.defaultValue == 'true') ? true : false) : (element?.defaultValue || "")]));
         this.pageSize = this.tableParams?.pagination?.pageSize || 10;
         this.pageIndex = this.tableParams?.pagination?.pageIndex || 1;
         this.totalRecords = this.tableParams?.pagination?.['totalRecords'] ? this.tableParams?.pagination['totalRecords'] : undefined;
@@ -51438,7 +51479,7 @@ class NxtDatatable {
         this.dropdownActionButton = this.actionButtonArray?.buttonArray?.slice(this.actionButtonArray?.size);
         this.originalData = [...this.data];
         this.sFilterData = [...this.data];
-        this.dataSource.data = this.originalData;
+        this.dataSource.data = this.prepareActionVisibility(this.originalData);
         // SKS20MAR25 Check if the displycolumn's have a summary column
         if (this.summaryRows && this.summaryRows?.length > 0 && this.currentColumns.length > 0) {
             this.isFullTableSummaryRow = this.summaryRows[0].type === 'fullRow' || this.summaryRows[0].type === 'fullrow' ? true : false;
@@ -51554,9 +51595,10 @@ class NxtDatatable {
                 }))];
         }
         this.selection = new SelectionModel(true, []);
-        setTimeout(() => {
+        const t = window.setTimeout(() => {
             this.dataSource.sort = this.sort;
-        }, 0);
+        });
+        this.timers.push(t);
         this.totalCount = this.totalRecords || this.data?.length;
         this.filterTableNos = this.totalRecords || this.data?.length;
         const NxtDataTable = JSON.parse(localStorage.getItem('NxtDataTable'));
@@ -51568,11 +51610,11 @@ class NxtDatatable {
             var obj = {};
             const keys = Object.keys(this.inlineElement);
             keys.forEach((elementKey) => {
-                obj[elementKey] = this.inlineElement[elementKey] || '';
+                obj[elementKey] = typeof this.inlineElement[elementKey] === 'boolean' ? (this.inlineElement[elementKey] ? true : false) : (this.inlineElement[elementKey] || '');
             });
             this.data.push(obj);
             const data = this.data;
-            this.dataSource.data = data;
+            this.dataSource.data = this.prepareActionVisibility(data);
             this.selection?.select(this.data[this.data.length - 1]);
             if (this.data.length > 0) {
                 this.data[this.data.length - 1].editRow = true;
@@ -51621,27 +51663,30 @@ class NxtDatatable {
         else if (lang && lang !== '') {
             this.languageCode = lang;
         }
-        this.translationService.translationsLoaded$.subscribe(() => {
-            this.cdRef.detectChanges(); // Force pipe re-evaluation
+        this.translationService.translationsLoaded$
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(() => {
+            this.cdRef.markForCheck();
         });
         if (!this.pagination && this.data && this.isPagination && !this.tableParams?.tableSearch?.value) {
             const pageIndex = Number(this.pageIndex) || 0;
             const pageSize = Number(this.pageSize) || 10;
             const start = (pageIndex - 1) * pageSize;
             const end = start + pageSize;
-            this.dataSource.data = this.data?.slice(start, end) || [];
+            this.dataSource.data = this.prepareActionVisibility(this.data?.slice(start, end) || []);
             this.cdRef.markForCheck();
         }
         else if (!this.isPagination) {
-            this.dataSource.data = this.data;
+            this.dataSource.data = this.prepareActionVisibility(this.data);
         }
         this.summaryRows?.length > 0 ? this.computeSummaryValues('onChange') : ''; // Compute per-row summary columns first
     }
     ngAfterViewInit() {
-        setTimeout(() => {
+        const t = window.setTimeout(() => {
             this.autoDistributeExtraTableWidth();
             this.cdRef.markForCheck();
         });
+        this.timers.push(t);
     }
     autoDistributeExtraTableWidth() {
         const tableWrapper = document.querySelector('.table-container');
@@ -51717,6 +51762,9 @@ class NxtDatatable {
         document.removeEventListener('mouseup', this.onResizeEnd);
     };
     ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.timers.forEach(t => clearTimeout(t));
         document.removeEventListener('mousemove', this.onResizeMove);
         document.removeEventListener('mouseup', this.onResizeEnd);
     }
@@ -51802,17 +51850,17 @@ class NxtDatatable {
                 });
                 return newRow;
             });
-            this.dataSource.data = this.data;
+            this.dataSource.data = this.prepareActionVisibility(this.data);
             if (this.data && this.isPagination) {
                 const pageIndex = Number(this.pageIndex) || 0;
                 const pageSize = Number(this.pageSize) || 10;
                 const start = (pageIndex - 1) * pageSize;
                 const end = start + pageSize;
-                this.dataSource.data = this.data?.slice(start, end) || [];
+                this.dataSource.data = this.prepareActionVisibility(this.data?.slice(start, end) || []);
                 this.cdRef.markForCheck();
             }
             else if (!this.isPagination) {
-                this.dataSource.data = this.data;
+                this.dataSource.data = this.prepareActionVisibility(this.data);
             }
         }
     }
@@ -52003,8 +52051,8 @@ class NxtDatatable {
                     }
                     else if (typeof valueA === 'string' && typeof valueB === 'string') {
                         // Handle string comparison
-                        valueA = valueA.toLowerCase();
-                        valueB = valueB.toLowerCase();
+                        valueA = valueA?.toLowerCase();
+                        valueB = valueB?.toLowerCase();
                     }
                     // Compare values
                     if (valueA < valueB) {
@@ -52022,7 +52070,7 @@ class NxtDatatable {
                 const pageSize = Number(this.pageSize) || 10;
                 const start = (pageIndex - 1) * pageSize;
                 const end = start + pageSize;
-                this.dataSource.data = [...data?.slice(start, end)];
+                this.dataSource.data = this.prepareActionVisibility([...data?.slice(start, end)]);
                 this.cdRef.markForCheck();
             }
             else {
@@ -52030,7 +52078,7 @@ class NxtDatatable {
                 const pageSize = Number(this.pageSize) || 10;
                 const start = (pageIndex - 1) * pageSize;
                 const end = start + pageSize;
-                this.dataSource.data = this.filterBoxData ? this.filterBoxData?.slice(start, end) || [] : this.data?.slice(start, end) || [];
+                this.dataSource.data = this.prepareActionVisibility(this.filterBoxData ? this.filterBoxData?.slice(start, end) || [] : this.data?.slice(start, end) || []);
                 this.cdRef.markForCheck();
             }
         }
@@ -52084,13 +52132,13 @@ class NxtDatatable {
         this.pageSize = event?.pageSize || this.pageSize;
         this.filterTableNos = this.filterBoxData?.length;
         if (this.from === 'formBuilder' || this.from === 'questionBook')
-            this.dataSource.data = this.filterBoxData = this.data;
+            this.prepareActionVisibility(this.dataSource.data = this.filterBoxData = this.data);
         if (!this.pagination) {
             if (from !== 'onChange')
                 this.applyFilter(this.searchBoxValue, 'pageParams');
             const start = (Number(this.pageIndex) - 1) * Number(this.pageSize);
             const end = start + Number(this.pageSize);
-            this.dataSource.data = this.filterBoxData?.slice(start, end);
+            this.dataSource.data = this.prepareActionVisibility(this.filterBoxData?.slice(start, end));
             this.computeSummaryValues(from);
         }
         if (from !== 'onChange')
@@ -52104,21 +52152,21 @@ class NxtDatatable {
             const pipe = new NxtDatePipe();
             return pipe.transform(value, 'mediumDate', this.languageCode, col.calendarType || 'gregorian')?.toLowerCase() ?? '';
         }
-        return String(value).toLowerCase();
+        return String(value)?.toLowerCase();
     }
     // SKS15FEB25 apply search bar filter using mat
     applyFilter(event, from) {
-        let filterValue = event ? event.trim().toLowerCase() : '';
+        let filterValue = event ? event?.trim()?.toLowerCase() : '';
         this.searchBoxValue = event ? event.trim() : '';
         if (!filterValue) {
-            this.dataSource.data = this.originalData;
+            this.dataSource.data = this.prepareActionVisibility(this.originalData);
         }
         else if (!this.pagination) {
-            this.dataSource.data = this.originalData.filter(item => this.currentColumns.some(column => {
+            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')
@@ -52128,7 +52176,7 @@ class NxtDatatable {
             this.totalCount = this.data.length;
             const start = (Number(this.pageIndex) - 1) * Number(this.pageSize);
             const end = start + Number(this.pageSize);
-            this.dataSource.data = this.dataSource.data?.slice(start, end);
+            this.dataSource.data = this.prepareActionVisibility(this.dataSource.data?.slice(start, end));
             this.filterRetain(from === 'onChange' ? this.tableParams?.searchFilterData || this.filterDataArray : this.filterDataArray, from);
         }
         else {
@@ -52166,7 +52214,7 @@ class NxtDatatable {
                 this.dataSource.data.forEach((row) => this.selection?.select(row));
                 const obj = {};
                 Object.keys(this.inlineElement).forEach(key => {
-                    obj[key] = this.inlineElement[key] ?? '';
+                    obj[key] = typeof this.inlineElement[key] === 'boolean' ? (this.inlineElement[key] ? true : false) : (this.inlineElement[key] || '');
                 });
                 const isTrue = !!this.selection?.selected?.length && this.selection.selected.every(row => this.isSameRow(row, obj));
                 this.selectedIsEmpty = isTrue;
@@ -52186,7 +52234,7 @@ class NxtDatatable {
         }
         const obj = {};
         Object.keys(this.inlineElement).forEach(key => {
-            obj[key] = this.inlineElement[key] ?? '';
+            obj[key] = typeof this.inlineElement[key] === 'boolean' ? (this.inlineElement[key] ? true : false) : (this.inlineElement[key] || '');
         });
         const isTrue = !!this.selection?.selected?.length && this.selection.selected.every(row => this.isSameRow(row, obj));
         this.selectedIsEmpty = isTrue;
@@ -52244,7 +52292,7 @@ class NxtDatatable {
         this.filterBoxData = this.data;
         this.filterTableNos = this.filterBoxData?.length;
         if (!this.pagination) {
-            this.dataSource.data = this.data?.slice(start, end);
+            this.dataSource.data = this.prepareActionVisibility(this.data?.slice(start, end));
         }
         this.data = this.originalData;
         this.sortData(this.currentSortColumn, this.currentSortDirection, undefined, from);
@@ -52283,7 +52331,7 @@ class NxtDatatable {
             // SKS18SEP25 Remove it from originalData (full dataset)
             this.originalData = this.originalData.filter(item => item !== target);
             // Also update the paginated dataSource
-            this.dataSource.data = this.dataSource.data.filter((_, i) => i !== index);
+            this.dataSource.data = this.prepareActionVisibility(this.dataSource.data.filter((_, i) => i !== index));
             // SKS18SEP25 Keep synced data copy if needed
             this.data = this.originalData;
             this.computeSummaryValues();
@@ -52373,7 +52421,7 @@ class NxtDatatable {
             var obj = {};
             const keys = Object.keys(element);
             keys.forEach((elementKey) => {
-                obj[elementKey] = element[elementKey] || '';
+                obj[elementKey] = typeof element[elementKey] === 'boolean' ? (element[elementKey] ? true : false) : (element[elementKey] || '');
             });
             // SKS20MAR25 Compute summary columns for the new row
             if (this.summaryColumns && this.summaryColumns.length > 0) {
@@ -52402,7 +52450,7 @@ class NxtDatatable {
             }
             const newData = [...this.data, obj]; // New reference
             this.data = newData;
-            this.dataSource.data = newData;
+            this.dataSource.data = this.prepareActionVisibility(newData);
             this.originalData = newData;
             if (this.stickyColumn === true && this.currentColumns) {
                 this.stickyCondition = this.currentColumns?.length;
@@ -52417,10 +52465,10 @@ class NxtDatatable {
             const start = (Number(this.pageIndex) - 1) * Number(this.pageSize);
             const end = start + Number(this.pageSize);
             if (!this.isPagination) {
-                this.dataSource.data = this.data;
+                this.dataSource.data = this.prepareActionVisibility(this.data);
             }
             else {
-                this.dataSource.data = this.data?.slice(start, end);
+                this.dataSource.data = this.prepareActionVisibility(this.data?.slice(start, end));
             }
             this.selection?.select(this.data[this.data.length - 1]);
             if (this.data.length > 0) {
@@ -52436,18 +52484,65 @@ class NxtDatatable {
             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 } });
     }
     // SKS15FEB25 Action button conditionally displayed function
-    isConditionMet(element, conditions) {
-        if (conditions !== undefined) {
-            const { andConditionList, orConditionList } = conditions;
-            //  If andConditionList exists, check that all conditions are met
-            const isAndConditionMet = andConditionList ? andConditionList.every((cond) => cond.condition.includes(element[cond.column])) : true; //  If no andConditionList, consider it as always met
-            //  If orConditionList exists, check if at least one condition is met
-            const isOrConditionMet = orConditionList ? orConditionList.some((cond) => cond.condition.includes(element[cond.column])) : true; //  If no orConditionList, consider it as always met
-            //  Return true if the AND condition is met and the OR condition is met
-            return isAndConditionMet && isOrConditionMet;
+    prepareActionVisibility(rows) {
+        if (!this.actionButtonArray?.buttonArray || this.actionButtonArray?.buttonArray?.length === 0) {
+            return rows;
         }
         else {
+            if (!this.actionButtonArray?.buttonArray?.some(element => element.condition)) {
+                return rows;
+            }
+        }
+        return rows.map(row => ({
+            ...row,
+            _actions: this.actionButtonArray?.buttonArray?.reduce((acc, btn) => {
+                acc[btn.name] = btn.condition
+                    ? this.evaluateConditionString(row, btn.condition)
+                    : true;
+                return acc;
+            }, {})
+        }));
+    }
+    evaluateConditionString(row, condition) {
+        if (!condition)
             return true;
+        const variableRegex = /\b[a-zA-Z_]\w*(?:\.[a-zA-Z_]\w*)*\b/g;
+        // Split condition into quoted & non-quoted parts
+        const parts = condition.split(/('(?:\\'|[^'])*')/g);
+        const expr = parts
+            .map(part => {
+            // If it's a quoted string → DO NOT TOUCH
+            if (part.startsWith("'") && part.endsWith("'")) {
+                return part;
+            }
+            // Replace variables only outside strings
+            return part.replace(variableRegex, (match) => {
+                if (['true', 'false', 'null', 'undefined'].includes(match)) {
+                    return match;
+                }
+                const value = this.dataService.getValue(row, match);
+                if (typeof value === 'string') {
+                    return `'${value.replace(/'/g, "\\'")}'`;
+                }
+                if (value === undefined || value === null) {
+                    return 'undefined';
+                }
+                return String(value);
+            });
+        })
+            .join('');
+        // Security check
+        if (!/^[\w\s'"!=&|().<>-]+$/.test(expr)) {
+            console.warn('Blocked unsafe expression:', expr);
+            return false;
+        }
+        try {
+            // eslint-disable-next-line no-new-func
+            return Function(`"use strict"; return (${expr});`)();
+        }
+        catch (e) {
+            console.error('Condition evaluation failed:', expr, e);
+            return false;
         }
     }
     // SKS15FEB25 config search filter box function
@@ -52596,7 +52691,7 @@ class NxtDatatable {
         const updatedElement = this.updateValue(element, column, value);
         const obj = {};
         Object.keys(this.inlineElement).forEach(key => {
-            obj[key] = this.inlineElement[key] ?? '';
+            obj[key] = typeof this.inlineElement[key] === 'boolean' ? (this.inlineElement[key] ? true : false) : (this.inlineElement[key] || '');
         });
         if (!this.isSameRow(updatedElement, obj)) {
             this.tableEditTrack = true;
@@ -52627,7 +52722,7 @@ class NxtDatatable {
         }
         const newData = [...this.dataSource.data]; // Create new array
         newData[index] = updatedElement;
-        this.dataSource.data = newData; // Assign new reference
+        this.dataSource.data = this.prepareActionVisibility(newData); // Assign new reference
         // SKS28NOV25 Update full data
         const absoluteIndex = ((this.pageIndex - 1) * this.pageSize) + index;
         const fullData = [...this.data];
@@ -52764,7 +52859,7 @@ class NxtDatatable {
     }
     // SKS10AUG25 discard function if single field is enable
     discardChanges() {
-        this.dataSource.data = this.originalData = this.data = this.question.input = this.oldTableData;
+        this.dataSource.data = this.prepareActionVisibility(this.originalData = this.data = this.question.input = this.oldTableData);
         this.mode = 'view'; // Switch back to view mode
         this.viewEdit = false;
         this.cdRef.markForCheck();
@@ -52820,12 +52915,12 @@ class NxtDatatable {
         const end = start + Number(this.pageSize);
         this.filterBoxData = this.data;
         this.filterTableNos = this.filterBoxData?.length;
-        this.dataSource.data = this.data?.slice(start, end);
+        this.dataSource.data = this.prepareActionVisibility(this.data?.slice(start, end));
         this.originalData = this.data;
         this.sortData(this.currentSortColumn, this.currentSortDirection, undefined, from);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", 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.18", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", summaryValues: "summaryValues", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", 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" }, 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\"\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]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '247px' : '100px' }\"\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 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\"\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\" [style.width]=\"column.width || '50px'\">\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: 14px;\">\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 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 || '50px')\"\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\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\"  [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '' ? '' : (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)\">\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                                                <!-- 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                                                    <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2713</span>\n                                                    <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span>                                                                                                    \n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'list'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <a \n                                                          [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n                                                          (click)=\"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}\" (click)=\"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}\" (click)=\"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}\" (click)=\"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\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></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=\"isConditionMet(element, button.conditions)\"\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=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | 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 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)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\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                                        class=\"non-summary-table-cell 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 ) ? 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) && 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\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>", 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 12px;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:14px;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;background:#dfdfdf;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}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "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"], 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.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$1.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"], 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: 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", "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.18", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", summaryValues: "summaryValues", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", 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" }, 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\"\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]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '247px' : '100px' }\"\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 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: 14px;\">\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 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\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\"  [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '' ? '' : (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)\">\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                                                <!-- 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                                                    <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2713</span>\n                                                    <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span>                                                                                                    \n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'list'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <a \n                                                          [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n                                                          (click)=\"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}\" (click)=\"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}\" (click)=\"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}\" (click)=\"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\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></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 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)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\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                                        class=\"non-summary-table-cell 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) && 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\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>", 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 12px;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:14px;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;background:#dfdfdf;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}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "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"], 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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i5.JsonPipe, name: "json" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.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$1.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"], 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: 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", "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.18", ngImport: i0, type: NxtDatatable, decorators: [{
@@ -52851,7 +52946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         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\"\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]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '247px' : '100px' }\"\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 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\"\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\" [style.width]=\"column.width || '50px'\">\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: 14px;\">\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 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 || '50px')\"\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\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\"  [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '' ? '' : (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)\">\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                                                <!-- 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                                                    <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2713</span>\n                                                    <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span>                                                                                                    \n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'list'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <a \n                                                          [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n                                                          (click)=\"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}\" (click)=\"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}\" (click)=\"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}\" (click)=\"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\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></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=\"isConditionMet(element, button.conditions)\"\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=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | 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 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)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\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                                        class=\"non-summary-table-cell 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 ) ? 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) && 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\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>", 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 12px;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:14px;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;background:#dfdfdf;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}\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: 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\"\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]=\"{ maxHeight: isPagination ? (tableHeight || '450px') : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' && from !== 'questionBook' ? '0px' : searchFilter ? '247px' : '100px' }\"\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 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: 14px;\">\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 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\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\"  [value]=\"(element | getValue: column.fieldName : undefined : undefined : 'table') === '' ? '' : (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)\">\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                                                <!-- 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                                                    <span *ngIf=\"(element | getValue: column.fieldName) === true || (element | getValue: column.fieldName) === 'true'\" style=\"color: #868686;\">\u2713</span>\n                                                    <span *ngIf=\"(element | getValue: column.fieldName) !== true && (element | getValue: column.fieldName) !== 'true'\" style=\"color: #868686;\">\u2718</span>                                                                                                    \n                                                </ng-container>\n                                                <ng-container *ngSwitchCase=\"'list'\">\n                                                    <div class=\"ellipsis view-mode-text\">\n                                                        <a \n                                                          [ngClass]=\"{'hyperlink-input': column.hyperLink}\" \n                                                          (click)=\"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}\" (click)=\"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}\" (click)=\"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}\" (click)=\"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\"> <a [ngClass]=\"{'hyperlink-input': column.hyperLink}\" (click)=\"column.hyperLink ? onClickHyperlink(column.fieldName,element, column.hyperLink) : ''\">{{element | getValue: column.fieldName}}</a></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 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)=\"summaryValues[row.fieldName] = $event.value.valueObj ; computeSummaryValues()\"\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                                        class=\"non-summary-table-cell 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) && 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\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>", 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 12px;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:14px;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;background:#dfdfdf;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}\n"] }]
         }], ctorParameters: () => [{ type: CountryService }, { type: StorageService }, { type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
                 type: Input
             }], summaryValues: [{
@@ -57189,6 +57284,7 @@ class QuestionbookComponent {
     subQuestions;
     selectedFileData = [];
     loadComponent$ = new BehaviorSubject(false);
+    destroy$ = new Subject();
     // HA 28DEC23 Added styling and logics to load the book type questions 
     qbRef;
     //  HA 19DEC23 Declaration for Salesforce Styling
@@ -57221,6 +57317,7 @@ class QuestionbookComponent {
     alignImage = 'center';
     isImageHover = false;
     currencyOption;
+    processed = false;
     hadleDropDownDependent = new EventEmitter();
     // VD 06Sep24 calendar changes
     handleCalendarDate = new EventEmitter();
@@ -57235,8 +57332,10 @@ class QuestionbookComponent {
         // VD 13Sep24 changes
         this.processData();
         // VD sep1324 changes - process data when databind value change
-        this.subscription = this.changeService.customChange$.subscribe((changeValue) => {
-            if (changeValue == 'dataBind') {
+        this.changeService.customChange$
+            .pipe(takeUntil$1(this.destroy$))
+            .subscribe(changeValue => {
+            if (changeValue === 'dataBind') {
                 this.processData();
                 this.ngAfterViewInit();
             }
@@ -57246,7 +57345,9 @@ class QuestionbookComponent {
         // SKS20MAR25 Ensure the child component is available before calling the method
         // AP-26MAR25 Ensure ques.subText is always an object by parsing it if it's a string
         //  AP-28MAR25 Add Boolean
-        setTimeout(() => {
+        Promise.resolve().then(() => {
+            if (!this.questions)
+                return;
             this.questions.forEach(ques => {
                 ques['subText'] = typeof ques?.subText === 'object' ? ques?.subText : ques?.subText ? JSON.parse(ques['subText']) : {};
                 let apiObj = ques.subText;
@@ -57384,6 +57485,9 @@ class QuestionbookComponent {
     // VD 13Sep24 changes
     // RS 09DEC24 Changed keys
     processData() {
+        if (this.processed)
+            return;
+        this.processed = true;
         //  HA 19DEC23 Logic for Question Book Styling(Slaesforce)
         // HA 09FEB24 Added ternary
         if (this.qbItem?.style) {
@@ -57471,7 +57575,9 @@ class QuestionbookComponent {
                     element.isHidden = true;
                 }
                 // VD 07Aug24 - isDependentField change
-                this.subscription = this.changeService.changeAnnounced$.subscribe((changeValue) => {
+                this.changeService.changeAnnounced$
+                    .pipe(takeUntil$1(this.destroy$))
+                    .subscribe((changeValue) => {
                     // VD 20Aug24 - isDependentField change
                     if (changeValue != undefined && dependencyObj.isDependentField) {
                         if (changeValue.fromQuestionId && changeValue.valueObj !== undefined && (Array.isArray(dependencyObj.sourceQuestionId) ? dependencyObj.sourceQuestionId.includes(changeValue.fromQuestionId) : changeValue.fromQuestionId === dependencyObj.sourceQuestionId)) {
@@ -57830,15 +57936,20 @@ class QuestionbookComponent {
     closeModal() {
         this.isImageEdit = false;
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.loadComponent$.complete();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: QuestionbookComponent, deps: [{ token: DataService }, { token: ChangeService }, { token: StorageService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"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','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                    <!-- SKS25MAR25 Image -->\n                    <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                        (mouseleave)=\"isImageHover = false;\" [class]=\"ques?.style?.inputClass\">\n                        <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                            <i *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                            <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" 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=\"ques.isReadOnly\" [style.width.px]=\"ques.imageSize.width\"\n                        [style.height.px]=\"ques.imageSize.height\" [src]=\"ques.imageData\" />\n                        <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"ques.input\">\n                                <img [src]=\"ques.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!ques.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(ques, $event)\" style=\"display: none;\" />\n                            </div>\n                        </div>\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\"\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                    <!-- // 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                    </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                        [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\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\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\" [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\n            <!-- Controls -->\n            <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n                    title=\"Flip Horizontally\">\u2194</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n                    title=\"Flip Vertically\">\u2195</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n            </div>\n        </div>\n    </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}\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"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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", "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: 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"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "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"], 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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", 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" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"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','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                    <!-- SKS25MAR25 Image -->\n                    <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                        (mouseleave)=\"isImageHover = false;\" [class]=\"ques?.style?.inputClass\">\n                        <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                            <i *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                            <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" 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=\"ques.isReadOnly\" [style.width.px]=\"ques.imageSize.width\"\n                        [style.height.px]=\"ques.imageSize.height\" [src]=\"ques.imageData\" />\n                        <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"ques.input\">\n                                <img [src]=\"ques.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!ques.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(ques, $event)\" style=\"display: none;\" />\n                            </div>\n                        </div>\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\"\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                    <!-- // 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                    </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                        [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\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\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\" [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\n            <!-- Controls -->\n            <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n                    title=\"Flip Horizontally\">\u2194</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n                    title=\"Flip Vertically\">\u2195</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n            </div>\n        </div>\n    </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}\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"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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", "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: 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"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "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"], 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.18", ngImport: i0, type: QuestionbookComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-questionbook', standalone: true, imports: [
                         CommonModule,
                         FormsModule, ImageCropperComponent, NxtFileUpload, NxtRadio, nxtDropdown, NxtButtonComponent, NxtSearchBox, NxtDatatable, CustomModelComponent, CustomCalendarComponent, MatTooltipModule, NxtInput, IconSelectorComponent, NxtCustomTranslatePipe
-                    ], template: "<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"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','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                    <!-- SKS25MAR25 Image -->\n                    <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                        (mouseleave)=\"isImageHover = false;\" [class]=\"ques?.style?.inputClass\">\n                        <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                            <i *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                            <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" 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=\"ques.isReadOnly\" [style.width.px]=\"ques.imageSize.width\"\n                        [style.height.px]=\"ques.imageSize.height\" [src]=\"ques.imageData\" />\n                        <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"ques.input\">\n                                <img [src]=\"ques.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!ques.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(ques, $event)\" style=\"display: none;\" />\n                            </div>\n                        </div>\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\"\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                    <!-- // 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                    </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                        [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\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\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\" [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\n            <!-- Controls -->\n            <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n                    title=\"Flip Horizontally\">\u2194</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n                    title=\"Flip Vertically\">\u2195</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n            </div>\n        </div>\n    </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}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"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','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                    <!-- SKS25MAR25 Image -->\n                    <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                        (mouseleave)=\"isImageHover = false;\" [class]=\"ques?.style?.inputClass\">\n                        <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                            <i *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                            <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" 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=\"ques.isReadOnly\" [style.width.px]=\"ques.imageSize.width\"\n                        [style.height.px]=\"ques.imageSize.height\" [src]=\"ques.imageData\" />\n                        <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"ques.input\">\n                                <img [src]=\"ques.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!ques.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(ques, $event)\" style=\"display: none;\" />\n                            </div>\n                        </div>\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\"\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                    <!-- // 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                    </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                        [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\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\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\" [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\n            <!-- Controls -->\n            <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n                    title=\"Flip Horizontally\">\u2194</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n                    title=\"Flip Vertically\">\u2195</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n            </div>\n        </div>\n    </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}\n"] }]
         }], ctorParameters: () => [{ type: DataService }, { type: ChangeService }, { type: StorageService }], propDecorators: { qbItem: [{
                 type: Input
             }], questionItem: [{
@@ -57942,6 +58053,7 @@ class BookletComponent {
     //AP-19MAY25 - Accessing the QuestionbookComponent instance using ViewChild reference
     questionbookComponent;
     stickyBar;
+    destroy$ = new Subject();
     scrollHandler = (event) => { };
     constructor(sfService, dataService, storageService, sanitizer, changeService, http, translationService, ngZone, cdr) {
         this.sfService = sfService;
@@ -57965,12 +58077,10 @@ class BookletComponent {
         this.translationService.setLanguage(this.languageCode);
         if (this.bookletJSON?.translationMap)
             this.translationService.updateTranslations(this.bookletJSON.translationMap);
-        this.subscription = this.changeService.changeAnnounced$.subscribe((changeValue) => {
-            setTimeout(() => {
-                this.ngZone.run(() => {
-                    this.updateSaveButtonState();
-                });
-            }, 100);
+        this.subscription = this.changeService.changeAnnounced$
+            .pipe(auditTime(100))
+            .subscribe(() => {
+            this.updateSaveButtonState();
         });
     }
     // VD NOV23 - update the json data when bookletId and bookletJSON changes
@@ -58036,10 +58146,10 @@ class BookletComponent {
                 let tempbook = this.bookletJSON?.bookQuestionsMap[Object.keys(this.bookletJSON?.bookQuestionsMap)[0]].subQuestions;
                 tempbook.forEach((element) => {
                     if (element.type === "book" && element?.qbReference) {
-                        this.getRefQbData(element?.qbReference).subscribe((response) => {
-                            element['qbReferenceQuestions'] = response; // Assign response to qbReferenceQuestions
-                        }, (error) => {
-                            console.error("API Error:", error);
+                        this.getRefQbData(element?.qbReference)
+                            .pipe(takeUntil(this.destroy$))
+                            .subscribe(response => {
+                            element['qbReferenceQuestions'] = response;
                         });
                     }
                 });
@@ -58221,11 +58331,13 @@ class BookletComponent {
             if (isPrimaryKey) {
                 dataToParent.action = dataToParent.action === 'submit' ? 'save' : dataToParent.action;
             }
-            this.handleBookletActionEvent.emit(dataToParent);
+            let dataToParentTemp = JSON.parse(JSON.stringify(dataToParent));
+            this.handleBookletActionEvent.emit(dataToParentTemp);
         }
         else {
             dataToParent['action'] = 'error';
-            this.handleBookletActionEvent.emit(dataToParent);
+            let dataToParentTemp = JSON.parse(JSON.stringify(dataToParent));
+            this.handleBookletActionEvent.emit(dataToParentTemp);
         }
     }
     // HA 18-JAN-24 handleCompleteBooklet is to simplify the logic
@@ -58408,7 +58520,7 @@ class BookletComponent {
             );
         });
         // Wait until ALL requests complete
-        const results = await forkJoin(requests).toPromise();
+        const results = await firstValueFrom(forkJoin(requests).pipe(takeUntil(this.destroy$)));
         let updatedHtml = html;
         matches.forEach((match, index) => {
             const fileId = match[1];
@@ -58545,8 +58657,16 @@ class BookletComponent {
         }
         this.isSaveDisabled = !hasValue;
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        window.removeEventListener('scroll', this.scrollHandler, true);
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: StorageService }, { token: i1$2.DomSanitizer }, { token: ChangeService }, { token: i1$1.HttpClient }, { token: TranslationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BookletComponent, isStandalone: true, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", from: "from", apiUrl: "apiUrl", isEdit: "isEdit", direction: "direction", isLoading: "isLoading", onlyView: "onlyView", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, viewQueries: [{ propertyName: "questionbookComponent", first: true, predicate: ["questionbook"], descendants: true }, { propertyName: "stickyBar", first: true, predicate: ["stickyBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText  }}\n                    </div>\n                </div>\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                <!-- AP-19MAY25 - Added [isEditVal] binding --> \n                <!-- //MSM10JUL25  allIcons, themeColor, cdnIconURL added for icon-selector-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n                    [direction] = \"direction\"\n                    [labelValue]=\"labelValue\"\n                    [questionItem]=\"ques\"\n                    [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n                    (handleDropDown)=\"getDropDown($event)\"\n                    (handleCalendarDate)=\"getCalendarDate($event)\"\n                    (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                    (singleFieldChangeEmit) ='singleFieldChange($event)'\n                    [dataBind]=\"dataBind\"\n                    [isEdit]=\"isEditVal\" \n                    [allIcons]=\"allIcons\"\n                    [themeColor]=\"themeColor\"\n                    [cdnIconURL]=\"cdnIconURL\"\n                    [languageCode]=\"languageCode\"\n                    [onlyView]=\"onlyView\"\n                    >\n                </lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n                        {{ (qb.id+'.questionText') | nxtCustomTranslate : qb?.questionText}}\n                        {{ qb?.title }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [onlyView]=\"onlyView\" [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n    <!-- Group Actions -->\n    <!-- HA 19DEC23 For Direction -->\n    <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n    <div #stickyBar class=\"align-submit-row\" [ngStyle]=\"{\n        display: 'flex',\n        position: 'sticky',\n        bottom: '0px',\n        zIndex: '1000',\n        width: '100%',\n        justifyContent: 'flex-end',\n        background: '#ffffff',\n        padding: '10px',\n        gap: '10px',\n        boxShadow: showStickyShadow ? 'rgba(0, 0, 0, 0.12) 0px -10px 8px -10px' : 'none'\n      }\" *ngIf=\"abItem?.status != 'Completed' && from !== 'formBuilder' && !onlyView\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n        <ng-container  *ngFor=\"let action of actions; let i = index\">\n            <div class=\"action-wrapper\">  <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\"  removed in this tag -->\n                @if(!isEditVal && action.name === 'Save'){\n                    <nxt-button\n                        (buttonClickEmit)=\"editChangeClick(action)\"\n                        [buttonValue]=\"'EDIT' | nxtCustomTranslate : 'Edit'\"\n                        [btnBorder]=\"action.borderSize\"\n                        [btnBorderColor]=\"action.borderColor\"\n                        [btnBorderRadius]=\"action.borderRadius || 4\"\n                        [btnWidth]=\"action.width || 100\"\n                        [buttonType]=\"'custom-btn'\"\n                        [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n                        [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n                        >\n                    </nxt-button>\n                } @else {\n                    <nxt-button\n                        (buttonClickEmit)=\"handleBookletActionClick(action)\" \n                        [isLoading]=\"isLoading?.includes(action.id)\"\n                        [buttonValue]=\"(action.id+'.name') | nxtCustomTranslate : action?.name\"\n                        [btnBorder]=\"action.borderSize\"\n                        [btnBorderRadius]=\"action.borderRadius || 4\"\n                        [btnWidth]=\"action.width || 100\"\n                        [buttonType]=\"action.name === 'Cancel' ? 'border-btn' : 'custom-btn'\"\n                        [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n                        [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n                        [buttonDisable]=\"action.name === 'Save' && isSaveDisabled\"\n                        >\n                    </nxt-button>\n                }\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.action-btn{width:100%;height:40px;transition:all .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: BookletComponent, isStandalone: true, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", from: "from", apiUrl: "apiUrl", isEdit: "isEdit", direction: "direction", isLoading: "isLoading", onlyView: "onlyView", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, viewQueries: [{ propertyName: "questionbookComponent", first: true, predicate: ["questionbook"], descendants: true }, { propertyName: "stickyBar", first: true, predicate: ["stickyBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText  }}\n                    </div>\n                </div>\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                <!-- AP-19MAY25 - Added [isEditVal] binding --> \n                <!-- //MSM10JUL25  allIcons, themeColor, cdnIconURL added for icon-selector-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n                    [direction] = \"direction\"\n                    [labelValue]=\"labelValue\"\n                    [questionItem]=\"ques\"\n                    [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n                    (handleDropDown)=\"getDropDown($event)\"\n                    (handleCalendarDate)=\"getCalendarDate($event)\"\n                    (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                    (singleFieldChangeEmit) ='singleFieldChange($event)'\n                    [dataBind]=\"dataBind\"\n                    [isEdit]=\"isEditVal\" \n                    [allIcons]=\"allIcons\"\n                    [themeColor]=\"themeColor\"\n                    [cdnIconURL]=\"cdnIconURL\"\n                    [languageCode]=\"languageCode\"\n                    [onlyView]=\"onlyView\"\n                    >\n                </lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n                        {{ (qb.id+'.questionText') | nxtCustomTranslate : qb?.questionText}}\n                        {{ qb?.title }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [onlyView]=\"onlyView\" [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n    <!-- Group Actions -->\n    <!-- HA 19DEC23 For Direction -->\n    <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n    <div #stickyBar class=\"align-submit-row\" [ngStyle]=\"{\n        display: 'flex',\n        position: 'sticky',\n        bottom: '0px',\n        zIndex: '1000',\n        width: '100%',\n        justifyContent: 'flex-end',\n        background: '#ffffff',\n        padding: '10px',\n        gap: '10px',\n        boxShadow: showStickyShadow ? 'rgba(0, 0, 0, 0.12) 0px -10px 8px -10px' : 'none'\n      }\" *ngIf=\"abItem?.status != 'Completed' && from !== 'formBuilder' && !onlyView\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n        <ng-container  *ngFor=\"let action of actions; let i = index\">\n            <div class=\"action-wrapper\">  <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\"  removed in this tag -->\n                @if(!isEditVal && action.name === 'Save'){\n                    <nxt-button\n                        (buttonClickEmit)=\"editChangeClick(action)\"\n                        [buttonValue]=\"'EDIT' | nxtCustomTranslate : 'Edit'\"\n                        [btnBorder]=\"action.borderSize\"\n                        [btnBorderColor]=\"action.borderColor\"\n                        [btnBorderRadius]=\"action.borderRadius || 4\"\n                        [btnWidth]=\"action.width || 100\"\n                        [buttonType]=\"'custom-btn'\"\n                        [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n                        [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n                        >\n                    </nxt-button>\n                } @else {\n                    <nxt-button\n                        (buttonClickEmit)=\"handleBookletActionClick(action)\" \n                        [isLoading]=\"isLoading?.includes(action.id)\"\n                        [buttonValue]=\"(action.id+'.name') | nxtCustomTranslate : action?.name\"\n                        [btnBorder]=\"action.borderSize\"\n                        [btnBorderRadius]=\"action.borderRadius || 4\"\n                        [btnWidth]=\"action.width || 100\"\n                        [buttonType]=\"action.name === 'Cancel' ? 'border-btn' : 'custom-btn'\"\n                        [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n                        [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n                        [buttonDisable]=\"action.name === 'Save' && isSaveDisabled\"\n                        >\n                    </nxt-button>\n                }\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.action-btn{width:100%;height:40px;transition:all .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: BookletComponent, decorators: [{
             type: Component,
@@ -58556,7 +58676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                         QuestionbookComponent,
                         NxtCustomTranslatePipe,
                         NxtButtonComponent
-                    ], template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText  }}\n                    </div>\n                </div>\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                <!-- AP-19MAY25 - Added [isEditVal] binding --> \n                <!-- //MSM10JUL25  allIcons, themeColor, cdnIconURL added for icon-selector-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n                    [direction] = \"direction\"\n                    [labelValue]=\"labelValue\"\n                    [questionItem]=\"ques\"\n                    [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n                    (handleDropDown)=\"getDropDown($event)\"\n                    (handleCalendarDate)=\"getCalendarDate($event)\"\n                    (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                    (singleFieldChangeEmit) ='singleFieldChange($event)'\n                    [dataBind]=\"dataBind\"\n                    [isEdit]=\"isEditVal\" \n                    [allIcons]=\"allIcons\"\n                    [themeColor]=\"themeColor\"\n                    [cdnIconURL]=\"cdnIconURL\"\n                    [languageCode]=\"languageCode\"\n                    [onlyView]=\"onlyView\"\n                    >\n                </lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n                        {{ (qb.id+'.questionText') | nxtCustomTranslate : qb?.questionText}}\n                        {{ qb?.title }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [onlyView]=\"onlyView\" [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n    <!-- Group Actions -->\n    <!-- HA 19DEC23 For Direction -->\n    <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n    <div #stickyBar class=\"align-submit-row\" [ngStyle]=\"{\n        display: 'flex',\n        position: 'sticky',\n        bottom: '0px',\n        zIndex: '1000',\n        width: '100%',\n        justifyContent: 'flex-end',\n        background: '#ffffff',\n        padding: '10px',\n        gap: '10px',\n        boxShadow: showStickyShadow ? 'rgba(0, 0, 0, 0.12) 0px -10px 8px -10px' : 'none'\n      }\" *ngIf=\"abItem?.status != 'Completed' && from !== 'formBuilder' && !onlyView\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n        <ng-container  *ngFor=\"let action of actions; let i = index\">\n            <div class=\"action-wrapper\">  <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\"  removed in this tag -->\n                @if(!isEditVal && action.name === 'Save'){\n                    <nxt-button\n                        (buttonClickEmit)=\"editChangeClick(action)\"\n                        [buttonValue]=\"'EDIT' | nxtCustomTranslate : 'Edit'\"\n                        [btnBorder]=\"action.borderSize\"\n                        [btnBorderColor]=\"action.borderColor\"\n                        [btnBorderRadius]=\"action.borderRadius || 4\"\n                        [btnWidth]=\"action.width || 100\"\n                        [buttonType]=\"'custom-btn'\"\n                        [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n                        [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n                        >\n                    </nxt-button>\n                } @else {\n                    <nxt-button\n                        (buttonClickEmit)=\"handleBookletActionClick(action)\" \n                        [isLoading]=\"isLoading?.includes(action.id)\"\n                        [buttonValue]=\"(action.id+'.name') | nxtCustomTranslate : action?.name\"\n                        [btnBorder]=\"action.borderSize\"\n                        [btnBorderRadius]=\"action.borderRadius || 4\"\n                        [btnWidth]=\"action.width || 100\"\n                        [buttonType]=\"action.name === 'Cancel' ? 'border-btn' : 'custom-btn'\"\n                        [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n                        [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n                        [buttonDisable]=\"action.name === 'Save' && isSaveDisabled\"\n                        >\n                    </nxt-button>\n                }\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.action-btn{width:100%;height:40px;transition:all .3s ease}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText  }}\n                    </div>\n                </div>\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                <!-- AP-19MAY25 - Added [isEditVal] binding --> \n                <!-- //MSM10JUL25  allIcons, themeColor, cdnIconURL added for icon-selector-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n                    [direction] = \"direction\"\n                    [labelValue]=\"labelValue\"\n                    [questionItem]=\"ques\"\n                    [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n                    (handleDropDown)=\"getDropDown($event)\"\n                    (handleCalendarDate)=\"getCalendarDate($event)\"\n                    (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                    (singleFieldChangeEmit) ='singleFieldChange($event)'\n                    [dataBind]=\"dataBind\"\n                    [isEdit]=\"isEditVal\" \n                    [allIcons]=\"allIcons\"\n                    [themeColor]=\"themeColor\"\n                    [cdnIconURL]=\"cdnIconURL\"\n                    [languageCode]=\"languageCode\"\n                    [onlyView]=\"onlyView\"\n                    >\n                </lib-questionbook>\n            </div>\n        </div>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div [innerHTML]=\"getText(qb?.questionText)\" *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n                        {{ (qb.id+'.questionText') | nxtCustomTranslate : qb?.questionText}}\n                        {{ qb?.title }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [onlyView]=\"onlyView\" [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n    <!-- Group Actions -->\n    <!-- HA 19DEC23 For Direction -->\n    <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n    <div #stickyBar class=\"align-submit-row\" [ngStyle]=\"{\n        display: 'flex',\n        position: 'sticky',\n        bottom: '0px',\n        zIndex: '1000',\n        width: '100%',\n        justifyContent: 'flex-end',\n        background: '#ffffff',\n        padding: '10px',\n        gap: '10px',\n        boxShadow: showStickyShadow ? 'rgba(0, 0, 0, 0.12) 0px -10px 8px -10px' : 'none'\n      }\" *ngIf=\"abItem?.status != 'Completed' && from !== 'formBuilder' && !onlyView\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n        <ng-container  *ngFor=\"let action of actions; let i = index\">\n            <div class=\"action-wrapper\">  <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\"  removed in this tag -->\n                @if(!isEditVal && action.name === 'Save'){\n                    <nxt-button\n                        (buttonClickEmit)=\"editChangeClick(action)\"\n                        [buttonValue]=\"'EDIT' | nxtCustomTranslate : 'Edit'\"\n                        [btnBorder]=\"action.borderSize\"\n                        [btnBorderColor]=\"action.borderColor\"\n                        [btnBorderRadius]=\"action.borderRadius || 4\"\n                        [btnWidth]=\"action.width || 100\"\n                        [buttonType]=\"'custom-btn'\"\n                        [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n                        [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n                        >\n                    </nxt-button>\n                } @else {\n                    <nxt-button\n                        (buttonClickEmit)=\"handleBookletActionClick(action)\" \n                        [isLoading]=\"isLoading?.includes(action.id)\"\n                        [buttonValue]=\"(action.id+'.name') | nxtCustomTranslate : action?.name\"\n                        [btnBorder]=\"action.borderSize\"\n                        [btnBorderRadius]=\"action.borderRadius || 4\"\n                        [btnWidth]=\"action.width || 100\"\n                        [buttonType]=\"action.name === 'Cancel' ? 'border-btn' : 'custom-btn'\"\n                        [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n                        [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n                        [buttonDisable]=\"action.name === 'Save' && isSaveDisabled\"\n                        >\n                    </nxt-button>\n                }\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.action-btn{width:100%;height:40px;transition:all .3s ease}\n"] }]
         }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: StorageService }, { type: i1$2.DomSanitizer }, { type: ChangeService }, { type: i1$1.HttpClient }, { type: TranslationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { bookletId: [{
                 type: Input
             }], serv: [{
@@ -58624,7 +58744,7 @@ const VERSION = {
     "semver": null,
     "suffix": "68a4eb8b-dirty",
     "semverString": null,
-    "version": "2.1.321"
+    "version": "2.1.323"
 };
 /* tslint:enable */
 
@@ -62606,6 +62726,9 @@ class FormBuilderService {
                     element.fieldsMeta = JSON.parse(element?.fieldsMeta);
                 }
                 element?.fieldsMeta?.forEach(field => {
+                    if (element.columnWidth) {
+                        field['width'] = element.columnWidth;
+                    }
                     keysToTranslate.forEach(key => {
                         if (key !== 'question')
                             field[key] = translationMap.en[field.uniqueIdentifier]?.[key];
@@ -62953,8 +63076,10 @@ class PropertiesComponent {
                     { label: 'rowChoice', placeholder: '', type: 'text', key: 'rowChoice', labelPath: 'ROW_CHOICE' },
                     { label: 'questionNumber', type: 'number', key: 'questionNumber', labelPath: 'QUESTION_NUMBER' },
                     { label: 'Field Size', type: 'fieldSize', key: 'size', labelPath: 'FIELD_SIZE' },
+                    { label: 'Column Width', placeholder: 'Column Width', type: 'number', key: 'columnWidth', labelPath: 'COLUMN_WIDTH' },
                 ],
                 fieldProps: [
+                    { label: '', type: 'toggleGroup', key: 'toggleOptions', labelPath: '' },
                     { label: 'tableId', placeholder: 'Emp_Table_01', type: 'text', key: 'tableId', isTranslate: true, labelPath: 'TABLE_ID' },
                     { label: 'helpText', placeholder: 'Enter message', type: 'text', key: 'helpText', isTranslate: true, labelPath: 'HELP_TEXT' },
                     { label: 'defaultValue', placeholder: 'Default Value', type: 'text', key: 'defaultValue', labelPath: 'DEFAULT_VALUE' },
@@ -63007,6 +63132,7 @@ class PropertiesComponent {
                     { label: 'Calendar Type', placeholder: 'Calendar Type', type: 'select', targetArray: 'fieldsMeta', targetArrayKey: 'uniqueIdentifier', key: 'calendarType', required: true, labelPath: 'CALENDAR_TYPE', options: [{ label: "Hijri", value: "hijri", labelPath: "Hijri" }, { label: "Gregorian", value: "gregorian", labelPath: "Gregorian" }] },
                     { label: 'headerLabels', placeholder: 'Enter here', type: 'text', targetArray: 'fieldsMeta', targetArrayKey: 'uniqueIdentifier', key: 'label', isTranslate: true, labelPath: 'HEADER_LABELS' },
                     { label: 'apiName', placeholder: 'Enter here', type: 'text', targetArray: 'fieldsMeta', targetArrayKey: 'uniqueIdentifier', key: 'apiName', labelPath: 'API_NAME' },
+                    { label: 'Column Hide', type: 'checkbox', targetArray: 'fieldsMeta', targetArrayKey: 'uniqueIdentifier', key: 'readOnly', labelPath: 'COlUMN_HIDE' },
                     {
                         label: 'Summary Column', placeholder: 'Summary Column', type: 'subQuestion', targetArray: 'fieldsMeta', targetArrayKey: 'uniqueIdentifier', key: 'summaryColumn', labelPath: 'SUMMARY_COLUMN',
                         subQuestion: [